add font face and create navbar component

src/app/globals.css

@@ -3,8 +3,8 @@
 
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-200-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-200-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-200-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-200-normal.woff') format('woff');
   font-weight: 200;
   font-style: normal;
 }
@@ -12,43 +12,43 @@
 
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-300-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-300-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-300-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-300-normal.woff') format('woff');
   font-weight: 300;
   font-style: normal;
 }
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-400-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-400-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-400-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-400-normal.woff') format('woff');
   font-weight: 400;
   font-style: normal;
 }
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-500-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-500-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-500-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-500-normal.woff') format('woff');
   font-weight: 500;
   font-style: normal;
 }
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-600-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-600-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-600-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-600-normal.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-700-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-700-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-700-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-700-normal.woff') format('woff');
   font-weight: 700;
   font-style: normal;
 }
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-800-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-800-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-800-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-800-normal.woff') format('woff');
   font-weight: 800;
   font-style: normal;
 }
@@ -59,7 +59,7 @@
 }
 
 :root {
-  --primary: #6366F1;
+  --primary: #FA003F;
   --secondary: #A78BFA;
   --textColorLight: #FFFFFF;
   --textColorGray: #222222;

src/app/page.tsx

@@ -1,5 +1,5 @@
 // ... existing imports ...
-import Button from '../components/Button'; // Adjust the import path if necessary
+import Navbar from '@/components/layout/navbar';
 
 async function getData() {
   // Simulate a delay to show server-side data fetching
@@ -11,45 +11,8 @@ export default async function Home() {
   const data = await getData();
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24 text-gray-300">
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          {data.message}
-        </p>
-      </div>
-
-      <div className="mt-8 flex gap-4">
-        <Button>Default Button</Button>
-        <Button disabled>Disabled Button</Button>
-        <Button loading>Loading Button</Button>
-        <Button endIcon={<span>→</span>}>Button with Icon</Button>
-      </div>
-
-      <div className="mt-8 flex flex-col gap-4">
-        <h3>Standard Buttons:</h3>
-        <div className="flex gap-4">
-          <Button>Default Button</Button>
-          <Button disabled>Disabled Button</Button>
-          <Button loading>Loading Button</Button>
-          <Button endIcon={<span>→</span>}>Button with Icon</Button>
-        </div>
-
-        <h3>Sized Buttons:</h3>
-        <div className="flex gap-4 items-center">
-          <Button size="small">Small Button</Button>
-          <Button size="medium">Medium Button</Button>
-          <Button size="large">Large Button</Button>
-        </div>
-
-        <h3>Icon Buttons:</h3>
-        <div className="flex gap-4 items-center">
-          <Button iconOnly endIcon={<span>←</span>} size="small" />
-          <Button iconOnly endIcon={<span>←</span>} size="medium" />
-          <Button iconOnly endIcon={<span>←</span>} size="large" />
-          <Button iconOnly endIcon={<span>←</span>} disabled size="medium" />
-          <Button iconOnly endIcon={<span>←</span>} loading size="medium" />
-        </div>
-      </div>
+    <main className=" container mx-auto">
+      <Navbar/>
     </main>
   );
 }

src/components/layout/navbar/index.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+
+  const links = [
+    { href: '/', label: 'درباره' },
+    { href: '/services', label: 'خدمات' },
+    { href: '/blog', label: 'بلاگ' },
+    { href: '/contact', label: 'تماس' },
+  ];
+
+  const linkClass = (href: string) =>
+    pathname === href ? ' text-red-500 font-semibold' : 'text-gray-500';
+
+  return (
+    <nav className="bg-transparent  px-4 py-3 w-full">
+      <div className="max-w-7xl mx-auto flex items-center justify-between">
+        <Link href="/" className="text-xl font-bold ">لوگو</Link>
+
+        <ul className="hidden md:flex space-x-6">
+          {links.map(({ href, label }) => (
+            <li key={href}>
+              <Link href={href} className={`${linkClass(href)} hover:text-primary-light `}>
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+
+        <button className="md:hidden text-gray-700" onClick={() => setOpen(!open)}>
+          {open ? <p>x</p> : <p>menu</p>}
+        </button>
+      </div>
+
+      {open && (
+        <ul className="md:hidden mt-2 space-y-2 px-2">
+          {links.map(({ href, label }) => (
+            <li key={href}>
+              <Link href={href} className={linkClass(href)} onClick={() => setOpen(false)}>
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </nav>
+  );
+}