290 lines
8.7 KiB
TypeScript
290 lines
8.7 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Box,
|
|
Container,
|
|
Typography,
|
|
Grid,
|
|
Card,
|
|
Button,
|
|
Paper,
|
|
Divider,
|
|
} from "@mui/material";
|
|
import { useParams, Link } from "react-router-dom";
|
|
import { Product } from "./types";
|
|
import chairone from "../images/chairone.png";
|
|
import chairtwo from "../images/chairtwo.png";
|
|
import chairthree from "../images/chairthree.png";
|
|
|
|
const collectionItems: Record<string, Product[]> = {
|
|
chairs: [
|
|
{
|
|
id: "ergo-luxe",
|
|
name: "Ergo-Luxe Executive Chair",
|
|
price: "$499",
|
|
image: `${chairone}`,
|
|
description: "Premium ergonomic support with breathable mesh back",
|
|
details: [
|
|
"Adjustable lumbar support",
|
|
"Tilt tension control",
|
|
"Waterfall seat edge",
|
|
"Dimensions: 27.5″D x 27″W x 40-44″H",
|
|
"Weight capacity: 350 lbs",
|
|
],
|
|
features: [
|
|
"Lumbar support with 3 adjustment points",
|
|
"Tilt lock mechanism",
|
|
"Certified sustainable materials",
|
|
],
|
|
},
|
|
{
|
|
id: "cloud-comfort",
|
|
name: "Cloud Comfort Chair",
|
|
price: "$349",
|
|
image: `${chairtwo}`,
|
|
description: "Plush seating with exceptional support",
|
|
details: [
|
|
"High-density foam cushioning",
|
|
"360-degree swivel",
|
|
"Nylon base with dual-wheel casters",
|
|
],
|
|
features: [
|
|
"Breathable fabric upholstery",
|
|
"Easy assembly",
|
|
"Modern minimalist design",
|
|
],
|
|
},
|
|
],
|
|
"luxury-chairs": [
|
|
{
|
|
id: "velvet-throne",
|
|
name: "Velvet Throne Armchair",
|
|
price: "$899",
|
|
image: `${chairthree}`,
|
|
description: "Opulent seating with premium velvet upholstery",
|
|
details: [
|
|
"Solid walnut legs",
|
|
"Hand-tufted detailing",
|
|
"Dimensions: 32″D x 36″W x 34″H",
|
|
],
|
|
features: [
|
|
"Premium Italian velvet",
|
|
"Handcrafted construction",
|
|
"Limited edition",
|
|
],
|
|
},
|
|
],
|
|
"premium-beds": [
|
|
{
|
|
id: "serenity-sleep",
|
|
name: "Serenity Sleep King Bed",
|
|
price: "$2,499",
|
|
image: `${chairone}`,
|
|
description: "Ultimate sleep system with premium materials",
|
|
details: [
|
|
"Solid hardwood frame",
|
|
"Integrated slat system",
|
|
"Dimensions: 80″W x 76″L x 42″H",
|
|
],
|
|
features: [
|
|
"No-squeak construction",
|
|
"Eco-friendly finishes",
|
|
"10-year warranty",
|
|
],
|
|
},
|
|
],
|
|
// Add more collections as needed
|
|
};
|
|
|
|
const CollectionPage = () => {
|
|
const { collectionId } = useParams<{ collectionId: string }>();
|
|
const collection = collectionId ? collectionItems[collectionId] || [] : [];
|
|
|
|
return (
|
|
<Box sx={{ backgroundColor: "#f5f5f5", minHeight: "100vh" }}>
|
|
{/* Collection Hero */}
|
|
<Box
|
|
sx={{
|
|
height: "50vh",
|
|
backgroundImage:
|
|
"linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(/images/collection-bg.jpg)",
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
textAlign: "center",
|
|
color: "#fff",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<Box sx={{ position: "relative", zIndex: 2 }}>
|
|
<Typography
|
|
variant="h1"
|
|
fontWeight="bold"
|
|
sx={{
|
|
fontSize: { xs: "2.5rem", md: "4rem" },
|
|
mb: 2,
|
|
textTransform: "capitalize",
|
|
}}
|
|
>
|
|
{collectionId} Collection
|
|
</Typography>
|
|
<Typography variant="h5" sx={{ color: "#FFA500" }}>
|
|
{collection.length} premium designs available
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Collection Description */}
|
|
<Paper elevation={0} sx={{ backgroundColor: "#fff", py: 8 }}>
|
|
<Container maxWidth="lg">
|
|
<Typography variant="h3" fontWeight="bold" sx={{ mb: 4 }}>
|
|
About This Collection
|
|
</Typography>
|
|
<Typography
|
|
variant="body1"
|
|
sx={{ mb: 3, fontSize: "1.1rem", lineHeight: 1.8 }}
|
|
>
|
|
Our {collectionId} collection represents the pinnacle of design and
|
|
craftsmanship. Each piece is created with meticulous attention to
|
|
detail, using only the finest materials sourced from sustainable
|
|
suppliers.
|
|
</Typography>
|
|
<Typography
|
|
variant="body1"
|
|
sx={{ fontSize: "1.1rem", lineHeight: 1.8 }}
|
|
>
|
|
From the initial sketches to the final quality inspection, every
|
|
step in our process is carefully monitored to ensure exceptional
|
|
quality and durability that will last for generations.
|
|
</Typography>
|
|
<Divider sx={{ my: 6 }} />
|
|
<Typography variant="h4" fontWeight="bold" sx={{ mb: 3 }}>
|
|
Collection Highlights
|
|
</Typography>
|
|
<Grid container spacing={4} sx={{ mb: 6 }}>
|
|
{[
|
|
"Handcrafted by skilled artisans",
|
|
"Sustainable materials",
|
|
"5-year craftsmanship warranty",
|
|
"Free design consultation available",
|
|
].map((item, i) => (
|
|
<Grid item xs={12} sm={6} key={i}>
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
<Box
|
|
sx={{
|
|
width: "8px",
|
|
height: "8px",
|
|
backgroundColor: "#FFA500",
|
|
mr: 2,
|
|
}}
|
|
/>
|
|
<Typography>{item}</Typography>
|
|
</Box>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Paper>
|
|
|
|
{/* Products Grid */}
|
|
<Container maxWidth="xl" sx={{ py: 10 }}>
|
|
<Typography
|
|
variant="h2"
|
|
fontWeight="bold"
|
|
sx={{
|
|
mb: 2,
|
|
color: "#333",
|
|
}}
|
|
>
|
|
Featured {collectionId}
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
mb: 6,
|
|
color: "#666",
|
|
}}
|
|
>
|
|
Browse our curated selection
|
|
</Typography>
|
|
|
|
<Grid container spacing={6}>
|
|
{collection.map((product) => (
|
|
<Grid item xs={12} sm={6} md={4} key={product.id}>
|
|
<Card
|
|
sx={{
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
transition: "all 0.3s ease",
|
|
"&:hover": {
|
|
transform: "translateY(-10px)",
|
|
boxShadow: "0 15px 30px rgba(0,0,0,0.15)",
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
height: "300px",
|
|
backgroundImage: `url(${product.image})`,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
}}
|
|
/>
|
|
<Box sx={{ p: 4, flexGrow: 1 }}>
|
|
<Typography variant="h4" fontWeight="bold" sx={{ mb: 2 }}>
|
|
{product.name}
|
|
</Typography>
|
|
<Typography variant="body1" sx={{ mb: 2, color: "#666" }}>
|
|
{product.description}
|
|
</Typography>
|
|
<Box sx={{ mb: 3 }}>
|
|
{product.details?.map((detail, i) => (
|
|
<Typography
|
|
key={i}
|
|
variant="body2"
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
mb: 1,
|
|
}}
|
|
>
|
|
<span style={{ color: "#FFA500", marginRight: "8px" }}>
|
|
•
|
|
</span>
|
|
{detail}
|
|
</Typography>
|
|
))}
|
|
</Box>
|
|
<Typography variant="h5" color="#FFA500" sx={{ mb: 3 }}>
|
|
{product.price}
|
|
</Typography>
|
|
<Button
|
|
component={Link}
|
|
to={`/products/${collectionId}/${product.id}`}
|
|
fullWidth
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#FFA500",
|
|
color: "#fff",
|
|
py: 1.5,
|
|
"&:hover": {
|
|
backgroundColor: "#E59400",
|
|
},
|
|
}}
|
|
>
|
|
View Details
|
|
</Button>
|
|
</Box>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default CollectionPage;
|