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

1 files changed, 32 insertions, 0 deletions

diff --git a/frontend/src/app/products/[id]/page.tsx b/frontend/src/app/products/[id]/page.tsx
new file mode 100644
index 0000000..31ceded
--- /dev/null
+++ b/frontend/src/app/products/[id]/page.tsx
@@ -0,0 +1,32 @@
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
+import { ProductPage } from "@/components/product-page";
+
+interface ProductPageProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+export default async function Product({ params }: ProductPageProps) {
+  const { id } = await params;
+  
+  return (
+    <>
+      <Header />
+      <ProductPage productId={id} />
+      <Footer />
+    </>
+  );
+}
+
+export async function generateMetadata({ params }: ProductPageProps) {
+  // In a real app, you'd fetch the product data here based on params.id
+  const { id } = await params;
+  const productName = id === "1" ? "Oversized Cotton Hoodie" : "Product";
+  
+  return {
+    title: `${productName} | blcklst`,
+    description: `Shop the ${productName} at blcklst. Premium quality fashion pieces that define modern elegance.`,
+  };
+} 
\ No newline at end of file