Home.jsx
3.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import React from 'react';
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div style={containerStyle}>
<section style={heroStyle}>
<h1 style={heroTitleStyle}>Welcome to Our Ecommerce Store</h1>
<p style={heroSubtitleStyle}>
Discover amazing products at great prices. Shop with confidence and enjoy fast delivery.
</p>
<Link to="/products" style={ctaButtonStyle}>
Shop Now
</Link>
</section>
<section style={featuresStyle}>
<h2 style={sectionTitleStyle}>Why Shop With Us?</h2>
<div style={featuresGridStyle}>
<div style={featureCardStyle}>
<h3>🚚 Fast Shipping</h3>
<p>Free shipping on orders over $50. Delivery within 2-3 business days.</p>
</div>
<div style={featureCardStyle}>
<h3>💳 Secure Payment</h3>
<p>Your payments are safe with our encrypted checkout process.</p>
</div>
<div style={featureCardStyle}>
<h3>👍 Quality Products</h3>
<p>We carefully select all products to ensure the highest quality.</p>
</div>
<div style={featureCardStyle}>
<h3>📞 24/7 Support</h3>
<p>Our customer service team is here to help you anytime.</p>
</div>
</div>
</section>
<section style={categoriesStyle}>
<h2 style={sectionTitleStyle}>Popular Categories</h2>
<div style={categoriesGridStyle}>
<Link to="/products?category=electronics" style={categoryCardStyle}>
<h3>Electronics</h3>
<p>Latest gadgets and devices</p>
</Link>
<Link to="/products?category=clothing" style={categoryCardStyle}>
<h3>Clothing</h3>
<p>Fashion for everyone</p>
</Link>
<Link to="/products?category=home" style={categoryCardStyle}>
<h3>Home & Garden</h3>
<p>Everything for your home</p>
</Link>
<Link to="/products?category=sports" style={categoryCardStyle}>
<h3>Sports</h3>
<p>Equipment and apparel</p>
</Link>
</div>
</section>
</div>
);
};
const containerStyle = {
minHeight: 'calc(100vh - 200px)',
};
const heroStyle = {
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
color: 'white',
padding: '4rem 1rem',
textAlign: 'center',
};
const heroTitleStyle = {
fontSize: '3rem',
marginBottom: '1rem',
fontWeight: 'bold',
};
const heroSubtitleStyle = {
fontSize: '1.2rem',
marginBottom: '2rem',
opacity: 0.9,
maxWidth: '600px',
margin: '0 auto 2rem',
};
const ctaButtonStyle = {
display: 'inline-block',
backgroundColor: 'white',
color: '#667eea',
padding: '1rem 2rem',
borderRadius: '50px',
textDecoration: 'none',
fontWeight: 'bold',
fontSize: '1.1rem',
transition: 'transform 0.3s',
};
const featuresStyle = {
padding: '4rem 1rem',
backgroundColor: '#f8f9fa',
};
const sectionTitleStyle = {
textAlign: 'center',
fontSize: '2.5rem',
marginBottom: '3rem',
color: '#333',
};
const featuresGridStyle = {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
gap: '2rem',
maxWidth: '1200px',
margin: '0 auto',
};
const featureCardStyle = {
backgroundColor: 'white',
padding: '2rem',
borderRadius: '10px',
textAlign: 'center',
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
transition: 'transform 0.3s',
};
const categoriesStyle = {
padding: '4rem 1rem',
};
const categoriesGridStyle = {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
gap: '1.5rem',
maxWidth: '1200px',
margin: '0 auto',
};
const categoryCardStyle = {
backgroundColor: 'white',
padding: '2rem',
borderRadius: '10px',
textAlign: 'center',
textDecoration: 'none',
color: '#333',
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
transition: 'transform 0.3s, box-shadow 0.3s',
};
export default Home;