menu
This commit is contained in:
04widodo
parent
68aa9a373f
commit
18cc67be31
@ -8,6 +8,7 @@
|
||||
--color-primary-800: #2852a3;
|
||||
--color-primary-600: #337add;
|
||||
--color-primary-100: #deedfb;
|
||||
--color-primary-surface: #f0f7fe;
|
||||
--color-border: #e2e8f0;
|
||||
--color-subtle: #f1f5f9;
|
||||
}
|
||||
@ -20,6 +21,10 @@ body {
|
||||
font-family: var(--font-open-sauce-one);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
|
||||
@ -13,6 +13,8 @@ import Corner2 from "@/image/portofolio/corner-why-us-2.svg";
|
||||
import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr";
|
||||
import Image from "next/image";
|
||||
import ClientImage from "./client-image";
|
||||
import Link from "next/link";
|
||||
import ContactUs from "@src/components/contact-us";
|
||||
|
||||
export default function PortFolio() {
|
||||
const ourService = [
|
||||
@ -50,7 +52,7 @@ export default function PortFolio() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="relative">
|
||||
<div className="relative scroll-mt-19.5 md:scroll-mt-18.5" id="home">
|
||||
<Image src={BannerMobile} alt="banner" className="w-full md:hidden" />
|
||||
<Image src={BannerDesktop} alt="banner" className="w-full hidden md:block" />
|
||||
<div className="absolute top-0 left-0 md:left-20 md:top-1/2 md:-translate-y-1/2">
|
||||
@ -58,17 +60,12 @@ export default function PortFolio() {
|
||||
<div className="py-2 px-3 backdrop-blur-[19px] bg-[#FFFFFF1F] font-medium w-fit">Part of Serba Mulia Group</div>
|
||||
<p className="font-semibold text-[40px] md:text-5xl">Build Fast, Scale Smart</p>
|
||||
<p className="md:text-lg">Software & AI Solutions for Modern Business</p>
|
||||
<div className="primary-button pl-3">
|
||||
Contact Us
|
||||
<div className="p-2 bg-secondary-400">
|
||||
<ArrowUpRightIcon className="size-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<ContactUs />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:px-20 md:py-16">
|
||||
<div className="flex flex-col md:flex-row md:px-20 md:py-16 scroll-mt-19.5 md:scroll-mt-18.5" id="about-us">
|
||||
<div className="flex flex-col gap-4 py-6 px-4 md:w-1/2 md:pr-20 md:gap-6 md:px-0 md:py-0">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-secondary-400 text-[13px] md:text-sm">ABOUT US</p>
|
||||
@ -95,7 +92,7 @@ export default function PortFolio() {
|
||||
<Image src={AboutUsImage} alt="about-us" className="w-full md:w-1/2 object-contain" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 px-4 py-6 md:px-20 md:py-16 md:gap-6">
|
||||
<div className="flex flex-col gap-4 px-4 py-6 md:px-20 md:py-16 md:gap-6 scroll-mt-19.5 md:scroll-mt-18.5" id="services">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-[13px] md:text-sm text-secondary-400">SERVICES</p>
|
||||
<p className="text-[32px] md:text-[40px] text-title font-semibold">Our Services</p>
|
||||
@ -113,7 +110,7 @@ export default function PortFolio() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col px-4 py-6 gap-4 bg-linear-to-b from-subtle to-white md:py-16 md:px-20 md:gap-10">
|
||||
<div className="flex flex-col px-4 py-6 gap-4 bg-linear-to-b from-subtle to-white md:py-16 md:px-20 md:gap-10 scroll-mt-19.5 md:scroll-mt-18.5" id="portfolio">
|
||||
<div className="flex flex-col gap-4 md:gap-6">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-[13px] text-secondary-400 md:text-sm">PORTFOLIO</p>
|
||||
@ -148,7 +145,7 @@ export default function PortFolio() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="relative scroll-mt-19.5 md:scroll-mt-18.5" id="process">
|
||||
<div className="flex flex-col md:py-16 md:px-20 md:grid md:grid-cols-2 md:gap-6">
|
||||
<div className="flex flex-col gap-4 px-4 py-6 z-10 md:gap-6">
|
||||
<div className="flex flex-col gap-1">
|
||||
|
||||
13
src/components/contact-us.tsx
Normal file
13
src/components/contact-us.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
"use client";
|
||||
import { ArrowUpRightIcon } from "@phosphor-icons/react";
|
||||
|
||||
export default function ContactUs() {
|
||||
return (
|
||||
<div className="primary-button pl-3" onClick={() => window.open("https://mail.google.com/mail/?view=cm&fs=1&to=connect@muliainformasi.co.id", "_blank")}>
|
||||
Contact Us
|
||||
<div className="p-2 bg-secondary-400">
|
||||
<ArrowUpRightIcon className="size-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -3,10 +3,12 @@ import Corner2 from "@/image/footer/corner-footer-2.svg";
|
||||
import LogoWhite from "@/image/logo-white.png";
|
||||
import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import ContactUs from "./contact-us";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<div className="bg-primary-800 w-full relative">
|
||||
<div className="bg-primary-800 w-full relative scroll-mt-19.5 md:scroll-mt-18.5" id="kontak">
|
||||
<div className="flex flex-col gap-4 px-4 py-6 z-10 text-white md:py-16 md:px-20 md:grid md:grid-cols-2 md:gap-6">
|
||||
<div className="flex flex-col gap-4 md:justify-between">
|
||||
<div className="flex flex-col gap-3">
|
||||
@ -22,12 +24,7 @@ export default function Footer() {
|
||||
<p className="text-[32px] md:text-[40px] font-semibold">Let’s Collaborate</p>
|
||||
<p className="md:text-lg">Let’s build something that works and grows.</p>
|
||||
</div>
|
||||
<div className="primary-button pl-3">
|
||||
Contact Us
|
||||
<div className="p-2 bg-secondary-400">
|
||||
<ArrowUpRightIcon className="size-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<ContactUs />
|
||||
</div>
|
||||
|
||||
<p className="text-center z-10 pt-4 border-t border-primary-600 flex w-full md:hidden">Mulia Informasi Teknologi @2026. All Right Reserved</p>
|
||||
|
||||
@ -1,29 +1,53 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import Logo from "@/image/logo.png";
|
||||
import { ListIcon } from "@phosphor-icons/react/dist/ssr";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { ListIcon, XIcon } from "@phosphor-icons/react";
|
||||
|
||||
export default function Navbar() {
|
||||
const pathname = usePathname();
|
||||
const [selectedMenu, setSelectedMenu] = useState<string>("#home");
|
||||
const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false);
|
||||
|
||||
const menu = [
|
||||
{ label: "About Us", url: "/" },
|
||||
{ label: "Services", url: "/" },
|
||||
{ label: "Portfolio", url: "/portfolio" },
|
||||
{ label: "Process", url: "/" },
|
||||
{ label: "Kontak", url: "/" },
|
||||
{ label: "About Us", url: "#about-us" },
|
||||
{ label: "Services", url: "#services" },
|
||||
{ label: "Portfolio", url: "#portfolio" },
|
||||
{ label: "Process", url: "#process" },
|
||||
{ label: "Kontak", url: "#kontak" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-white px-4 h-19.5 md:h-18.5 flex items-center w-full justify-between md:py-5.5 md:px-16 sticky top-0 left-0 right-0 z-50">
|
||||
<Link href={"#home"}>
|
||||
<Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" />
|
||||
<ListIcon className="size-8 text-secondary-400 cursor-pointer md:hidden" />
|
||||
</Link>
|
||||
<div className="size-8 cursor-pointer text-secondary-400 md:hidden" onClick={() => setIsOpenMenu(!isOpenMenu)}>
|
||||
{isOpenMenu ? <XIcon className="size-8" /> : <ListIcon className="size-8" />}
|
||||
</div>
|
||||
{isOpenMenu && (
|
||||
<>
|
||||
<div className="absolute w-full h-dvh left-0 bg-black top-18.5 -z-10 opacity-50" />
|
||||
<div className="bg-white absolute top-18.5 w-full flex flex-col left-0">
|
||||
{menu?.map((item) => (
|
||||
<Link
|
||||
href={item?.url}
|
||||
key={item?.label}
|
||||
onClick={() => {
|
||||
setSelectedMenu(item?.url);
|
||||
setIsOpenMenu(!isOpenMenu);
|
||||
}}
|
||||
>
|
||||
<div className={`cursor-pointer px-4 py-4.75 ${selectedMenu === item?.url ? "bg-primary-surface font-semibold text-primary-800" : "text-title font-medium"}`}>{item?.label}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="md:flex gap-7.5 hidden">
|
||||
{menu?.map((item) => (
|
||||
<Link href={item?.url} key={item?.label}>
|
||||
<div className={`font-medium ${pathname === item?.url ? "text-primary-800" : "text-title"}`}>{item?.label}</div>
|
||||
<Link href={item?.url} key={item?.label} onClick={() => setSelectedMenu(item?.url)}>
|
||||
<div className={`font-medium ${selectedMenu === item?.url ? "text-primary-800" : "text-title"}`}>{item?.label}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user