Compare commits
No commits in common. "main" and "carls2" have entirely different histories.
24
src/App.jsx
24
src/App.jsx
@ -5,27 +5,17 @@ import FormSection from "./components/contact/FormSection"
|
||||
import SolusiPersonal from "./pages/SolusiPersonal"
|
||||
import SolusiStartup from "./pages/SolusiStartup"
|
||||
import SolusiCorporate from "./pages/SolusiCorporate"
|
||||
import NotFound from "./components/NotFound/NotFound"
|
||||
import Header from './components/beranda/Header';
|
||||
import WhatsAppButton from './components/beranda/WhatsAppButon';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<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 />} />
|
||||
<Route path='/004' element={
|
||||
<>
|
||||
<Header />
|
||||
<NotFound />
|
||||
<WhatsAppButton/>
|
||||
</>
|
||||
|
||||
} />
|
||||
<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/>}/>
|
||||
</Routes>
|
||||
</Router>
|
||||
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
import { logonf } from "./asset";
|
||||
|
||||
|
||||
const NotFound = () => {
|
||||
return (
|
||||
<div className="justify-center text-center items-center flex flex-col mt-32 gap-4">
|
||||
<img src={logonf} alt="404" />
|
||||
<h1 className="font-bold text-[1.5rem]">Halaman Dalam Proses Pengembangan</h1>
|
||||
<p className="text-[1rem] font-medium w-[50rem]">Terima kasih atas kunjungan Anda! Halaman ini sedang dalam tahap pengembangan untuk memberikan pengalaman terbaik. Nantikan segera pembaruan dari kami! </p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
@ -1,4 +0,0 @@
|
||||
import logonf from './Black Blue and Pink Modern Twibbon Instagram Post 1.png';
|
||||
|
||||
|
||||
export { logonf, }
|
||||
@ -27,11 +27,11 @@ function Banner() {
|
||||
{/* Teks dan tombol */}
|
||||
<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">
|
||||
<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.
|
||||
</h1>
|
||||
</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
|
||||
siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
|
||||
</p>
|
||||
@ -58,22 +58,22 @@ function Banner() {
|
||||
<img
|
||||
src={L1}
|
||||
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
|
||||
src={L2}
|
||||
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
|
||||
src={L3}
|
||||
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
|
||||
src={L4}
|
||||
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>
|
||||
|
||||
@ -82,22 +82,22 @@ function Banner() {
|
||||
<img
|
||||
src={R1}
|
||||
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
|
||||
src={R2}
|
||||
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
|
||||
src={R3}
|
||||
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
|
||||
src={R4}
|
||||
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>
|
||||
|
||||
|
||||
@ -15,144 +15,141 @@ function Footer() {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<footer className="bg-customGrey py-10 text-[#212121]">
|
||||
<div className="container mx-auto">
|
||||
{/* 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 md:-ml-16">
|
||||
<img
|
||||
src={component11} // Gambar logo perusahaan
|
||||
alt="Logo"
|
||||
className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
|
||||
/>
|
||||
{/* 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={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>
|
||||
|
||||
{/* 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
|
||||
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 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>
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,28 +7,6 @@ const Header = () => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isSolusiOpen, setIsSolusiOpen] = 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
|
||||
const solusiRef = useRef(null);
|
||||
@ -44,7 +22,6 @@ const Header = () => {
|
||||
setIsProdukOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tambahkan event listener saat dropdown terbuka
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
@ -95,13 +72,13 @@ const Header = () => {
|
||||
</button>
|
||||
|
||||
{isProdukOpen && (
|
||||
<div className="absolute md:left-[350px] 2xl: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="flex justify-center gap-8">
|
||||
{/* HR */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/004");
|
||||
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"
|
||||
@ -118,7 +95,7 @@ const Header = () => {
|
||||
{/* DOKU */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/004");
|
||||
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"
|
||||
@ -135,7 +112,7 @@ const Header = () => {
|
||||
{/* LLM */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/004");
|
||||
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"
|
||||
@ -149,7 +126,7 @@ const Header = () => {
|
||||
{/* VERI */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/004");
|
||||
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"
|
||||
@ -188,8 +165,8 @@ const Header = () => {
|
||||
</button>
|
||||
|
||||
{isSolusiOpen && (
|
||||
<div className="absolute md:left-[235px] 2xl: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 md:h-[168px]">
|
||||
<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="flex justify-center gap-8">
|
||||
{/* Personal */}
|
||||
<button
|
||||
@ -258,21 +235,16 @@ const Header = () => {
|
||||
|
||||
{/* Search Bar */}
|
||||
<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
|
||||
type="text"
|
||||
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]"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]"
|
||||
>
|
||||
<button 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" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Konsultasi Button */}
|
||||
|
||||
@ -34,7 +34,7 @@ function Hero() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="translate-y-24 md:translate-y-0 w-full overflow-hidden" id="Home">
|
||||
<div className="w-full overflow-hidden" id="Home">
|
||||
<div className="container mx-auto px-4 lg:px-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16" id="hero-section">
|
||||
{/* Left Section */}
|
||||
@ -42,8 +42,8 @@ function Hero() {
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 md:-ml-4 2xl:-ml-4 lg:order-none"
|
||||
>
|
||||
className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none"
|
||||
>
|
||||
<img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto lg:mx-0" />
|
||||
<h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
|
||||
Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
|
||||
@ -72,12 +72,12 @@ function Hero() {
|
||||
className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
|
||||
id="button-section"
|
||||
>
|
||||
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
||||
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
||||
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] 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>
|
||||
</Link>
|
||||
|
||||
@ -12,24 +12,24 @@ function Kenapa() {
|
||||
|
||||
return (
|
||||
<div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={sectionInView ? { opacity: 1, y: 0 } : {}}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={sectionInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
|
||||
>
|
||||
{/* Decorative Circles */}
|
||||
<div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
|
||||
<motion.img
|
||||
src={circle1} alt="Circle 1"
|
||||
className="w-auto h-auto"
|
||||
<motion.img
|
||||
src={circle1} alt="Circle 1"
|
||||
className="w-auto h-auto"
|
||||
initial={{ opacity: 0, scale: 0.5 }}
|
||||
animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
/>
|
||||
<motion.img
|
||||
src={circle2} alt="Circle 2"
|
||||
className="w-auto h-auto"
|
||||
<motion.img
|
||||
src={circle2} alt="Circle 2"
|
||||
className="w-auto h-auto"
|
||||
initial={{ opacity: 0, scale: 0.5 }}
|
||||
animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
@ -37,7 +37,7 @@ function Kenapa() {
|
||||
</div>
|
||||
|
||||
{/* Image Section */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
ref={textRef}
|
||||
className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start"
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
@ -52,9 +52,9 @@ function Kenapa() {
|
||||
</motion.div>
|
||||
|
||||
{/* Text Section */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
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 }}
|
||||
animate={listInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
@ -73,8 +73,8 @@ function Kenapa() {
|
||||
"Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.",
|
||||
"Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data."
|
||||
].map((text, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
<motion.li
|
||||
key={index}
|
||||
className="flex items-center"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={listInView ? { opacity: 1, x: 0 } : {}}
|
||||
@ -87,9 +87,8 @@ function Kenapa() {
|
||||
</ul>
|
||||
|
||||
<div ref={buttonRef} className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
|
||||
<Link to={""} className="w-full md:w-[245px]">
|
||||
<motion.button
|
||||
className="flex items-center justify-center w-full md:w-[245px] md:h-[62px] h-[50px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
||||
<motion.button
|
||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.8 }}
|
||||
@ -97,10 +96,9 @@ function Kenapa() {
|
||||
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</motion.button>
|
||||
</Link>
|
||||
<Link to={"/Contact#form"} className="w-full md:w-[245px]">
|
||||
<Link to={"/Contact#form"}>
|
||||
<motion.button
|
||||
className="flex items-center justify-center w-full h-[50px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
|
||||
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"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.5, delay: 1 }}
|
||||
@ -109,7 +107,6 @@ function Kenapa() {
|
||||
</motion.button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@ -78,9 +78,9 @@ function Mitra() {
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
handleNext();
|
||||
}, 8900);
|
||||
}, 8900); // Slider bergerak setiap 4 detik
|
||||
|
||||
return () => clearInterval(interval);
|
||||
return () => clearInterval(interval); // Membersihkan interval saat komponen unmount
|
||||
}, [currentIndex]);
|
||||
|
||||
return (
|
||||
|
||||
@ -22,7 +22,7 @@ const CustomerService = () => {
|
||||
{/* LEFT SECTION - Informasi */}
|
||||
<motion.div
|
||||
ref={leftRef}
|
||||
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 lg: 2xl:ml-[-165px]"
|
||||
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 md:ml-[-110px]"
|
||||
initial="hidden"
|
||||
animate={leftInView ? "visible" : "hidden"}
|
||||
variants={fadeInLeft}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useEffect } from "react"
|
||||
import { useLocation } from "react-router-dom"
|
||||
import ReCAPTCHA from "react-google-recaptcha"
|
||||
import { motion, useAnimation } from "framer-motion"
|
||||
@ -15,9 +15,6 @@ const ContactForm = () => {
|
||||
const [ref, inView] = useInView({
|
||||
threshold: 0.1, // Trigger when 10% of the element is in view
|
||||
})
|
||||
const [email, setEmail] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isValid, setIsValid] = useState(false); // Untuk validasi tombol submit
|
||||
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
@ -46,32 +43,6 @@ const ContactForm = () => {
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
|
||||
}
|
||||
|
||||
const handleChange = (e) => {
|
||||
const value = e.target.value;
|
||||
setEmail(value);
|
||||
|
||||
// Regex untuk memastikan hanya 3 huruf setelah titik
|
||||
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;
|
||||
|
||||
if (!emailPattern.test(value) && value !== "") {
|
||||
setError("Domain email harus memiliki 3 huruf setelah titik.");
|
||||
setIsValid(false); // Tidak valid, tombol submit dinonaktifkan
|
||||
} else {
|
||||
setError("");
|
||||
setIsValid(true); // Valid, tombol submit bisa digunakan
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!isValid) {
|
||||
alert("Silakan perbaiki email Anda sebelum mengirim formulir.");
|
||||
return;
|
||||
}
|
||||
alert("Formulir berhasil dikirim!");
|
||||
// Tambahkan logika pengiriman data di sini
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative flex min-h-screen w-full items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
|
||||
@ -135,16 +106,13 @@ const ContactForm = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Email*</label>
|
||||
<label className="text-[#6B5CEA]">Email*</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={handleChange}
|
||||
placeholder="Masukkan email Anda"
|
||||
required
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
{error && <p className="text-red-500 mt-1">{error}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
|
||||
@ -168,7 +136,7 @@ const ContactForm = () => {
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
||||
<svg
|
||||
className="w-8 mt-7 text-[#5B59E8]"
|
||||
className="w-6 text-[#5B59E8]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@ -185,8 +153,8 @@ const ContactForm = () => {
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className={`bg-[#5B59E0] hover:bg-indigo-700 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4 ${!isValid ? "opacity-50 cursor-not-allowed" : ""}`}
|
||||
disabled={!isValid || !capchaToken} // Tombol akan dinonaktifkan jika email tidak valid atau captcha belum diisi
|
||||
className="bg-[#5B59E0] hover:bg-indigo-700 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
|
||||
disabled={!capchaToken}
|
||||
>
|
||||
Kirim Pesan
|
||||
</button>
|
||||
|
||||
@ -65,13 +65,13 @@ export default function HeadCorporate() {
|
||||
animate={buttonInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
||||
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
||||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<motion.button
|
||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity"
|
||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] 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"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.5 }}
|
||||
|
||||
@ -67,13 +67,13 @@ export default function HeadPersonal() {
|
||||
animate={buttonInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
||||
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
||||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<motion.button
|
||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity"
|
||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] 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"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.5 }}
|
||||
|
||||
@ -65,13 +65,13 @@ export default function HeadPersonal() {
|
||||
animate={buttonInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
||||
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
||||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<motion.button
|
||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity"
|
||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] 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"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.5 }}
|
||||
|
||||
@ -57,16 +57,16 @@ function Kenapa() {
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<motion.div
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
|
||||
>
|
||||
<motion.button
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="flex items-center justify-center w-full md:w-[245px] h-[50px] md:h-[62px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
||||
>
|
||||
<img
|
||||
src={wagreen || "/placeholder.svg"}
|
||||
@ -76,10 +76,10 @@ function Kenapa() {
|
||||
Konsultasi Gratis
|
||||
</motion.button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<motion.button
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="w-full md:w-[245px] h-[50px] md:h-[62px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
|
||||
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
|
||||
</motion.button>
|
||||
|
||||
@ -57,16 +57,16 @@ function Kenapa() {
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<motion.div
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
|
||||
>
|
||||
<motion.button
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="flex items-center justify-center w-full md:w-[245px] h-[50px] md:h-[62px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
||||
>
|
||||
<img
|
||||
src={wagreen || "/placeholder.svg"}
|
||||
@ -76,10 +76,10 @@ function Kenapa() {
|
||||
Konsultasi Gratis
|
||||
</motion.button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<motion.button
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="w-full md:w-[245px] h-[50px] md:h-[62px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
|
||||
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
|
||||
</motion.button>
|
||||
|
||||
@ -9,14 +9,14 @@ function Kenapa() {
|
||||
|
||||
return (
|
||||
<div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
|
||||
>
|
||||
{/* Image Section */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
||||
transition={{ duration: 1 }}
|
||||
@ -30,7 +30,7 @@ function Kenapa() {
|
||||
</motion.div>
|
||||
|
||||
{/* Text Section */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
||||
transition={{ duration: 1, delay: 0.3 }}
|
||||
@ -47,29 +47,29 @@ function Kenapa() {
|
||||
{["Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa memerlukan keahlian teknis.",
|
||||
"Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi Anda tetap terlindungi.",
|
||||
"Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan dengan kebutuhan individu Anda."].map((text, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
|
||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||||
className="flex items-center"
|
||||
>
|
||||
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
||||
{text}
|
||||
</motion.li>
|
||||
))}
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
|
||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||||
className="flex items-center"
|
||||
>
|
||||
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
||||
{text}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<motion.div
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
|
||||
>
|
||||
<motion.button
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="flex items-center justify-center w-full md:w-[245px] h-[50px] md:h-[62px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
||||
>
|
||||
<img
|
||||
src={wagreen || "/placeholder.svg"}
|
||||
@ -79,10 +79,10 @@ function Kenapa() {
|
||||
Konsultasi Gratis
|
||||
</motion.button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<motion.button
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="w-full md:w-[245px] h-[50px] md:h-[62px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
|
||||
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
|
||||
</motion.button>
|
||||
|
||||
@ -87,7 +87,7 @@ export const data = {
|
||||
{
|
||||
title: "Pengurangan Risiko Fraud",
|
||||
description:
|
||||
"Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.3",
|
||||
"Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.",
|
||||
icon: maskcek
|
||||
}
|
||||
]
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
BIN
src/components/solusi/asset/Play Now (33) 1.png
Normal file
BIN
src/components/solusi/asset/Play Now (33) 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
@ -21,7 +21,7 @@ import x from "./x.png";
|
||||
import chek2 from "./Frame 811480.png";
|
||||
import start22 from "./Frame 811554.png";
|
||||
import maskcek from "./Mask group (1).png";
|
||||
import card1 from "./Frame 8115681.png";
|
||||
import card1 from "./Play Now (33) 1.png";
|
||||
import card2 from "./Play Now (32) 1.png";
|
||||
import card3 from "./Play Now (30) 2.png";
|
||||
import rekan1 from "./Play Now (34) 1.png";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user