project setup

2025-11-02 10:00:53 +01:00
parent 75bd171804
commit 7cb4c5345e
51 changed files with 3616 additions and 0 deletions
@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+import Button from "@/components/Button";
+
+interface GetStartedButtonProps {
+  onClick?: () => void;
+}
+
+const GetStartedButton = ({ onClick }: GetStartedButtonProps) => {
+  return (
+    <Link href="/get-started" onClick={onClick}>
+      <Button text="Get Started" />
+    </Link>
+  );
+};
+
+export default GetStartedButton;
@@ -0,0 +1,51 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+interface NavLinksProps {
+  mobile?: boolean;
+  onLinkClick?: () => void;
+}
+
+const NavLinks = ({ mobile = false, onLinkClick }: NavLinksProps) => {
+  const pathname = usePathname();
+
+  const containerClass = mobile
+    ? "flex flex-col items-center gap-4 text-lg min-[828px]:flex-row min-[828px]:gap-6"
+    : "hidden md:flex items-center gap-8 text-lg";
+
+  return (
+    <nav className={containerClass}>
+      <Link href="/services" onClick={onLinkClick}>
+        <span
+          className={`${
+            pathname === "/services" && "text-[var(--color-8)]"
+          } font-mono`}
+        >
+          Service
+        </span>
+      </Link>
+      <Link href="/about" onClick={onLinkClick}>
+        <span
+          className={`${
+            pathname === "/about" && "text-[var(--color-8)]"
+          } font-mono`}
+        >
+          About us
+        </span>
+      </Link>
+      <Link href="/contact" onClick={onLinkClick}>
+        <span
+          className={`${
+            pathname === "/contact" && "text-[var(--color-8)]"
+          } font-mono`}
+        >
+          Contact
+        </span>
+      </Link>
+    </nav>
+  );
+};
+
+export default NavLinks;
@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { usePathname } from "next/navigation";
+import { Menu, X } from "lucide-react";
+
+import NavLinks from "@/components/navigation/NavLinks";
+import SiteLogo from "@/components/navigation/SiteLogo";
+import GetStartedButton from "@/components/navigation/GetStartedButton";
+
+const Navbar = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const pathname = usePathname();
+
+  const isGetStartedPage = pathname === "/get-started";
+  const isHeroOrAboutPage = pathname === "/" || pathname === "/about";
+  const isAboutPage = pathname === "/about";
+
+  return (
+    <header
+      className={`relative z-50 ${
+        isHeroOrAboutPage ? "bg-transparent" : "bg-[var(--color-1)]"
+      }`}
+    >
+      <nav className="flex items-center h-[75px] px-6 md:px-12 relative">
+        <div className="flex-shrink-0" onClick={() => setMenuOpen(false)}>
+          <SiteLogo />
+        </div>
+
+        <div className="hidden min-[828px]:flex min-[870px]:hidden items-center gap-6 ml-auto">
+          <NavLinks mobile={true} onLinkClick={() => setMenuOpen(false)} />
+          {!isGetStartedPage && <GetStartedButton />}
+        </div>
+
+        <div
+          className={`hidden min-[870px]:flex ${
+            isGetStartedPage
+              ? "absolute left-1/2 transform -translate-x-1/2"
+              : "flex-1 justify-center transform -translate-x-[7.5%]"
+          }`}
+        >
+          <NavLinks onLinkClick={() => setMenuOpen(false)} />
+        </div>
+
+        <div className="hidden min-[870px]:flex flex-shrink-0">
+          {!isGetStartedPage && <GetStartedButton />}
+        </div>
+
+        <button
+          onClick={() => setMenuOpen(!menuOpen)}
+          className="min-[828px]:hidden absolute right-6 top-1/2 transform -translate-y-1/2 p-2 text-[var(--color-8)]"
+          aria-label="Toggle menu"
+        >
+          {menuOpen ? <X size={26} /> : <Menu size={26} />}
+        </button>
+      </nav>
+
+      {menuOpen && (
+        <div className="min-[828px]:hidden bg-[var(--color-1)] border-t border-[var(--color-2)]">
+          <div className="flex flex-col items-center py-4 space-y-4">
+            <NavLinks mobile={true} onLinkClick={() => setMenuOpen(false)} />
+          </div>
+        </div>
+      )}
+
+      <div
+        className="absolute left-0 right-0 h-[3px] mx-auto w-[87.5%]"
+        style={{
+          background: `${
+            isAboutPage
+              ? "color-mix(in srgb, var(--color-2) 50%, transparent)"
+              : "var(--color-2)"
+          }`,
+        }}
+      />
+    </header>
+  );
+};
+
+export default Navbar;
@@ -0,0 +1,31 @@
+import Image from "next/image";
+import Link from "next/link";
+
+const SiteLogo = () => {
+  return (
+    <Link href="/" className="flex items-center gap-1">
+      <div
+        className="relative overflow-hidden w-[100px] h-[100px] sm:w-[120px] sm:h-[120px] lg:w-[150px] lg:h-[150px]"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Image
+          src="/assets/images/logo_no_bg.png"
+          alt="Logo"
+          width={150}
+          height={150}
+          priority
+          style={{ objectFit: "contain", marginTop: 4 }}
+        />
+      </div>
+      <span className="font-mono text-xl sm:text-2xl lg:text-3xl z-100">
+        LAN CODES
+      </span>
+    </Link>
+  );
+};
+
+export default SiteLogo;