From fb8e149605e4a5e2db00002af0fab5198bf89df6 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 06:04:14 +0000 Subject: [PATCH 1/4] Add src/app/cart/page.tsx --- src/app/cart/page.tsx | 237 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 src/app/cart/page.tsx diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx new file mode 100644 index 0000000..97a316d --- /dev/null +++ b/src/app/cart/page.tsx @@ -0,0 +1,237 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import { Mail, Trash2, Plus, Minus } from "lucide-react"; +import Link from "next/link"; +import { useState } from "react"; + +interface CartItem { + id: string; + name: string; + price: number; + quantity: number; + image: string; +} + +export default function CartPage() { + const [cartItems, setCartItems] = useState([ + { + id: "1", name: "Radiant Hydration Moisturizer", price: 58, + quantity: 1, + image: "http://img.b2bpic.net/free-vector/cosmetics-products-realistic-composition-poster_1284-18210.jpg" + }, + { + id: "2", name: "Luminous Glow Serum", price: 72, + quantity: 2, + image: "http://img.b2bpic.net/free-photo/front-view-argan-product-composition_23-2148955787.jpg" + } + ]); + + const updateQuantity = (id: string, newQuantity: number) => { + if (newQuantity <= 0) { + removeItem(id); + } else { + setCartItems(cartItems.map(item => + item.id === id ? { ...item, quantity: newQuantity } : item + )); + } + }; + + const removeItem = (id: string) => { + setCartItems(cartItems.filter(item => item.id !== id)); + }; + + const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0); + const tax = subtotal * 0.1; + const shipping = subtotal > 100 ? 0 : 10; + const total = subtotal + tax + shipping; + + return ( + + + +
+
+
+

Shopping Cart

+

{cartItems.length} items in your cart

+
+ + {cartItems.length === 0 ? ( +
+

Your cart is empty

+ + Continue Shopping + +
+ ) : ( +
+
+
+ {cartItems.map((item) => ( +
+ {item.name} +
+

{item.name}

+

${item.price.toFixed(2)}

+
+ + updateQuantity(item.id, parseInt(e.target.value) || 1)} + className="w-12 text-center border border-background-accent rounded px-2 py-1" + min="1" + /> + +
+
+
+

${(item.price * item.quantity).toFixed(2)}

+ +
+
+ ))} +
+
+ +
+
+

Order Summary

+
+
+ Subtotal + ${subtotal.toFixed(2)} +
+
+ Tax (10%) + ${tax.toFixed(2)} +
+
+ Shipping + {shipping === 0 ? "FREE" : `$${shipping.toFixed(2)}`} +
+
+
+ Total + ${total.toFixed(2)} +
+ + + Continue Shopping + + {shipping === 0 && subtotal > 0 && ( +

✓ Free shipping on orders over $100

+ )} +
+
+
+ )} +
+
+ + + + ); +} \ No newline at end of file -- 2.49.1 From 0c0de562eb79daad790eec71aaa469fa2a318088 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 06:04:14 +0000 Subject: [PATCH 2/4] Update src/app/page.tsx --- src/app/page.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 45bc761..b0618e1 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,7 +10,7 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import ContactCenter from '@/components/sections/contact/ContactCenter'; import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; -import { Sparkles, Leaf, Droplets, Shield, Mail } from "lucide-react"; +import { Sparkles, Leaf, Droplets, Shield, Mail, ShoppingCart } from "lucide-react"; export default function LandingPage() { return ( @@ -92,6 +92,7 @@ export default function LandingPage() { useInvertedBackground={true} tagAnimation="slide-up" buttonAnimation="slide-up" + buttons={[{ text: "View Details", href: "/product-detail" }]} /> @@ -203,7 +204,8 @@ export default function LandingPage() { { label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }, { label: "Shipping", href: "#" }, - { label: "Returns", href: "#" } + { label: "Returns", href: "#" }, + { label: "Track Order", href: "#" } ] }, { @@ -220,4 +222,4 @@ export default function LandingPage() { ); -} +} \ No newline at end of file -- 2.49.1 From d2333073d72fc7590bbd75523fa220f24f95694b Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 06:04:14 +0000 Subject: [PATCH 3/4] Add src/app/product-detail/page.tsx --- src/app/product-detail/page.tsx | 136 ++++++++++++++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 src/app/product-detail/page.tsx diff --git a/src/app/product-detail/page.tsx b/src/app/product-detail/page.tsx new file mode 100644 index 0000000..2fec0d9 --- /dev/null +++ b/src/app/product-detail/page.tsx @@ -0,0 +1,136 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard'; +import ContactCenter from '@/components/sections/contact/ContactCenter'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import { Mail, ArrowLeft } from "lucide-react"; +import Link from "next/link"; + +export default function ProductDetailPage() { + return ( + + + +
+
+ + + Back to Products + +
+ console.log("Size selected:", value) + }, + { + label: "Formula Type", options: ["Lightweight Gel", "Rich Cream", "Night Intensive"], + selected: "Lightweight Gel", onChange: (value) => console.log("Formula selected:", value) + } + ]} + quantity={{ + label: "Quantity", options: ["1", "2", "3", "4", "5"], + selected: "1", onChange: (value) => console.log("Quantity selected:", value) + }} + buttons={[ + { text: "Add To Cart", onClick: () => alert("Product added to cart!") }, + { text: "Buy Now", href: "#" } + ]} + /> +
+ +
+ +
+ + + + ); +} \ No newline at end of file -- 2.49.1 From 33c9fc41a654f26d563cf546d76c3a7d00ecb7b7 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 06:04:15 +0000 Subject: [PATCH 4/4] Add src/app/shop/page.tsx --- src/app/shop/page.tsx | 246 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 src/app/shop/page.tsx diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx new file mode 100644 index 0000000..c4f3fb3 --- /dev/null +++ b/src/app/shop/page.tsx @@ -0,0 +1,246 @@ +"use client"; + +import { useState } from "react"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import ProductCardTwo from '@/components/sections/product/ProductCardTwo'; +import ContactCenter from '@/components/sections/contact/ContactCenter'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import { Mail, Search } from "lucide-react"; + +const allProducts = [ + { + id: "1", brand: "Pure Glow", name: "Radiant Hydration Moisturizer", price: "$58.00", rating: 5, + reviewCount: "328", imageSrc: "http://img.b2bpic.net/free-vector/cosmetics-products-realistic-composition-poster_1284-18210.jpg", imageAlt: "Radiant Hydration Moisturizer" + }, + { + id: "2", brand: "Pure Glow", name: "Luminous Glow Serum", price: "$72.00", rating: 5, + reviewCount: "412", imageSrc: "http://img.b2bpic.net/free-photo/front-view-argan-product-composition_23-2148955787.jpg", imageAlt: "Luminous Glow Serum" + }, + { + id: "3", brand: "Pure Glow", name: "Purifying Wellness Mask", price: "$48.00", rating: 4, + reviewCount: "267", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-body-butter-pink-cloth_23-2148305543.jpg", imageAlt: "Purifying Wellness Mask" + }, + { + id: "4", brand: "Pure Glow", name: "Gentle Cleansing Oil", price: "$52.00", rating: 5, + reviewCount: "189", imageSrc: "http://img.b2bpic.net/free-photo/top-view-gua-sha-face-products_23-2149401501.jpg", imageAlt: "Gentle Cleansing Oil" + }, + { + id: "5", brand: "Pure Glow", name: "Anti-Aging Eye Serum", price: "$65.00", rating: 4, + reviewCount: "294", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-levender-body-butter-plain-background_23-2148305506.jpg", imageAlt: "Anti-Aging Eye Serum" + }, + { + id: "6", brand: "Pure Glow", name: "Nourishing Night Cream", price: "$68.00", rating: 5, + reviewCount: "356", imageSrc: "http://img.b2bpic.net/free-vector/cosmetics-products-realistic-composition-poster_1284-18210.jpg", imageAlt: "Nourishing Night Cream" + }, + { + id: "7", brand: "Pure Glow", name: "Brightening Vitamin C Powder", price: "$55.00", rating: 4, + reviewCount: "221", imageSrc: "http://img.b2bpic.net/free-photo/front-view-argan-product-composition_23-2148955787.jpg", imageAlt: "Brightening Vitamin C Powder" + }, + { + id: "8", brand: "Pure Glow", name: "Hydrating Face Mist", price: "$42.00", rating: 5, + reviewCount: "445", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-body-butter-pink-cloth_23-2148305543.jpg", imageAlt: "Hydrating Face Mist" + } +]; + +export default function ShopPage() { + const [searchTerm, setSearchTerm] = useState(""); + const [selectedFilter, setSelectedFilter] = useState("all"); + const [favoriteItems, setFavoriteItems] = useState>(new Set()); + + const filters = [ + { id: "all", label: "All Products" }, + { id: "serums", label: "Serums" }, + { id: "moisturizers", label: "Moisturizers" }, + { id: "masks", label: "Masks" } + ]; + + const filterProducts = () => { + let filtered = allProducts; + + // Apply search filter + if (searchTerm) { + filtered = filtered.filter(product => + product.name.toLowerCase().includes(searchTerm.toLowerCase()) || + product.brand.toLowerCase().includes(searchTerm.toLowerCase()) + ); + } + + // Apply category filter + if (selectedFilter !== "all") { + filtered = filtered.filter(product => { + const name = product.name.toLowerCase(); + if (selectedFilter === "serums") return name.includes("serum"); + if (selectedFilter === "moisturizers") return name.includes("moisturizer") || name.includes("cream"); + if (selectedFilter === "masks") return name.includes("mask"); + return true; + }); + } + + return filtered; + }; + + const toggleFavorite = (productId: string) => { + const newFavorites = new Set(favoriteItems); + if (newFavorites.has(productId)) { + newFavorites.delete(productId); + } else { + newFavorites.add(productId); + } + setFavoriteItems(newFavorites); + }; + + const filteredProducts = filterProducts(); + const displayProducts = filteredProducts.map(product => ({ + ...product, + isFavorited: favoriteItems.has(product.id), + onFavorite: () => toggleFavorite(product.id) + })); + + return ( + + + +
+
+ {/* Shop Header */} +
+

Our Shop

+

+ Browse our complete collection of premium skincare products +

+ + {/* Search Bar */} +
+
+ + setSearchTerm(e.target.value)} + className="w-full pl-10 pr-4 py-2 border border-current border-opacity-20 rounded-lg focus:outline-none focus:ring-2 focus:ring-current focus:ring-opacity-50" + /> +
+
+ + {/* Filter Buttons */} +
+ {filters.map(filter => ( + + ))} +
+
+ + {/* Results Count */} +

+ Showing {displayProducts.length} product{displayProducts.length !== 1 ? "s" : ""} +

+
+
+ +
+ +
+ +
+ +
+ + + + ); +} -- 2.49.1