diff --git a/jsconfig.json b/jsconfig.json
index b8d6842..e71b002 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,7 +1,18 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "module": "commonjs",
+    "target": "es2020",
     "paths": {
-      "@/*": ["./src/*"]
+      "@comp/*": ["components/*"],
+      "@styles/*": ["styles/*"],
+      "@assets/*": ["assets/*"],
+      "@ctx/*": ["Contexts/*"],
+      "@img/*": ["assets/images/*"],
+      "@layout/*": ["layout/*"],
+      "@plugins/*": ["plugins/*"]
     }
-  }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.js", "**/*.jsx"],
+  "exclude": ["node_modules"]
 }
diff --git a/package-lock.json b/package-lock.json
index 20a87da..b05f02c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
       "name": "llc",
       "version": "0.1.0",
       "dependencies": {
+        "framer-motion": "^12.4.2",
         "next": "15.1.6",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "swiper": "^11.2.2"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -2608,6 +2610,32 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.4.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.2.tgz",
+      "integrity": "sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA==",
+      "dependencies": {
+        "motion-dom": "^12.0.0",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3633,6 +3661,19 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
+      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA=="
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4984,6 +5025,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.2.tgz",
+      "integrity": "sha512-FmAN6zACpVUbd/1prO9xQ9gKo9cc6RE2UKU/z4oXtS8fNyX4sdOW/HHT/e444WucLJs0jeMId6WjdWM2Lrs8zA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
diff --git a/package.json b/package.json
index 68b807f..720d37c 100644
--- a/package.json
+++ b/package.json
@@ -9,15 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^12.4.2",
+    "next": "15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.1.6"
+    "swiper": "^11.2.2"
   },
   "devDependencies": {
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "@eslint/eslintrc": "^3",
     "eslint": "^9",
     "eslint-config-next": "15.1.6",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/src/app/favicon.ico and /dev/null differ
diff --git a/src/app/globals.css b/src/app/globals.css
deleted file mode 100644
index 6b717ad..0000000
--- a/src/app/globals.css
+++ /dev/null
@@ -1,21 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
diff --git a/src/app/layout.js b/src/app/layout.js
deleted file mode 100644
index 7bf337d..0000000
--- a/src/app/layout.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
-}
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
new file mode 100644
index 0000000..fc33909
--- /dev/null
+++ b/src/app/layout.jsx
@@ -0,0 +1,9 @@
+import "../styles/globals.css";
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/src/app/page.js b/src/app/page.js
deleted file mode 100644
index 61edd89..0000000
--- a/src/app/page.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.js
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}
diff --git a/src/app/page.jsx b/src/app/page.jsx
new file mode 100644
index 0000000..a04732f
--- /dev/null
+++ b/src/app/page.jsx
@@ -0,0 +1,296 @@
+"use client";
+
+import CardNormal from "src/components/Cards/CardNormal/page";
+import Navbar from "../components/NavBar";
+import { Swiper, SwiperSlide } from "swiper/react";
+import ban1 from "../assets/images/ban1.jpg";
+import ban2 from "../assets/images/ban2.png";
+import logo from "../assets/images/logo.png";
+import "swiper/css";
+import Image from "next/image";
+
+export default function Home() {
+  const data = [
+    {
+      id: 1,
+      persianName: "Hydrating Cream",
+      englishName: "Hydrating Cream",
+      description:
+        "A deeply moisturizing cream that keeps your skin hydrated all day long.",
+      cost: 250000,
+      costWithDiscount: 200000,
+      hasDiscount: true,
+      discountPercent: 20,
+      stock: 5,
+      mainImage: "4",
+    },
+    {
+      id: 2,
+      persianName: "Hair Strengthening Shampoo",
+      englishName: "Hair Strengthening Shampoo",
+      description:
+        "A nourishing shampoo that strengthens hair roots and prevents hair fall.",
+      cost: 180000,
+      costWithDiscount: 150000,
+      hasDiscount: true,
+      discountPercent: 17,
+      stock: 2,
+      mainImage: "3",
+    },
+    {
+      id: 3,
+      persianName: "Vitamin C Serum",
+      englishName: "Vitamin C Serum",
+      description:
+        "An antioxidant-rich serum that brightens skin and reduces signs of aging.",
+      cost: 300000,
+      costWithDiscount: 270000,
+      hasDiscount: true,
+      discountPercent: 10,
+      stock: 3,
+      mainImage: "1",
+    },
+    {
+      id: 4,
+      persianName: "Charcoal Face Mask",
+      englishName: "Charcoal Face Mask",
+      description:
+        "A detoxifying mask that removes impurities and unclogs pores for a fresh look.",
+      cost: 220000,
+      costWithDiscount: 220000,
+      hasDiscount: false,
+      discountPercent: 0,
+      stock: 8,
+      mainImage: "4",
+    },
+    {
+      id: 5,
+      persianName: "Body Lotion",
+      englishName: "Body Lotion",
+      description:
+        "A lightweight body lotion that nourishes and hydrates dry skin.",
+      cost: 210000,
+      costWithDiscount: 185000,
+      hasDiscount: true,
+      discountPercent: 12,
+      stock: 6,
+      mainImage: "2",
+    },
+    {
+      id: 6,
+      persianName: "Aloe Vera Gel",
+      englishName: "Aloe Vera Gel",
+      description:
+        "A soothing gel enriched with aloe vera to calm irritated skin.",
+      cost: 160000,
+      costWithDiscount: 160000,
+      hasDiscount: false,
+      discountPercent: 0,
+      stock: 10,
+      mainImage: "3",
+    },
+    {
+      id: 7,
+      persianName: "Sunscreen SPF 50",
+      englishName: "Sunscreen SPF 50",
+      description:
+        "A broad-spectrum sunscreen that protects against UV rays and prevents sunburn.",
+      cost: 280000,
+      costWithDiscount: 230000,
+      hasDiscount: true,
+      discountPercent: 18,
+      stock: 4,
+      mainImage: "1",
+    },
+    {
+      id: 8,
+      persianName: "Face Cleanser",
+      englishName: "Face Cleanser",
+      description:
+        "A gentle face cleanser that removes dirt and oil without stripping moisture.",
+      cost: 190000,
+      costWithDiscount: 170000,
+      hasDiscount: true,
+      discountPercent: 10,
+      stock: 7,
+      mainImage: "2",
+    },
+    {
+      id: 9,
+      persianName: "Moisturizing Cream",
+      englishName: "Moisturizing Cream",
+      description:
+        "A rich cream that provides deep hydration for soft and smooth skin.",
+      cost: 260000,
+      costWithDiscount: 260000,
+      hasDiscount: false,
+      discountPercent: 0,
+      stock: 9,
+      mainImage: "4",
+    },
+    {
+      id: 10,
+      persianName: "Eye Serum",
+      englishName: "Eye Serum",
+      description:
+        "A lightweight eye serum that reduces puffiness and dark circles.",
+      cost: 350000,
+      costWithDiscount: 310000,
+      hasDiscount: true,
+      discountPercent: 12,
+      stock: 5,
+      mainImage: "3",
+    },
+  ];
+  const slides = [
+    {
+      id: 1,
+      image: "/images/slide1.jpg",
+      alt: "Slide 1",
+      title: "Discover the Best Products",
+      description:
+        "Find high-quality beauty and skincare items at unbeatable prices.",
+    },
+    {
+      id: 2,
+      image: "/images/slide2.jpg",
+      alt: "Slide 2",
+      title: "Exclusive Discounts",
+      description: "Enjoy special deals and save big on your favorite brands.",
+    },
+    {
+      id: 3,
+      image: "/images/slide3.jpg",
+      alt: "Slide 3",
+      title: "Fast & Secure Delivery",
+      description:
+        "Get your products delivered quickly and safely to your doorstep.",
+    },
+  ];
+
+  return (
+    <div className=" text-center text-6xl">
+      {" "}
+      <Navbar theme={1} />
+      {/* <div className="mt-20">
+        <div className="grid grid-cols-3"></div>
+      </div> */}
+      <div className="xs:px-3 lg:px-20 mt-10">
+        <Swiper className="mySwiper ">
+          <SwiperSlide>
+            <div className="rounded-2xl overflow-hidden">
+              <Image src={ban1} className="object-cover" />
+            </div>
+          </SwiperSlide>
+          <SwiperSlide>
+            {" "}
+            <div className="rounded-2xl overflow-hidden">
+              <Image src={ban2} />
+            </div>
+          </SwiperSlide>
+        </Swiper>
+      </div>
+      <div className="mt-[120px]">
+        <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
+          <div className="grid grid-cols-3 gap-5">
+            <div className="text-left relative mb-10 col-span-2">
+              <h2 className="text-[30px] font-bold relative z-10">
+                ADVANCED HORIZON SERVICES LLC Products{" "}
+              </h2>
+              <p className="mb-0 text-sm text-gray-400">
+                Lorem ipsum dolor sit amet
+              </p>
+
+              <p className="mb-0 text-base mt-5">
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                Voluptates quas, exercitationem expedita libero hic
+                necessitatibus et sed aliquam consequatur repellendus dolore,
+                molestiae earum culpa fuga nobis odit, eligendi eius dolorem!
+                <br />
+                <br />
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                Voluptates quas, exercitationem expedita libero hic
+                necessitatibus et sed aliquam consequatur repellendus dolore,
+                molestiae earum culpa fuga nobis odit, eligendi eius dolorem!
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                Voluptates quas, exercitationem expedita libero hic
+                necessitatibus et sed aliquam consequatur repellendus dolore,
+                molestiae earum culpa fuga nobis odit, eligendi eius dolorem!
+              </p>
+
+              <button className="btn btn-primary text-sm p-3 px-10">
+                {" "}
+                Learn more about us
+              </button>
+            </div>
+
+            <div className="">
+              <Image src={logo} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-[120px]">
+        <div className="w-full bg-couner-data-landing">
+          <div className="grid grid-cols-3">
+            <div className="my-20">
+              <p className="mb-0 text-[12px] text-gray-300">
+                Lorem ipsum dolor{" "}
+              </p>
+              <h3 className="mb-0 text-4xl text-gray-300 font-bold">
+                Test For Fake Data
+              </h3>
+              <p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">500</p>
+            </div>
+
+            <div className="mt-20">
+              <p className="mb-0 text-[12px] text-gray-300">
+                Lorem ipsum dolor{" "}
+              </p>
+              <h3 className="mb-0 text-4xl text-gray-300 font-bold">
+                Test In Landing Page
+              </h3>
+
+              <p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
+                5,523,222
+              </p>
+            </div>
+
+            <div className="mt-20">
+              <p className="mb-0 text-[12px] text-gray-300">
+                Lorem ipsum dolor{" "}
+              </p>
+              <h3 className="mb-0 text-4xl text-gray-300 font-bold">
+                Test For Fake
+              </h3>
+              <p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
+                +225{" "}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-[120px]">
+        <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
+          <div className="text-left relative mb-10">
+            <h2 className="text-[30px] font-bold relative z-10">
+              ADVANCED HORIZON SERVICES LLC Products{" "}
+            </h2>
+            <p className="mb-0 text-sm text-gray-400">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              Corporis,{" "}
+            </p>
+          </div>
+
+          <div className="grid  xs:grid-cols-2 lg:grid-cols-5 gap-5">
+            {data?.map((e, index) => (
+              <div key={index} className="relative">
+                <CardNormal data={e} priority />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/assets/images/ban1.jpg b/src/assets/images/ban1.jpg
new file mode 100644
index 0000000..4fbda00
Binary files /dev/null and b/src/assets/images/ban1.jpg differ
diff --git a/src/assets/images/ban2.png b/src/assets/images/ban2.png
new file mode 100644
index 0000000..96eb33b
Binary files /dev/null and b/src/assets/images/ban2.png differ
diff --git a/src/assets/images/ban3.png b/src/assets/images/ban3.png
new file mode 100644
index 0000000..ed7ba46
Binary files /dev/null and b/src/assets/images/ban3.png differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..391dc96
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/images/product/1.png b/src/assets/images/product/1.png
new file mode 100644
index 0000000..8f48b03
Binary files /dev/null and b/src/assets/images/product/1.png differ
diff --git a/src/assets/images/product/2.png b/src/assets/images/product/2.png
new file mode 100644
index 0000000..5d1ab9f
Binary files /dev/null and b/src/assets/images/product/2.png differ
diff --git a/src/assets/images/product/3.png b/src/assets/images/product/3.png
new file mode 100644
index 0000000..7770b94
Binary files /dev/null and b/src/assets/images/product/3.png differ
diff --git a/src/assets/images/product/4.png b/src/assets/images/product/4.png
new file mode 100644
index 0000000..44bb98a
Binary files /dev/null and b/src/assets/images/product/4.png differ
diff --git a/src/assets/images/team.jpg b/src/assets/images/team.jpg
new file mode 100644
index 0000000..8e97248
Binary files /dev/null and b/src/assets/images/team.jpg differ
diff --git a/src/components/Cards/CardNormal/page.jsx b/src/components/Cards/CardNormal/page.jsx
new file mode 100644
index 0000000..0709ed5
--- /dev/null
+++ b/src/components/Cards/CardNormal/page.jsx
@@ -0,0 +1,93 @@
+"use client";
+import React, { useContext } from "react";
+import logo from "../../../assets/images/logo.png";
+
+import Image from "next/image";
+import test1 from "../../../assets/images/product/1.png";
+import test2 from "../../../assets/images/product/2.png";
+import test3 from "../../../assets/images/product/3.png";
+import test4 from "../../../assets/images/product/4.png";
+import Link from "next/link";
+
+const CardNormal = ({ data, priority }) => {
+  return (
+    <>
+      {" "}
+      <>
+        <Link href={`/products/${data.id}`}>
+          <div
+            className={` tr03 py-2  overflow-hidden xs:h-[270px] lg:h-[270px] border border-gray-200   ${
+              1 == 1 ? "bg-white  rounded-xl rounded-tl-[40px]" : " opacity-70"
+            }`}
+          >
+            {data.hasDiscount && (
+              <div className="absolute m-3 ">
+                <div className="w-fit rounded-lg bg-red-600 overflow-hidden p-1 ">
+                  <p className="mb-0 text-[10px] text-white  pt-[3px] ">
+                    {data.discountPercent}
+                    <small className="text-[10px] ml-1">%</small>
+                  </p>
+                </div>
+              </div>
+            )}
+
+            <div className="w-full h-fit flex justify-center  ">
+              {!!data.mainImage ? (
+                <Image
+                  src={
+                    data.mainImage == "1"
+                      ? test1
+                      : data.mainImage == "2"
+                      ? test2
+                      : data.mainImage == "3"
+                      ? test3
+                      : data.mainImage == "4"
+                      ? test4
+                      : test1
+                  }
+                  width={200}
+                  height={200}
+                  className="xs:!w-[110px] lg:!w-[130px] mx-auto"
+                  priority={!!priority}
+                  alt={`${data.persianName} - ${data.englishName}`}
+                />
+              ) : (
+                <div className="xs:!w-[85px] lg:!w-[85px] h-[90px] xs:mt-5 lg:mt-10   ">
+                  <Image
+                    src={logo}
+                    className="xs:!w-[70px] lg:!w-[70px]  mx-auto  opacity-25 mt-5"
+                    alt="وسمه"
+                  />
+                </div>
+              )}
+            </div>
+            <div className="p-3 text-left">
+              <p className="mb-0 text-[16px]  max-h-[44px] overflow-hidden font-bold ">
+                {data.englishName}
+              </p>
+
+              <p className="mb-0 text-[13px] text-gray-600 mt-2">
+                {data.description}
+              </p>
+            </div>
+          </div>
+        </Link>
+      </>
+      <div className="relative">
+        <div className="absolute w-full  bottom-0 ">
+          <div className="bg-gray-100 rounded-t-3xl flex ltr  mt-2 border border-gray-100  p-2 ">
+            <div className="flex w-full">
+              <p className="mb-0 text-base font-bold">call</p>
+            </div>
+
+            <div className="w-full  text-right rounded-full pr-2">
+              <p className="mb-0 text-base">see detail</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CardNormal;
diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx
new file mode 100644
index 0000000..2b5bb5b
--- /dev/null
+++ b/src/components/NavBar/index.jsx
@@ -0,0 +1,466 @@
+"use client";
+
+// import { useSubscriber } from "@ctx/SubscriberContext";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useContext, useEffect, useRef, useState } from "react";
+
+import { motion } from "framer-motion";
+
+import { useRouter } from "next/navigation";
+
+import logo from "../../assets/images/logo.png";
+
+const Navbar = ({ theme }) => {
+  const router = useRouter();
+
+  const NavBarData = [
+    {
+      id: 1,
+      name: "Electronics",
+      children: [
+        {
+          id: 101,
+          name: "Laptops",
+        },
+        {
+          id: 102,
+          name: "Smartphones",
+        },
+        {
+          id: 103,
+          name: "Cameras",
+        },
+      ],
+    },
+    {
+      id: 2,
+      name: "Fashion",
+      children: [
+        {
+          id: 201,
+          name: "Men's Clothing",
+        },
+        {
+          id: 202,
+          name: "Women's Clothing",
+        },
+        {
+          id: 203,
+          name: "Accessories",
+        },
+      ],
+    },
+    {
+      id: 3,
+      name: "Home & Kitchen",
+      children: [
+        {
+          id: 301,
+          name: "Furniture",
+        },
+        {
+          id: 302,
+          name: "Decor",
+        },
+        {
+          id: 303,
+          name: "Kitchen Appliances",
+        },
+      ],
+    },
+    {
+      id: 4,
+      name: "Sports",
+      children: [],
+    },
+  ];
+
+  const [closeNavbar, setClosNavbar] = useState(false);
+  const [activeStepNavbar, setActiveStepNavbar] = useState(null);
+
+  const [isScrolled, setIsScrolled] = useState(false);
+  // const [hoverItemNavbar, setHoverItemNavbar] = useState(-1);
+
+  const [responsiveNavBarItemStep, setResponsiveNavBarItemStep] =
+    useState(false);
+  const ref = useRef(null);
+
+  const handleResetFramer = () => {
+    setRestFramer(false);
+    setTimeout(() => {
+      setRestFramer(true);
+    }, 100);
+  };
+
+  const toLeft = {
+    visible: (custom) => ({
+      opacity: ["0", "1"],
+      // y: ["-30%", "0%"],
+      transition: { delay: custom * 0.06 },
+    }),
+  };
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      setIsScrolled(scrollTop > 200);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <>
+      {/* <div className="bg-sky-900 p-3 flex">
+        <p className="mb-0 text-white"> salam</p>
+      </div> */}
+      <div
+        className={` max-[1023px]:hidden  lg:block tr03  ${
+          isScrolled
+            ? "fixed w-full !z-[1000] top-0 tr"
+            : "pt-10 xs:px-10 lg:px-5 xl:px-20 "
+        }`}
+      >
+        <nav
+          className={`  rtl flex justify-between w-full  pr-10  ${
+            isScrolled ? " bg-gray-100 " : " rounded-2xl"
+          }
+          ${theme == 1 ? "bg-gray-100 " : " "}`}
+        >
+          <div className="w-9/12 flex ">
+            <div className="w-[50px] h-[50px]  rounded-xl rounded-tl-[25px] bg-white mt-3">
+              <div className="w-[40px] mx-auto mt-3  ">
+                <Image
+                  src={logo}
+                  width={500}
+                  height={500}
+                  alt="حامیان عدالت"
+                  className="mx-auto "
+                />
+              </div>
+            </div>
+
+            {NavBarData.map((e, index) => (
+              <>
+                <div
+                  key={index}
+                  className={` mx-2 px-2 w-fit text-sm  p-7 ${
+                    1
+                      ? "bg-visa2-200  rounded-full !text-white text-shadow pb-1"
+                      : ""
+                  } `}
+                  onMouseEnter={() => {
+                    // setHoverItemNavbar(index);
+                    setActiveStepNavbar(e.id);
+                  }}
+                  onMouseLeave={() => {
+                    // setHoverItemNavbar(-1);
+                    setActiveStepNavbar(null);
+                  }}
+                  // onClick={() => context.setOpenNavBarServices(false)}
+                >
+                  <Link
+                    href={`/categories/${e.id}/${e.name.split(" ").join("-")}`}
+                    className={` ${isScrolled ? "text-black" : "text-white"}  ${
+                      theme == 1 ? "text-sm !text-black" : " "
+                    }`}
+                  >
+                    {e.name}
+                    {e.children.length > 0 && ""}
+                  </Link>
+
+                  {e.children.length > 0 && e.id == activeStepNavbar && (
+                    <div
+                      className="relative flex justify-center"
+                      // onMouseLeave={() => {
+                      //   setHoverItemNavbar(-1);
+                      // }}
+                    >
+                      <div class="absolute  text-sm z-40  w-[204px]  top-[17px] bg-gray-200 rounded-[26px] p-3 ">
+                        <svg
+                          class="absolute w-20 h-7 -top-[7px] inset-x-0 mx-auto"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 740 155.61"
+                        >
+                          <path
+                            fill={`${isScrolled ? "#f3f4f6" : "#14532D "}`}
+                            d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
+                          ></path>
+                        </svg>
+                        <span class="absolute w-[14px] h-[14px] rounded-full  block bg-gray-200 -top-[6px] inset-x-0 mx-auto"></span>
+
+                        <div>
+                          <ul>
+                            {e.children.map((s, index) => (
+                              <li key={index}>
+                                <Link
+                                  href={`/categories/${s.id}/${s.name
+                                    .split(" ")
+                                    .join("-")}`}
+                                >
+                                  <div className="flex py-2 hover:bg-sky-50 p-2 rounded-2xl cursor-pointer ">
+                                    <div className="w-3 h-3 rounded-full bg-green-900 ml-1 mt-1"></div>
+                                    <p className="mb-0 text-black text-sm ">
+                                      {s.name}
+                                    </p>
+                                  </div>
+                                </Link>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </>
+            ))}
+          </div>
+
+          <div className="w-3/12 ltr p-4 ">
+            <div className="flex">
+              <div className="mr-2 w-fit px-3 p-2  text-sm bg-white flex  rounded-xl ">
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 290 294"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="mr-2 mt-[2px] opacity-80"
+                >
+                  <path
+                    d="M145.214 175.429C171.842 175.429 193.429 153.842 193.429 127.214C193.429 100.586 171.842 79 145.214 79C118.586 79 97 100.586 97 127.214C97 153.842 118.586 175.429 145.214 175.429Z"
+                    stroke="black"
+                    stroke-width="21.4286"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M230.429 282.681C222.316 266.941 210.027 253.739 194.907 244.522C179.787 235.305 162.422 230.429 144.714 230.429C127.007 230.429 109.641 235.305 94.5215 244.522C79.4019 253.739 67.1122 266.941 59 282.681"
+                    stroke="black"
+                    stroke-width="21.4286"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M251.214 226.416C266.421 206.582 275.774 182.888 278.216 158.015C280.658 133.142 276.092 108.082 265.034 85.6691C253.975 63.2561 236.866 44.3846 215.64 31.189C194.415 17.9933 169.921 11 144.929 11C119.936 11 95.4419 17.9933 74.2168 31.189C52.9916 44.3846 35.8823 63.2561 24.8238 85.6691C13.7653 108.082 9.19884 133.142 11.641 158.015C14.0831 182.888 23.4364 206.582 38.6429 226.416"
+                    stroke="black"
+                    stroke-width="21.4286"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+
+                <p className="mb-0">sign in / sing up</p>
+              </div>
+
+              <div className="mr-2 w-fit px-3 p-2  text-sm bg-white flex  rounded-xl ">
+                <p className="mb-0">en</p>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+
+      {/* reponsive navbar */}
+      {/* responsive part */}
+      {/* responsive part */}
+      {/* responsive part */}
+      {/* responsive part */}
+      {/* responsive part */}
+
+      <div
+        className={`sm:block lg:hidden ${
+          isScrolled & !closeNavbar ? "fixed top-0 z-[100] w-full" : " pt-2"
+        }`}
+      >
+        <div
+          className={`bg-gray-100 flex justify-between rtl p-3   ${
+            isScrolled
+              ? " rounded-bl-xl rounded-br-[40px]"
+              : "mx-2 rounded-xl rounded-br-[40px]"
+          }`}
+        >
+          {/* <Link href={"/"} className="w-full"> */}
+          <div className="  w-full mx-1 flex  ">
+            <div className="xs:w-[60px] md:w-[100px] xs:mt-[5px]  mt-[12px] ">
+              <Image
+                src={logo}
+                width={500}
+                height={500}
+                alt="llc"
+                className="mx-auto"
+              />
+            </div>
+          </div>
+          {/* </Link> */}
+          <div
+            className=" p-3 w-full mx-1 text-left"
+            onClick={() => setClosNavbar(true)}
+          >
+            <svg
+              width="30"
+              height="30"
+              viewBox="0 0 235 124"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="mr-auto opacity-65"
+            >
+              <path
+                d="M160.75 124C152.328 124 145.5 117.172 145.5 108.75V108.75C145.5 100.327 152.328 93.4995 160.75 93.4995L219.75 93.4995C228.172 93.4995 235 100.327 235 108.75V108.75C235 117.172 228.172 124 219.75 124L160.75 124ZM88.4999 26.4998C81.3202 26.4998 75.5 20.6795 75.5 13.4999V13.4999C75.5 6.32025 81.3202 0.499997 88.4999 0.499997L222 0.499997C229.18 0.499997 235 6.32025 235 13.4999V13.4999C235 20.6795 229.18 26.4998 222 26.4998L88.4999 26.4998ZM13 72.4996C6.09643 72.4996 0.499998 66.9031 0.499997 59.9996V59.9996C0.499997 53.096 6.09643 47.4996 13 47.4996L222.5 47.4996C229.404 47.4996 235 53.096 235 59.9996V59.9996C235 66.9031 229.404 72.4996 222.5 72.4996L13 72.4996Z"
+                fill="black"
+                fill-opacity="0.73"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      {closeNavbar && (
+        <div className="absolute w-full h-screen top-0 opacity-90 z-[80]">
+          <div className="bg-gray-900 h-screen fixed w-full p-4 "></div>
+        </div>
+      )}
+
+      <div className="sm:block lg:hidden ">
+        <div
+          className={`fixed w-[250px] top-0 left-0  tr03  !z-[200] ${
+            closeNavbar ? "" : "-translate-x-full"
+          } `}
+        >
+          <div
+            className={`absolute  mt-2  tr03 z-5  ${
+              closeNavbar ? "ml-[255px] " : "ml-[-30px]"
+            }`}
+          >
+            <div
+              className="bg-white w-10 h-10 rounded-full pt-3"
+              onClick={() => setClosNavbar(false)}
+            >
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 167 168"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="mx-auto  opacity-60"
+              >
+                <path
+                  d="M95.5795 83.3674L164.663 14.2841C166.028 12.6899 166.741 10.6393 166.66 8.54198C166.579 6.44468 165.71 4.45519 164.226 2.97107C162.742 1.48695 160.752 0.617511 158.655 0.536501C156.558 0.455492 154.507 1.16888 152.913 2.5341L83.8295 71.6174L14.7462 2.45076C13.177 0.881567 11.0487 0 8.82953 0C6.61035 0 4.48206 0.881567 2.91286 2.45076C1.34366 4.01996 0.462098 6.14825 0.462098 8.36743C0.462098 10.5866 1.34366 12.7149 2.91286 14.2841L72.0795 83.3674L2.91286 152.451C2.04051 153.198 1.33201 154.117 0.831818 155.151C0.331624 156.185 0.050539 157.311 0.00620993 158.459C-0.0381192 159.606 0.15526 160.751 0.574214 161.82C0.993169 162.889 1.62865 163.861 2.44078 164.673C3.2529 165.485 4.22413 166.12 5.2935 166.539C6.36288 166.958 7.50732 167.152 8.65497 167.107C9.80263 167.063 10.9287 166.782 11.9626 166.282C12.9965 165.782 13.9158 165.073 14.6629 164.201L83.8295 95.1174L152.913 164.201C154.507 165.566 156.558 166.279 158.655 166.198C160.752 166.117 162.742 165.248 164.226 163.764C165.71 162.28 166.579 160.29 166.66 158.193C166.741 156.096 166.028 154.045 164.663 152.451L95.5795 83.3674Z"
+                  fill="black"
+                />
+              </svg>
+            </div>
+          </div>
+          <div className=" bg-white h-[100vh] !relative !overflow-auto tr03 shadow pt-2 rounded-tr-[60px] !z-90  ">
+            <div className="text-center">
+              <div className=" bg-dark rounded-full mx-auto ">
+                <div className="text-center">
+                  {/* <Link href="/"> */}
+                  <div className="text-center mt-[15px]  w-[150px] mx-auto ">
+                    <Image
+                      src={logo}
+                      width={500}
+                      height={500}
+                      alt="llc"
+                      className="mx-auto"
+                    />
+                  </div>
+
+                  {/* </Link> */}
+
+                  <div className="w-[100px] h-[1px] bg-gray-300  mx-auto mt-4 opacity-50"></div>
+                </div>
+              </div>
+
+              <div className="mx-3">
+                <div>
+                  {NavBarData.map((e, index) => (
+                    <>
+                      <motion.div
+                        custom={index}
+                        animate="visible"
+                        variants={toLeft}
+                        key={index}
+                      >
+                        {/* <Link href={e.url}> */}
+                        <>
+                          <div
+                            className="text-center mt-2 text-sm  bg-gray-100 rounded-xl shadow-sm p-2 rtl"
+                            onClick={() => {
+                              if (e.children.length > 0) {
+                                setResponsiveNavBarItemStep(index);
+
+                                setActiveStepNavbar(e.id);
+                              }
+                            }}
+                          >
+                            <span>
+                              {e.name}
+                              <small className="absolute left-0 mx-7 ">
+                                {e.children.length > 0 ? (
+                                  <div>
+                                    <svg
+                                      width="7"
+                                      height="7"
+                                      viewBox="0 0 151 89"
+                                      fill="none"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      className="mt-[6px]"
+                                    >
+                                      <path
+                                        d="M13.0444 13.1674L75.3606 75.8506L138.044 13.5345"
+                                        stroke="#424242"
+                                        stroke-opacity="0.81"
+                                        stroke-width="25"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                      />
+                                    </svg>
+                                  </div>
+                                ) : (
+                                  ""
+                                )}
+                              </small>
+                            </span>
+                          </div>
+                        </>
+                        {/* </Link>{" "} */}
+                      </motion.div>
+
+                      {responsiveNavBarItemStep === index &&
+                        e.children.length > 0 &&
+                        e.id == activeStepNavbar && (
+                          <div>
+                            <div className="my-3 ">
+                              {e.children.map((s, index) => (
+                                // <Link href={s.url} key={index}>
+                                <div
+                                  className="bg-primary-50 rounded-lg my-1 p-2 "
+                                  key={index}
+                                >
+                                  <p className="mb-0 text-sm">{s.name}</p>
+                                </div>
+                                // </Link>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                    </>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Navbar;
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 0000000..9547371
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn {
+    @apply py-2 px-4 rounded-xl transition-all shadow-lg border-2;
+  }
+
+  .btn-primary {
+    @apply bg-primary-900 text-white;
+  }
+  .btn-primary:hover {
+    @apply bg-primary-700;
+  }
+
+  .btn-outline-primary {
+    @apply border border-primary-900 text-primary-900 p-2;
+  }
+  .btn-outline-primary:hover {
+    @apply bg-primary-700 text-white;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary-900 text-white;
+  }
+
+  .btn-light {
+    @apply bg-gray-100 text-black;
+  }
+  .btn-light:hover {
+    @apply bg-gray-300 text-black;
+  }
+
+  .btn-outline-light {
+    @apply border border-gray-100 text-white;
+  }
+  .btn-outline-light:hover {
+    @apply bg-gray-100 text-black;
+  }
+
+  .btn-secondary:hover {
+    @apply bg-secondary-700;
+  }
+
+  .btn-info {
+    @apply bg-info-100 text-white;
+  }
+  .btn-info:hover {
+    @apply bg-info-200;
+  }
+
+  .form-control {
+    @apply !appearance-none !border-[2px] !bg-white !border-gray-300 !rounded-lg !w-full !py-3 px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none;
+  }
+}
+
+.tr2 {
+  transition: 2s;
+}
+
+.tr03 {
+  transition: 0.3s all;
+}
+
+.rtl {
+  direction: rtl;
+}
+
+.ltr {
+  direction: ltr;
+}
+
+.bg-couner-data-landing {
+  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
+    url(../assets/images/team.jpg);
+  background-position: bottom;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
diff --git a/src/utils/Chapar/index.jsx b/src/utils/Chapar/index.jsx
new file mode 100644
index 0000000..e60c893
--- /dev/null
+++ b/src/utils/Chapar/index.jsx
@@ -0,0 +1,45 @@
+import axios from "axios";
+
+export const getToken = () => {
+  return localStorage.getItem("token");
+};
+
+const Chapar = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+  timeout: 100000,
+  headers: {
+    "Content-type": "application/json",
+    "Access-Control-Allow-Origin": "*",
+  },
+});
+
+// Request interceptor to conditionally add token to headers
+Chapar.interceptors.request.use(
+  (config) => {
+    const token = getToken();
+    if (token && !config.isPublic) {
+      config.headers.Authorization = "Bearer" + " " + token;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor to handle responses
+// Chapar.interceptors.response.use(
+//   (response) => {
+//     return response.data;
+//   },
+//   (error) => {
+//     const status = error?.response?.status;
+//     if (status === 401) {
+//       localStorage.removeItem("token");
+//       window.location.href = "/login";
+//     }
+//     return Promise.reject({ error, status });
+//   }
+// );
+
+export default Chapar;
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index d1a9803..67258cf 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -8,8 +8,80 @@ export default {
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        backgroundPrimary: {
+          100: "#FFFBE6",
+        },
+        primary: {
+          50: "#fff5f5",
+          100: "#fce8e8",
+          200: "#f6caca",
+          300: "#eaa9a9",
+          400: "#e18c8c",
+          500: "#cc7575",
+          600: "#b06060",
+          700: "#914e4e",
+          800: "#733d3d",
+          900: "#5a2f2f",
+          950: "#3a1d1d",
+        },
+        secondary: {
+          50: "#f6f6f6",
+          100: "#eaeaea",
+          200: "#d5d5d5",
+          300: "#b8b8b8",
+          400: "#999999",
+          500: "#7f7f7f",
+          600: "#666666",
+          700: "#4d4d4d",
+          800: "#333333",
+          900: "#1f1f1f",
+          950: "#0f0f0f",
+        },
+        textMain: {
+          100: "#444444",
+        },
+        mainDisable: {
+          100: "#888888",
+        },
+        info: {
+          100: "#2B91EF",
+          200: "#0061bd",
+        },
+        danger: {
+          100: "#FF2C2C",
+        },
+        body: {
+          100: "#EEEEEE",
+        },
+      },
+    },
+
+    screens: {
+      xs: "290px",
+      sm: "640px",
+      // => @media (min-width: 640px) { ... }
+
+      md: "768px",
+      // => @media (min-width: 768px) { ... }
+
+      lg: "1024px",
+      // => @media (min-width: 1024px) { ... }
+
+      xl: "1440px",
+      // => @media (min-width: 1280px) { ... }
+
+      "2xl": "1536px",
+      // => @media (min-width: 1536px) { ... }
+    },
+
+    animation: {
+      "infinite-scroll": "infinite-scroll 200s linear infinite",
+    },
+
+    keyframes: {
+      "infinite-scroll": {
+        from: { transform: "translateX(0)" },
+        to: { transform: "translateX(-100%)" },
       },
     },
   },