Compare commits

..

No commits in common. "15ec2fb8047f92eaf8c6d042eba8f545608fa1de" and "bcd1c05bec3b90ef60797d2aaa4d462a11eb177e" have entirely different histories.

7 changed files with 170 additions and 219 deletions

View File

@ -27,11 +27,11 @@ function Banner() {
{/* Teks dan tombol */} {/* Teks dan tombol */}
<div className="container mx-auto px-4 text-center w-full mt-8 md:mt-0 z-10"> <div className="container mx-auto px-4 text-center w-full mt-8 md:mt-0 z-10">
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto"> <div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
<h1 className="text-xl md:text-[25px] lg:text-[24px] 2xl:text-[30px] font-semibold text-center leading-10"> <h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif. Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
</h1> </h1>
</div> </div>
<p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[500px] 2xl:max-w-[700px] mx-auto text-customWhite text-sm 2xl:text-[18px] md:font-extralight md:leading-7"> <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang
siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis. siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
</p> </p>
@ -58,22 +58,22 @@ function Banner() {
<img <img
src={L1} src={L1}
alt="image 1" alt="image 1"
className="w-[15vw] max-w-[170px] 2xl:max-w-[200px] rounded-lg shadow-lg object-cover" className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover"
/> />
<img <img
src={L2} src={L2}
alt="image 2" alt="image 2"
className="w-[11vw] max-w-[135px] 2xl:max-w-[150px] md:-translate-x-9 2xl:-translate-x-0 rounded-lg shadow-lg object-cover mt-16" className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-16"
/> />
<img <img
src={L3} src={L3}
alt="image 3" alt="image 3"
className="w-[16vw] max-w-[180px] 2xl:max-w-[210px] rounded-lg shadow-lg object-cover" className="w-[16vw] max-w-[210px] rounded-lg shadow-lg object-cover"
/> />
<img <img
src={L4} src={L4}
alt="image 4" alt="image 4"
className="w-[11vw] max-w-[120px] 2xl:max-w-[150px] md:-translate-x-5 2xl:-translate-x-0 rounded-lg shadow-lg object-cover -mt-1 2xl:-mt-11" className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover -mt-11"
/> />
</div> </div>
@ -82,22 +82,22 @@ function Banner() {
<img <img
src={R1} src={R1}
alt="image 1" alt="image 1"
className="w-[11vw] max-w-[135px] 2xl:max-w-[150px] rounded-lg shadow-lg object-cover mt-28 2xl:mt-20 ml-24 2xl:ml-9" className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9"
/> />
<img <img
src={R2} src={R2}
alt="image 2" alt="image 2"
className="w-[15vw] max-w-[170px] 2xl:max-w-[200px] rounded-lg shadow-lg object-cover 2xl:-ml-4 md:ml-8 md:mt-14 2xl:mt-0" className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover -ml-4"
/> />
<img <img
src={R3} src={R3}
alt="image 3" alt="image 3"
className="w-[13vw] max-w-[145px] 2xl:max-w-[180px] rounded-lg shadow-lg object-cover ml-24 2xl:ml-7" className="w-[13vw] max-w-[180px] rounded-lg shadow-lg object-cover ml-7"
/> />
<img <img
src={R4} src={R4}
alt="image 4" alt="image 4"
className="w-[15vw] max-w-[170px] 2xl:max-w-[206px] rounded-lg shadow-lg object-cover ml-8 2xl:ml-0" className="w-[15vw] max-w-[206px] rounded-lg shadow-lg object-cover"
/> />
</div> </div>

View File

@ -15,144 +15,141 @@ 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]">
<div className="container mx-auto"> {/* Kontainer utama footer */}
{/* 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">
<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 */}
{/* Kolom 1: Logo perusahaan */} <div className="mb-5 sm:mb-0">
<div className="mb-5 sm:mb-0 md:-ml-16"> <img
<img src={component11} // Gambar logo perusahaan
src={component11} // Gambar logo perusahaan alt="Logo"
alt="Logo" className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
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>
{/* Kolom 2: Deskripsi singkat perusahaan */} <div className="flex space-x-3">
<div className="w-full sm:w-auto mb-5 sm:mb-0 md:pr-14 sm:pl-0"> {/* Tautan ke media sosial */}
<div className="flex mb-5"> <a href="#">
<p> <img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "} </a>
<br /> <a href="#">
<span className="text-[#5B59E8] italic"> <img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
Reimagine Your Business with AI. </a>
</span> <a href="#">
</p> <img src={x} alt="Twitter" className="w-5 h-5" />{" "}
</div> </a>
<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
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>
</div> </div>
{/* Bagian hak cipta */} {/* Kolom 3: Produk perusahaan */}
<div className="text-left mt-[92.78px] md:ml-44 sm:mx-28 text-xs"> <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
<p> <h4 className="text-base font-semibold mb-4">Produk Kami</h4>
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang <ul className="space-y-4 text-[18px]">
</p> <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>
</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,28 +7,6 @@ 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);
@ -44,7 +22,6 @@ 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);
@ -95,7 +72,7 @@ const Header = () => {
</button> </button>
{isProdukOpen && ( {isProdukOpen && (
<div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]"> <div className="absolute left-[500px] -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="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 */}
@ -188,7 +165,7 @@ const Header = () => {
</button> </button>
{isSolusiOpen && ( {isSolusiOpen && (
<div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]"> <div className="absolute left-64 -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="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 */}
@ -258,21 +235,16 @@ 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">
<form onSubmit={handleSearchSubmit} className="relative w-full"> <div 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 <button className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]">
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>
</form> </div>
</div> </div>
{/* Konsultasi Button */} {/* Konsultasi Button */}

View File

@ -49,12 +49,12 @@ function Kenapa() {
alt="Woman with Tablet" alt="Woman with Tablet"
className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]" className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
/> />
</motion.div> </motion.div>
{/* Text Section */} {/* Text Section */}
<motion.div <motion.div
ref={listRef} ref={listRef}
className="w-full md:w-[40%] p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left" className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left"
initial={{ opacity: 0, x: 50 }} initial={{ opacity: 0, x: 50 }}
animate={listInView ? { opacity: 1, x: 0 } : {}} animate={listInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}

View File

@ -21,7 +21,7 @@ const CustomerService = () => {
{/* LEFT SECTION - Informasi */} {/* LEFT SECTION - Informasi */}
<motion.div <motion.div
ref={leftRef} ref={leftRef}
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 lg: 2xl:ml-[-90px]" className="w-full md:w-[55%] h-auto text-left"
initial="hidden" initial="hidden"
animate={leftInView ? "visible" : "hidden"} animate={leftInView ? "visible" : "hidden"}
variants={fadeInLeft} variants={fadeInLeft}

View File

@ -1,43 +1,25 @@
import row from "./arrow.png"; import row from './arrow.png';
import component11 from "./Component 11.png"; import component11 from './Component 11.png';
import customer from "./customer.png"; import customer from './customer.png';
import email from "./email.png"; import email from './email.png';
import facebook from "./facebook.png"; import facebook from './facebook.png';
import frame from "./Frame.png"; import frame from './Frame.png';
import frame27 from "./Frame27.png"; import frame27 from './Frame27.png';
import img10 from "./image 10.png"; import img10 from './image 10.png';
import instagram from "./instagram.png"; import instagram from './instagram.png';
import kmn from "./Dukcapil PNG Pic.png"; import kmn from './Dukcapil PNG Pic.png';
import kominfo from "./Kominfo PNG Pic.png"; import kominfo from './Kominfo PNG Pic.png';
import Logo1 from "./logo.png"; import Logo1 from './logo.png';
import nvidia from "./NVIDIA PNG Pic.png"; import nvidia from './NVIDIA PNG Pic.png';
import ojk from "./OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp"; import ojk from './OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp';
import phone from "./phone.png"; import phone from './phone.png';
import search from "./search.png"; import search from './search.png';
import telephone from "./telephone.png"; import telephone from './telephone.png';
import wagreen from "./whatsapp-color_svgrepo.com.png"; import wagreen from './whatsapp-color_svgrepo.com.png';
import wabutton from "./Whatsapp22.png"; import wabutton from './Whatsapp22.png';
import x from "./x.png"; import x from './x.png';
export {
row, export{
component11, row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
customer, }
email,
facebook,
frame,
frame27,
img10,
instagram,
kmn,
kominfo,
Logo1,
nvidia,
ojk,
phone,
search,
telephone,
wagreen,
wabutton,
x,
};

View File

@ -87,7 +87,7 @@ export const data = {
{ {
title: "Pengurangan Risiko Fraud", title: "Pengurangan Risiko Fraud",
description: description:
"Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.3", "Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.",
icon: maskcek icon: maskcek
} }
] ]