Skip to content

Commit f2fcb28

Browse files
smthingsmthing
committed
feat(page): 添加成本优势组件并重构页面结构
- 添加 CostTimeline 组件展示成本降低实施路径 - 添加 TeamComparison 组件对比传统产品与 smart-mqtt 团队规模 - 更新 CostAdvantageSection 中的导入路径修复模块引用 - 在首页引入 Footer 组件并移除内联页脚代码 - 修复 Hero 组件中开始按钮的国际化链接路径
1 parent f642842 commit f2fcb28

6 files changed

Lines changed: 909 additions & 259 deletions

File tree

‎pages/src/components/en/CostAdvantageSection.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
import TeamComparison from '../TeamComparison.astro';
3-
import CostTimeline from '../CostTimeline.astro';
2+
import TeamComparison from './TeamComparison.astro';
3+
import CostTimeline from './CostTimeline.astro';
44
---
55

66
<section class="cost-section" id="cost">

‎pages/src/components/en/CostTimeline.astro‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
---
2+
const timelineSteps = [
3+
{
4+
step: 1,
5+
title: 'Technology Cost Reduction',
6+
desc: 'High-performance communication framework based on smart-socket',
7+
metric: '100K+ Concurrent',
8+
detail: 'Message latency <1ms, more cost-effective hardware specifications with equivalent performance'
9+
},
10+
{
11+
step: 2,
12+
title: 'Efficiency Revolution',
13+
desc: 'AI-assisted development model',
14+
metric: '1-Person Team',
15+
detail: '10x R&D efficiency improvement, cost less than 1% of traditional model'
16+
},
17+
{
18+
step: 3,
19+
title: 'Comprehensive Benefits',
20+
desc: 'Dual optimization of technology cost and R&D cost',
21+
metric: 'Cost 1/10',
22+
detail: 'Total cost reduced to one-tenth of the original'
23+
}
24+
];
25+
---
26+
27+
<div class="implementation-path">
28+
<div class="path-header">
29+
<h3>Cost Reduction Implementation Path</h3>
30+
<p>Three steps to achieve cost optimization, comprehensive improvement from architecture to efficiency</p>
31+
</div>
32+
33+
<div class="timeline">
34+
{timelineSteps.map((step, index) => (
35+
<div class="timeline-node" style={`--delay: ${index * 0.15}s`}>
36+
<div class="node-marker">
37+
<span class="marker-number">{step.step}</span>
38+
<div class="marker-ring"></div>
39+
</div>
40+
<div class="node-content">
41+
<div class="content-badge">{step.metric}</div>
42+
<h4>{step.title}</h4>
43+
<p>{step.desc}</p>
44+
<span class="content-detail">{step.detail}</span>
45+
</div>
46+
{index < timelineSteps.length - 1 && (
47+
<div class="node-connector">
48+
<div class="connector-line"></div>
49+
</div>
50+
)}
51+
</div>
52+
))}
53+
</div>
54+
</div>
55+
56+
<style>
57+
.implementation-path {
58+
background: rgba(255, 255, 255, 0.03);
59+
border: 1px solid rgba(255, 255, 255, 0.08);
60+
border-radius: 20px;
61+
padding: 28px;
62+
}
63+
64+
.path-header {
65+
text-align: center;
66+
margin-bottom: 24px;
67+
}
68+
69+
.path-header h3 {
70+
font-size: 18px;
71+
font-weight: 600;
72+
color: var(--text-primary);
73+
margin-bottom: 4px;
74+
}
75+
76+
.path-header p {
77+
font-size: 13px;
78+
color: var(--text-muted);
79+
}
80+
81+
.timeline {
82+
display: flex;
83+
flex-direction: row;
84+
justify-content: space-between;
85+
gap: 16px;
86+
position: relative;
87+
}
88+
89+
.timeline-node {
90+
flex: 1;
91+
display: flex;
92+
flex-direction: column;
93+
align-items: center;
94+
text-align: center;
95+
gap: 12px;
96+
position: relative;
97+
animation: fade-in-up 0.6s ease forwards;
98+
animation-delay: var(--delay);
99+
opacity: 0;
100+
}
101+
102+
@keyframes fade-in-up {
103+
from {
104+
opacity: 0;
105+
transform: translateY(10px);
106+
}
107+
to {
108+
opacity: 1;
109+
transform: translateY(0);
110+
}
111+
}
112+
113+
.node-marker {
114+
position: relative;
115+
width: 44px;
116+
height: 44px;
117+
flex-shrink: 0;
118+
}
119+
120+
.marker-number {
121+
position: absolute;
122+
inset: 0;
123+
display: flex;
124+
align-items: center;
125+
justify-content: center;
126+
font-size: 16px;
127+
font-weight: 700;
128+
color: #6366f1;
129+
z-index: 2;
130+
}
131+
132+
.marker-ring {
133+
position: absolute;
134+
inset: 0;
135+
border-radius: 50%;
136+
background: rgba(99, 102, 241, 0.1);
137+
border: 2px solid rgba(99, 102, 241, 0.3);
138+
transition: all 0.3s ease;
139+
}
140+
141+
.timeline-node:hover .marker-ring {
142+
transform: scale(1.1);
143+
border-color: #6366f1;
144+
box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
145+
}
146+
147+
.node-connector {
148+
position: absolute;
149+
top: 22px;
150+
left: calc(50% + 22px);
151+
width: calc(100% - 44px);
152+
height: 2px;
153+
z-index: 0;
154+
}
155+
156+
.connector-line {
157+
width: 100%;
158+
height: 100%;
159+
background: linear-gradient(90deg, #6366f1, #10b981);
160+
opacity: 0.3;
161+
}
162+
163+
.node-content {
164+
flex: 1;
165+
padding-top: 0;
166+
}
167+
168+
.content-badge {
169+
display: inline-block;
170+
padding: 3px 10px;
171+
background: rgba(99, 102, 241, 0.1);
172+
border-radius: 100px;
173+
font-size: 11px;
174+
font-weight: 600;
175+
color: #6366f1;
176+
margin-bottom: 6px;
177+
}
178+
179+
.node-content h4 {
180+
font-size: 14px;
181+
font-weight: 600;
182+
color: var(--text-primary);
183+
margin-bottom: 2px;
184+
}
185+
186+
.node-content p {
187+
font-size: 12px;
188+
color: var(--text-muted);
189+
margin-bottom: 4px;
190+
line-height: 1.4;
191+
}
192+
193+
.content-detail {
194+
font-size: 11px;
195+
color: var(--text-subtle);
196+
line-height: 1.3;
197+
}
198+
199+
@media (max-width: 1024px) {
200+
.timeline {
201+
flex-direction: column;
202+
gap: 24px;
203+
}
204+
205+
.timeline-node {
206+
flex-direction: row;
207+
align-items: flex-start;
208+
text-align: left;
209+
gap: 16px;
210+
}
211+
212+
.node-connector {
213+
display: none;
214+
}
215+
}
216+
217+
@media (max-width: 640px) {
218+
.implementation-path {
219+
padding: 20px;
220+
}
221+
222+
.timeline {
223+
flex-direction: column;
224+
gap: 20px;
225+
}
226+
227+
.timeline-node {
228+
flex-direction: row;
229+
align-items: flex-start;
230+
text-align: left;
231+
gap: 12px;
232+
}
233+
234+
.node-connector {
235+
display: none;
236+
}
237+
}
238+
239+
@media (prefers-reduced-motion: reduce) {
240+
.timeline-node {
241+
animation: none;
242+
opacity: 1;
243+
}
244+
}
245+
</style>

0 commit comments

Comments
 (0)