fix + add produk
This commit is contained in:
Yogamnan
parent
ff016f6f21
commit
8cb7eeadc1
|
|
@ -1,6 +1,7 @@
|
|||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import Contact from "./pages/Contact"
|
||||
import Home from "./pages/Home"
|
||||
import FormSection from "./components/contact/FormSection"
|
||||
import SolusiPersonal from "./pages/SolusiPersonal"
|
||||
import SolusiStartup from "./pages/SolusiStartup"
|
||||
import SolusiCorporate from "./pages/SolusiCorporate"
|
||||
|
|
@ -11,6 +12,7 @@ function App() {
|
|||
<Routes>
|
||||
<Route path='/' element={<Home/>}/>
|
||||
<Route path='/Contact' element={<Contact/>}/>
|
||||
<Route path='/FormSection' element={<FormSection/>}/>
|
||||
<Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
|
||||
<Route path='/SolusiStartup' element={<SolusiStartup/>}/>
|
||||
<Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -2,7 +2,11 @@ import Logo1 from './image/logo.png'
|
|||
import search from './image/search.png';
|
||||
import IconPersonal from './image/Frame 18.png';
|
||||
import IconStartup from './image/Frame 18 (1).png';
|
||||
import IconCorporate from './image/Frame 18 (2).png'
|
||||
import IconCorporate from './image/Frame 18 (2).png';
|
||||
import ProdukHr from './image/Frame 18 (3).png';
|
||||
import ProdukDoku from './image/Frame 18 (4).png';
|
||||
import ProdukLlm from './image/Frame 18 (5).png';
|
||||
import ProdukVeri from './image/Frame 18 (6).png';
|
||||
import row from './image/arrow.png';
|
||||
import row2 from './image/vector.png';
|
||||
import homeLogo from './image/Component 1.png';
|
||||
|
|
@ -80,5 +84,5 @@ export{
|
|||
swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
|
||||
swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,
|
||||
swipper23,swipper24,bgSwiper,imgLeft1,imgLeft2,imgLeft3,imgRight,nvdia,kmn,kominfo,
|
||||
ojk,facebook,x,instagram,frame,IconPersonal,IconStartup,IconCorporate
|
||||
ojk,facebook,x,instagram,frame,IconPersonal,IconStartup,IconCorporate,ProdukDoku,ProdukHr,ProdukVeri,ProdukLlm
|
||||
}
|
||||
|
|
@ -1,10 +1,13 @@
|
|||
import { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
|
||||
function Banner() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="relative w-full overflow-hidden">
|
||||
<div
|
||||
className="relative flex flex-col items-center justify-center mt-20 w-full max-w-[1920px] mx-auto h-auto md:h-[692px] bg-cover bg-center text-white text-center"
|
||||
className="relative w-full flex flex-col items-center justify-center mt-20 h-auto md:h-[692px] bg-cover bg-center text-white text-center"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
|
||||
backgroundSize: "cover",
|
||||
|
|
@ -41,7 +44,10 @@ function Banner() {
|
|||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
|
||||
<button
|
||||
onClick={() => navigate("/FormSection")}
|
||||
|
||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,78 +1,132 @@
|
|||
import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../../assets";
|
||||
import { useNavigate } from "react-router-dom"
|
||||
|
||||
import {
|
||||
nvidia,
|
||||
kmn,
|
||||
kominfo,
|
||||
ojk,
|
||||
facebook,
|
||||
x,
|
||||
instagram,
|
||||
component11,
|
||||
} from "../contact/asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
|
||||
|
||||
function Footer() {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<footer className="bg-customGrey h-[506px] py-10 text-[#212121]">
|
||||
<footer className="bg-customGrey 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
|
||||
src={component11} // 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="w-full sm:w-auto 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 font-bold">
|
||||
<span className="text-[#5B59E8] italic">
|
||||
Reimagine Your Business with AI.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p className="mb-10 text-[18px]">
|
||||
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
|
||||
Banten 15413
|
||||
</p>
|
||||
|
||||
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
|
||||
<div className="flex space-x-5">
|
||||
<div className="flex space-x-3">
|
||||
{/* Tautan ke media sosial */}
|
||||
<a href="#">
|
||||
<img src={instagram} alt="Instagram" className="w-5 h-5" /> {/* Ikon Instagram */}
|
||||
<img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
|
||||
</a>
|
||||
<a href="#">
|
||||
<img src={facebook} alt="Facebook" className="w-5 h-5" /> {/* Ikon Facebook */}
|
||||
<img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
|
||||
</a>
|
||||
<a href="#">
|
||||
<img src={x} alt="Twitter" className="w-5 h-5" /> {/* Ikon Twitter (X) */}
|
||||
<img src={x} alt="Twitter" className="w-5 h-5" />{" "}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kolom 3: Produk perusahaan */}
|
||||
<div className="flex-1 mb-5 sm:mb-0 md:ml-16 sm:pl-0">
|
||||
<h4 className="text-[18px] font-semibold mb-4">Produk Kami</h4>
|
||||
<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 text-[18px]">
|
||||
<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 */}
|
||||
<li>Rekan Doku</li>
|
||||
<li>Rekan Veri</li>
|
||||
<li>Rekan HR</li>
|
||||
<li>Rekan LLM</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Kolom 4: Solusi yang ditawarkan */}
|
||||
<div className="flex-1 mb-5 md:-mx-28 sm:mb-0 sm:pl-0">
|
||||
<h4 className="text-[18px] font-semibold mb-4">Solusi Kami</h4>
|
||||
<div className="flex-1 flex flex-col mb-5 sm:mb-0 sm:pl-0">
|
||||
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
||||
<ul className="space-y-4 text-[18px]">
|
||||
<li>Personal</li> {/* Solusi untuk individu */}
|
||||
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
|
||||
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiPersonal");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="block w-full text-left"
|
||||
>
|
||||
Personal
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiStartup");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="block w-full text-left">
|
||||
Startup
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="block w-full text-left">
|
||||
Corporate Business
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Kolom 5: Informasi kontak */}
|
||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||
<h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
|
||||
<ul className="space-y-4 text-[18px]">
|
||||
<li>Email: support@rekanai.com</li> {/* Email dukungan */}
|
||||
<li>Phone: +68452098</li> {/* Nomor telepon */}
|
||||
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/Contact");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="block w-full text-left">
|
||||
Kontak Kami
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/FormSection");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="block w-full text-left">
|
||||
F.A.Q
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -80,21 +134,21 @@ function Footer() {
|
|||
<div className="mb-5 sm:mb-0 sm:pl-0">
|
||||
<div className="mb-4">
|
||||
<img
|
||||
src={nvdia} // Gambar logo partner NVIDIA
|
||||
src={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 */}
|
||||
<img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" />
|
||||
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" />
|
||||
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bagian hak cipta */}
|
||||
<div className="text-left mt-40 mx-5 sm:mx-28 text-xs">
|
||||
<div className="text-left mt-[92.78px] mx-5 sm:mx-28 text-xs">
|
||||
<p>
|
||||
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
||||
</p>
|
||||
|
|
@ -103,5 +157,4 @@ function Footer() {
|
|||
);
|
||||
}
|
||||
|
||||
|
||||
export default Footer;
|
||||
export default Footer;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,34 @@
|
|||
import { useState } from "react"
|
||||
import { useState, useRef, useEffect } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"
|
||||
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup, ProdukDoku, ProdukHr, ProdukLlm, ProdukVeri } from "../../assets"
|
||||
|
||||
const Header = () => {
|
||||
const navigate = useNavigate()
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
||||
const [isSolusiOpen, setIsSolusiOpen] = useState(false)
|
||||
const [isProdukOpen, setIsProdukOpen] = useState(false)
|
||||
const navigate = useNavigate();
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isSolusiOpen, setIsSolusiOpen] = useState(false);
|
||||
const [isProdukOpen, setIsProdukOpen] = useState(false);
|
||||
|
||||
// Referensi untuk mendeteksi klik di luar dropdown
|
||||
const solusiRef = useRef(null);
|
||||
const produkRef = useRef(null);
|
||||
|
||||
// Fungsi untuk menutup dropdown jika klik di luar elemen
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event) {
|
||||
if (solusiRef.current && !solusiRef.current.contains(event.target)) {
|
||||
setIsSolusiOpen(false);
|
||||
}
|
||||
if (produkRef.current && !produkRef.current.contains(event.target)) {
|
||||
setIsProdukOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Tambahkan event listener saat dropdown terbuka
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
|
||||
|
|
@ -19,14 +41,17 @@ const Header = () => {
|
|||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex items-center space-x-8">
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
onClick={() => {
|
||||
navigate("/")
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||
>
|
||||
Beranda
|
||||
</button>
|
||||
|
||||
{/* Produk Dropdown */}
|
||||
<div className="relative">
|
||||
<div className="relative" ref={produkRef}>
|
||||
<button
|
||||
onClick={() => setIsProdukOpen(!isProdukOpen)}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
||||
|
|
@ -47,23 +72,79 @@ const Header = () => {
|
|||
</button>
|
||||
|
||||
{isProdukOpen && (
|
||||
<ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
|
||||
<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>
|
||||
<div className="absolute left-[525px] -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||
<div className="flex justify-center gap-8">
|
||||
{/* HR */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiPersonal");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukHr} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-2">Rekan HR</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Manajemen absensi karyawan
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* DOKU */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiStartup");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukDoku} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Rekan Doku</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Kelola dokumen digital
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* LLM */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukLlm} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Rekan LLM</h3>
|
||||
<p className="text-xs text-customBlack">Solusi analisis berbasis data</p>
|
||||
</div>
|
||||
</button>
|
||||
{/* VERI */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukVeri} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Rekan Veri</h3>
|
||||
<p className="text-xs text-customBlack">Verifikasi data secara akurat</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Solusi Dropdown - Desktop */}
|
||||
<div className="relative">
|
||||
<div className="relative" ref={solusiRef}>
|
||||
<button
|
||||
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
||||
|
|
@ -85,16 +166,19 @@ const Header = () => {
|
|||
|
||||
{isSolusiOpen && (
|
||||
<div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
|
||||
<div className="bg-customRed rounded-xl p-8">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||
<div className="flex justify-center gap-8">
|
||||
{/* Personal */}
|
||||
<button
|
||||
onClick={() => navigate("/SolusiPersonal")}
|
||||
onClick={() => {
|
||||
navigate("/SolusiPersonal");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Personal</h3>
|
||||
<h3 className="font-medium text-base py-1">Personal</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Solusi efisien <br /> kebutuhan personal
|
||||
</p>
|
||||
|
|
@ -103,12 +187,15 @@ const Header = () => {
|
|||
|
||||
{/* Startup */}
|
||||
<button
|
||||
onClick={() => navigate("/SolusiStartup")}
|
||||
onClick={() => {
|
||||
navigate("/SolusiStartup");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={IconStartup || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Startup</h3>
|
||||
<h3 className="font-medium text-base py-1">Startup</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Dukungan penuh <br /> untuk bisnis Startup
|
||||
</p>
|
||||
|
|
@ -117,12 +204,15 @@ const Header = () => {
|
|||
|
||||
{/* Corporate */}
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={IconCorporate || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Corporate Business</h3>
|
||||
<h3 className="font-medium text-base py-1">Corporate Business</h3>
|
||||
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -133,7 +223,10 @@ const Header = () => {
|
|||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/Contact")}
|
||||
onClick={() => {
|
||||
navigate("/Contact");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||
>
|
||||
Hubungi Kami
|
||||
|
|
@ -194,12 +287,53 @@ const Header = () => {
|
|||
{isProdukOpen && (
|
||||
<div className="bg-[#DC0168] px-5 py-4">
|
||||
<div className="space-y-3">
|
||||
<a href="#produk1" className="block p-4 bg-white rounded-lg">
|
||||
Produk 1
|
||||
</a>
|
||||
<a href="#produk2" className="block p-4 bg-white rounded-lg">
|
||||
Produk 2
|
||||
</a>
|
||||
<button
|
||||
onClick={() => navigate("/SolusiPersonal")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukHr} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan HR</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Manajemen absensi karyawan
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiStartup")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukDoku} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan Doku</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Kelola dokumen digital
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukLlm} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan LLM</h3>
|
||||
<p className="text-xs text-customBlack">Solusi analisis berbasis data</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukVeri} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan Veri</h3>
|
||||
<p className="text-xs text-customBlack">Verifikasi data secara akurat</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { homeLogo, waIcon, homeImg } from '../../assets';
|
||||
import { useNavigate } from "react-router-dom"
|
||||
|
||||
function Hero() {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="w-full overflow-hidden" id="Home">
|
||||
<div className="container mx-auto px-4 lg:px-12">
|
||||
|
|
@ -28,7 +30,9 @@ function Hero() {
|
|||
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||
<button
|
||||
onClick={() => navigate("/FormSection")}
|
||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import {imgLeft,chek2,waIcon,circle1,circle2} from '../../assets'
|
||||
import { imgLeft, chek2, waIcon, circle1, circle2 } from '../../assets'
|
||||
import { useNavigate } from "react-router-dom"
|
||||
|
||||
function Kenapa() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
|
||||
|
|
@ -52,7 +55,9 @@ function Kenapa() {
|
|||
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
|
||||
<button
|
||||
onClick={() => navigate("/FormSection")}
|
||||
className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import React from "react";
|
||||
import { waIcon } from "../../assets";
|
||||
import { useNavigate } from "react-router-dom"
|
||||
|
||||
|
||||
function MasaDepan() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3">
|
||||
|
|
@ -24,14 +29,17 @@ function MasaDepan() {
|
|||
</div>
|
||||
{/* Button Section */}
|
||||
<div className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
|
||||
<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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
<img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
<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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
<img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigate("/FormSection")}
|
||||
|
||||
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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { waButton } from "../../assets";
|
|||
|
||||
const WhatsAppButton = () => {
|
||||
return (
|
||||
<div className="fixed bottom-2 right-2 md:right-16 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]">
|
||||
<div className="fixed bottom-2 right-2 md:right-5 flex justify-center items-center w-16 h-16 md:w-16 md:h-16 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
|
||||
<img
|
||||
className="w-10 h-10 md:w-auto md:h-auto"
|
||||
src={waButton}
|
||||
|
|
|
|||
|
|
@ -35,13 +35,7 @@ function Footer() {
|
|||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p className="mb-[39px] text-[18px] w-full sm:w-auto">
|
||||
<span className="block md:inline">Jl. Anggrek No.6, Sawah Lama, Kec.</span>
|
||||
<br className="hidden md:block" />
|
||||
<span className="block md:inline">Ciputat, Kota Tangerang Selatan, Banten</span>
|
||||
<br className="hidden md:block" />
|
||||
<span className="block md:inline">15413</span>
|
||||
</p>
|
||||
|
||||
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
|
||||
<div className="flex space-x-3">
|
||||
{/* Tautan ke media sosial */}
|
||||
|
|
@ -73,7 +67,7 @@ function Footer() {
|
|||
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
||||
<ul className="space-y-4 text-[18px]">
|
||||
<li>Personal</li>
|
||||
<li>UMKM</li>
|
||||
<li>Startup</li>
|
||||
<li>Corporate Business</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import FormSection from "../components/contact/FormSection"
|
|||
import FAQSection from "../components/contact/FAQSection"
|
||||
import BottomCTA from "../components/contact/BottomCTA"
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
import Footer from "../components/contact/Footer"
|
||||
import Footer from "../components/beranda/Footer"
|
||||
function Contact() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
import Header from "../components/beranda/Header"
|
||||
import Hero from "../components/beranda/Hero"
|
||||
import Solusi from "../components/beranda/Solusi"
|
||||
import Banner from "../components/beranda/Banner"
|
||||
import Kenapa from "../components/beranda/Kenapa"
|
||||
import Mitra from '../components/beranda/Mitra'
|
||||
import Mendukung from "../components/beranda/Mendukung"
|
||||
import Footer from "../components/contact/Footer"
|
||||
import MasaDepan from "../components/beranda/MasaDepan"
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import Header from "../components/beranda/Header";
|
||||
import Hero from "../components/beranda/Hero";
|
||||
import Solusi from "../components/beranda/Solusi";
|
||||
import Banner from "../components/beranda/Banner";
|
||||
import Kenapa from "../components/beranda/Kenapa";
|
||||
import Mitra from '../components/beranda/Mitra';
|
||||
import Mendukung from "../components/beranda/Mendukung";
|
||||
import Footer from "../components/beranda/Footer";
|
||||
import MasaDepan from "../components/beranda/MasaDepan";
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon";
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Hero />
|
||||
<Solusi />
|
||||
<Banner />
|
||||
<Kenapa />
|
||||
<Mitra />
|
||||
<Mendukung />
|
||||
<MasaDepan />
|
||||
<Footer />
|
||||
<WhatsAppButton />
|
||||
<Header />
|
||||
<Hero />
|
||||
<Solusi />
|
||||
<Banner />
|
||||
<Kenapa />
|
||||
<Mitra />
|
||||
<Mendukung />
|
||||
<MasaDepan />
|
||||
<Footer />
|
||||
<WhatsAppButton />
|
||||
</>
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
||||
export default Home;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import MengapaCorporate from '../components/solusi/MengapaCorporate/MengapaCorpo
|
|||
import SolusiCorporate from '../components/solusi/SolusiCorporate/SolusiCorporate'
|
||||
import TransformasiCorpo from '../components/solusi/TransformasiCorpo/TransformasiCorpo'
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
import Footer from "../components/contact/Footer"
|
||||
import Footer from "../components/beranda/Footer"
|
||||
function Contact() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import MengapapPersonal from '../components/solusi/MengapapPersonal/MengapapPers
|
|||
import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal'
|
||||
import TransformasiPersonal from '../components/solusi/TransformasiPersonal/TransformasiPersonal'
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
import Footer from "../components/contact/Footer"
|
||||
import Footer from "../components/beranda/Footer"
|
||||
function Contact() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Header from "../components/beranda/Header"
|
||||
import HeadStartup from '../components/solusi/HeadStartup/HeadStartup'
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
import Footer from "../components/contact/Footer"
|
||||
import Footer from "../components/beranda/Footer"
|
||||
import CardStartup from "../components/solusi/CardStartup/CardStartup"
|
||||
import MengapaStartup from "../components/solusi/MengapaStartup/MengapaStartup"
|
||||
import SolusiStartup from "../components/solusi/SolusiStartup/SolusiStartup"
|
||||
|
|
|
|||
Loading…
Reference in New Issue