add:initial files
This commit is contained in:
Carls2320
commit
9cc4fb7713
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
38
eslint.config.js
Normal file
38
eslint.config.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import react from 'eslint-plugin-react'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
settings: { react: { version: '18.3' } },
|
||||||
|
plugins: {
|
||||||
|
react,
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...js.configs.recommended.rules,
|
||||||
|
...react.configs.recommended.rules,
|
||||||
|
...react.configs['jsx-runtime'].rules,
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react/jsx-no-target-blank': 'off',
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
23
index.html
Normal file
23
index.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!doctype html> <!-- Menandakan bahwa ini adalah dokumen HTML5 -->
|
||||||
|
<html lang="en"> <!-- Menentukan bahasa utama dari halaman adalah bahasa Inggris -->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" /> <!-- Menentukan karakter encoding untuk halaman ini (UTF-8 mencakup banyak karakter internasional) -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <!-- Menentukan favicon halaman (ikon kecil di tab browser) -->
|
||||||
|
|
||||||
|
<!-- Mengimpor font 'Montserrat' dari Google Fonts untuk digunakan di seluruh halaman -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Menentukan viewport untuk memastikan aplikasi responsif pada perangkat mobile (agar skalanya sesuai dengan lebar layar perangkat) -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
<!-- Menentukan judul halaman yang akan ditampilkan di tab browser -->
|
||||||
|
<title>Vite + React</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Elemen dengan id 'root' adalah tempat di mana aplikasi React akan di-render -->
|
||||||
|
<div id="root"></div>
|
||||||
|
|
||||||
|
<!-- Menyisipkan script utama aplikasi React. Menggunakan 'type="module"' karena kita menggunakan ES Modules -->
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5804
package-lock.json
generated
Normal file
5804
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
package.json
Normal file
31
package.json
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "rekanaiv3",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.17.0",
|
||||||
|
"@types/react": "^18.3.18",
|
||||||
|
"@types/react-dom": "^18.3.5",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"eslint": "^9.17.0",
|
||||||
|
"eslint-plugin-react": "^7.37.2",
|
||||||
|
"eslint-plugin-react-hooks": "^5.0.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.16",
|
||||||
|
"globals": "^15.14.0",
|
||||||
|
"postcss": "^8.4.49",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
|
"vite": "^6.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
23
src/App.jsx
Normal file
23
src/App.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import Header from "./componen/Header/Header"; // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
|
||||||
|
import CustomerService from "./componen/customer/CustomerService"; // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
|
||||||
|
import FormSection from "./componen/form/FormSection"; // Mengimpor komponen FormSection yang berisi form
|
||||||
|
import FAQ from "./componen/faq/FAQSection"; // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
|
||||||
|
import BottomCTA from "./componen/bottom/BottomCTA"; // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
|
||||||
|
import Footer from "./componen/footer/Footer"; // Mengimpor komponen Footer untuk menampilkan bagian footer
|
||||||
|
import WhatsAppButton from "./componen/whatsappbutton/whatsappbutton"; // Mengimpor komponen WhatsAppButton untuk menampilkan tombol WhatsApp
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header /> {/* Menampilkan komponen Header */}
|
||||||
|
<CustomerService /> {/* Menampilkan komponen CustomerService */}
|
||||||
|
<FormSection /> {/* Menampilkan komponen FormSection */}
|
||||||
|
<FAQ /> {/* Menampilkan komponen FAQ */}
|
||||||
|
<BottomCTA /> {/* Menampilkan komponen BottomCTA */}
|
||||||
|
<Footer /> {/* Menampilkan komponen Footer */}
|
||||||
|
<WhatsAppButton /> {/* Menampilkan komponen WhatsAppButton */}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
104
src/componen/Header/Header.jsx
Normal file
104
src/componen/Header/Header.jsx
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import Logo1 from '../asset/logo.png'; // Mengimpor logo
|
||||||
|
import search from '../asset/search.png'; // Mengimpor ikon pencarian
|
||||||
|
import row from '../asset/arrow.png'; // Mengimpor ikon panah untuk dropdown
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // Menyimpan status menu mobile (terbuka atau tertutup)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
|
||||||
|
<nav className="flex items-center justify-between px-5 sm:px-10 md:px-20 py-3 gap-4 flex-wrap relative">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<img src={Logo1} alt="Logo" className="w-[203px] h-[36.05px]" /> {/* Menampilkan logo dengan ukuran spesifik */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tombol Hamburger (Responsive) */}
|
||||||
|
<div className="sm:hidden flex items-center">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} // Mengubah status menu mobile saat tombol ditekan
|
||||||
|
className="text-[#212121]"
|
||||||
|
>
|
||||||
|
{/* Icon hamburger (menu mobile) */}
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Menu Navigasi */}
|
||||||
|
<ul
|
||||||
|
className={`${
|
||||||
|
isMobileMenuOpen ? 'flex' : 'hidden' // Menampilkan menu jika isMobileMenuOpen true, jika tidak disembunyikan
|
||||||
|
} sm:flex flex-col sm:flex-row list-none gap-5 sm:gap-10 absolute sm:relative top-full left-0 sm:top-auto sm:left-auto w-full sm:w-auto bg-white sm:bg-transparent p-5 sm:p-0 shadow-md sm:shadow-none z-40`}
|
||||||
|
>
|
||||||
|
{/* Menu Item Beranda */}
|
||||||
|
<li className="relative group">
|
||||||
|
<a href="#home" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
|
||||||
|
Beranda
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{/* Menu Item Produk */}
|
||||||
|
<li className="relative group">
|
||||||
|
<a href="#produk" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
|
||||||
|
Produk
|
||||||
|
<img src={row} alt="arrow" className="ml-1" /> {/* Ikon panah untuk dropdown Produk */}
|
||||||
|
</a>
|
||||||
|
{/* Dropdown menu untuk Produk */}
|
||||||
|
<ul className="absolute left-0 top-full hidden w-40 bg-white list-none py-2 shadow-lg group-hover:block z-50">
|
||||||
|
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||||
|
<a href="#produk1" className="text-[#212121]">Produk 1</a>
|
||||||
|
</li>
|
||||||
|
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||||
|
<a href="#produk2" className="text-[#212121]">Produk 2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
{/* Menu Item Solusi */}
|
||||||
|
<li className="relative group">
|
||||||
|
<a href="#solusi" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
|
||||||
|
Solusi
|
||||||
|
<img src={row} alt="arrow" className="ml-1" /> {/* Ikon panah untuk dropdown Solusi */}
|
||||||
|
</a>
|
||||||
|
{/* Dropdown menu untuk Solusi */}
|
||||||
|
<ul className="absolute left-0 top-full hidden w-40 bg-white list-none py-2 shadow-lg group-hover:block z-50">
|
||||||
|
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||||
|
<a href="#solusi1" className="text-[#212121]">Solusi 1</a>
|
||||||
|
</li>
|
||||||
|
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||||
|
<a href="#solusi2" className="text-[#212121]">Solusi 2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
{/* Menu Item Hubungi Kami */}
|
||||||
|
<li>
|
||||||
|
<a href="#hubungi" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
|
||||||
|
Hubungi Kami
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{/* Pencarian */}
|
||||||
|
<div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Pencarian..."
|
||||||
|
className="w-full sm:w-[592px] h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]" // Field input pencarian
|
||||||
|
/>
|
||||||
|
{/* Tombol Pencarian */}
|
||||||
|
<button className="absolute right-4 sm:right-2 text-gray-500 hover:text-[#5a55ff]">
|
||||||
|
<img src={search} alt="search" className="w-5 h-5" /> {/* Menampilkan ikon pencarian */}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tombol Konsultasi */}
|
||||||
|
<button className="bg-[#DC0168] text-white px-5 py-2 text-sm font-bold rounded-md hover:bg-[#e6006e] transition order-3 sm:order-none w-full sm:w-auto mt-3 sm:mt-0">
|
||||||
|
Konsultasi Gratis
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
BIN
src/componen/asset/Component 11.png
Normal file
BIN
src/componen/asset/Component 11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/componen/asset/Frame.png
Normal file
BIN
src/componen/asset/Frame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
src/componen/asset/Frame27.png
Normal file
BIN
src/componen/asset/Frame27.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/componen/asset/Whatsapp22.png
Normal file
BIN
src/componen/asset/Whatsapp22.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 958 B |
BIN
src/componen/asset/arrow.png
Normal file
BIN
src/componen/asset/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 B |
BIN
src/componen/asset/customer.png
Normal file
BIN
src/componen/asset/customer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
BIN
src/componen/asset/email.png
Normal file
BIN
src/componen/asset/email.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
src/componen/asset/facebook.png
Normal file
BIN
src/componen/asset/facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 715 B |
BIN
src/componen/asset/image 10.png
Normal file
BIN
src/componen/asset/image 10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
src/componen/asset/instagram.png
Normal file
BIN
src/componen/asset/instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 930 B |
BIN
src/componen/asset/kementerian.png
Normal file
BIN
src/componen/asset/kementerian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
src/componen/asset/kominfo.png
Normal file
BIN
src/componen/asset/kominfo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
src/componen/asset/logo.png
Normal file
BIN
src/componen/asset/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/componen/asset/nvidia.png
Normal file
BIN
src/componen/asset/nvidia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
src/componen/asset/ojk.png
Normal file
BIN
src/componen/asset/ojk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
src/componen/asset/phone.png
Normal file
BIN
src/componen/asset/phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/componen/asset/search.png
Normal file
BIN
src/componen/asset/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 596 B |
BIN
src/componen/asset/telephone.png
Normal file
BIN
src/componen/asset/telephone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/componen/asset/whatsapp-color_svgrepo.com.png
Normal file
BIN
src/componen/asset/whatsapp-color_svgrepo.com.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 881 B |
BIN
src/componen/asset/x.png
Normal file
BIN
src/componen/asset/x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 651 B |
44
src/componen/bottom/BottomCTA.jsx
Normal file
44
src/componen/bottom/BottomCTA.jsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import logowa from "../asset/whatsapp-color_svgrepo.com.png"; // Import gambar WhatsApp untuk ikon
|
||||||
|
|
||||||
|
const BottomCTA = () => {
|
||||||
|
return (
|
||||||
|
<section className="w-full bg-white text-center py-10 mb-[113px]">
|
||||||
|
{/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
|
||||||
|
<div className="flex flex-wrap justify-center gap-2">
|
||||||
|
<h3 className="text-[#212121] text-center text-[32px] font-semibold leading-[48px] tracking-[0.005em] text-left">
|
||||||
|
Masih punya pertanyaan seputar
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<h3 className="text-lg sm:text-xl md:text-2xl text-[#212121] font-semibold mb-3">
|
||||||
|
{/* Menampilkan tag #Rekan AI dengan background warna dan teks putih */}
|
||||||
|
<span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-6 py-2 inline-block mr-[5px]">
|
||||||
|
#Rekan AI
|
||||||
|
</span>
|
||||||
|
?
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pesan yang memberi tahu pengguna untuk menghubungi jika pertanyaan belum terjawab */}
|
||||||
|
<p className=" text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
|
||||||
|
Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />kontak atau email. Kami dengan senang hati akan membantu!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Bagian tombol CTA */}
|
||||||
|
<div className="flex justify-center flex-col lg:flex-row mt-8 lg:mt-16 gap-6">
|
||||||
|
{/* Tombol Konsultasi Gratis dengan ikon WhatsApp */}
|
||||||
|
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||||
|
{/* Gambar WhatsApp di kiri tombol */}
|
||||||
|
<img src={logowa} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
|
||||||
|
Konsultasi Gratis
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Tombol Coba Sekarang dengan efek gradient */}
|
||||||
|
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||||
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BottomCTA;
|
||||||
79
src/componen/customer/CustomerService.jsx
Normal file
79
src/componen/customer/CustomerService.jsx
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import email from "../asset/email.png"; // Import gambar icon untuk email
|
||||||
|
import customer from "../asset/customer.png"; // Import gambar ilustrasi customer service
|
||||||
|
import phone from "../asset/phone.png"; // Import gambar icon untuk telepon
|
||||||
|
|
||||||
|
const CustomerService = () => {
|
||||||
|
return (
|
||||||
|
<section className="mt-[180px] md:mt-[115px] 2xl:mt-[45px] flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-6xl mx-auto gap-10 mb-[114px]">
|
||||||
|
{/* Container utama dengan styling responsif untuk menampung konten customer service */}
|
||||||
|
|
||||||
|
<div className="md:max-w-xl text-center md:text-left ">
|
||||||
|
{/* Div untuk teks utama dan informasi pendukung */}
|
||||||
|
|
||||||
|
<div className="mb-5">
|
||||||
|
<h2 className="text-[#212121] text-[32px] font-semibold leading-[48px] text-left decoration-solid">
|
||||||
|
{/* Heading utama dengan warna teks dan ukuran font yang diatur */}
|
||||||
|
Kami Siap Membantu Bisnis <br /> Anda Lebih Maju!
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-[#212121] leading-relaxed mb-6 text-left">
|
||||||
|
{/* Paragraf penjelasan singkat mengenai layanan yang ditawarkan */}
|
||||||
|
Butuh informasi lebih lanjut tentang produk atau solusi kami? <br />{" "}
|
||||||
|
Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
|
||||||
|
profesional.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{/* Container untuk menampung daftar kontak dalam format fleksibel */}
|
||||||
|
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
{/* Kontainer untuk informasi kontak via email */}
|
||||||
|
<img
|
||||||
|
src={email} // Menampilkan icon email
|
||||||
|
alt="Email Icon" // Teks alternatif untuk gambar email
|
||||||
|
className="w-10 h-10 object-contain" // Styling untuk ukuran gambar
|
||||||
|
/>
|
||||||
|
<div className="text-left">
|
||||||
|
<p className="text-sm text-[#212121]">
|
||||||
|
Kirim pertanyaan Anda ke{" "}
|
||||||
|
<strong className="text-[#5B59E8]">support@rekanai.com</strong>{" "}
|
||||||
|
dan tim kami
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-[#212121]">akan segera merespons.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
{/* Kontainer untuk informasi kontak via telepon */}
|
||||||
|
<img
|
||||||
|
src={phone} // Menampilkan icon telepon
|
||||||
|
alt="Phone Icon" // Teks alternatif untuk gambar telepon
|
||||||
|
className="w-10 h-10 object-contain" // Styling untuk ukuran gambar
|
||||||
|
/>
|
||||||
|
<div className="text-left">
|
||||||
|
<p className="text-sm text-[#212121]">
|
||||||
|
Hubungi kami di{" "}
|
||||||
|
<strong className="text-[#5B59E8]">(+62) 123-4567-890</strong>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-[#212121]">
|
||||||
|
(Senin - Jumat, 08:00 - 17:00 WIB).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 flex justify-center items-center">
|
||||||
|
{/* Div untuk menampilkan gambar ilustrasi customer service */}
|
||||||
|
<img
|
||||||
|
src={customer} // Menampilkan gambar customer service
|
||||||
|
alt="Customer Service" // Teks alternatif untuk gambar customer service
|
||||||
|
className="max-w-full h-auto" // Styling untuk memastikan gambar berskala dengan baik
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CustomerService; // Ekspor komponen agar dapat digunakan di file lain
|
||||||
157
src/componen/faq/FAQSection.jsx
Normal file
157
src/componen/faq/FAQSection.jsx
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const FAQ = () => {
|
||||||
|
// State untuk menyimpan indeks pertanyaan yang sedang dibuka
|
||||||
|
// Jika tidak ada pertanyaan yang terbuka, nilai adalah null
|
||||||
|
const [openQuestion, setOpenQuestion] = useState(null);
|
||||||
|
|
||||||
|
// Fungsi untuk membuka atau menutup pertanyaan berdasarkan indeks
|
||||||
|
// Jika pertanyaan yang sama diklik lagi, tutup pertanyaan tersebut
|
||||||
|
const toggleQuestion = (index) => {
|
||||||
|
// Cek apakah pertanyaan yang sama diklik
|
||||||
|
// Jika iya, tutup (set openQuestion ke null), jika tidak, buka pertanyaan tersebut
|
||||||
|
setOpenQuestion(openQuestion === index ? null : index);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Data FAQ yang berisi array objek dengan pertanyaan dan jawaban
|
||||||
|
const faqData = [
|
||||||
|
{
|
||||||
|
question: "Apa itu Rekan AI?",
|
||||||
|
answer: (
|
||||||
|
<p>
|
||||||
|
Rekan AI adalah platform teknologi kecerdasan buatan (AI) yang
|
||||||
|
menyediakan solusi berbasis AI untuk meningkatkan efisiensi
|
||||||
|
operasional, analisis data, dan pengalaman pelanggan bagi UMKM hingga
|
||||||
|
perusahaan besar.
|
||||||
|
</p>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Apa saja produk yang ditawarkan oleh Rekan AI?",
|
||||||
|
answer: (
|
||||||
|
<div>
|
||||||
|
<p>Kami menawarkan beberapa produk unggulan, termasuk:</p>
|
||||||
|
<ul className="list-disc list-inside">
|
||||||
|
<li>
|
||||||
|
Rekan Doku: Solusi autentikasi dan manajemen dokumen digital.
|
||||||
|
</li>
|
||||||
|
<li>Rekan HR: Automasi dan optimalisasi proses HR.</li>
|
||||||
|
<li>
|
||||||
|
Rekan LLM: AI berbasis model bahasa besar untuk analisis dan
|
||||||
|
komunikasi.
|
||||||
|
</li>
|
||||||
|
<li>Rekan Veri: Verifikasi data yang cepat dan akurat.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Bagaimana cara menghubungi tim Rekan AI?",
|
||||||
|
answer: (
|
||||||
|
<div>
|
||||||
|
<p>Anda dapat menghubungi kami melalui:</p>
|
||||||
|
<ul className="list-disc list-inside">
|
||||||
|
<li>Email: support@rekanai.com</li>
|
||||||
|
<li>Telepon: (+62) 123-4567-890</li>
|
||||||
|
<li>WhatsApp: (+62) 812-3456-7890</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Apakah solusi Rekan AI mudah diimplementasikan?",
|
||||||
|
answer: (
|
||||||
|
<p>
|
||||||
|
Ya, produk kami dirancang untuk integrasi yang mulus dengan sistem
|
||||||
|
bisnis Anda yang sudah ada. Kami juga menyediakan dukungan teknis
|
||||||
|
untuk memastikan implementasi berjalan lancar.
|
||||||
|
</p>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Apakah Rekan AI cocok untuk UMKM?",
|
||||||
|
answer: (
|
||||||
|
<p>
|
||||||
|
Tentu saja! Kami menawarkan solusi yang terjangkau, mudah digunakan,
|
||||||
|
dan dapat membantu UMKM meningkatkan efisiensi, mengurangi biaya
|
||||||
|
operasional, dan mempercepat pertumbuhan.
|
||||||
|
</p>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Bagaimana dengan keamanan data?",
|
||||||
|
answer: (
|
||||||
|
<p>
|
||||||
|
Keamanan adalah prioritas kami. Semua produk Rekan AI menggunakan
|
||||||
|
teknologi enkripsi canggih untuk melindungi data Anda dari ancaman
|
||||||
|
cyber.
|
||||||
|
</p>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Bagaimana saya memulai menggunakan produk Rekan AI?",
|
||||||
|
answer: (
|
||||||
|
<p>
|
||||||
|
Anda dapat memulai dengan menghubungi tim kami untuk demo produk atau
|
||||||
|
konsultasi gratis. Kami akan membantu Anda menemukan solusi yang
|
||||||
|
paling sesuai dengan kebutuhan bisnis Anda.
|
||||||
|
</p>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Apakah Rekan AI memiliki paket harga yang bisa dipilih?",
|
||||||
|
answer: (
|
||||||
|
<p>
|
||||||
|
Ya, kami dapat memberikan paket harga terbaik untuk solusi produk yang
|
||||||
|
Anda pilih. Informasi lebih lanjut silakan hubungi kami dan
|
||||||
|
konsultasikan kebutuhan Anda secara gratis.
|
||||||
|
</p>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
|
||||||
|
{/* Judul halaman FAQ */}
|
||||||
|
<div className="mt-[111px]">
|
||||||
|
<h1 className="text-[32px] font-semibold leading-[48px] tracking-[0.005em] text-center mb-4">
|
||||||
|
Frequently Asked Questions
|
||||||
|
</h1>
|
||||||
|
<h2 className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center mb-6">
|
||||||
|
Pertanyaan Umum tentang Rekan AI
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bagian FAQ */}
|
||||||
|
<div className="space-y-4 mb-[110px] mt-[60px] ">
|
||||||
|
{faqData.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="border border-[#5B59E8] rounded-lg overflow-hidden mb-[22px]"
|
||||||
|
>
|
||||||
|
{/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
|
||||||
|
<div
|
||||||
|
className={`flex justify-between items-center p-4 cursor-pointer bg-white border-b ${
|
||||||
|
// Jika pertanyaan ini dibuka, beri highlight
|
||||||
|
openQuestion === index ? "text-blue-500" : ""
|
||||||
|
}`}
|
||||||
|
onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
|
||||||
|
>
|
||||||
|
<span className="font-bold">{item.question}</span>
|
||||||
|
<span>{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */}
|
||||||
|
{openQuestion === index && (
|
||||||
|
<div className="p-4 text-left bg-white text-sm">
|
||||||
|
{item.answer}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FAQ;
|
||||||
113
src/componen/footer/Footer.jsx
Normal file
113
src/componen/footer/Footer.jsx
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
// Import gambar-gambar yang digunakan dalam komponen Footer
|
||||||
|
import nvdia from "../asset/nvidia.png"; // Gambar logo NVIDIA sebagai partner
|
||||||
|
import kmn from "../asset/kementerian.png"; // Gambar logo Kementerian sebagai partner
|
||||||
|
import kominfo from "../asset/kominfo.png"; // Gambar logo Kominfo sebagai partner
|
||||||
|
import ojk from "../asset/ojk.png"; // Gambar logo OJK sebagai partner
|
||||||
|
import facebook from "../asset/facebook.png"; // Gambar logo Facebook untuk ikon media sosial
|
||||||
|
import x from "../asset/x.png"; // Gambar logo X (dulu Twitter) untuk ikon media sosial
|
||||||
|
import instagram from "../asset/instagram.png"; // Gambar logo Instagram untuk ikon media sosial
|
||||||
|
import frame from "../asset/Component 11.png"; // Gambar logo utama perusahaan
|
||||||
|
|
||||||
|
function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="bg-[#D4DAE4] py-10 text-[#212121]">
|
||||||
|
{/* Kontainer utama footer */}
|
||||||
|
<div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
|
||||||
|
{/* Kolom 1: Logo perusahaan */}
|
||||||
|
<div className="mb-5 sm:mb-0">
|
||||||
|
<img
|
||||||
|
src={frame} // Gambar logo perusahaan
|
||||||
|
alt="Logo"
|
||||||
|
className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
||||||
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
|
<div className="flex mb-5">
|
||||||
|
<p>
|
||||||
|
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
|
||||||
|
<br />
|
||||||
|
<span className="text-[#5B59E8] italic">
|
||||||
|
Reimagine Your Business with AI.
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p className="mb-4">
|
||||||
|
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
|
||||||
|
Banten 15413
|
||||||
|
</p>
|
||||||
|
<p className="mb-4">Lebih dekat dengan Kami</p>
|
||||||
|
<div className="flex space-x-3">
|
||||||
|
{/* Tautan ke media sosial */}
|
||||||
|
<a href="#">
|
||||||
|
<img src={instagram} alt="Instagram" className="w-5 h-5" /> {/* Ikon Instagram */}
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<img src={facebook} alt="Facebook" className="w-5 h-5" /> {/* Ikon Facebook */}
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<img src={x} alt="Twitter" className="w-5 h-5" /> {/* Ikon Twitter (X) */}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kolom 3: Produk perusahaan */}
|
||||||
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
|
<h4 className="text-base font-semibold mb-4">Produk Kami</h4>
|
||||||
|
<ul className="space-y-4">
|
||||||
|
<li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
|
||||||
|
<li>Rekan Veri</li> {/* Produk: Verifikasi data */}
|
||||||
|
<li>Rekan HR</li> {/* Produk: Manajemen SDM */}
|
||||||
|
<li>Rekan LLM</li> {/* Produk: Model bahasa besar */}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kolom 4: Solusi yang ditawarkan */}
|
||||||
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
|
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
||||||
|
<ul className="space-y-4">
|
||||||
|
<li>Personal</li> {/* Solusi untuk individu */}
|
||||||
|
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
|
||||||
|
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kolom 5: Informasi kontak */}
|
||||||
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
|
<h4 className="text-base font-semibold mb-4">Hubungi Kami</h4>
|
||||||
|
<ul className="space-y-4">
|
||||||
|
<li>Email: support@rekanai.com</li> {/* Email dukungan */}
|
||||||
|
<li>Phone: +68452098</li> {/* Nomor telepon */}
|
||||||
|
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kolom 6: Partner perusahaan */}
|
||||||
|
<div className="mb-5 sm:mb-0 sm:pl-0">
|
||||||
|
<div className="mb-4">
|
||||||
|
<img
|
||||||
|
src={nvdia} // Gambar logo partner NVIDIA
|
||||||
|
alt="NVIDIA Inception Premier Member"
|
||||||
|
className="w-[221px] h-[83px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-5">
|
||||||
|
<img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" /> {/* Gambar logo partner Kementerian */}
|
||||||
|
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" /> {/* Gambar logo partner Kominfo */}
|
||||||
|
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" /> {/* Gambar logo partner OJK */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bagian hak cipta */}
|
||||||
|
<div className="text-left mt-40 mx-5 sm:mx-28 text-xs">
|
||||||
|
<p>
|
||||||
|
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
133
src/componen/form/FormSection.jsx
Normal file
133
src/componen/form/FormSection.jsx
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
import bgImage from "../asset/image 10.png";
|
||||||
|
|
||||||
|
const ContactForm = () => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex min-h-screen items-center justify-center p-5 text-white overflow-hidden"
|
||||||
|
// Menentukan gaya background menggunakan gambar dengan gradien
|
||||||
|
style={{
|
||||||
|
background: `linear-gradient(to right, #dc016866, rgba(91, 89, 232, 1)), url(${bgImage})`,
|
||||||
|
backgroundSize: "cover", // Memastikan background menutupi seluruh elemen
|
||||||
|
backgroundPosition: "center", // Menempatkan gambar di tengah
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col lg:flex-row items-start w-full max-w-6xl">
|
||||||
|
{/* Bagian Kiri */}
|
||||||
|
<div className="flex-1 p-5 mb-10 lg:mb-auto mt-20">
|
||||||
|
{/* Judul utama */}
|
||||||
|
<h2 className="text-[32px] font-[700] leading-[48px] tracking-[0.005em] text-left mb-[39px]">
|
||||||
|
Isi formulir di samping ini dan kami akan menghubungi Anda secepat
|
||||||
|
mungkin
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Deskripsi tambahan */}
|
||||||
|
<p className="text-[20px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6">
|
||||||
|
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. <br />
|
||||||
|
Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda
|
||||||
|
bersama Rekan AI!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bagian Form */}
|
||||||
|
<div className="flex-1 bg-white text-[#212121] rounded-2xl p-8 shadow-lg border-4 border-pink-300 mx-auto lg:mx-0 lg:ml-12 w-full max-w-lg mt-[79px] mb-[79px]">
|
||||||
|
{/* Judul form */}
|
||||||
|
<h3 className="text-xl font-bold mb-4 text-[#212121]">
|
||||||
|
Hubungi Tim Terbaik Kami
|
||||||
|
</h3>
|
||||||
|
{/* Deskripsi form */}
|
||||||
|
<p className="mb-6 text-[#212121]">
|
||||||
|
Silakan isi data diri Anda pada formulir di bawah ini
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Formulir input */}
|
||||||
|
<form className="flex flex-col gap-4">
|
||||||
|
{/* Input Nama */}
|
||||||
|
<div>
|
||||||
|
<label className="text-[#6B5CEA] font-bold">
|
||||||
|
Nama (Tanpa Gelar)*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Masukkan nama Anda"
|
||||||
|
required
|
||||||
|
className="w-full mt-1 p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input Nomor Telepon */}
|
||||||
|
<div>
|
||||||
|
<label className="text-[#6B5CEA] font-bold">
|
||||||
|
Nomor Telepon*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
placeholder="Masukkan nomor telepon Anda"
|
||||||
|
required
|
||||||
|
className="w-full mt-1 p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input Email */}
|
||||||
|
<div>
|
||||||
|
<label className="text-[#6B5CEA] font-bold">Email*</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="Masukkan email Anda"
|
||||||
|
required
|
||||||
|
className="w-full mt-1 p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input Nama Organisasi */}
|
||||||
|
<div>
|
||||||
|
<label className="text-[#6B5CEA] font-bold">
|
||||||
|
Nama Organisasi/Perusahaan
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
||||||
|
className="w-full mt-1 p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dropdown Pilih Kebutuhan */}
|
||||||
|
<div>
|
||||||
|
<label className="text-[#6B5CEA] font-bold">
|
||||||
|
Pilih Kebutuhan
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
required
|
||||||
|
className="w-full mt-1 p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||||
|
>
|
||||||
|
<option value="">Pilih kebutuhan Anda</option>
|
||||||
|
<option value="konsultasi">Konsultasi</option>
|
||||||
|
<option value="pelatihan">Pelatihan</option>
|
||||||
|
<option value="pengembangan">Pengembangan</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Checkbox Verifikasi */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
required
|
||||||
|
className="focus:ring-2 focus:ring-indigo-500"
|
||||||
|
/>
|
||||||
|
<span className="text-[#212121]">Saya bukan robot</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tombol Kirim */}
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-all w-[173px] pr-6"
|
||||||
|
>
|
||||||
|
Kirim Pesan
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContactForm;
|
||||||
16
src/componen/whatsappbutton/whatsappbutton.jsx
Normal file
16
src/componen/whatsappbutton/whatsappbutton.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import WaButtons from '../asset/Whatsapp22.png'; // Mengimpor gambar ikon WhatsApp
|
||||||
|
|
||||||
|
const WhatsAppButton = () => {
|
||||||
|
return (
|
||||||
|
<div className="fixed bottom-2 right-2 md:right-24 flex justify-center items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
|
||||||
|
{/* Tombol WhatsApp */}
|
||||||
|
<img
|
||||||
|
className="w-10 h-10 md:w-12 md:h-12" // Menentukan ukuran ikon WhatsApp
|
||||||
|
src={WaButtons} // Gambar yang diimpor
|
||||||
|
alt="WhatsApp" // Deskripsi gambar jika gambar gagal dimuat
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhatsAppButton;
|
||||||
17
src/index.css
Normal file
17
src/index.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
/* Mengimpor basis CSS dari Tailwind CSS */
|
||||||
|
@tailwind base;
|
||||||
|
|
||||||
|
/* Mengimpor komponen-komponen UI dari Tailwind CSS */
|
||||||
|
@tailwind components;
|
||||||
|
|
||||||
|
/* Mengimpor utilitas Tailwind CSS untuk penggunaan styling cepat */
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/* Menambahkan aturan dasar untuk proyek Anda di dalam layer 'base' */
|
||||||
|
@layer base {
|
||||||
|
/* Mengatur font dasar untuk elemen html */
|
||||||
|
html {
|
||||||
|
/* Menetapkan font 'Montserrat' sebagai font dasar untuk seluruh halaman */
|
||||||
|
font-family: 'Montserrat';
|
||||||
|
}
|
||||||
|
}
|
||||||
11
src/main.jsx
Normal file
11
src/main.jsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { StrictMode } from 'react' // Mengimpor StrictMode dari React untuk memeriksa potensi masalah dalam aplikasi
|
||||||
|
import { createRoot } from 'react-dom/client' // Mengimpor fungsi createRoot untuk membuat root DOM untuk aplikasi
|
||||||
|
import './index.css' // Mengimpor file CSS global yang akan diterapkan ke seluruh aplikasi
|
||||||
|
import App from './App.jsx' // Mengimpor komponen utama aplikasi (App) dari file App.jsx
|
||||||
|
|
||||||
|
// Membuat root React pada elemen dengan id 'root' dan merender aplikasi
|
||||||
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
18
tailwind.config.js
Normal file
18
tailwind.config.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
// Menentukan file-file yang akan dipindai oleh Tailwind untuk menghasilkan kelas-kelas CSS yang digunakan.
|
||||||
|
content: [
|
||||||
|
// Memindai file HTML di direktori root
|
||||||
|
"./index.html",
|
||||||
|
// Memindai semua file JavaScript dan TypeScript (termasuk JSX dan TSX) di dalam direktori src dan subdirektorinya
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
// Bagian untuk memperluas (extend) tema Tailwind. Anda bisa menambahkan tema atau konfigurasi lain di sini.
|
||||||
|
extend: {
|
||||||
|
// Misalnya, Anda bisa menambahkan warna kustom, font, spacing, dan lainnya di dalam bagian ini
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// Daftar plugin yang akan digunakan oleh Tailwind
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user