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 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
|
||||
}
|
||||
|
|
@ -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>
|
||||
</ul>
|
||||
</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>
|
||||
</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')} // Navigasi ke halaman kontak
|
||||
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>
|
||||
|
|
@ -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;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import {mitraImg} from "../../assets";
|
||||
import {arrow1} from "../../assets";
|
||||
import {arrow2} from "../../assets";
|
||||
import {swipper1} from "../../assets";
|
||||
import {swipper2} from "../../assets";
|
||||
import {swipper3} from "../../assets";
|
||||
import {swipper4} from "../../assets";
|
||||
import {swipper5} from "../../assets";
|
||||
import {swipper6} from "../../assets";
|
||||
import {swipper7} from "../../assets";
|
||||
import {swipper8} from "../../assets";
|
||||
import {swipper9} from "../../assets";
|
||||
import {swipper10} from "../../assets";
|
||||
import {swipper11} from "../../assets";
|
||||
import {swipper12} from "../../assets";
|
||||
import {swipper13} from "../../assets";
|
||||
import {swipper14} from "../../assets";
|
||||
import {swipper15} from "../../assets";
|
||||
import {swipper16} from "../../assets";
|
||||
import {swipper17} from "../../assets";
|
||||
import {swipper18} from "../../assets";
|
||||
import {swipper19} from "../../assets";
|
||||
import {swipper20} from "../../assets";
|
||||
import {swipper21} from "../../assets";
|
||||
import {swipper22} from "../../assets";
|
||||
import {swipper23} from "../../assets";
|
||||
import {swipper24} from "../../assets";
|
||||
import { mitraImg } from "../../assets";
|
||||
import { arrow1 } from "../../assets";
|
||||
import { arrow2 } from "../../assets";
|
||||
import { swipper1 } from "../../assets";
|
||||
import { swipper2 } from "../../assets";
|
||||
import { swipper3 } from "../../assets";
|
||||
import { swipper4 } from "../../assets";
|
||||
import { swipper5 } from "../../assets";
|
||||
import { swipper6 } from "../../assets";
|
||||
import { swipper7 } from "../../assets";
|
||||
import { swipper8 } from "../../assets";
|
||||
import { swipper9 } from "../../assets";
|
||||
import { swipper10 } from "../../assets";
|
||||
import { swipper11 } from "../../assets";
|
||||
import { swipper12 } from "../../assets";
|
||||
import { swipper13 } from "../../assets";
|
||||
import { swipper14 } from "../../assets";
|
||||
import { swipper15 } from "../../assets";
|
||||
import { swipper16 } from "../../assets";
|
||||
import { swipper17 } from "../../assets";
|
||||
import { swipper18 } from "../../assets";
|
||||
import { swipper19 } from "../../assets";
|
||||
import { swipper20 } from "../../assets";
|
||||
import { swipper21 } from "../../assets";
|
||||
import { swipper22 } from "../../assets";
|
||||
import { swipper23 } from "../../assets";
|
||||
import { swipper24 } from "../../assets";
|
||||
import { bgSwiper } from "../../assets";
|
||||
function Mitra() {
|
||||
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">
|
||||
{/* Prev Button (Hidden on Mobile) */}
|
||||
<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>
|
||||
{/* Carousel Items */}
|
||||
<div className="overflow-hidden flex-1">
|
||||
|
|
@ -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>
|
||||
)
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue