safak · ali-khanix · Sep 28, 2025 · Sep 28, 2025 · Sep 28, 2025 · Sep 28, 2025
diff --git a/.gitignore → client/.gitignore b/.gitignore → client/.gitignore
diff --git a/README.md → client/README.md b/README.md → client/README.md
diff --git a/eslint.config.mjs → client/eslint.config.mjs b/eslint.config.mjs → client/eslint.config.mjs
diff --git a/next.config.ts → client/next.config.ts b/next.config.ts → client/next.config.ts
diff --git a/package.json → client/package.json b/package.json → client/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "lucide-react": "^0.544.0",
+    "next": "15.4.5",
     "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "next": "15.4.5"
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.4.5",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }
diff --git a/pnpm-lock.yaml → client/pnpm-lock.yaml b/pnpm-lock.yaml → client/pnpm-lock.yaml
diff --git a/postcss.config.mjs → client/postcss.config.mjs b/postcss.config.mjs → client/postcss.config.mjs
diff --git a/public/cards.png → client/public/cards.png b/public/cards.png → client/public/cards.png
diff --git a/public/featured.png → client/public/featured.png b/public/featured.png → client/public/featured.png
diff --git a/client/public/grand_seiko_banner.webp b/client/public/grand_seiko_banner.webp
diff --git a/public/klarna.png → client/public/klarna.png b/public/klarna.png → client/public/klarna.png
diff --git a/public/logo.png → client/public/logo.png b/public/logo.png → client/public/logo.png
diff --git a/public/products/1g.png → client/public/products/1g.png b/public/products/1g.png → client/public/products/1g.png
diff --git a/public/products/1gr.png → client/public/products/1gr.png b/public/products/1gr.png → client/public/products/1gr.png
diff --git a/public/products/1p.png → client/public/products/1p.png b/public/products/1p.png → client/public/products/1p.png
diff --git a/public/products/2g.png → client/public/products/2g.png b/public/products/2g.png → client/public/products/2g.png
diff --git a/public/products/2gr.png → client/public/products/2gr.png b/public/products/2gr.png → client/public/products/2gr.png
diff --git a/public/products/3b.png → client/public/products/3b.png b/public/products/3b.png → client/public/products/3b.png
diff --git a/public/products/3bl.png → client/public/products/3bl.png b/public/products/3bl.png → client/public/products/3bl.png
diff --git a/public/products/3gr.png → client/public/products/3gr.png b/public/products/3gr.png → client/public/products/3gr.png
diff --git a/public/products/4p.png → client/public/products/4p.png b/public/products/4p.png → client/public/products/4p.png
diff --git a/public/products/4w.png → client/public/products/4w.png b/public/products/4w.png → client/public/products/4w.png
diff --git a/public/products/5bl.png → client/public/products/5bl.png b/public/products/5bl.png → client/public/products/5bl.png
diff --git a/public/products/5o.png → client/public/products/5o.png b/public/products/5o.png → client/public/products/5o.png
diff --git a/public/products/5r.png → client/public/products/5r.png b/public/products/5r.png → client/public/products/5r.png
diff --git a/public/products/6g.png → client/public/products/6g.png b/public/products/6g.png → client/public/products/6g.png
diff --git a/public/products/6w.png → client/public/products/6w.png b/public/products/6w.png → client/public/products/6w.png
diff --git a/public/products/7g.png → client/public/products/7g.png b/public/products/7g.png → client/public/products/7g.png
diff --git a/public/products/7p.png → client/public/products/7p.png b/public/products/7p.png → client/public/products/7p.png
diff --git a/public/products/8b.png → client/public/products/8b.png b/public/products/8b.png → client/public/products/8b.png
diff --git a/public/products/8gr.png → client/public/products/8gr.png b/public/products/8gr.png → client/public/products/8gr.png
diff --git a/public/stripe.png → client/public/stripe.png b/public/stripe.png → client/public/stripe.png
diff --git a/src/app/favicon.ico → client/src/app/favicon.ico b/src/app/favicon.ico → client/src/app/favicon.ico
diff --git a/src/app/globals.css → client/src/app/globals.css b/src/app/globals.css → client/src/app/globals.css
diff --git a/src/app/layout.tsx → client/src/app/layout.tsx b/src/app/layout.tsx → client/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -27,7 +29,11 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <div className="mx-auto p-4 sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-6xl">
+          <Navbar />
+          {children}
+          <Footer />
+        </div>
       </body>
     </html>
   );

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -0,0 +1,18 @@
+import Image from "next/image";
+
+const Homepage = () => {
+  return (
+    <div className="">
+      <div className="relative aspect-[3/1]">
+        <Image
+          src="/grand_seiko_banner.webp"
+          alt="ساعت گرند سیکو"
+          fill
+          className="object-cover -"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Homepage;
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
@@ -0,0 +1,48 @@
+import { Watch } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+const Footer = () => {
+  return (
+    <div className="mt-16 flex flex-col items-center gap-8 md:gap-0 md:flex-row md:items-start md:justify-between bg-gray-800 p-8 rounded-lg">
+      <div className="flex flex-col gap-4 items-center md:items-start">
+        <Link href={"/"} className="flex items-center text-white">
+          <Watch
+            width={36}
+            height={36}
+            className="
+        w-6 h-6 md:w-9 md:h-9"
+          />
+          <p className="hidden md:block font-medium text-md tracking-wider">
+            SilverWatch
+          </p>
+        </Link>
+        <p className="text-sm text-gray-400">© 2025 Alikhanix</p>
+        <p className="text-sm text-gray-400">All rights reserved</p>
+      </div>
+      <div className="flex flex-col gap-4 text-sm text-gray-400 items-center md:items-start">
+        <p className="text-sm text-amber-50">Links</p>
+        <Link href={"/"}>Homepage</Link>
+        <Link href={"/"}>Contact</Link>
+        <Link href={"/"}>Terms of Service</Link>
+        <Link href={"/"}>Privacy policy</Link>
+      </div>
+      <div className="flex flex-col gap-4 text-sm text-gray-400 items-center md:items-start">
+        <p className="text-sm text-amber-50">Links</p>
+        <Link href={"/"}>Homepage</Link>
+        <Link href={"/"}>Contact</Link>
+        <Link href={"/"}>Terms of Service</Link>
+        <Link href={"/"}>Privacy policy</Link>
+      </div>
+      <div className="flex flex-col gap-4 text-sm text-gray-400 items-center md:items-start">
+        <p className="text-sm text-amber-50">Links</p>
+        <Link href={"/"}>Homepage</Link>
+        <Link href={"/"}>Contact</Link>
+        <Link href={"/"}>Terms of Service</Link>
+        <Link href={"/"}>Privacy policy</Link>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
@@ -0,0 +1,48 @@
+import Image from "next/image";
+import Link from "next/link";
+import SearchBar from "./SearchBar";
+import { Bell, Home, ShoppingCart, Watch } from "lucide-react";
+
+const Navbar = () => {
+  return (
+    <nav className="w-full flex justify-between items-center border-b border-gray-200 pb-4">
+      {/* Left */}
+      <Link href={"/"} className="flex items-center">
+        {/* <Image
+          src={"/logo.png"}
+          alt="Trend Lama"
+          width={36}
+          height={36}
+          className="w-6 h-6 md:w-9 md:h-9"
+        /> */}
+        <Watch
+          width={36}
+          height={36}
+          className="
+        w-6 h-6 md:w-9 md:h-9"
+        />
+        <p className="hidden md:block font-medium text-md tracking-wider">
+          SilverWatch
+        </p>
+      </Link>
+
+      {/* Right */}
+      <div className="flex items-center gap-6">
+        <SearchBar />
+        <Link href={"/"}>
+          <Home className="w-4 h-4 text-gray-600" />
+        </Link>
+        <Link href={"/"}>
+          <Bell className="w-4 h-4 text-gray-600" />
+        </Link>
+        <Link href={"/"}>
+          <ShoppingCart className="w-4 h-4 text-gray-600" />
+        </Link>
+
+        <Link href={"/login"}>Sign In</Link>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/client/src/components/ProductList.tsx b/client/src/components/ProductList.tsx
@@ -0,0 +1,117 @@
+// TEMPORARY
+const products = [
+  {
+    id: 1,
+    name: "Adidas CoreFit T-Shirt",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 39.9,
+    sizes: ["s", "m", "l", "xl", "xxl"],
+    colors: ["gray", "purple", "green"],
+    images: {
+      gray: "/products/1g.png",
+      purple: "/products/1p.png",
+      green: "/products/1gr.png",
+    },
+  },
+  {
+    id: 2,
+    name: "Puma Ultra Warm Zip",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 59.9,
+    sizes: ["s", "m", "l", "xl"],
+    colors: ["gray", "green"],
+    images: { gray: "/products/2g.png", green: "/products/2gr.png" },
+  },
+  {
+    id: 3,
+    name: "Nike Air Essentials Pullover",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 69.9,
+    sizes: ["s", "m", "l"],
+    colors: ["green", "blue", "black"],
+    images: {
+      green: "/products/3gr.png",
+      blue: "/products/3b.png",
+      black: "/products/3bl.png",
+    },
+  },
+  {
+    id: 4,
+    name: "Nike Dri Flex T-Shirt",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 29.9,
+    sizes: ["s", "m", "l"],
+    colors: ["white", "pink"],
+    images: { white: "/products/4w.png", pink: "/products/4p.png" },
+  },
+  {
+    id: 5,
+    name: "Under Armour StormFleece",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 49.9,
+    sizes: ["s", "m", "l"],
+    colors: ["red", "orange", "black"],
+    images: {
+      red: "/products/5r.png",
+      orange: "/products/5o.png",
+      black: "/products/5bl.png",
+    },
+  },
+  {
+    id: 6,
+    name: "Nike Air Max 270",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 59.9,
+    sizes: ["40", "42", "43", "44"],
+    colors: ["gray", "white"],
+    images: { gray: "/products/6g.png", white: "/products/6w.png" },
+  },
+  {
+    id: 7,
+    name: "Nike Ultraboost Pulse ",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 69.9,
+    sizes: ["40", "42", "43"],
+    colors: ["gray", "pink"],
+    images: { gray: "/products/7g.png", pink: "/products/7p.png" },
+  },
+  {
+    id: 8,
+    name: "Levi’s Classic Denim",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 59.9,
+    sizes: ["s", "m", "l"],
+    colors: ["blue", "green"],
+    images: { blue: "/products/8b.png", green: "/products/8gr.png" },
+  },
+];
+
+const ProductList = () => {
+  return <div>ProductList</div>;
+};
+
+export default ProductList;
diff --git a/client/src/components/SearchBar.tsx b/client/src/components/SearchBar.tsx
@@ -0,0 +1,16 @@
+import { Search } from "lucide-react";
+
+const SearchBar = () => {
+  return (
+    <div className="hidden sm:flex items-center gap-2 rounded-md ring-1 ring-gray-200 px-2 py-1 shadow-md">
+      <Search className="w-4 h-4 text-gray-500" />
+      <input
+        id="search"
+        placeholder="Search..."
+        className="text-sm outline-0"
+      />
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/tsconfig.json → client/tsconfig.json b/tsconfig.json → client/tsconfig.json
diff --git a/src/app/page.tsx b/src/app/page.tsx