add subs menu
This commit is contained in:
Yogamnan
parent
153214d438
commit
1041a497c4
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -1,5 +1,8 @@
|
||||||
import Logo1 from './image/logo.png'
|
import Logo1 from './image/logo.png'
|
||||||
import search from './image/search.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 row from './image/arrow.png';
|
||||||
import row2 from './image/vector.png';
|
import row2 from './image/vector.png';
|
||||||
import homeLogo from './image/Component 1.png';
|
import homeLogo from './image/Component 1.png';
|
||||||
|
|
@ -76,5 +79,5 @@ export{
|
||||||
swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
|
swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
|
||||||
swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,
|
swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,
|
||||||
swipper23,swipper24,bgSwiper,imgLeft1,imgLeft2,imgLeft3,imgRight,nvdia,kmn,kominfo,
|
swipper23,swipper24,bgSwiper,imgLeft1,imgLeft2,imgLeft3,imgRight,nvdia,kmn,kominfo,
|
||||||
ojk,facebook,x,instagram,frame
|
ojk,facebook,x,instagram,frame,IconPersonal,IconStartup,IconCorporate
|
||||||
}
|
}
|
||||||
|
|
@ -1,25 +1,24 @@
|
||||||
import { useState } from 'react';
|
import { useState } from "react";
|
||||||
import { Logo1 } from '../../assets'
|
import { useNavigate } from "react-router-dom";
|
||||||
import {search} from '../../assets';
|
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets";
|
||||||
import {row} from '../../assets';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
const navigate = useNavigate ()
|
const [isSolusiOpen, setIsSolusiOpen] = useState(false);
|
||||||
|
const [isProdukOpen, setIsProdukOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
|
<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 */}
|
{/* Logo */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<img src={Logo1} alt="Logo" className="w-[203px] h-[36.05px]" />
|
<img src={Logo1} alt="Logo" className="w-[203px] h-[36.05px]" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tombol Hamburger (Responsive) */}
|
{/* Tombol Hamburger (Mobile) */}
|
||||||
<div className="sm:hidden flex items-center">
|
<div className="sm:hidden flex items-center">
|
||||||
<button
|
<button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="text-[#212121]">
|
||||||
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">
|
<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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -27,53 +26,72 @@ const Header = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Menu Navigasi */}
|
{/* Menu Navigasi */}
|
||||||
<ul
|
<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`}>
|
||||||
className={`${
|
<li>
|
||||||
isMobileMenuOpen ? 'flex' : 'hidden'
|
<button onClick={() => navigate("/")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
|
||||||
} 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]"
|
|
||||||
>
|
|
||||||
Beranda
|
Beranda
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</li>
|
</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
|
Produk
|
||||||
<img src={row} alt="arrow" className="ml-1" />
|
<img src={row} alt="arrow" className="ml-1" />
|
||||||
</a>
|
</button>
|
||||||
<ul className="absolute left-0 top-full hidden w-40 bg-white list-none py-2 shadow-lg group-hover:block z-50">
|
{isProdukOpen && (
|
||||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
<ul className="absolute left-0 top-full w-48 bg-white list-none py-2 shadow-lg z-50">
|
||||||
<a href="#produk1" className="text-[#212121]">Produk 1</a>
|
<li className="px-5 py-2 hover:text-[#5a55ff]"><a href="#produk1" className="text-[#212121]">Produk 1</a></li>
|
||||||
</li>
|
<li className="px-5 py-2 hover:text-[#5a55ff]"><a href="#produk2" className="text-[#212121]">Produk 2</a></li>
|
||||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
</ul>
|
||||||
<a href="#produk2" className="text-[#212121]">Produk 2</a>
|
)}
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
{/* Solusi Dropdown */}
|
||||||
<li className="relative group">
|
<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
|
Solusi
|
||||||
<img src={row} alt="arrow" className="ml-1" />
|
<img src={row} alt="arrow" className="ml-1" />
|
||||||
</a>
|
</button>
|
||||||
<ul className="absolute left-0 top-full hidden w-40 bg-white list-none py-2 shadow-lg group-hover:block z-50">
|
{isSolusiOpen && (
|
||||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
<ul
|
||||||
<a href="#solusi1" className="text-[#212121]">Solusi 1</a>
|
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"
|
||||||
</li>
|
>
|
||||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
<div className="flex flex-row justify-center items-center gap-10 mr-96">
|
||||||
<a href="#solusi2" className="text-[#212121]">Solusi 2</a>
|
{/* Personal */}
|
||||||
</li>
|
<li className=" px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
|
||||||
</ul>
|
<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>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button onClick={() => navigate("/Contact")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
|
||||||
onClick={() => navigate('/Contact')} // Navigasi ke halaman kontak
|
|
||||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
|
||||||
>
|
|
||||||
Hubungi Kami
|
Hubungi Kami
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -81,11 +99,7 @@ const Header = () => {
|
||||||
|
|
||||||
{/* Pencarian */}
|
{/* Pencarian */}
|
||||||
<div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-52">
|
<div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-52">
|
||||||
<input
|
<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]" />
|
||||||
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]">
|
<button className="absolute right-4 sm:right-2 text-gray-500 hover:text-[#5a55ff]">
|
||||||
<img src={search} alt="search" className="w-5 h-5" />
|
<img src={search} alt="search" className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -96,8 +110,12 @@ const Header = () => {
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Header;
|
export default Header;
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,31 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import {mitraImg} from "../../assets";
|
import { mitraImg } from "../../assets";
|
||||||
import {arrow1} from "../../assets";
|
import { arrow1 } from "../../assets";
|
||||||
import {arrow2} from "../../assets";
|
import { arrow2 } from "../../assets";
|
||||||
import {swipper1} from "../../assets";
|
import { swipper1 } from "../../assets";
|
||||||
import {swipper2} from "../../assets";
|
import { swipper2 } from "../../assets";
|
||||||
import {swipper3} from "../../assets";
|
import { swipper3 } from "../../assets";
|
||||||
import {swipper4} from "../../assets";
|
import { swipper4 } from "../../assets";
|
||||||
import {swipper5} from "../../assets";
|
import { swipper5 } from "../../assets";
|
||||||
import {swipper6} from "../../assets";
|
import { swipper6 } from "../../assets";
|
||||||
import {swipper7} from "../../assets";
|
import { swipper7 } from "../../assets";
|
||||||
import {swipper8} from "../../assets";
|
import { swipper8 } from "../../assets";
|
||||||
import {swipper9} from "../../assets";
|
import { swipper9 } from "../../assets";
|
||||||
import {swipper10} from "../../assets";
|
import { swipper10 } from "../../assets";
|
||||||
import {swipper11} from "../../assets";
|
import { swipper11 } from "../../assets";
|
||||||
import {swipper12} from "../../assets";
|
import { swipper12 } from "../../assets";
|
||||||
import {swipper13} from "../../assets";
|
import { swipper13 } from "../../assets";
|
||||||
import {swipper14} from "../../assets";
|
import { swipper14 } from "../../assets";
|
||||||
import {swipper15} from "../../assets";
|
import { swipper15 } from "../../assets";
|
||||||
import {swipper16} from "../../assets";
|
import { swipper16 } from "../../assets";
|
||||||
import {swipper17} from "../../assets";
|
import { swipper17 } from "../../assets";
|
||||||
import {swipper18} from "../../assets";
|
import { swipper18 } from "../../assets";
|
||||||
import {swipper19} from "../../assets";
|
import { swipper19 } from "../../assets";
|
||||||
import {swipper20} from "../../assets";
|
import { swipper20 } from "../../assets";
|
||||||
import {swipper21} from "../../assets";
|
import { swipper21 } from "../../assets";
|
||||||
import {swipper22} from "../../assets";
|
import { swipper22 } from "../../assets";
|
||||||
import {swipper23} from "../../assets";
|
import { swipper23 } from "../../assets";
|
||||||
import {swipper24} from "../../assets";
|
import { swipper24 } from "../../assets";
|
||||||
import { bgSwiper } from "../../assets";
|
import { bgSwiper } from "../../assets";
|
||||||
function Mitra() {
|
function Mitra() {
|
||||||
const items = [
|
const items = [
|
||||||
|
|
@ -111,7 +111,7 @@ function Mitra() {
|
||||||
<div className="bg-customWhite shadow-lg rounded-[37px] px-4 md:px-8 py-4 flex items-center gap-2 md:gap-4 w-[95%] md:w-[80%] mx-auto z-10 overflow-hidden">
|
<div className="bg-customWhite shadow-lg rounded-[37px] px-4 md:px-8 py-4 flex items-center gap-2 md:gap-4 w-[95%] md:w-[80%] mx-auto z-10 overflow-hidden">
|
||||||
{/* Prev Button (Hidden on Mobile) */}
|
{/* Prev Button (Hidden on Mobile) */}
|
||||||
<button onClick={handlePrev} className="hidden md:block">
|
<button onClick={handlePrev} className="hidden md:block">
|
||||||
<img src= {arrow1} alt="Previous" className="w-4 h-4 md:w-6 md:h-6" />
|
<img src={arrow1} alt="Previous" className="w-4 h-4 md:w-6 md:h-6" />
|
||||||
</button>
|
</button>
|
||||||
{/* Carousel Items */}
|
{/* Carousel Items */}
|
||||||
<div className="overflow-hidden flex-1">
|
<div className="overflow-hidden flex-1">
|
||||||
|
|
@ -129,10 +129,14 @@ function Mitra() {
|
||||||
{items
|
{items
|
||||||
.slice(slideIndex * itemsPerSlide, (slideIndex + 1) * itemsPerSlide)
|
.slice(slideIndex * itemsPerSlide, (slideIndex + 1) * itemsPerSlide)
|
||||||
.map((item) => (
|
.map((item) => (
|
||||||
<div className="flex flex-col items-center" key={item.id}>
|
<div
|
||||||
<img src={item.logo} alt={item.name} className="w-auto h-auto" />
|
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>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ const BottomCTA = () => {
|
||||||
{/* Tombol Konsultasi Gratis dengan ikon WhatsApp */}
|
{/* 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]">
|
<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 */}
|
{/* 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
|
Konsultasi Gratis
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,9 @@ import { email, phone, customer } from "./asset";
|
||||||
|
|
||||||
const CustomerService = () => {
|
const CustomerService = () => {
|
||||||
return (
|
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">
|
<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">
|
||||||
{/* Container utama */}
|
{/* 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="w-full md:w-[773px] 2xl:w-[900px] h-auto gap-[29px] text-left">
|
|
||||||
{/* Teks dan informasi */}
|
|
||||||
<div className="mb-5">
|
<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] 2xl:leading-[52px]">
|
||||||
Kami Siap Membantu Bisnis{" "}
|
Kami Siap Membantu Bisnis{" "}
|
||||||
|
|
@ -35,7 +33,6 @@ const CustomerService = () => {
|
||||||
</strong>{" "}
|
</strong>{" "}
|
||||||
dan tim kami akan segera merespons.
|
dan tim kami akan segera merespons.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-6">
|
<div className="flex items-start gap-6">
|
||||||
|
|
@ -58,8 +55,9 @@ const CustomerService = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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
|
<img
|
||||||
src={customer}
|
src={customer}
|
||||||
alt="Customer Service"
|
alt="Customer Service"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue