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" : ""} +

+
+
+ +
+ +
+ +
+ +
+ + + + ); +}