Compare commits

..

4 Commits
carls2 ... main

Author SHA1 Message Date
Yogamnan 89bce501f4 add handle search 2025-02-19 15:26:16 +07:00
Yogamnan e9dc997830 add handle search 2025-02-19 14:55:24 +07:00
Yogamnan aa566e188a Merge branch 'carls2' of https://git.allbestsistem.com/amnannn/rekan_ai 2025-02-19 14:00:13 +07:00
Yogamnan c341cce082 before merge 2025-02-19 13:59:55 +07:00
4 changed files with 186 additions and 155 deletions

View File

@ -15,141 +15,144 @@ function Footer() {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<footer className="bg-customGrey py-10 text-[#212121]"> <footer className="bg-customGrey py-10 text-[#212121]">
{/* Kontainer utama footer */} <div className="container mx-auto">
<div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm"> {/* Kontainer utama footer */}
{/* Kolom 1: Logo perusahaan */} <div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
<div className="mb-5 sm:mb-0"> {/* Kolom 1: Logo perusahaan */}
<img <div className="mb-5 sm:mb-0 md:-ml-16">
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="w-full sm:w-auto mb-5 sm:mb-0 md:pr-14 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>
<div className="flex space-x-3">
{/* Tautan ke media sosial */}
<a href="#">
<img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
</a>
<a href="#">
<img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
</a>
<a href="#">
<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 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>
<li>Rekan Veri</li>
<li>Rekan HR</li>
<li>Rekan LLM</li>
</ul>
</div>
{/* Kolom 4: Solusi yang ditawarkan */}
<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>
<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>
<button
onClick={() => {
navigate("/Contact");
window.scrollTo({ top: 0, behavior: "smooth" });
}}
className="block w-full text-left">
Kontak Kami
</button>
</li>
<li>
<Link to={"/Contact#faq"}>
<button
className="block w-full text-left">
F.A.Q
</button>
</Link>
</li>
</ul>
</div>
{/* Kolom 6: Partner perusahaan */}
<div className="mb-5 sm:mb-0 sm:pl-0">
<div className="mb-4">
<img <img
src={nvidia} src={component11} // Gambar logo perusahaan
alt="NVIDIA Inception Premier Member" alt="Logo"
className="w-[221px] h-[83px]" className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
/> />
</div> </div>
<div className="flex gap-5">
<img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" /> {/* Kolom 2: Deskripsi singkat perusahaan */}
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" /> <div className="w-full sm:w-auto mb-5 sm:mb-0 md:pr-14 sm:pl-0">
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" /> <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>
<div className="flex space-x-3">
{/* Tautan ke media sosial */}
<a href="#">
<img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
</a>
<a href="#">
<img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
</a>
<a href="#">
<img src={x} alt="Twitter" className="w-5 h-5" />{" "}
</a>
</div>
</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 text-[18px]">
<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 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>
<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>
<button
onClick={() => {
navigate("/Contact");
window.scrollTo({ top: 0, behavior: "smooth" });
}}
className="block w-full text-left">
Kontak Kami
</button>
</li>
<li>
<Link to={"/Contact#faq"}>
<button
className="block w-full text-left">
F.A.Q
</button>
</Link>
</li>
</ul>
</div>
{/* Kolom 6: Partner perusahaan */}
<div className="mb-5 sm:mb-0 sm:pl-0">
<div className="mb-4">
<img
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]" />
<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-[92.78px] md:ml-44 sm:mx-28 text-xs">
<p>
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
</p>
</div> </div>
</div> </div>
{/* Bagian hak cipta */}
<div className="text-left mt-[92.78px] md:ml-44 sm:mx-28 text-xs">
<p>
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
</p>
</div>
</footer> </footer>
); );
} }

View File

