allbest/rekan_ai_fe
1
0
Fork 0
forked from amnannn/rekan_ai
Code Pull Requests Activity

add subs menu

Browse Source
This commit is contained in:
Yogamnan 2025-02-05 11:21:47 +07:00
parent 153214d438
commit 1041a497c4
8 changed files with 116 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/Frame 18 (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/image/Frame 18 (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/image/Frame 18.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

5
src/assets/index.js
View File

@ -1,5 +1,8 @@
import Logo1 from './image/logo.png'
import search from './image/search.png';
import IconPersonal from './image/Frame 18.png';
import IconStartup from './image/Frame 18 (1).png';
import IconCorporate from './image/Frame 18 (2).png'
import row from './image/arrow.png';
import row2 from './image/vector.png';
import homeLogo from './image/Component 1.png';
@ -76,5 +79,5 @@ export{
swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,
swipper23,swipper24,bgSwiper,imgLeft1,imgLeft2,imgLeft3,imgRight,nvdia,kmn,kominfo,
ojk,facebook,x,instagram,frame
ojk,facebook,x,instagram,frame,IconPersonal,IconStartup,IconCorporate
}

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

@ -1,25 +1,24 @@
import { useState } from 'react';
import { Logo1 } from '../../assets'
import {search} from '../../assets';
import {row} from '../../assets';
import { useNavigate } from 'react-router-dom';
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 navigate = useNavigate ()
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">
<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">
{/* Logo */}
<div className="flex items-center gap-2">
<img src={Logo1} alt="Logo" className="w-[203px] h-[36.05px]" />
</div>
{/* Tombol Hamburger (Responsive) */}
{/* Tombol Hamburger (Mobile) */}
<div className="sm:hidden flex items-center">
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="text-[#212121]"
>
<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>
@ -27,53 +26,72 @@ const Header = () => {
</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 className="relative group">
<button
onClick={() => navigate('/')} // Menggunakan navigate() untuk berpindah ke halaman beranda
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
>
<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]">
Beranda
</button>
</li>
<li className="relative group">
<a href="#produk" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
{/* Produk Dropdown */}
<li 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" />
</a>
<ul className="absolute left-0 top-full hidden w-40 bg-white list-none py-2 shadow-lg group-hover:block 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>
</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>
)}
</li>
{/* Solusi Dropdown */}
<li className="relative group">
<a href="#solusi" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
<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" />
</a>
<ul className="absolute left-0 top-full hidden w-40 bg-white list-none py-2 shadow-lg group-hover:block z-50">
<li className="px-5 py-2 hover:text-[#5a55ff]">
<a href="#solusi1" className="text-[#212121]">Solusi 1</a>
</li>
<li className="px-5 py-2 hover:text-[#5a55ff]">
<a href="#solusi2" className="text-[#212121]">Solusi 2</a>
</li>
</ul>
</li>
<li>
<button
onClick={() => navigate('/Contact')} // Navigasi ke halaman kontak
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
</button>
{isSolusiOpen && (
<ul
className="absolute left-[-550px] top-12 w-screen h-[173px] bg-customRed text-black list-none py-4 shadow-lg z-50 gap-10 px-10 flex flex-row justify-center items-center"
>
<div className="flex flex-row justify-center items-center gap-10 mr-96">
{/* Personal */}
<li 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-69 h-69" />
<div>
<h3 className="font-medium text-base">Personal</h3>
<p className="text-xs text-customBlack">Solusi efisien <br /> kebutuhan personal</p>
</div>
</li>
{/* Startup */}
<li 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-69 h-69" />
<div>
<h3 className="font-medium text-base">Startup</h3>
<p className="text-xs text-customBlack">Dukungan penuh <br /> untuk bisnis Startup</p>
</div>
</li>
{/* Corporate Business */}
<li 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-69 h-69" />
<div>
<h3 className="font-medium text-base">Corporate Business</h3>
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
</div>
</li>
</div>
</ul>
)}
</li>
<li>
<button onClick={() => navigate("/Contact")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
Hubungi Kami
</button>
</li>
@ -81,11 +99,7 @@ const Header = () => {
{/* 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]"
/>
<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>
@ -96,8 +110,12 @@ const Header = () => {
Konsultasi Gratis
</button>
</nav>
</header>
);
};
export default Header;

8
src/components/beranda/Mitra.jsx
View File

@ -129,10 +129,14 @@ function Mitra() {
{items
.slice(slideIndex * itemsPerSlide, (slideIndex + 1) * itemsPerSlide)
.map((item) => (
<div className="flex flex-col items-center" key={item.id}>
<img src={item.logo} alt={item.name} className="w-auto h-auto" />
<div
className="flex flex-col items-center justify-center h-[85px]" // Tambahkan justify-center dan atur tinggi
key={item.id}
>
<img src={item.logo} alt={item.name} className="max-h-full" /> {/* Gunakan max-h-full agar gambar mengikuti tinggi parent */}
</div>
))}
</div>
)
)}

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

@ -28,7 +28,7 @@ const BottomCTA = () => {
{/* Tombol Konsultasi Gratis dengan ikon WhatsApp */}
<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] text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
{/* Gambar WhatsApp di kiri tombol */}
<img src={wagreen} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
<img src={wagreen} alt="WhatsApp Icon" className="mr-2 h-[30px] w-[30px]" />
Konsultasi Gratis
</button>

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

@ -2,11 +2,9 @@ import { email, phone, customer } from "./asset";
const CustomerService = () => {
return (
<section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-7xl mx-auto gap-10 md:mb-[150px] 2xl:px-20 2xl:gap-20">
{/* Container utama */}
<div className="w-full md:w-[773px] 2xl:w-[900px] h-auto gap-[29px] text-left">
{/* Teks dan informasi */}
<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-[150px] 2xl:px-20 2xl:gap-20">
{/* LEFT SECTION - Informasi */}
<div className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left pl-10 md:-pl-24">
<div className="mb-5">
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
Kami Siap Membantu Bisnis{" "}
@ -35,7 +33,6 @@ const CustomerService = () => {
</strong>{" "}
dan tim kami akan segera merespons.
</p>
</div>
</div>
<div className="flex items-start gap-6">
@ -58,8 +55,9 @@ const CustomerService = () => {
</div>
</div>
</div>
{/*RIGHT SECTION */}
<div className="flex-1 flex justify-center items-center">
{/* RIGHT SECTION - Gambar */}
<div className="flex-1 flex justify-end items-center pr-10 md:pr-0">
<img
src={customer}
alt="Customer Service"