forked from amnannn/rekan_ai
fix zoom, ( tinggal nunggu tempalte solusi)
This commit is contained in:
Yogamnan
parent
4c4bd690f4
commit
940448f28b
@ -23,38 +23,38 @@ function Banner() {
|
||||
{/* Teks dan tombol */}
|
||||
<div className="px-4 mx-auto text-center w-full mt-8 md:mt-0">
|
||||
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
|
||||
<h1 className="text-xl md:text-[32px] 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-[750px] mx-auto text-customWhite text-sm md:text-[20px] 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>
|
||||
<div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
|
||||
<button className="flex items-center justify-center w-full md:w-[317px] h-[50px] md:h-[70px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
|
||||
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
|
||||
<img src={waIcon2} alt="WhatsApp Icon" className="mr-2 h-4 md:h-[30px] md:w-[30px] w-auto" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="flex items-center justify-center w-full md:w-[324px] h-[50px] md:h-[70px] 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 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>
|
||||
</div>
|
||||
|
||||
{/* Gambar L1-L4 untuk desktop */}
|
||||
<div className="absolute hidden md:grid top-[50%] left-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16">
|
||||
<img src={L1} alt="image 1" className="w-auto rounded-lg shadow-lg object-cover" />
|
||||
<img src={L2} alt="image 2" className="w-auto rounded-lg shadow-lg object-cover mt-20" />
|
||||
<img src={L3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover" />
|
||||
<img src={L4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover -mt-10" />
|
||||
<div className="absolute hidden md:grid top-[50%] -left-14 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16">
|
||||
<img src={L1} alt="image 1" className="w-[200px] rounded-lg shadow-lg object-cover" />
|
||||
<img src={L2} alt="image 2" className="w-[150px] rounded-lg shadow-lg object-cover mt-20" />
|
||||
<img src={L3} alt="image 3" className="w-[210px] rounded-lg shadow-lg object-cover" />
|
||||
<img src={L4} alt="image 4" className="w-[150px] rounded-lg shadow-lg object-cover -mt-5" />
|
||||
</div>
|
||||
|
||||
{/* Gambar R1-R4 untuk desktop */}
|
||||
<div className="absolute hidden md:grid top-[50%] right-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16">
|
||||
<img src={R1} alt="image 1" className="w-auto rounded-lg shadow-lg object-cover mt-20 ml-9" />
|
||||
<img src={R2} alt="image 2" className="w-auto rounded-lg shadow-lg object-cover -ml-7" />
|
||||
<img src={R3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover ml-7" />
|
||||
<img src={R4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover" />
|
||||
<div className="absolute hidden md:grid top-[50%] -right-16 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16">
|
||||
<img src={R1} alt="image 1" className="w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9" />
|
||||
<img src={R2} alt="image 2" className="w-[200px] rounded-lg shadow-lg object-cover -ml-7" />
|
||||
<img src={R3} alt="image 3" className="w-[180px] rounded-lg shadow-lg object-cover ml-7" />
|
||||
<img src={R4} alt="image 4" className="w-[206px] rounded-lg shadow-lg object-cover" />
|
||||
</div>
|
||||
|
||||
{/* Gambar R1-R4 untuk mobile */}
|
||||
|
||||
@ -1,125 +1,292 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets";
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } 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)
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
|
||||
<nav className="flex items-center justify-between px-5 sm:px-10 md:px-20 py-3 gap-4 flex-wrap relative bg-white shadow-md">
|
||||
<nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={Logo1} alt="Logo" className="w-[203px] h-[36.05px]" />
|
||||
<div className="flex-shrink-0">
|
||||
<img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
|
||||
</div>
|
||||
|
||||
{/* Tombol Hamburger (Mobile) */}
|
||||
<div className="sm:hidden flex items-center">
|
||||
<button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="text-[#212121]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Menu Navigasi */}
|
||||
<ul className={`${isMobileMenuOpen ? "flex" : "hidden"} sm:flex flex-col sm:flex-row list-none gap-5 sm:gap-10 absolute sm:relative top-full left-0 sm:top-auto sm:left-auto w-full sm:w-auto bg-white sm:bg-transparent p-5 sm:p-0 shadow-md sm:shadow-none z-40`}>
|
||||
<li>
|
||||
<button onClick={() => navigate("/")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex items-center space-x-8">
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||
>
|
||||
Beranda
|
||||
</button>
|
||||
</li>
|
||||
|
||||
{/* Produk Dropdown */}
|
||||
<li className="relative">
|
||||
<button onClick={() => setIsProdukOpen(!isProdukOpen)} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsProdukOpen(!isProdukOpen)}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
||||
>
|
||||
Produk
|
||||
<img src={row} alt="arrow" className="ml-1" />
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 448 512"
|
||||
className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isProdukOpen ? "rotate-180" : "rotate-0"}`}
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{isProdukOpen && (
|
||||
<ul className="absolute left-0 top-full w-48 bg-white list-none py-2 shadow-lg z-50">
|
||||
<li className="px-5 py-2 hover:text-[#5a55ff]"><a href="#produk1" className="text-[#212121]">Produk 1</a></li>
|
||||
<li className="px-5 py-2 hover:text-[#5a55ff]"><a href="#produk2" className="text-[#212121]">Produk 2</a></li>
|
||||
<ul 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>
|
||||
)}
|
||||
</li>
|
||||
</div>
|
||||
|
||||
{/* Solusi Dropdown */}
|
||||
<li className="relative group">
|
||||
{/* Solusi Dropdown - Desktop */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
||||
>
|
||||
Solusi
|
||||
<img src={row} alt="arrow" className="ml-1" />
|
||||
</button>
|
||||
{isSolusiOpen && (
|
||||
<ul
|
||||
className="absolute left-[-20px] md:left-[-550px] top-12 w-screen bg-customRed text-black list-none py-4 shadow-lg z-50 gap-10 px-10 flex md:flex-row flex-col justify-center items-center"
|
||||
Produk
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 448 512"
|
||||
className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isSolusiOpen ? "rotate-180" : "rotate-0"}`}
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<div className="flex md:flex-row flex-col justify-center items-center gap-3 md:gap-10 md:mr-96">
|
||||
<path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{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="flex justify-center gap-8">
|
||||
{/* Personal */}
|
||||
<li onClick={() => navigate("/SolusiPersonal")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
|
||||
<img src={IconPersonal} alt="" className="w-16 h-16" />
|
||||
<div>
|
||||
<button
|
||||
onClick={() => navigate("/SolusiPersonal")}
|
||||
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>
|
||||
<p className="text-xs text-customBlack">Solusi efisien <br /> kebutuhan personal</p>
|
||||
<p className="text-xs text-customBlack">
|
||||
Solusi efisien <br /> kebutuhan personal
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</button>
|
||||
|
||||
{/* Startup */}
|
||||
<li onClick={() => navigate("/SolusiStartup")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
|
||||
<img src={IconStartup} alt="" className="w-16 h-16" />
|
||||
<div>
|
||||
<button
|
||||
onClick={() => navigate("/SolusiStartup")}
|
||||
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>
|
||||
<p className="text-xs text-customBlack">Dukungan penuh <br /> untuk bisnis Startup</p>
|
||||
<p className="text-xs text-customBlack">
|
||||
Dukungan penuh <br /> untuk bisnis Startup
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</button>
|
||||
|
||||
{/* Corporate Business */}
|
||||
<li onClick={() => navigate("/SolusiPersonal")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
|
||||
<img src={IconCorporate} alt="" className="w-16 h-16" />
|
||||
<div>
|
||||
{/* Corporate */}
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
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>
|
||||
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
|
||||
</div>
|
||||
</li>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<button onClick={() => navigate("/Contact")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
|
||||
<button
|
||||
onClick={() => navigate("/Contact")}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||
>
|
||||
Hubungi Kami
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Pencarian */}
|
||||
<div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-52">
|
||||
<input type="text" placeholder="Pencarian..." className="w-full sm:w-[592px] h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]" />
|
||||
<button className="absolute right-4 sm:right-2 text-gray-500 hover:text-[#5a55ff]">
|
||||
<img src={search} alt="search" className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tombol Konsultasi */}
|
||||
<button className="bg-[#DC0168] h-[48px] md:w-[184px] md:h-[48px] text-white px-5 py-2 text-sm font-bold rounded-md hover:bg-[#e6006e] transition order-3 sm:order-none w-full sm:w-auto mt-3 sm:mt-0">
|
||||
{/* Search Bar */}
|
||||
<div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
|
||||
<div className="relative w-full">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pencarian..."
|
||||
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]">
|
||||
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Konsultasi Button */}
|
||||
<button className="hidden lg:block bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md hover:bg-[#e6006e] transition whitespace-nowrap">
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="lg:hidden text-[#212121]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="lg:hidden absolute top-full left-0 w-full bg-white shadow-md">
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
|
||||
>
|
||||
Beranda
|
||||
</button>
|
||||
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsProdukOpen(!isProdukOpen)}
|
||||
className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
|
||||
>
|
||||
Produk
|
||||
<img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
|
||||
</button>
|
||||
{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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
||||
className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
|
||||
>
|
||||
Solusi
|
||||
<img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
|
||||
</button>
|
||||
{isSolusiOpen && (
|
||||
<div className="bg-[#DC0168] px-5 py-4">
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => navigate("/SolusiPersonal")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Personal</h3>
|
||||
<p className="text-xs text-customBlack">Solusi efisien kebutuhan personal</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiStartup")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={IconStartup || "/placeholder.svg"} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Startup</h3>
|
||||
<p className="text-xs text-customBlack">Dukungan penuh untuk bisnis Startup</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={IconCorporate || "/placeholder.svg"} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Corporate Business</h3>
|
||||
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/Contact")}
|
||||
className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
|
||||
>
|
||||
Hubungi Kami
|
||||
</button>
|
||||
|
||||
<div className="p-5">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pencarian..."
|
||||
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md"
|
||||
/>
|
||||
<button className="absolute right-4 top-1/2 -translate-y-1/2">
|
||||
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 pt-0">
|
||||
<button className="w-full bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md">
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
||||
export default Header
|
||||
|
||||
|
||||
@ -1,44 +1,49 @@
|
||||
import {homeLogo,waIcon,homeImg} from '../../assets';
|
||||
|
||||
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<div className="container py-0 px-0" id="Home">
|
||||
<div className="
|
||||
hero
|
||||
grid grid-cols-1 lg:grid-cols-2 gap-10
|
||||
mt-56 sm:mt-28 md:mt-32 xl:mt-36 2xl:mt-24
|
||||
2xl:ml-28 xl:ml-24 items-center">
|
||||
|
||||
<div className="w-full overflow-hidden" id="Home">
|
||||
<div className="container mx-auto px-4 lg:px-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16">
|
||||
{/* Left Section */}
|
||||
<div className="box text-left px-4 lg:px-0 md:-ml-6 md:-mt-20">
|
||||
<img className="mb-5 mx-auto lg:mx-0" src={homeLogo} alt="Home Logo" />
|
||||
<h1 className="text-customBlack text-[24px] lg:text-[32px] font-semibold py-4">
|
||||
<div className="space-y-6 md:-mt-10 mt-10">
|
||||
<img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto" />
|
||||
<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.
|
||||
</h1>
|
||||
<p className="text-customBlack text-[16px] lg:text-[20px]">
|
||||
Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.
|
||||
<p className="text-[16px] lg:text-[18px] lg:max-w-[90%] text-customBlack">
|
||||
Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era
|
||||
digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Right Section (Home Image) */}
|
||||
<div className="box flex justify-center 2xl:ml-20 2xl:mr-[-11rem] px-4 lg:px-0">
|
||||
<img src={homeImg} alt="Home Image" className="w-full max-w-[807px] h-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg: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-2 h-[30px] w-[30px]" />
|
||||
{/* Buttons - Moved inside left column for better mobile layout */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-4">
|
||||
<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 border-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>
|
||||
<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">
|
||||
<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">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* Right Section */}
|
||||
<div className="relative">
|
||||
<div className="relative w-full aspect-square lg:aspect-auto lg:h-[600px]">
|
||||
<img
|
||||
src={homeImg}
|
||||
alt="Rekan AI Illustration"
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Hero;
|
||||
export default Hero
|
||||
|
||||
@ -21,14 +21,14 @@ function Kenapa() {
|
||||
|
||||
{/* Text Section */}
|
||||
<div 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">
|
||||
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800">Kenapa Harus Rekan AI?</h2>
|
||||
<p className="text-customBlack mt-4 text-sm md:max-w-[90%] md:leading-8 md:text-[20px]">
|
||||
<h2 className="text-2xl md:text-[28px] font-semibold text-customBlack">Kenapa Harus Rekan AI?</h2>
|
||||
<p className="text-customBlack mt-4 text-sm md:leading-7 md:text-[18px]">
|
||||
Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
|
||||
digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
|
||||
untuk meningkatkan efisiensi operasional, mempercepat proses, dan
|
||||
memberikan wawasan berbasis data yang akurat.
|
||||
</p>
|
||||
<ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[70%] md:text-base text-customBlack font-medium">
|
||||
<ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[90%] md:text-base text-customBlack font-medium">
|
||||
<li className="flex items-center">
|
||||
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
||||
Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.
|
||||
|
||||
@ -27,7 +27,7 @@ function Solusi() {
|
||||
|
||||
return (
|
||||
<section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
|
||||
<div className="text-center mb-12">
|
||||
<div className="text-center mb-12 md:-mt-48">
|
||||
<div className="flex flex-col md:flex-row items-center justify-center gap-4">
|
||||
<h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
|
||||
<span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
|
||||
@ -44,7 +44,7 @@ function Solusi() {
|
||||
{cards.map((card, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-customWhite rounded-xl border p-6 flex flex-col items-center h-[681px] w-[402px]"
|
||||
className="bg-customWhite rounded-xl border p-6 flex flex-col items-center h-[681px] w-[402px] md:h-[695px] md:w-[350px]"
|
||||
>
|
||||
<img src={card.image} alt={`Card ${index + 1}`} className="w-[130px] h-[170px] md:w-auto md:h-auto xl:w-auto xl:h-auto 2xl:w-auto 2xl:h-auto mb-6" />
|
||||
<p className="text-customBlack text-left mt-4 flex-1">{card.description}</p>
|
||||
@ -55,7 +55,7 @@ function Solusi() {
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button className="w-[355px] h-[62px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
|
||||
<button className="w-[355px] h-[62px] md:w-[330px] md:h-[60px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
|
||||
Selengkapnya <span>→</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -33,7 +33,7 @@ export const data = {
|
||||
]
|
||||
},
|
||||
doku: {
|
||||
title: "Rekan Doku – Dokumen Anda, Kendali Anda",
|
||||
title: "Rekan Doku – Autentikasi dan Manajemen Dokumen Digital",
|
||||
description:
|
||||
"Kelola dokumen pribadi dengan mudah dan aman menggunakan Rekan Doku. Produk ini memastikan dokumen digital Anda sah secara hukum dan tersimpan dengan baik.",
|
||||
image: rs2,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user