Add src/app/shop/page.tsx
This commit is contained in:
246
src/app/shop/page.tsx
Normal file
246
src/app/shop/page.tsx
Normal file
@@ -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<Set<string>>(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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/shop" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Benefits", id: "feature" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{ text: "Shop Now", href: "/shop" }}
|
||||
brandName="Pure Glow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop" data-section="shop" className="py-20">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
{/* Shop Header */}
|
||||
<div className="mb-12 text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold mb-4">Our Shop</h1>
|
||||
<p className="text-lg md:text-xl opacity-75 max-w-2xl mx-auto mb-8">
|
||||
Browse our complete collection of premium skincare products
|
||||
</p>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="flex items-center max-w-md mx-auto mb-8">
|
||||
<div className="relative w-full">
|
||||
<Search className="absolute left-3 top-3 w-5 h-5 opacity-50" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search products..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Buttons */}
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{filters.map(filter => (
|
||||
<button
|
||||
key={filter.id}
|
||||
onClick={() => setSelectedFilter(filter.id)}
|
||||
className={`px-6 py-2 rounded-lg font-medium transition-all ${
|
||||
selectedFilter === filter.id
|
||||
? "bg-current text-background"
|
||||
: "bg-current bg-opacity-10 hover:bg-opacity-20"
|
||||
}`}
|
||||
>
|
||||
{filter.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results Count */}
|
||||
<p className="text-center text-sm opacity-75 mb-8">
|
||||
Showing {displayProducts.length} product{displayProducts.length !== 1 ? "s" : ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardTwo
|
||||
products={displayProducts}
|
||||
title="Featured Electronics"
|
||||
description="Discover our curated selection of premium electronics and tech products"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Stay Updated"
|
||||
tagIcon={Mail}
|
||||
title="Join Our Beauty Community"
|
||||
description="Subscribe to receive exclusive skincare tips, new product launches, and special discounts delivered straight to your inbox."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to our newsletter terms."
|
||||
tagAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Pure Glow"
|
||||
columns={[
|
||||
{
|
||||
title: "Products", items: [
|
||||
{ label: "Moisturizers", href: "#" },
|
||||
{ label: "Serums", href: "#" },
|
||||
{ label: "Masks", href: "#" },
|
||||
{ label: "Cleansers", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Our Story", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Blog", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Shipping", href: "#" },
|
||||
{ label: "Returns", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Sustainability", href: "#" },
|
||||
{ label: "Accessibility", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Pure Glow. All rights reserved. Crafted with love for your skin."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user