Landing page
This commit is contained in:
lumijiez
@@ -7,85 +7,263 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
TextField,
|
CardMedia,
|
||||||
Chip,
|
|
||||||
Grid,
|
Grid,
|
||||||
|
Chip,
|
||||||
|
CircularProgress,
|
||||||
|
Alert
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { ShoppingCart, Palette, CreditCard, LocalShipping, CheckCircle } from '@mui/icons-material';
|
||||||
|
import clientApi from "@/lib/clientApi";
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
|
const [products, setProducts] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchProducts = async () => {
|
||||||
|
try {
|
||||||
|
const response = await clientApi.get('/products/', {
|
||||||
|
params: {
|
||||||
|
PageSize: 6,
|
||||||
|
PageNumber: 1,
|
||||||
|
IsActive: true,
|
||||||
|
IsCustomizable: 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 = [
|
||||||
|
{
|
||||||
|
label: 'Pick an Item',
|
||||||
|
description: 'Browse our collection of customizable products and select the perfect base for your design.',
|
||||||
|
icon: <ShoppingCart sx={{ fontSize: 40 }} />,
|
||||||
|
color: '#1976d2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Choose Variant',
|
||||||
|
description: 'Select size, color, and material options that match your preferences and needs.',
|
||||||
|
icon: <Palette sx={{ fontSize: 40 }} />,
|
||||||
|
color: '#9c27b0'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Customize with Images',
|
||||||
|
description: 'Upload your designs, add text, or use our design tools to create something unique.',
|
||||||
|
icon: <Palette sx={{ fontSize: 40 }} />,
|
||||||
|
color: '#f57c00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Pay',
|
||||||
|
description: 'Secure checkout with multiple payment options. Review your order before finalizing.',
|
||||||
|
icon: <CreditCard sx={{ fontSize: 40 }} />,
|
||||||
|
color: '#388e3c'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Wait for Order',
|
||||||
|
description: 'We\'ll print and ship your custom item. Track your order status in real-time.',
|
||||||
|
icon: <LocalShipping sx={{ fontSize: 40 }} />,
|
||||||
|
color: '#d32f2f'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container maxWidth="lg" sx={{ py: 4 }}>
|
<Container maxWidth="lg" sx={{ py: 4 }}>
|
||||||
<Box sx={{ mb: 6, textAlign: 'center' }}>
|
<Box sx={{ mb: 8, textAlign: 'center' }}>
|
||||||
<Typography variant="h1" gutterBottom>
|
<Typography variant="h1" gutterBottom sx={{ fontWeight: 'bold', mb: 3 }}>
|
||||||
Welcome to Modern UI
|
Custom Printing Made Simple
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="h5" color="text.secondary" sx={{ mb: 4 }}>
|
<Typography variant="h5" color="text.secondary" sx={{ mb: 4, maxWidth: 800, mx: 'auto' }}>
|
||||||
Experience the beauty of modern Material-UI theming
|
Transform your ideas into reality with our premium custom printing services.
|
||||||
</Typography>
|
From t-shirts to mugs, we bring your designs to life with professional quality.
|
||||||
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
|
</Typography>
|
||||||
<Button variant="contained" size="large">
|
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||||
Get Started
|
<Button variant="contained" size="large" sx={{ px: 4, py: 1.5 }}>
|
||||||
</Button>
|
Start Customizing
|
||||||
<Button variant="outlined" size="large">
|
</Button>
|
||||||
Learn More
|
<Button variant="outlined" size="large" sx={{ px: 4, py: 1.5 }}>
|
||||||
</Button>
|
View Gallery
|
||||||
</Box>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
<Grid container spacing={4}>
|
<Box sx={{ mb: 8 }}>
|
||||||
<Grid item xs={12} md={6}>
|
<Typography variant="h2" gutterBottom sx={{ textAlign: 'center', mb: 6 }}>
|
||||||
<Card>
|
Featured Products
|
||||||
<CardContent>
|
</Typography>
|
||||||
<Typography variant="h4" gutterBottom>
|
|
||||||
Beautiful Cards
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1" color="text.secondary" paragraph>
|
|
||||||
Cards with modern gradients, hover effects, and perfect spacing that make your content shine.
|
|
||||||
</Typography>
|
|
||||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 2 }}>
|
|
||||||
<Chip label="Modern" />
|
|
||||||
<Chip label="Responsive" />
|
|
||||||
<Chip label="Beautiful" />
|
|
||||||
</Box>
|
|
||||||
<Button variant="contained">Explore</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<Grid item xs={12} md={6}>
|
{loading && (
|
||||||
<Card>
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
|
||||||
<CardContent>
|
<CircularProgress size={60} />
|
||||||
<Typography variant="h4" gutterBottom>
|
</Box>
|
||||||
Form Elements
|
)}
|
||||||
</Typography>
|
|
||||||
<Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
{error && (
|
||||||
<TextField
|
<Alert severity="error" sx={{ mb: 4 }}>
|
||||||
label="Your Name"
|
{error}
|
||||||
variant="outlined"
|
</Alert>
|
||||||
fullWidth
|
)}
|
||||||
|
|
||||||
|
{!loading && !error && (
|
||||||
|
<Grid container spacing={3} sx={{ justifyContent: 'center' }}>
|
||||||
|
{products.map((product) => (
|
||||||
|
<Grid item key={product.id}>
|
||||||
|
<Card
|
||||||
|
sx={{
|
||||||
|
height: 380,
|
||||||
|
width: 300,
|
||||||
|
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="180"
|
||||||
|
image={product.imageUrl || '/placeholder-product.jpg'}
|
||||||
|
alt={product.name}
|
||||||
|
sx={{ objectFit: 'cover' }}
|
||||||
/>
|
/>
|
||||||
<TextField
|
<CardContent sx={{
|
||||||
label="Email Address"
|
flexGrow: 1,
|
||||||
variant="outlined"
|
display: 'flex',
|
||||||
type="email"
|
flexDirection: 'column',
|
||||||
fullWidth
|
p: 2,
|
||||||
/>
|
'&:last-child': { pb: 2 }
|
||||||
<TextField
|
}}>
|
||||||
label="Message"
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
variant="outlined"
|
fontWeight: 'bold',
|
||||||
multiline
|
overflow: 'hidden',
|
||||||
rows={4}
|
textOverflow: 'ellipsis',
|
||||||
fullWidth
|
whiteSpace: 'nowrap'
|
||||||
/>
|
}}>
|
||||||
<Button variant="contained" size="large">
|
{product.name}
|
||||||
Send Message
|
</Typography>
|
||||||
</Button>
|
<Typography variant="body2" color="text.secondary" sx={{
|
||||||
</Box>
|
flexGrow: 1,
|
||||||
</CardContent>
|
mb: 2,
|
||||||
</Card>
|
overflow: 'hidden',
|
||||||
|
display: '-webkit-box',
|
||||||
|
WebkitLineClamp: 2,
|
||||||
|
WebkitBoxOrient: 'vertical',
|
||||||
|
minHeight: 40
|
||||||
|
}}>
|
||||||
|
{product.description}
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||||
|
<Typography variant="subtitle1" color="primary" sx={{ fontWeight: 'bold' }}>
|
||||||
|
From ${product.basePrice?.toFixed(2)}
|
||||||
|
</Typography>
|
||||||
|
{product.isCustomizable && (
|
||||||
|
<Chip
|
||||||
|
label="Custom"
|
||||||
|
color="primary"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
fullWidth
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
Customize
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
)}
|
||||||
</Container>
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ mb: 8 }}>
|
||||||
|
<Typography variant="h2" gutterBottom sx={{ textAlign: 'center', mb: 6 }}>
|
||||||
|
How It Works
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box sx={{ maxWidth: 800, mx: 'auto' }}>
|
||||||
|
{steps.map((step, index) => (
|
||||||
|
<Box key={index} sx={{ display: 'flex', mb: 4, position: 'relative' }}>
|
||||||
|
{index < steps.length - 1 && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
left: 30,
|
||||||
|
top: 80,
|
||||||
|
width: 2,
|
||||||
|
height: 60,
|
||||||
|
bgcolor: 'divider',
|
||||||
|
zIndex: 0
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
borderRadius: '50%',
|
||||||
|
bgcolor: step.color,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
mr: 3,
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 1,
|
||||||
|
color: 'white'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{step.icon}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ flex: 1, pt: 1 }}>
|
||||||
|
<Typography variant="h4" gutterBottom sx={{ fontWeight: 'bold', color: step.color }}>
|
||||||
|
{index + 1}. {step.label}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" color="text.secondary" sx={{ fontSize: '1.1rem' }}>
|
||||||
|
{step.description}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ textAlign: 'center', py: 6, bgcolor: 'background.paper', borderRadius: 2 }}>
|
||||||
|
<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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user