@ -7,6 +7,28 @@ const Header = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isSolusiOpen, setIsSolusiOpen] = useState(false); const [isSolusiOpen, setIsSolusiOpen] = useState(false);
const [isProdukOpen, setIsProdukOpen] = useState(false); const [isProdukOpen, setIsProdukOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("")
const handleSearch = (e) => {
setSearchQuery(e.target.value)
}
const handleSearchSubmit = (e) => {
e.preventDefault()
const query = searchQuery.toLowerCase()
// Solutions mapping
if (query.includes("solusi personal") || query.includes("personal")) {
navigate("/SolusiPersonal")
} else if (query.includes("solusi startup") || query.includes("startup")) {
navigate("/SolusiStartup")
} else if (query.includes("solusi corporate") || query.includes("corporate") || query.includes("business")) {
navigate("/SolusiCorporate")
}
window.scrollTo({ top: 0, behavior: "smooth" })
setSearchQuery("") // Clear search after submission
}
// Referensi untuk mendeteksi klik di luar dropdown // Referensi untuk mendeteksi klik di luar dropdown
const solusiRef = useRef(null); const solusiRef = useRef(null);
@ -22,6 +44,7 @@ const Header = () => {
setIsProdukOpen(false); setIsProdukOpen(false);
} }
} }
// Tambahkan event listener saat dropdown terbuka // Tambahkan event listener saat dropdown terbuka
document.addEventListener("mousedown", handleClickOutside); document.addEventListener("mousedown", handleClickOutside);
@ -72,7 +95,7 @@ const Header = () => {
</button> </button>
{isProdukOpen && ( {isProdukOpen && (
<div className="absolute left-[500px] -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]"> <div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
<div className="bg-customRed bg-opacity-80 rounded-xl p-8"> <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
<div className="flex justify-center gap-8"> <div className="flex justify-center gap-8">
{/* HR */} {/* HR */}
@ -165,7 +188,7 @@ const Header = () => {
</button> </button>
{isSolusiOpen && ( {isSolusiOpen && (
<div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]"> <div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
<div className="bg-customRed bg-opacity-80 rounded-xl p-8"> <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
<div className="flex justify-center gap-8"> <div className="flex justify-center gap-8">
{/* Personal */} {/* Personal */}
@ -235,16 +258,21 @@ const Header = () => {
{/* Search Bar */} {/* Search Bar */}
<div className="hidden lg:flex items-center flex-1 max-w-xl mx-8"> <div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
<div className="relative w-full"> <form onSubmit={handleSearchSubmit} className="relative w-full">
<input <input
type="text" type="text"
placeholder="Pencarian..." placeholder="Pencarian..."
value={searchQuery}
onChange={handleSearch}
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]" className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
/> />
<button className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]"> <button
type="submit"
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]"
>
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" /> <img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
</button> </button>
</div> </form>
</div> </div>
{/* Konsultasi Button */} {/* Konsultasi Button */}

View File

@ -3,10 +3,10 @@ import { motion } from "framer-motion";
const BottomCTA = () => { const BottomCTA = () => {
return ( return (
<motion.section <motion.section
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }} transition={{ duration: 1.2, ease: "easeOut" }}
viewport={{ once: false, amount: 0.2 }} viewport={{ once: false, amount: 0.2 }}
className="w-full bg-white text-center py-10 mb-[113px]" className="w-full bg-white text-center py-10 mb-[113px]"
> >
@ -23,23 +23,21 @@ const BottomCTA = () => {
</div> </div>
<p className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto"> <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 Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />
menghubungi kami melalui formulir
<br />
kontak atau email. Kami dengan senang hati akan membantu! kontak atau email. Kami dengan senang hati akan membantu!
</p> </p>
<div className="flex flex-col justify-center md:mt-12 sm:flex-row gap-6 sm:gap-12 sm:mt-1 px-4 sm:px-0"> <div className="flex flex-col justify-center md:mt-12 sm:flex-row gap-6 sm:gap-12 sm:mt-1 px-4 sm:px-0">
<motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"> <motion.button
<img 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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
src={wagreen} >
alt="WhatsApp Icon" <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]"
/>
Konsultasi Gratis Konsultasi Gratis
</motion.button> </motion.button>
<motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"> <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
>
Coba Sekarang Coba Sekarang
</motion.button> </motion.button>
</div> </div>

View File

@ -1,5 +1,6 @@
import { email, phone, customer } from "./asset"; import { email, phone, customer } from "./asset";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useEffect } from "react";
import { useInView } from "react-intersection-observer"; import { useInView } from "react-intersection-observer";
const CustomerService = () => { const CustomerService = () => {
@ -17,23 +18,24 @@ const CustomerService = () => {
}; };
return ( return (
<section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] md:gap-12 xl:gap-20 2xl:px-20"> <section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] 2xl:px-20 2xl:gap-20">
{/* LEFT SECTION - Informasi */} {/* LEFT SECTION - Informasi */}
<motion.div <motion.div
ref={leftRef} ref={leftRef}
className="w-full md:w-[55%] h-auto text-left" className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 md:ml-[-110px]"
initial="hidden" initial="hidden"
animate={leftInView ? "visible" : "hidden"} animate={leftInView ? "visible" : "hidden"}
variants={fadeInLeft} variants={fadeInLeft}
key="left-content" key="left-content"
> >
<div className="mb-5"> <div className="mb-5">
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px]"> <h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
Kami Siap Membantu Bisnis Anda <br /> Kami Siap Membantu Bisnis Anda <br />
Lebih Maju! Lebih Maju!
</h2> </h2>
</div> </div>
<p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px]"> <p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[20px] md:max-w-[90%]">
Butuh informasi lebih lanjut tentang produk atau solusi kami? Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan profesional. Butuh informasi lebih lanjut tentang produk atau solusi kami? Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan profesional.
</p> </p>
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
@ -46,7 +48,7 @@ const CustomerService = () => {
<div className="text-left"> <div className="text-left">
<p className="text-sm text-[#212121] md:text-[18px]"> <p className="text-sm text-[#212121] md:text-[18px]">
Kirim pertanyaan Anda ke{" "} Kirim pertanyaan Anda ke{" "}
<strong className="text-[#5B59E8]"> <strong className="text-[#5B59E8] md:text-[18px]">
support@rekanai.com support@rekanai.com
</strong>{" "} </strong>{" "}
dan tim kami akan segera merespons. dan tim kami akan segera merespons.
@ -77,7 +79,7 @@ const CustomerService = () => {
{/* RIGHT SECTION - Gambar */} {/* RIGHT SECTION - Gambar */}
<motion.div <motion.div
ref={rightRef} ref={rightRef}
className="w-full md:w-[45%] flex justify-center items-center" className="flex justify-center md:justify-end items-center md:mr-[-70px]"
initial="hidden" initial="hidden"
animate={rightInView ? "visible" : "hidden"} animate={rightInView ? "visible" : "hidden"}
variants={fadeInRight} variants={fadeInRight}
@ -86,7 +88,7 @@ const CustomerService = () => {
<img <img
src={customer} src={customer}
alt="Customer Service" alt="Customer Service"
className="w-[80%] md:w-full max-w-[450px] h-auto" className="w-full h-auto md:w-auto md:h-auto"
/> />
</motion.div> </motion.div>
</section> </section>