navbar

samalsubrat · Feb 26, 2024 · 266db6c · 266db6c
1 parent dd1a24f
commit 266db6c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/src/app/components/Aesthetic.tsx b/src/app/components/Aesthetic.tsx
@@ -2,7 +2,7 @@ import Image from "next/image"
 
 const Aesthetic = () => {
   return (
-    <div className="flex overflow-hidden relative flex-col rounded-xl justify-center font-bold h-[600px] min-h-[534px] mb-28 mx-32 max-md:mx-5 max-lg:mx-10 max-xl:mx-16 shadow-white/10 shadow-md">
+    <div className="flex mb-28 overflow-hidden relative flex-col rounded-xl justify-center font-bold h-[600px] min-h-[534px] mb-28` mx-32 max-md:mx-5 max-lg:mx-10 max-xl:mx-16 shadow-white/10 shadow-md">
     <div className="absolute inset-0 size-full top-0">
       <Image
         src="/carou-two.jpg"

diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
@@ -0,0 +1,41 @@
+import Link from "next/link";
+const Navbar = () => {
+  return (
+    // <div className="flex mx-auto z-30 sticky max-w-fit items-center justify-center space-x-2 overflow-hidden rounded-full border border-gray-700 px-7 py-2 shadow-md backdrop-blur-lg transition-all">
+    //   <div className="flex gap-5 items-center z-30">
+    //       <Link href="/" className="flex z-40 font-regular">
+    //          <span>Home</span>
+    //        </Link>
+    //        <Link href="/" className="flex z-40 font-regular">
+    //         <span>Frost</span>
+    //        </Link>
+    //      <Link href="/" className="flex z-40 font-regular">
+    //          <span>Coiled Cable</span>
+    //        </Link>
+    //       <Link href="/" className="flex z-40 font-regular">
+    //         <span>Deskmat</span>
+    //        </Link>
+    //     </div>
+    // </div>
+    <nav className=" flex justify-center mx-auto max-w-fit sticky rounded-full border border-gray-900/20 bg-black/25 top-2 z-30 backdrop-blur-xl transition-all shadow-2xl shadow-white/5 ">
+      <div className="inline-block fit-content text-gray-300 ease-in-out duration-300">
+        <div className="flex gap-5 p-2 px-8 items-center z-30">
+          <Link href="/" className="flex z-40 font-regular hover:font-semibold hover:text-white ease-in-out duration-300">
+            <span>Home</span>
+          </Link>
+          <Link href="/" className="flex z-40 font-regular hover:font-semibold hover:text-white ease-in-out duration-300">
+            <span>Frost</span>
+          </Link>
+          <Link href="/" className="flex z-40 font-regular hover:font-semibold hover:text-white ease-in-out duration-300">
+            <span>Coiled Cable</span>
+          </Link>
+          <Link href="/" className="flex z-40 font-regular hover:font-semibold hover:text-white ease-in-out duration-300">
+            <span>Deskmat</span>
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-
+import Navbar from "./components/Navbar";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -16,7 +16,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      {/* <Navbar></Navbar> */}
+      <body className={inter.className}>
+        <Navbar/>
+        {children}</body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,7 +10,7 @@ import Aesthetic from "./components/Aesthetic";
 export default function Home() {
   return (
     <>
-      <MaxWidthWrapper className="mb-12 mt-28 flex flex-col items-center justify-center text-center">
+      <MaxWidthWrapper className="mb-12 mt-12 flex flex-col items-center justify-center text-center">
         <h1 className="font-bold text-6xl">Arion Coiled Cables</h1>
         <p className="font-bold text-4xl bg-gradient-to-r from-indigo-300 to-indigo-700 bg-clip-text text-transparent mt-2">
           Efficient, aesthetic & durable
@@ -28,6 +28,7 @@ export default function Home() {
       <LongLife />
       <Features />
       <Aesthetic />
+
     </>
   );
 }