447 lines
18 KiB
TypeScript
447 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Box,
|
|
Container,
|
|
Typography,
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
CardMedia,
|
|
Grid,
|
|
Chip,
|
|
CircularProgress,
|
|
Alert
|
|
} from '@mui/material';
|
|
import {useState, useEffect, JSX} from 'react';
|
|
import { ShoppingCart, Palette, ImageOutlined, CreditCard, LocalShipping, CheckCircle } from '@mui/icons-material';
|
|
import clientApi from "@/lib/clientApi";
|
|
|
|
interface Product {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
imageUrl?: string;
|
|
basePrice: number;
|
|
isCustomizable: boolean;
|
|
}
|
|
|
|
interface ApiResponse {
|
|
items: Product[];
|
|
}
|
|
|
|
interface Step {
|
|
number: number;
|
|
label: string;
|
|
description: string;
|
|
icon: JSX.Element;
|
|
details: string;
|
|
}
|
|
|
|
export default function HomePage(): JSX.Element {
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchProducts = async (): Promise<void> => {
|
|
try {
|
|
const response = await clientApi.get<ApiResponse>('/products/', {
|
|
params: {
|
|
PageSize: 3,
|
|
PageNumber: 1,
|
|
IsActive: true,
|
|
SortBy: 'Price',
|
|
SortDirection: 'DESC'
|
|
}
|
|
});
|
|
setProducts(response.data.items);
|
|
} catch (err) {
|
|
setError('Failed to load products');
|
|
console.error('Error fetching products:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchProducts();
|
|
}, []);
|
|
|
|
const steps: Step[] = [
|
|
{
|
|
number: 1,
|
|
label: 'Pick an Item',
|
|
description: 'Browse our extensive collection of customizable products and select the perfect base for your design. From premium t-shirts and hoodies to mugs, phone cases, and more - we have everything you need to bring your vision to life.',
|
|
icon: <ShoppingCart sx={{ fontSize: 80 }} />,
|
|
details: 'Explore hundreds of high-quality products across multiple categories. Filter by material, size, color, and price to find exactly what you\'re looking for.'
|
|
},
|
|
{
|
|
number: 2,
|
|
label: 'Choose Variant',
|
|
description: 'Select from available sizes, colors, and material options that match your preferences and needs. Each product comes with detailed specifications and sizing guides.',
|
|
icon: <Palette sx={{ fontSize: 80 }} />,
|
|
details: 'View real-time previews of different variants. Check material quality, durability ratings, and care instructions for each option.'
|
|
},
|
|
{
|
|
number: 3,
|
|
label: 'Customize with Images',
|
|
description: 'Upload your own designs, add custom text, or use our intuitive design tools to create something truly unique. Our editor supports various file formats and offers professional design features.',
|
|
icon: <ImageOutlined sx={{ fontSize: 80 }} />,
|
|
details: 'Drag and drop images, adjust positioning, add filters, create text overlays, and preview your design in real-time on the selected product.'
|
|
},
|
|
{
|
|
number: 4,
|
|
label: 'Pay',
|
|
description: 'Complete your order with our secure checkout process. We accept multiple payment methods and provide instant order confirmation with detailed receipts.',
|
|
icon: <CreditCard sx={{ fontSize: 80 }} />,
|
|
details: 'Review your design, confirm quantities, apply discount codes, and choose from various secure payment options including cards, PayPal, and more.'
|
|
},
|
|
{
|
|
number: 5,
|
|
label: 'Wait for Order',
|
|
description: 'Sit back and relax while we handle the rest. Our professional printing team will carefully produce your custom item and ship it directly to your door.',
|
|
icon: <LocalShipping sx={{ fontSize: 80 }} />,
|
|
details: 'Track your order status in real-time, from printing to packaging to shipping. Receive updates via email and SMS throughout the process.'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Container maxWidth="lg" sx={{ py: 4 }}>
|
|
<Grid container spacing={6} alignItems="center" sx={{ mb: 6, minHeight: '70vh' }}>
|
|
<Grid size={{ xs:12, md:7 }}>
|
|
<Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
|
|
<Typography
|
|
variant="h1"
|
|
gutterBottom
|
|
sx={{
|
|
fontWeight: 'bold',
|
|
mb: 3,
|
|
fontSize: { xs: '2.5rem', md: '3.5rem', lg: '4rem' },
|
|
lineHeight: 1.2
|
|
}}
|
|
>
|
|
Custom Printing<br />
|
|
<Box component="span" sx={{ color: 'primary.main' }}>Made Simple</Box>
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
color="text.secondary"
|
|
sx={{
|
|
mb: 4,
|
|
lineHeight: 1.6,
|
|
fontSize: { xs: '1.2rem', md: '1.4rem' }
|
|
}}
|
|
>
|
|
Transform your ideas into reality with our premium custom printing services.
|
|
From t-shirts to mugs, we bring your designs to life with professional quality
|
|
and lightning-fast turnaround times.
|
|
</Typography>
|
|
|
|
<Box sx={{ mb: 4 }}>
|
|
<Grid container spacing={3}>
|
|
<Grid size={{ xs:12, sm: 6 }} >
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
|
<CheckCircle sx={{ color: 'primary.main', mr: 2 }} />
|
|
<Typography variant="body1" fontWeight="medium">
|
|
Professional Quality Guaranteed
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
<Grid size={{ xs:12, sm: 6 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
|
<CheckCircle sx={{ color: 'primary.main', mr: 2 }} />
|
|
<Typography variant="body1" fontWeight="medium">
|
|
Fast 24-48 Hour Turnaround
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
<Grid size={{ xs:12, sm: 6 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
|
<CheckCircle sx={{ color: 'primary.main', mr: 2 }} />
|
|
<Typography variant="body1" fontWeight="medium">
|
|
Free Design Support
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
<Grid size={{ xs:12, sm: 6 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
|
<CheckCircle sx={{ color: 'primary.main', mr: 2 }} />
|
|
<Typography variant="body1" fontWeight="medium">
|
|
100% Satisfaction Promise
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
|
|
<Box sx={{ display: 'flex', gap: 2, justifyContent: { xs: 'center', md: 'flex-start' }, flexWrap: 'wrap', mb: 4 }}>
|
|
<Button
|
|
variant="contained"
|
|
size="large"
|
|
href="/gallery"
|
|
sx={{ px: 5, py: 2, fontSize: '1.2rem' }}
|
|
>
|
|
View Gallery
|
|
</Button>
|
|
</Box>
|
|
|
|
<Typography variant="body2" color="text.secondary">
|
|
⭐⭐⭐⭐⭐ Trusted by 10,000+ customers • 4.9/5 rating
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Box sx={{ mb: 12 }}>
|
|
<Box sx={{ mb: 6, textAlign: { xs: 'center', md: 'left' } }}>
|
|
<Typography variant="h2" gutterBottom sx={{ fontWeight: 'bold', mb: 2 }}>
|
|
Featured Products
|
|
</Typography>
|
|
<Typography variant="h6" color="text.secondary" sx={{ maxWidth: 600 }}>
|
|
Discover our most popular customizable products. Each item is carefully selected
|
|
for quality and perfect for personalization.
|
|
</Typography>
|
|
</Box>
|
|
|
|
{loading && (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
|
|
<CircularProgress size={60} />
|
|
</Box>
|
|
)}
|
|
|
|
{error && (
|
|
<Alert severity="error" sx={{ mb: 4 }}>
|
|
{error}
|
|
</Alert>
|
|
)}
|
|
|
|
{!loading && !error && (
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: 3,
|
|
justifyContent: { xs: 'center', lg: 'flex-start' }
|
|
}}>
|
|
{products.map((product: Product) => (
|
|
<Card
|
|
key={product.id}
|
|
sx={{
|
|
width: { xs: '100%', sm: 'calc(50% - 12px)', lg: 'calc(33.333% - 16px)' },
|
|
maxWidth: { xs: 400, sm: 350, lg: 370 },
|
|
height: { xs: 450, sm: 480, lg: 500 },
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
transition: 'transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out',
|
|
'&:hover': {
|
|
transform: 'translateY(-8px)',
|
|
boxShadow: 6
|
|
}
|
|
}}
|
|
>
|
|
<CardMedia
|
|
component="img"
|
|
height="200"
|
|
image={product.imageUrl || '/placeholder-product.jpg'}
|
|
alt={product.name}
|
|
sx={{
|
|
objectFit: 'cover',
|
|
height: { xs: 180, sm: 200, lg: 220 }
|
|
}}
|
|
/>
|
|
<CardContent sx={{
|
|
flexGrow: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
p: { xs: 2, sm: 2.5, lg: 3 },
|
|
'&:last-child': { pb: { xs: 2, sm: 2.5, lg: 3 } }
|
|
}}>
|
|
<Typography variant="h6" gutterBottom sx={{
|
|
fontWeight: 'bold',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
fontSize: { xs: '1.1rem', sm: '1.25rem' }
|
|
}}>
|
|
{product.name}
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary" sx={{
|
|
flexGrow: 1,
|
|
mb: 2,
|
|
overflow: 'hidden',
|
|
display: '-webkit-box',
|
|
WebkitLineClamp: { xs: 2, sm: 3 },
|
|
WebkitBoxOrient: 'vertical',
|
|
minHeight: { xs: 36, sm: 54 },
|
|
fontSize: { xs: '0.875rem', sm: '0.875rem' }
|
|
}}>
|
|
{product.description}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
|
<Typography variant="subtitle1" color="primary" sx={{
|
|
fontWeight: 'bold',
|
|
fontSize: { xs: '1rem', sm: '1.1rem' }
|
|
}}>
|
|
From ${product.basePrice?.toFixed(2)}
|
|
</Typography>
|
|
{product.isCustomizable && (
|
|
<Chip
|
|
label="Custom"
|
|
color="primary"
|
|
size="small"
|
|
/>
|
|
)}
|
|
</Box>
|
|
<Button
|
|
variant="contained"
|
|
fullWidth
|
|
size="medium"
|
|
sx={{
|
|
fontSize: { xs: '0.875rem', sm: '1rem' },
|
|
py: { xs: 1, sm: 1.5 }
|
|
}}
|
|
>
|
|
Customize
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
<Box sx={{ mb: 12, py: 8 }}>
|
|
<Container maxWidth="lg">
|
|
<Box sx={{ mb: 8 }}>
|
|
<Typography variant="h2" gutterBottom sx={{ fontWeight: 'bold', mb: 2 }}>
|
|
How It Works
|
|
</Typography>
|
|
<Typography variant="h5" color="text.secondary" sx={{ maxWidth: 600 }}>
|
|
Our streamlined process makes custom printing simple and stress-free.
|
|
Follow these five easy steps to get your perfect custom products.
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Grid container spacing={6}>
|
|
{steps.map((step: Step, index: number) => (
|
|
<Grid size={{ xs:12 }} key={index}>
|
|
<Card
|
|
sx={{
|
|
p: 4,
|
|
boxShadow: 2,
|
|
borderRadius: 3,
|
|
transition: 'all 0.3s ease',
|
|
'&:hover': {
|
|
boxShadow: 8,
|
|
transform: 'translateY(-4px)'
|
|
}
|
|
}}
|
|
>
|
|
<Grid container spacing={4} alignItems="center">
|
|
<Grid size={{ xs:12, md: 2 }}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: { xs: 'center', md: 'flex-start' },
|
|
mb: { xs: 2, md: 0 }
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 2,
|
|
bgcolor: 'primary.main',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'white',
|
|
mr: 2
|
|
}}
|
|
>
|
|
{step.icon}
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: '50%',
|
|
bgcolor: 'primary.main',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'white',
|
|
fontSize: '1.5rem',
|
|
fontWeight: 'bold'
|
|
}}
|
|
>
|
|
{step.number}
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
|
|
<Grid size={{ xs:12, md: 10 }}>
|
|
<Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
|
|
<Typography
|
|
variant="h4"
|
|
gutterBottom
|
|
sx={{
|
|
fontWeight: 'bold',
|
|
color: 'primary.main',
|
|
mb: 2
|
|
}}
|
|
>
|
|
{step.label}
|
|
</Typography>
|
|
<Typography
|
|
variant="h6"
|
|
paragraph
|
|
sx={{
|
|
mb: 3,
|
|
lineHeight: 1.6,
|
|
color: 'text.primary',
|
|
fontWeight: 400
|
|
}}
|
|
>
|
|
{step.description}
|
|
</Typography>
|
|
<Typography
|
|
variant="body1"
|
|
color="text.secondary"
|
|
sx={{
|
|
lineHeight: 1.7,
|
|
fontSize: '1.1rem'
|
|
}}
|
|
>
|
|
{step.details}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Box>
|
|
|
|
<Box sx={{ textAlign: 'center', py: 8, bgcolor: 'background.paper', borderRadius: 2, boxShadow: 1 }}>
|
|
<Typography variant="h3" gutterBottom sx={{ fontWeight: 'bold', mb: 3 }}>
|
|
Ready to Get Started?
|
|
</Typography>
|
|
<Typography variant="h6" color="text.secondary" sx={{ mb: 4, maxWidth: 600, mx: 'auto' }}>
|
|
Join thousands of satisfied customers who trust us with their custom printing needs.
|
|
Quality guaranteed, fast turnaround, and competitive prices.
|
|
</Typography>
|
|
<Button
|
|
variant="contained"
|
|
size="large"
|
|
sx={{ px: 6, py: 2, fontSize: '1.2rem' }}
|
|
startIcon={<CheckCircle />}
|
|
>
|
|
Start Your Order Today
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
} |