amnannn
/
rekan_ai
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: amnannn:main
Branches Tags
amnannn:main
amnannn:carls2
amnannn:solusi
amnannn:carls1
..
compare: amnannn:carls2
Branches Tags
amnannn:carls2
amnannn:main
amnannn:solusi
amnannn:carls1

1 Commits
main ... carls2

Author SHA1 Message Date
Carls2320 bcd1c05bec fix costomer 2025-02-21 02:56:38 +07:00
4 changed files with 154 additions and 185 deletions
Show Stats Expand all files Collapse all files

5
src/components/beranda/Footer.jsx
View File

@ -15,11 +15,10 @@ 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">
<div className="mb-5 sm:mb-0">
<img
src={component11} // Gambar logo perusahaan
alt="Logo"
@ -151,8 +150,6 @@ function Footer() {
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
</p>
</div>
</div>
</footer>
);
}

38
src/components/beranda/Header.jsx
View File

@ -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);
@ -45,7 +23,6 @@ const Header = () => {
}
}
// Tambahkan event listener saat dropdown terbuka
document.addEventListener("mousedown", handleClickOutside);
return () => {
@ -95,7 +72,7 @@ const Header = () => {
</button>
{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="flex justify-center gap-8">
{/* HR */}
@ -188,7 +165,7 @@ const Header = () => {
</button>
{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="flex justify-center gap-8">
{/* Personal */}
@ -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 */}

18
src/components/contact/BottomCTA.jsx
View File

@ -23,21 +23,23 @@ const BottomCTA = () => {
</div>
<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 menghubungi kami melalui formulir<br />
Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk
menghubungi kami melalui formulir
<br />
kontak atau email. Kami dengan senang hati akan membantu!
</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">
<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]"
>
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
<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]">
<img
src={wagreen}
alt="WhatsApp Icon"
className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]"
/>
Konsultasi Gratis
</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
</motion.button>
</div>

16
src/components/contact/CustomerService.jsx
View File

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