diff --git a/webui/src/app/page.js b/webui/src/app/page.js
index 661b9d1..5c0aeff 100644
--- a/webui/src/app/page.js
+++ b/webui/src/app/page.js
@@ -7,85 +7,263 @@ import {
Button,
Card,
CardContent,
- TextField,
- Chip,
+ CardMedia,
Grid,
+ Chip,
+ CircularProgress,
+ Alert
} 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() {
+ 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: ,
+ color: '#1976d2'
+ },
+ {
+ label: 'Choose Variant',
+ description: 'Select size, color, and material options that match your preferences and needs.',
+ icon: ,
+ color: '#9c27b0'
+ },
+ {
+ label: 'Customize with Images',
+ description: 'Upload your designs, add text, or use our design tools to create something unique.',
+ icon: ,
+ color: '#f57c00'
+ },
+ {
+ label: 'Pay',
+ description: 'Secure checkout with multiple payment options. Review your order before finalizing.',
+ icon: ,
+ color: '#388e3c'
+ },
+ {
+ label: 'Wait for Order',
+ description: 'We\'ll print and ship your custom item. Track your order status in real-time.',
+ icon: ,
+ color: '#d32f2f'
+ }
+ ];
return (
-
-
-
- Welcome to Modern UI
-
-
- Experience the beauty of modern Material-UI theming
-
-
-
-
-
+
+
+
+ Custom Printing Made Simple
+
+
+ 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.
+
+
+
+
+
-
-
-
-
-
- Beautiful Cards
-
-
- Cards with modern gradients, hover effects, and perfect spacing that make your content shine.
-
-
-
-
-
-
-
-
-
-
+
+
+ Featured Products
+
-
-
-
-
- Form Elements
-
-
-
+
+
+ )}
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {!loading && !error && (
+
+ {products.map((product) => (
+
+
+
-
-
-
-
-
-
+
+
+ {product.name}
+
+
+ {product.description}
+
+
+
+ From ${product.basePrice?.toFixed(2)}
+
+ {product.isCustomizable && (
+
+ )}
+
+
+
+
+
+ ))}
-
-
+ )}
+
+
+
+
+ How It Works
+
+
+
+ {steps.map((step, index) => (
+
+ {index < steps.length - 1 && (
+
+ )}
+
+
+ {step.icon}
+
+
+
+
+ {index + 1}. {step.label}
+
+
+ {step.description}
+
+
+
+ ))}
+
+
+
+
+
+ Ready to Get Started?
+
+
+ Join thousands of satisfied customers who trust us with their custom printing needs.
+ Quality guaranteed, fast turnaround, and competitive prices.
+
+ }
+ >
+ Start Your Order Today
+
+
+
);
}
\ No newline at end of file