Implement Top Navigation

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
     "@radix-ui/react-slot": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -38,4 +39,4 @@
     "typescript": "^5"
   },
   "packageManager": "pnpm@9.5.0"
-}
+}

src/app/components/top-navigation/index.ts

@@ -0,0 +1 @@
+export * from "./top-navigation";

src/app/components/top-navigation/navigationData.d.ts

@@ -0,0 +1 @@
+export type NavigationDataType = { content: string; link: string };

src/app/components/top-navigation/top-navigation.tsx

@@ -0,0 +1,44 @@
+import FrontChapter from "@/components/logos/front-chapter";
+import { Button } from "@/components/ui/button";
+import {
+  NavbarCenter,
+  Navbar as NavbarComponent,
+  NavbarLeft,
+  NavbarRight,
+} from "@/components/ui/navbar";
+import Navigation from "@/components/ui/navigation";
+import { TicketIcon } from "lucide-react";
+import Link from "next/link";
+
+export default function TopNavigation() {
+  return (
+    <header className="sticky top-0 z-50 -mb-4 px-4 pb-4">
+      <div className="fade-bottom absolute left-0 h-24 w-full bg-background backdrop-blur-lg dark:bg-background-dark"></div>
+      <div className="relative mx-auto max-w-container">
+        <NavbarComponent>
+          <NavbarLeft>
+            <Link
+              href="/"
+              className="flex items-center gap-2 text-xl font-bold"
+            >
+              <FrontChapter />
+              فرانت چپتر
+            </Link>
+          </NavbarLeft>
+          <NavbarCenter className="hidden h-11 w-96 rounded-[12px] border border-[#09090B]/10 dark:border-white/10 md:flex">
+            <Navigation />
+          </NavbarCenter>
+
+          <NavbarRight>
+            <Button variant="glow" size="lg" className="flex gap-2">
+              <TicketIcon className="h-4 w-4" />
+              <Link href="https://frontchapter.ir/product/conf1403/">
+                خرید بلیت
+              </Link>
+            </Button>
+          </NavbarRight>
+        </NavbarComponent>
+      </div>
+    </header>
+  );
+}

src/app/globals.css

@@ -6,7 +6,28 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground dark:bg-background-dark dark:text-foreground-dark;
   }
 }
+
+@layer components {
+
+  .glass-1 {
+    @apply border border-border/20 border-b-border/5 bg-gradient-to-b from-[#09090B]/5 to-[#09090B]/20 dark:border-b-0 dark:border-border/5 dark:border-t-border/20 dark:from-white/5 dark:to-white/20;
+  }
+
+  .glass-2 {
+    @apply border border-border/20 border-b-border/5 bg-gradient-to-b from-[#09090B]/20 to-[#09090B]/5 dark:border-b-0 dark:border-border/5 dark:border-t-border/20 dark:from-white/20 dark:to-white/5;
+  }
+
+
+  .dark-glass-1 {
+    @apply border border-border/80 border-b-input/90 bg-gradient-to-b from-[#27272A]/60 to-[#27272A]/20 dark:border-b-0 dark:border-border/5 dark:border-t-border/20 dark:from-white/10 dark:to-white/5;
+  }
+
+  .dark-glass-2 {
+    @apply border border-border/100 border-b-input bg-gradient-to-b from-[#27272A]/100 to-[#27272A]/20 dark:border-b-0 dark:border-border/5 dark:border-t-border/20 dark:from-white/15 dark:to-white/5;
+  }
+}

src/app/page.tsx

@@ -1,15 +1,17 @@
 import Sponsors from "./components/Sponsors/Sponsors";
+import TopNavigation from "./components/top-navigation/top-navigation";
 import FAQ from "@/app/components/FAQ/FAQ";
 import TweetSection from "@/app/components/TweetSection/TweetSection";
 import Speakers from "@/app/components/speakers/Speakers";
 
 export default function Home() {
   return (
     <>
+      <TopNavigation />
       <Speakers />
+      <Sponsors />
       <TweetSection />
       <FAQ />
-      <Sponsors />
     </>
   );
 }

src/components/logos/front-chapter.tsx

@@ -0,0 +1,20 @@
+const FrontChapter = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width={24}
+    height={28}
+    viewBox="0 0 24 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M14.1694 7.875H9.6431C6.78437 7.875 5.355 7.875 4.74556 8.99768C4.13612 10.1204 4.71632 11.6847 5.87672 14.8132L8.70483 22.4382C10.0801 26.1461 10.7677 28 11.9062 28C12.4002 28 12.8093 27.6511 13.2264 26.9532C13.4528 26.5746 13.4533 26.0725 13.2731 25.6599L12.3016 23.4344C12.0901 22.9501 11.9844 22.708 12.0746 22.5296C12.1649 22.3512 12.393 22.3512 12.8494 22.3512H14.4032C14.8512 22.3512 15.2572 22.0352 15.439 21.5449L16.4801 18.7379C16.7337 18.0542 16.4774 17.2537 15.9071 16.9482L12.0738 14.8949C11.5665 14.6231 11.7284 13.7149 12.2842 13.7149H17.5998C18.0502 13.7149 18.4599 13.3961 18.6337 12.8985C19.2994 10.9922 19.537 9.86357 19.0669 8.99768C18.4575 7.875 17.0281 7.875 14.1694 7.875Z"
+      fill="#F97316"
+    />
+    <path
+      d="M12.0071 6.9979C10.9641 7.00336 10.091 6.72656 9.3161 6.03821C8.64975 5.44622 8.25114 4.63913 8.03064 3.68827C7.92483 3.23209 7.8562 2.7675 7.87957 2.2878C7.88668 2.14175 7.92543 2.06432 8.05275 2.0681C8.86063 2.09149 9.62555 2.29073 10.2889 2.8931C10.3626 2.96002 10.3796 2.9183 10.397 2.85179C10.4292 2.72914 10.4528 2.60312 10.4834 2.47976C10.652 1.80151 10.9778 1.23611 11.3404 0.696754C11.496 0.465301 11.6663 0.251072 11.8434 0.0441239C11.8935 -0.0144043 11.9257 -0.0151045 11.9751 0.0444037C12.5826 0.778245 13.1229 1.56599 13.3608 2.59878C13.3686 2.63252 13.3737 2.66711 13.3794 2.70141C13.4208 2.95316 13.4428 2.96031 13.6086 2.81259C13.958 2.50146 14.3589 2.33428 14.7742 2.21582C15.0998 2.12285 15.4273 2.04262 15.7661 2.06614C15.8812 2.07412 15.9368 2.12635 15.9374 2.26987C15.9436 3.61043 15.6074 4.79387 14.8053 5.72808C14.269 6.35269 13.6162 6.73144 12.8795 6.88842C12.5575 6.95731 12.2366 7.0115 12.0071 6.9979Z"
+      fill="#22C55E"
+    />
+  </svg>
+);
+export default FrontChapter;

src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { cn } from "@/lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "text-white -foreground shadow dark:hover:from-white/80 hover:from-white/70 dark:hover:to-white/70 hover:to-white/90 bg-gradient-to-b from-white/60 to-white/100 dark:from-white/100 dark:to-white/70 border-t-white",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent",
+        glow: "glass-1 dark:dark-glass-1 hover:glass-2 dark:hover:dark-glass-2 shadow-md",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-foreground underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        xs: "h-7 rounded-md px-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-5",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };