+ )
+}
+
+export default ProductCard
diff --git a/src/app/components/ProductList.tsx b/src/app/components/ProductList.tsx
new file mode 100644
index 00000000..c341c944
--- /dev/null
+++ b/src/app/components/ProductList.tsx
@@ -0,0 +1,125 @@
+import { ProductsType } from "../types"
+import Categories from "./Categories"
+import ProductCard from "./ProductCard"
+import Link from "next/link"
+import Filter from "./filter"
+//Temporary Data
+ const products: ProductsType = [
+ {
+ id: 1,
+ name: "Addidas Core fit T-shirt",
+ shortDescription: "A comfortable and stylish t-shirt for everyday wear",
+ Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.",
+ price: 100,
+ sizes: "S, M, L, XL, XXL",
+ color: "gray,orange, Green",
+ quantity: 1,
+ selectedSize: "S",
+ selectedColor: "gray",
+ images: [ "/products/1g.png", "/products/1gr.png", "/products/1p.png" ],
+ },
+
+ {
+ id: 2,
+ name: "Nike Air Max 270",
+ shortDescription: "A comfortable and stylish t-shirt for everyday wear",
+ Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.",
+ price: 200,
+ sizes: "S, M, L, XL, XXL",
+ color: "Green,Gray",
+ quantity: 1,
+ selectedSize: "S",
+ selectedColor: "gray",
+ images: [ "/products/2g.png", "/products/2gr.png" ],
+ },
+ {
+ id: 3,
+ name: "Puma RS-X 2.0",
+ shortDescription: "A comfortable and stylish t-shirt for everyday wear",
+ Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.",
+ price: 300,
+ sizes: "S, M, L, XL, XXL",
+ color: "Red, Blue, Green, Yellow",
+ quantity: 1,
+ selectedSize: "S",
+ selectedColor: "gray",
+ images: [ "/products/3b.png", "/products/3bl.png", "/products/3gr.png" ],
+ },
+
+ {
+ id: 4,
+ name: "Product 4",
+ price: 400, shortDescription: "A comfortable and stylish t-shirt for everyday wear",
+ Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.",
+ sizes: "S, M, L, XL, XXL",
+ color: "Red, Blue, Green, Yellow",
+ quantity: 1,
+ selectedSize: "S",
+ selectedColor: "gray",
+ images: [ "/products/4p.png", "/products/4w.png" ],
+
+ },
+
+ {
+ id: 5,
+ name: "Product 5",
+ price: 500, shortDescription: "A comfortable and stylish t-shirt for everyday wear",
+ Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.",
+ sizes: "S, M, L, XL, XXL",
+ color: "Red, Blue, Green, Yellow",
+ quantity: 1,
+ selectedSize: "S",
+ selectedColor: "gray",
+ images: [ "/products/5bl.png", "/products/5o.png", "/products/5r.png" ],
+ },
+
+ {
+ id: 6,
+ name: "Product 6",
+ price: 600, shortDescription: "A comfortable and stylish t-shirt for everyday wear",
+ Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.",
+ sizes: "S, M, L, XL, XXL",
+ color: "Red, Blue, Green, Yellow",
+ quantity: 1,
+ selectedSize: "S",
+ selectedColor: "gray",
+ images: [ "/products/6g.png", "/products/6w.png" ],
+
+ },
+
+
+ {
+ id: 7,
+ name: "Product 7",
+ price: 700,
+ shortDescription: "A comfortable and stylish t-shirt for everyday wear",
+ Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.",
+ sizes: "S, M, L, XL, XXL",
+ color: "Red, Blue, Green, Yellow",
+ quantity: 1,
+ selectedSize: "S",
+ selectedColor: "gray",
+ images: [ "/products/7g.png", "/products/7p.png" ],
+
+
+ },
+
+
+]
+
+const ProductList = ({category,params}: {category?: string | null , params?: string}) => {
+ return (
+
+
+ {params === "productsPage"&& }
+
+ {products.map((product) => (
+
+ ))}
+
+ View All Products
+
+ )
+}
+
+export default ProductList
\ No newline at end of file
diff --git a/src/app/components/ShippingForm.tsx b/src/app/components/ShippingForm.tsx
new file mode 100644
index 00000000..4a87a6ea
--- /dev/null
+++ b/src/app/components/ShippingForm.tsx
@@ -0,0 +1,8 @@
+const ShippingForm = () => {
+ return (
+
+
Shipping Form
+
+ )
+}
+export default ShippingForm
\ No newline at end of file
diff --git a/src/app/components/ShoppingCartIcon.tsx b/src/app/components/ShoppingCartIcon.tsx
new file mode 100644
index 00000000..d1176647
--- /dev/null
+++ b/src/app/components/ShoppingCartIcon.tsx
@@ -0,0 +1,12 @@
+"use client"
+import Link from "next/link"
+import { ShoppingCart } from "lucide-react"
+const ShoppingCartIcon = () => {
+ return (
+
+
+ 0
+
+ )
+}
+export default ShoppingCartIcon
\ No newline at end of file
diff --git a/src/app/components/filter.tsx b/src/app/components/filter.tsx
new file mode 100644
index 00000000..8d8c0b68
--- /dev/null
+++ b/src/app/components/filter.tsx
@@ -0,0 +1,25 @@
+"use client"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+const Filter = () => {
+ const searchParams = useSearchParams()
+ const router = useRouter()
+ const pathname = usePathname()
+ {/* we have to create a new search params , and set a new key and push the url to the nextjs router */}
+ const handleFilter = (value: string) => {
+ const params =new URLSearchParams(searchParams)
+ params.set("category", value );
+ router.push(`${pathname}?${params.toString()}`, { scroll: false })
+ }
+ return (
+
+ Sorted by:
+
+
+ )
+}
+export default Filter
\ No newline at end of file
diff --git a/src/app/components/footer.tsx b/src/app/components/footer.tsx
new file mode 100644
index 00000000..a1efeea6
--- /dev/null
+++ b/src/app/components/footer.tsx
@@ -0,0 +1,40 @@
+import Link from "next/link"
+import Image from "next/image"
+
+const Footer = () => {
+ return (
+
+
+
+
+
TrendLama
+
+
2025 Trend Lama
+
All rights are reserved
+
+
+
Links
+ Home
+ About
+ Terms of Service
+ Privacy Policy
+
+
+
Links
+ Products
+ Categories
+ Brands
+ Contact
+
+
+
Links
+ Help
+ Support
+ FAQ
+ Contact
+
+
+ )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx
new file mode 100644
index 00000000..53cfd11f
--- /dev/null
+++ b/src/app/components/navbar.tsx
@@ -0,0 +1,36 @@
+import Link from "next/link"
+import Image from "next/image"
+import logo from "@/public/logo.png"
+import Searchbar from "./searchbar"
+import { Bell, ShoppingCart, Home } from "lucide-react"
+import ShoppingCartIcon from "./ShoppingCartIcon"
+const Navbar = () => {
+ return (
+
+ )
+}
+
+export default Navbar
\ No newline at end of file
diff --git a/src/app/components/searchbar.tsx b/src/app/components/searchbar.tsx
new file mode 100644
index 00000000..272eea61
--- /dev/null
+++ b/src/app/components/searchbar.tsx
@@ -0,0 +1,13 @@
+import {Search} from "lucide-react"
+const Searchbar = () => {
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default Searchbar
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f7fa87eb..536513ad 100644
--- a/src/app/layout.tsx
+++ b/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({
- {children}
+