safak · devnuru · Aug 11, 2025 · Aug 12, 2025 · Aug 20, 2025 · Sep 9, 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.539.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/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,23 @@
+import ProductList from "@/components/ProductList";
+import Image from "next/image";
+
+const Homepage = async ({
+  searchParams,
+}: {
+  searchParams: Promise<{ category: string }>;
+}) => {
+
+
+  const category = (await searchParams).category;
+
+  return (
+    <div className="">
+      <div className="relative aspect-[3/1] mb-12">
+        <Image src="/featured.png" alt="Featured Product" fill />
+      </div>
+      <ProductList category={category} params="homepage"/>
+    </div>
+  );
+};
+
+export default Homepage;
diff --git a/client/src/app/products/page.tsx b/client/src/app/products/page.tsx
@@ -0,0 +1,18 @@
+import ProductList from "@/components/ProductList"
+
+const productPage = async ({
+  searchParams,
+}: {
+  searchParams: Promise<{ category: string }>;
+}) => {
+
+
+  const category = (await searchParams).category;
+  return (
+    <div className="">
+        <ProductList category={category} params="products"/>
+    </div>
+  )
+}
+
+export default productPage
diff --git a/client/src/components/Categories.tsx b/client/src/components/Categories.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import {
+  Footprints,
+  Glasses,
+  Briefcase,
+  Shirt,
+  ShoppingBasket,
+  Hand,
+  Venus,
+} from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+const categories = [
+  {
+    name: "All",
+    icon: <ShoppingBasket className="w-4 h-4" />,
+    slug: "all",
+  },
+  {
+    name: "T-shirts",
+    icon: <Shirt className="w-4 h-4" />,
+    slug: "t-shirts",
+  },
+  {
+    name: "Shoes",
+    icon: <Footprints className="w-4 h-4" />,
+    slug: "shoes",
+  },
+  {
+    name: "Accessories",
+    icon: <Glasses className="w-4 h-4" />,
+    slug: "accessories",
+  },
+  {
+    name: "Bags",
+    icon: <Briefcase className="w-4 h-4" />,
+    slug: "bags",
+  },
+  {
+    name: "Dresses",
+    icon: <Venus className="w-4 h-4" />,
+    slug: "dresses",
+  },
+  {
+    name: "Jackets",
+    icon: <Shirt className="w-4 h-4" />,
+    slug: "jackets",
+  },
+  {
+    name: "Gloves",
+    icon: <Hand className="w-4 h-4" />,
+    slug: "gloves",
+  },
+];
+
+const Categories = () => {
+
+  const searchParams = useSearchParams();
+  const router = useRouter()
+  const pathname = usePathname()
+
+
+  const selectedCategory = searchParams.get("category");
+
+  // console.log(selectedCategory);
+
+  const handleChange = (value:string | null) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("category", value || "all");
+     router.push(`${pathname}?${params.toString()}`, {scroll:false})
+  }
+
+
+
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 bg-gray-100 p-2 rounded-lg md-4 text-sm">
+      {categories.map((category) => (
+        <div
+          className={`flex items-center justify-center gap-2 cursor-pointer px-2 py-1 rounded-md ${category.slug === selectedCategory ? "bg-white" : "text-gray-500"}`}
+          key={category.name}
+          onClick={() => handleChange(category.slug)}
+        >
+          {category.icon}
+          {category.name}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Categories;
diff --git a/client/src/components/Filter.tsx b/client/src/components/Filter.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+
+const Filter = () => {
+     const searchParams = useSearchParams();
+     const router = useRouter();
+     const pathname = usePathname();
+
+     const handleFilter = (value: string) => {
+      const params = new URLSearchParams(searchParams);
+      params.set("sort", value);
+      router.push(`${pathname}?${params.toString()}`, {scroll:false})
+     }
+
+
+  return (
+  <div className="flex items-center justify-end gap-2 text-sm text-gray-500 my-6">
+    <span>Sort by:</span>
+    <select name="sort" id="sort" className="ring-1 ring-gray-200 shadow-md p-1 rounded-sm" onChange={(e)=>handleFilter(e.target.value)}>
+        <option value="newest">Newest</option>
+        <option value="oldest">Oldest</option>
+        <option value="asc">Price: Low o High</option>
+        <option value="desc">Price: High to Low</option>
+    </select>
+  </div>
+);
+};
+
+export default Filter;
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
@@ -0,0 +1,49 @@
+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:flex-row md:items-start md:justify-between md:gap-0 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">
+          <Image
+            src="/logo.png"
+            alt="Trend Next"
+            width={36}
+            height={36}
+            className="w-6 h-6 md:w-9 md:h-9"
+          />
+          <p className="hidden md:block text-md font-medium tracking-wider text-white">
+            Devnuru.
+          </p>
+        </Link>
+        <p className="text-sm text-gray-400">@ 2025 Devnuru</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">Contact</Link>
+        <Link href="/tos">Terms of Service</Link>
+        <Link href="/privacy">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="/products">All Products</Link>
+        <Link href="/products">New Arrivals</Link>
+        <Link href="/sellers">Best Sellers</Link>
+        <Link href="/sale">Sale</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="/about">About</Link>
+        <Link href="/contact">Contact</Link>
+        <Link href="/blog">Blog</Link>
+        <Link href="/affiliate">Affiliate Programs</Link>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
@@ -0,0 +1,38 @@
+import Image from "next/image";
+import Link from "next/link";
+import SearchBar from "./SearchBar";
+import { Bell, Home, ShoppingCart } from "lucide-react";
+
+const Navbar = () => {
+  return (
+    <nav className="w-full flex items-center justify-between border-b border-gray-200 pb-4">
+      {/* LEFT  */}
+      <Link href="/" className="flex items-center">
+        <Image
+          src="/logo.png"
+          alt="Trend Next"
+          width={36}
+          height={36}
+          className="w-6 h-6 md:w-9 md:h-9"
+        />
+        <p className="hidden md:block text-md font-medium tracking-wider">
+          Devnuru.
+        </p>
+      </Link>
+      {/* RIGHT */}
+      <div className="flex items-center gap-6">
+        <SearchBar />
+        <Link href="/">
+          <Home className="w-4 h-4 text-gray-600" />
+        </Link>
+        <Bell className="w-4 h-4 text-gray-600" />
+        <ShoppingCart className="w-4 h-4 text-gray-600" />
+        <Link href='/login'>
+        Sign In
+        </Link>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;