Home.jsx
3.06 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
import React from 'react';
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div style={containerStyle}>
<section style={heroStyle}>
<h1 style={heroTitleStyle}>欢迎来到普罗米修甄选购物平台</h1>
<p style={heroSubtitleStyle}>
挑选物美价廉的潮流商品，让您的购物旅途充满自信和阳光.
</p>
<Link to="/products" style={ctaButtonStyle}>
立即选购
</Link>
</section>
<section style={categoriesStyle}>
<h2 style={sectionTitleStyle}>热门商品</h2>
<div style={categoriesGridStyle}>
<Link to="/products?category=electronics" style={categoryCardStyle}>
<h3>电子</h3>
<p>最新电子产品和设备</p>
</Link>
<Link to="/products?category=clothing" style={categoryCardStyle}>
<h3>服饰</h3>
<p>潮流前卫精品</p>
</Link>
<Link to="/products?category=home" style={categoryCardStyle}>
<h3>家居</h3>
<p>温馨舒适港湾</p>
</Link>
<Link to="/products?category=sports" style={categoryCardStyle}>
<h3>运动</h3>
<p>健康阳光拼搏</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;