From ca3ae0db6e8e3f2cf99423797c60f5c2cc66a780 Mon Sep 17 00:00:00 2001
From: Biswa Kalyan Bhuyan <biswa@surgot.in>
Date: Thu, 29 May 2025 20:57:31 +0530
Subject: feat: added the product page and enhanced the UI

- added the product page where the product details is shown
- enhanced the nav bar to handle the rendering
- added the loading screen to the page
- fixed the rendering method to the navigation-menu
---
 frontend/src/app/men/page.tsx | 178 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 178 insertions(+)
 create mode 100644 frontend/src/app/men/page.tsx

(limited to 'frontend/src/app/men/page.tsx')

diff --git a/frontend/src/app/men/page.tsx b/frontend/src/app/men/page.tsx
new file mode 100644
index 0000000..8c0dd51
--- /dev/null
+++ b/frontend/src/app/men/page.tsx
@@ -0,0 +1,178 @@
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
+import { ProductCard } from "@/components/product-card";
+
+export default function MenPage() {
+  // Mock men's products data
+  const menProducts = [
+    {
+      id: "1",
+      name: "Oversized Cotton Hoodie",
+      price: 89,
+      originalPrice: 129,
+      image: "/api/placeholder/400/500",
+      images: ["/api/placeholder/400/500", "/api/placeholder/400/500"],
+      rating: 4.5,
+      reviewCount: 234,
+      isNew: true,
+      isSale: true,
+      category: "Hoodies",
+      colors: ["#000000", "#FFFFFF", "#6B7280"],
+      sizes: ["S", "M", "L", "XL"],
+    },
+    {
+      id: "2",
+      name: "Classic Denim Jacket",
+      price: 159,
+      originalPrice: 199,
+      image: "/api/placeholder/400/500",
+      rating: 4.7,
+      reviewCount: 189,
+      isSale: true,
+      category: "Jackets",
+      colors: ["#1E40AF", "#000000"],
+      sizes: ["M", "L", "XL"],
+    },
+    {
+      id: "3",
+      name: "Minimal White T-Shirt",
+      price: 45,
+      image: "/api/placeholder/400/500",
+      rating: 4.3,
+      reviewCount: 456,
+      isNew: true,
+      category: "T-Shirts",
+      colors: ["#FFFFFF", "#000000", "#6B7280"],
+      sizes: ["XS", "S", "M", "L", "XL"],
+    },
+    {
+      id: "4",
+      name: "Cargo Pants",
+      price: 119,
+      originalPrice: 149,
+      image: "/api/placeholder/400/500",
+      rating: 4.2,
+      reviewCount: 98,
+      isSale: true,
+      category: "Pants",
+      colors: ["#000000", "#4B5563", "#059669"],
+      sizes: ["28", "30", "32", "34", "36"],
+    },
+    {
+      id: "5",
+      name: "Oxford Button Shirt",
+      price: 79,
+      image: "/api/placeholder/400/500",
+      rating: 4.6,
+      reviewCount: 156,
+      category: "Shirts",
+      colors: ["#FFFFFF", "#3B82F6", "#6B7280"],
+      sizes: ["S", "M", "L", "XL"],
+    },
+    {
+      id: "6",
+      name: "Leather Sneakers",
+      price: 189,
+      originalPrice: 229,
+      image: "/api/placeholder/400/500",
+      rating: 4.8,
+      reviewCount: 267,
+      isSale: true,
+      category: "Shoes",
+      colors: ["#FFFFFF", "#000000", "#8B4513"],
+      sizes: ["8", "9", "10", "11", "12"],
+    },
+    {
+      id: "7",
+      name: "Wool Blazer",
+      price: 299,
+      image: "/api/placeholder/400/500",
+      rating: 4.9,
+      reviewCount: 78,
+      isNew: true,
+      category: "Blazers",
+      colors: ["#000000", "#374151", "#1E40AF"],
+      sizes: ["S", "M", "L", "XL"],
+    },
+    {
+      id: "8",
+      name: "Casual Chinos",
+      price: 89,
+      originalPrice: 109,
+      image: "/api/placeholder/400/500",
+      rating: 4.4,
+      reviewCount: 234,
+      isSale: true,
+      category: "Pants",
+      colors: ["#D2B48C", "#000000", "#1F2937"],
+      sizes: ["28", "30", "32", "34", "36"],
+    },
+  ];
+
+  return (
+    <>
+      <Header />
+      <main className="min-h-screen bg-background">
+        {/* Hero Section */}
+        <section className="relative h-96 bg-gradient-to-r from-neutral-900 to-neutral-700 flex items-center justify-center">
+          <div className="text-center text-white space-y-4">
+            <h1 className="text-4xl md:text-6xl font-bold">Men's Collection</h1>
+            <p className="text-lg md:text-xl max-w-2xl mx-auto px-4">
+              Discover our latest men's fashion collection featuring premium quality pieces for the modern man
+            </p>
+          </div>
+        </section>
+
+        {/* Filter Section */}
+        <section className="border-b dark:border-neutral-800 py-6">
+          <div className="container mx-auto px-4">
+            <div className="flex flex-wrap items-center justify-between gap-4">
+              <div className="flex items-center space-x-4">
+                <span className="text-sm text-muted-foreground">
+                  Showing {menProducts.length} products
+                </span>
+              </div>
+              <div className="flex items-center space-x-4">
+                <select className="px-3 py-2 border rounded-lg text-sm bg-background">
+                  <option>Sort by: Featured</option>
+                  <option>Price: Low to High</option>
+                  <option>Price: High to Low</option>
+                  <option>Newest First</option>
+                  <option>Best Rating</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Products Grid */}
+        <section className="py-12">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {menProducts.map((product) => (
+                <ProductCard key={product.id} {...product} />
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Load More Section */}
+        <section className="py-12 border-t dark:border-neutral-800">
+          <div className="container mx-auto px-4 text-center">
+            <button className="px-8 py-3 border border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors rounded-lg">
+              Load More Products
+            </button>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+export async function generateMetadata() {
+  return {
+    title: "Men's Fashion Collection | blcklst",
+    description: "Shop the latest men's fashion at blcklst. Premium quality clothing, shoes, and accessories for the modern man.",
+  };
+} 
\ No newline at end of file
-- 
cgit v1.2.3-59-g8ed1b