Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 11f901c6bf | |||
| e69cdf0154 | |||
| dd483e9b44 |
339
src/app/admin/page.tsx
Normal file
339
src/app/admin/page.tsx
Normal file
@@ -0,0 +1,339 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
|
import { Plus, Edit2, Trash2, X, Check } from 'lucide-react';
|
||||||
|
|
||||||
|
interface Product {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
price: string;
|
||||||
|
imageSrc: string;
|
||||||
|
imageAlt?: string;
|
||||||
|
size?: string;
|
||||||
|
color?: string;
|
||||||
|
stock?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormData {
|
||||||
|
name: string;
|
||||||
|
price: string;
|
||||||
|
imageSrc: string;
|
||||||
|
imageAlt: string;
|
||||||
|
size: string;
|
||||||
|
color: string;
|
||||||
|
stock: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdminPage() {
|
||||||
|
const [products, setProducts] = useState<Product[]>([
|
||||||
|
{
|
||||||
|
id: "1", name: "Elegance Dress", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg", imageAlt: "Stylish women's dress", size: "M", color: "Black", stock: 15
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2", name: "Classic Oxford Shirt", price: "$64.99", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-man-suit_171337-19984.jpg", imageAlt: "Men's button-up shirt", size: "L", color: "White", stock: 22
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3", name: "Premium Denim Jeans", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16949.jpg", imageAlt: "Classic denim jeans", size: "32", color: "Blue", stock: 18
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||||
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
|
const [formData, setFormData] = useState<FormData>({
|
||||||
|
name: "", price: "", imageSrc: "", imageAlt: "", size: "", color: "", stock: ""
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleOpenForm = (product?: Product) => {
|
||||||
|
if (product) {
|
||||||
|
setEditingId(product.id);
|
||||||
|
setFormData({
|
||||||
|
name: product.name,
|
||||||
|
price: product.price,
|
||||||
|
imageSrc: product.imageSrc,
|
||||||
|
imageAlt: product.imageAlt || "", size: product.size || "", color: product.color || "", stock: product.stock?.toString() || ""
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setEditingId(null);
|
||||||
|
setFormData({
|
||||||
|
name: "", price: "", imageSrc: "", imageAlt: "", size: "", color: "", stock: ""
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setIsFormOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseForm = () => {
|
||||||
|
setIsFormOpen(false);
|
||||||
|
setEditingId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveProduct = () => {
|
||||||
|
if (!formData.name || !formData.price) {
|
||||||
|
alert("Please fill in required fields");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (editingId) {
|
||||||
|
setProducts(products.map(p =>
|
||||||
|
p.id === editingId
|
||||||
|
? {
|
||||||
|
...p,
|
||||||
|
name: formData.name,
|
||||||
|
price: formData.price,
|
||||||
|
imageSrc: formData.imageSrc,
|
||||||
|
imageAlt: formData.imageAlt,
|
||||||
|
size: formData.size,
|
||||||
|
color: formData.color,
|
||||||
|
stock: parseInt(formData.stock) || 0
|
||||||
|
}
|
||||||
|
: p
|
||||||
|
));
|
||||||
|
} else {
|
||||||
|
const newProduct: Product = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
name: formData.name,
|
||||||
|
price: formData.price,
|
||||||
|
imageSrc: formData.imageSrc,
|
||||||
|
imageAlt: formData.imageAlt,
|
||||||
|
size: formData.size,
|
||||||
|
color: formData.color,
|
||||||
|
stock: parseInt(formData.stock) || 0
|
||||||
|
};
|
||||||
|
setProducts([...products, newProduct]);
|
||||||
|
}
|
||||||
|
handleCloseForm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteProduct = (id: string) => {
|
||||||
|
if (confirm("Are you sure you want to delete this product?")) {
|
||||||
|
setProducts(products.filter(p => p.id !== id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="expand-hover"
|
||||||
|
defaultTextAnimation="background-highlight"
|
||||||
|
borderRadius="rounded"
|
||||||
|
contentWidth="small"
|
||||||
|
sizing="largeSmallSizeLargeTitles"
|
||||||
|
background="circleGradient"
|
||||||
|
cardStyle="gradient-mesh"
|
||||||
|
primaryButtonStyle="primary-glow"
|
||||||
|
secondaryButtonStyle="radial-glow"
|
||||||
|
headingFontWeight="semibold"
|
||||||
|
>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarLayoutFloatingOverlay
|
||||||
|
brandName="StyleHub"
|
||||||
|
navItems={[
|
||||||
|
{ name: "Home", id: "hero" },
|
||||||
|
{ name: "Shop", id: "products" },
|
||||||
|
{ name: "About", id: "about" },
|
||||||
|
{ name: "Reviews", id: "testimonials" },
|
||||||
|
{ name: "Contact", id: "contact" }
|
||||||
|
]}
|
||||||
|
button={{
|
||||||
|
text: "Back to Store", href: "/"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="min-h-screen bg-background pt-32 pb-16">
|
||||||
|
<div className="max-w-6xl mx-auto px-4">
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-4xl font-semibold mb-2 text-foreground">Admin Panel</h1>
|
||||||
|
<p className="text-lg text-foreground/70">Manage your clothing inventory</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Add Product Button */}
|
||||||
|
<button
|
||||||
|
onClick={() => handleOpenForm()}
|
||||||
|
className="mb-8 flex items-center gap-2 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add New Product
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Products Table */}
|
||||||
|
<div className="bg-card rounded-lg overflow-hidden shadow-lg">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead className="bg-primary-cta/10">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Product Name</th>
|
||||||
|
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Price</th>
|
||||||
|
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Size</th>
|
||||||
|
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Color</th>
|
||||||
|
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Stock</th>
|
||||||
|
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-accent/20">
|
||||||
|
{products.map((product) => (
|
||||||
|
<tr key={product.id} className="hover:bg-background/50 transition-colors">
|
||||||
|
<td className="px-6 py-4 text-sm text-foreground">{product.name}</td>
|
||||||
|
<td className="px-6 py-4 text-sm text-foreground">{product.price}</td>
|
||||||
|
<td className="px-6 py-4 text-sm text-foreground">{product.size || "-"}</td>
|
||||||
|
<td className="px-6 py-4 text-sm text-foreground">{product.color || "-"}</td>
|
||||||
|
<td className="px-6 py-4 text-sm text-foreground">{product.stock || 0}</td>
|
||||||
|
<td className="px-6 py-4 text-sm">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => handleOpenForm(product)}
|
||||||
|
className="p-2 hover:bg-background rounded transition-colors"
|
||||||
|
title="Edit"
|
||||||
|
>
|
||||||
|
<Edit2 size={18} className="text-primary-cta" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDeleteProduct(product.id)}
|
||||||
|
className="p-2 hover:bg-background rounded transition-colors"
|
||||||
|
title="Delete"
|
||||||
|
>
|
||||||
|
<Trash2 size={18} className="text-red-500" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Form */}
|
||||||
|
{isFormOpen && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
||||||
|
<div className="bg-card rounded-lg p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h2 className="text-2xl font-semibold text-foreground">
|
||||||
|
{editingId ? "Edit Product" : "Add New Product"}
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
onClick={handleCloseForm}
|
||||||
|
className="p-2 hover:bg-background rounded transition-colors"
|
||||||
|
>
|
||||||
|
<X size={24} className="text-foreground" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">Product Name *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||||
|
placeholder="e.g., Elegant Dress"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">Price *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="price"
|
||||||
|
value={formData.price}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||||
|
placeholder="e.g., $89.99"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">Image URL</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="imageSrc"
|
||||||
|
value={formData.imageSrc}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||||
|
placeholder="https://..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">Image Alt Text</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="imageAlt"
|
||||||
|
value={formData.imageAlt}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||||
|
placeholder="e.g., Stylish women's dress"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">Size</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="size"
|
||||||
|
value={formData.size}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||||
|
placeholder="e.g., M, L, XL"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">Color</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="color"
|
||||||
|
value={formData.color}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||||
|
placeholder="e.g., Black, Blue"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">Stock</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="stock"
|
||||||
|
value={formData.stock}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||||
|
placeholder="e.g., 15"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 mt-8">
|
||||||
|
<button
|
||||||
|
onClick={handleSaveProduct}
|
||||||
|
className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
|
||||||
|
>
|
||||||
|
<Check size={20} />
|
||||||
|
{editingId ? "Update Product" : "Add Product"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleCloseForm}
|
||||||
|
className="flex-1 px-6 py-3 border border-accent/30 text-foreground rounded-lg hover:bg-background/50 transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
224
src/app/page.tsx
224
src/app/page.tsx
@@ -1,5 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||||
@@ -9,9 +10,69 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
|
|||||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||||
import { Sparkles, TrendingUp, Heart, Award, Leaf, Users, Star, Mail, BarChart3 } from 'lucide-react';
|
import { Sparkles, TrendingUp, Heart, Award, Leaf, Users, Star, Mail, BarChart3, Filter } from 'lucide-react';
|
||||||
|
|
||||||
|
interface Product {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
price: string;
|
||||||
|
imageSrc: string;
|
||||||
|
imageAlt?: string;
|
||||||
|
size?: string;
|
||||||
|
color?: string;
|
||||||
|
stock?: number;
|
||||||
|
}
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
|
const allProducts: Product[] = [
|
||||||
|
{
|
||||||
|
id: "1", name: "Elegance Dress", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg", imageAlt: "Stylish women's dress", size: "M", color: "Black", stock: 15
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2", name: "Classic Oxford Shirt", price: "$64.99", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-man-suit_171337-19984.jpg", imageAlt: "Men's button-up shirt", size: "L", color: "White", stock: 22
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3", name: "Premium Denim Jeans", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16949.jpg", imageAlt: "Classic denim jeans", size: "32", color: "Blue", stock: 18
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Filter state
|
||||||
|
const [selectedSizes, setSelectedSizes] = useState<string[]>([]);
|
||||||
|
const [selectedColors, setSelectedColors] = useState<string[]>([]);
|
||||||
|
const [priceRange, setPriceRange] = useState<[number, number]>([0, 150]);
|
||||||
|
const [showFilters, setShowFilters] = useState(false);
|
||||||
|
|
||||||
|
// Extract unique sizes, colors, and price from products
|
||||||
|
const uniqueSizes = Array.from(new Set(allProducts.map(p => p.size).filter(Boolean)));
|
||||||
|
const uniqueColors = Array.from(new Set(allProducts.map(p => p.color).filter(Boolean)));
|
||||||
|
|
||||||
|
// Filter products based on selected criteria
|
||||||
|
const filteredProducts = allProducts.filter(product => {
|
||||||
|
const price = parseFloat(product.price.replace('$', ''));
|
||||||
|
const sizeMatch = selectedSizes.length === 0 || selectedSizes.includes(product.size || '');
|
||||||
|
const colorMatch = selectedColors.length === 0 || selectedColors.includes(product.color || '');
|
||||||
|
const priceMatch = price >= priceRange[0] && price <= priceRange[1];
|
||||||
|
return sizeMatch && colorMatch && priceMatch;
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSizeToggle = (size: string) => {
|
||||||
|
setSelectedSizes(prev =>
|
||||||
|
prev.includes(size) ? prev.filter(s => s !== size) : [...prev, size]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleColorToggle = (color: string) => {
|
||||||
|
setSelectedColors(prev =>
|
||||||
|
prev.includes(color) ? prev.filter(c => c !== color) : [...prev, color]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleResetFilters = () => {
|
||||||
|
setSelectedSizes([]);
|
||||||
|
setSelectedColors([]);
|
||||||
|
setPriceRange([0, 150]);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="expand-hover"
|
defaultButtonVariant="expand-hover"
|
||||||
@@ -19,7 +80,7 @@ export default function LandingPage() {
|
|||||||
borderRadius="rounded"
|
borderRadius="rounded"
|
||||||
contentWidth="small"
|
contentWidth="small"
|
||||||
sizing="largeSmallSizeLargeTitles"
|
sizing="largeSmallSizeLargeTitles"
|
||||||
background="noise"
|
background="circleGradient"
|
||||||
cardStyle="gradient-mesh"
|
cardStyle="gradient-mesh"
|
||||||
primaryButtonStyle="primary-glow"
|
primaryButtonStyle="primary-glow"
|
||||||
secondaryButtonStyle="radial-glow"
|
secondaryButtonStyle="radial-glow"
|
||||||
@@ -36,7 +97,7 @@ export default function LandingPage() {
|
|||||||
{ name: "Contact", id: "contact" }
|
{ name: "Contact", id: "contact" }
|
||||||
]}
|
]}
|
||||||
button={{
|
button={{
|
||||||
text: "Shop Now", href: "#products"
|
text: "Admin", href: "/admin"
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -45,7 +106,7 @@ export default function LandingPage() {
|
|||||||
<HeroSplitKpi
|
<HeroSplitKpi
|
||||||
title="Discover Premium Fashion for Every Occasion"
|
title="Discover Premium Fashion for Every Occasion"
|
||||||
description="Elevate your wardrobe with our curated collection of high-quality clothing. From casual essentials to elegant statements, find pieces that express your unique style and confidence."
|
description="Elevate your wardrobe with our curated collection of high-quality clothing. From casual essentials to elegant statements, find pieces that express your unique style and confidence."
|
||||||
background={{ variant: "noise" }}
|
background={{ variant: "glowing-orb" }}
|
||||||
kpis={[
|
kpis={[
|
||||||
{ value: "10K+", label: "Happy Customers" },
|
{ value: "10K+", label: "Happy Customers" },
|
||||||
{ value: "500+", label: "Premium Items" },
|
{ value: "500+", label: "Premium Items" },
|
||||||
@@ -73,35 +134,130 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="products" data-section="products">
|
<div id="products" data-section="products">
|
||||||
<ProductCardOne
|
{/* Filter Section */}
|
||||||
title="Featured Products"
|
<div className="w-full px-4 md:px-8 py-8 bg-background">
|
||||||
description="Handpicked selections of our finest clothing items, carefully curated for style and comfort."
|
<div className="max-w-7xl mx-auto">
|
||||||
tag="Best Sellers"
|
<div className="flex justify-between items-center mb-6">
|
||||||
tagIcon={TrendingUp}
|
<h2 className="text-2xl font-semibold text-foreground">Featured Products</h2>
|
||||||
tagAnimation="slide-up"
|
<button
|
||||||
products={[
|
onClick={() => setShowFilters(!showFilters)}
|
||||||
{
|
className="flex items-center gap-2 px-4 py-2 bg-primary-cta/10 text-primary-cta rounded-lg hover:bg-primary-cta/20 transition-colors md:hidden"
|
||||||
id: "1", name: "Elegance Dress", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg", imageAlt: "Stylish women's dress"
|
>
|
||||||
},
|
<Filter size={18} />
|
||||||
{
|
Filters
|
||||||
id: "2", name: "Classic Oxford Shirt", price: "$64.99", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-man-suit_171337-19984.jpg", imageAlt: "Men's button-up shirt"
|
</button>
|
||||||
},
|
</div>
|
||||||
{
|
|
||||||
id: "3", name: "Premium Denim Jeans", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16949.jpg", imageAlt: "Classic denim jeans"
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||||
}
|
{/* Filters Sidebar */}
|
||||||
]}
|
<div className={`${showFilters ? 'block' : 'hidden'} md:block md:col-span-1`}>
|
||||||
gridVariant="uniform-all-items-equal"
|
<div className="bg-card rounded-lg p-6 sticky top-24">
|
||||||
animationType="slide-up"
|
<h3 className="text-lg font-semibold text-foreground mb-4">Filters</h3>
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
{/* Size Filter */}
|
||||||
buttons={[
|
<div className="mb-6 pb-6 border-b border-accent/20">
|
||||||
{ text: "View All Products", href: "#products" }
|
<h4 className="font-medium text-foreground mb-3">Size</h4>
|
||||||
]}
|
<div className="space-y-2">
|
||||||
buttonAnimation="slide-up"
|
{uniqueSizes.map(size => (
|
||||||
containerClassName="w-full"
|
<label key={size} className="flex items-center gap-2 cursor-pointer">
|
||||||
textBoxTitleClassName="text-3xl lg:text-4xl font-semibold"
|
<input
|
||||||
textBoxDescriptionClassName="text-lg text-foreground/70"
|
type="checkbox"
|
||||||
/>
|
checked={selectedSizes.includes(size)}
|
||||||
|
onChange={() => handleSizeToggle(size)}
|
||||||
|
className="w-4 h-4 rounded border-accent/30"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-foreground">{size}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Color Filter */}
|
||||||
|
<div className="mb-6 pb-6 border-b border-accent/20">
|
||||||
|
<h4 className="font-medium text-foreground mb-3">Color</h4>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{uniqueColors.map(color => (
|
||||||
|
<label key={color} className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={selectedColors.includes(color)}
|
||||||
|
onChange={() => handleColorToggle(color)}
|
||||||
|
className="w-4 h-4 rounded border-accent/30"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-foreground">{color}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price Filter */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<h4 className="font-medium text-foreground mb-3">Price Range</h4>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="150"
|
||||||
|
value={priceRange[0]}
|
||||||
|
onChange={(e) => setPriceRange([parseFloat(e.target.value), priceRange[1]])}
|
||||||
|
className="w-full px-3 py-2 border border-accent/30 rounded bg-background text-foreground text-sm focus:outline-none focus:border-primary-cta"
|
||||||
|
placeholder="Min"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="150"
|
||||||
|
value={priceRange[1]}
|
||||||
|
onChange={(e) => setPriceRange([priceRange[0], parseFloat(e.target.value)])}
|
||||||
|
className="w-full px-3 py-2 border border-accent/30 rounded bg-background text-foreground text-sm focus:outline-none focus:border-primary-cta"
|
||||||
|
placeholder="Max"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-foreground/60">${priceRange[0]}.00 - ${priceRange[1]}.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reset Button */}
|
||||||
|
<button
|
||||||
|
onClick={handleResetFilters}
|
||||||
|
className="w-full px-4 py-2 border border-accent/30 text-foreground rounded-lg hover:bg-background/50 transition-colors text-sm font-medium"
|
||||||
|
>
|
||||||
|
Reset Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Products Grid */}
|
||||||
|
<div className="md:col-span-3">
|
||||||
|
<ProductCardOne
|
||||||
|
title=""
|
||||||
|
description=""
|
||||||
|
products={filteredProducts}
|
||||||
|
gridVariant="uniform-all-items-equal"
|
||||||
|
animationType="slide-up"
|
||||||
|
textboxLayout="default"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
containerClassName="w-full"
|
||||||
|
textBoxTitleClassName="text-3xl lg:text-4xl font-semibold"
|
||||||
|
textBoxDescriptionClassName="text-lg text-foreground/70"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filteredProducts.length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<p className="text-lg text-foreground/60">No products found matching your filters.</p>
|
||||||
|
<button
|
||||||
|
onClick={handleResetFilters}
|
||||||
|
className="mt-4 px-6 py-2 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
|
||||||
|
>
|
||||||
|
Clear Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
@@ -206,7 +362,7 @@ export default function LandingPage() {
|
|||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
title="Stay Updated with Fashion Trends"
|
title="Stay Updated with Fashion Trends"
|
||||||
description="Subscribe to our newsletter and receive exclusive offers, styling tips, and first access to new collections delivered straight to your inbox."
|
description="Subscribe to our newsletter and receive exclusive offers, styling tips, and first access to new collections delivered straight to your inbox."
|
||||||
background={{ variant: "noise" }}
|
background={{ variant: "sparkles-gradient" }}
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543701.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543701.jpg"
|
||||||
imageAlt="Fashion creative workspace"
|
imageAlt="Fashion creative workspace"
|
||||||
|
|||||||
@@ -1,51 +1,43 @@
|
|||||||
"use client";
|
import React from 'react';
|
||||||
|
|
||||||
import { memo } from "react";
|
|
||||||
import useSvgTextLogo from "./useSvgTextLogo";
|
|
||||||
import { cls } from "@/lib/utils";
|
|
||||||
|
|
||||||
interface SvgTextLogoProps {
|
interface SvgTextLogoProps {
|
||||||
logoText: string;
|
text: string;
|
||||||
adjustHeightFactor?: number;
|
|
||||||
verticalAlign?: "top" | "center";
|
|
||||||
className?: string;
|
className?: string;
|
||||||
|
fontSize?: number;
|
||||||
|
fontWeight?: string;
|
||||||
|
letterSpacing?: string;
|
||||||
|
fill?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||||
logoText,
|
text,
|
||||||
adjustHeightFactor,
|
className = '',
|
||||||
verticalAlign = "top",
|
fontSize = 48,
|
||||||
className = "",
|
fontWeight = '700',
|
||||||
}) {
|
letterSpacing = '0.05em',
|
||||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
fill = 'currentColor',
|
||||||
|
}) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
ref={svgRef}
|
viewBox={`0 0 ${text.length * (fontSize * 0.6)} ${fontSize * 1.2}`}
|
||||||
viewBox={viewBox}
|
className={className}
|
||||||
className={cls("w-full", className)}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
style={{ aspectRatio: aspectRatio }}
|
preserveAspectRatio="xMidYMid meet"
|
||||||
preserveAspectRatio="none"
|
|
||||||
role="img"
|
|
||||||
aria-label={`${logoText} logo`}
|
|
||||||
>
|
>
|
||||||
<text
|
<text
|
||||||
ref={textRef}
|
x="50%"
|
||||||
x="0"
|
y="50%"
|
||||||
y={verticalAlign === "center" ? "50%" : "0"}
|
textAnchor="middle"
|
||||||
className="font-bold fill-current"
|
dominantBaseline="middle"
|
||||||
style={{
|
fontSize={fontSize}
|
||||||
fontSize: "20px",
|
fontWeight={fontWeight}
|
||||||
letterSpacing: "-0.02em",
|
letterSpacing={letterSpacing}
|
||||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
fill={fill}
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{logoText}
|
{text}
|
||||||
</text>
|
</text>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
});
|
};
|
||||||
|
|
||||||
SvgTextLogo.displayName = "SvgTextLogo";
|
|
||||||
|
|
||||||
export default SvgTextLogo;
|
export default SvgTextLogo;
|
||||||
|
|||||||
Reference in New Issue
Block a user