Skip to content

Commit 6adbc07

Browse files
XunzhuoXunzhuo
committed
docs(site): improve and stylish landing page
Signed-off-by: bitliu <[email protected]>
1 parent 8a8fcc5 commit 6adbc07

File tree

10 files changed

+1623
-39
lines changed

10 files changed

+1623
-39
lines changed

‎website/src/components/AIChipAnimation.js‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import React, { useEffect, useRef } from 'react';
2+
import styles from './AIChipAnimation.module.css';
3+
4+
const AIChipAnimation = () => {
5+
const svgRef = useRef(null);
6+
7+
useEffect(() => {
8+
const svg = svgRef.current;
9+
if (!svg) return;
10+
11+
// Add pulsing animation to circuit paths
12+
const paths = svg.querySelectorAll('.circuit-path');
13+
paths.forEach((path, index) => {
14+
path.style.animationDelay = `${index * 0.2}s`;
15+
});
16+
17+
// Add data flow animation
18+
const dataPoints = svg.querySelectorAll('.data-point');
19+
dataPoints.forEach((point, index) => {
20+
point.style.animationDelay = `${index * 0.3}s`;
21+
});
22+
}, []);
23+
24+
return (
25+
<div className={styles.chipContainer}>
26+
<svg
27+
ref={svgRef}
28+
className={styles.chipSvg}
29+
viewBox="0 0 400 300"
30+
xmlns="http://www.w3.org/2000/svg"
31+
>
32+
{/* Chip base */}
33+
<rect
34+
x="50"
35+
y="50"
36+
width="300"
37+
height="200"
38+
rx="20"
39+
fill="url(#chipGradient)"
40+
stroke="url(#chipBorder)"
41+
strokeWidth="2"
42+
className={styles.chipBase}
43+
/>
44+
45+
{/* Circuit patterns */}
46+
<g className={styles.circuitGroup}>
47+
{/* Horizontal circuits */}
48+
<path
49+
d="M 70 100 L 130 100 L 140 110 L 180 110 L 190 100 L 250 100 L 260 110 L 300 110 L 310 100 L 330 100"
50+
stroke="url(#circuitGradient)"
51+
strokeWidth="3"
52+
fill="none"
53+
className="circuit-path"
54+
/>
55+
<path
56+
d="M 70 140 L 110 140 L 120 130 L 160 130 L 170 140 L 210 140 L 220 130 L 260 130 L 270 140 L 330 140"
57+
stroke="url(#circuitGradient)"
58+
strokeWidth="3"
59+
fill="none"
60+
className="circuit-path"
61+
/>
62+
<path
63+
d="M 70 180 L 120 180 L 130 170 L 170 170 L 180 180 L 220 180 L 230 170 L 270 170 L 280 180 L 330 180"
64+
stroke="url(#circuitGradient)"
65+
strokeWidth="3"
66+
fill="none"
67+
className="circuit-path"
68+
/>
69+
70+
{/* Vertical circuits */}
71+
<path
72+
d="M 120 70 L 120 110 L 130 120 L 130 160 L 120 170 L 120 210 L 130 220 L 130 230"
73+
stroke="url(#circuitGradient)"
74+
strokeWidth="3"
75+
fill="none"
76+
className="circuit-path"
77+
/>
78+
<path
79+
d="M 200 70 L 200 90 L 210 100 L 210 140 L 200 150 L 200 190 L 210 200 L 210 230"
80+
stroke="url(#circuitGradient)"
81+
strokeWidth="3"
82+
fill="none"
83+
className="circuit-path"
84+
/>
85+
<path
86+
d="M 280 70 L 280 100 L 270 110 L 270 150 L 280 160 L 280 200 L 270 210 L 270 230"
87+
stroke="url(#circuitGradient)"
88+
strokeWidth="3"
89+
fill="none"
90+
className="circuit-path"
91+
/>
92+
</g>
93+
94+
{/* Processing cores */}
95+
<g className={styles.coresGroup}>
96+
<circle cx="150" cy="120" r="15" fill="url(#coreGradient)" className={styles.processingCore} />
97+
<circle cx="250" cy="120" r="15" fill="url(#coreGradient)" className={styles.processingCore} />
98+
<circle cx="150" cy="180" r="15" fill="url(#coreGradient)" className={styles.processingCore} />
99+
<circle cx="250" cy="180" r="15" fill="url(#coreGradient)" className={styles.processingCore} />
100+
101+
{/* Core labels */}
102+
<text x="150" y="125" textAnchor="middle" className={styles.coreLabel}>AI</text>
103+
<text x="250" y="125" textAnchor="middle" className={styles.coreLabel}>ML</text>
104+
<text x="150" y="185" textAnchor="middle" className={styles.coreLabel}>NN</text>
105+
<text x="250" y="185" textAnchor="middle" className={styles.coreLabel}>LLM</text>
106+
</g>
107+
108+
{/* Data flow points */}
109+
<g className={styles.dataFlowGroup}>
110+
<circle cx="90" cy="100" r="3" fill="#FDB516" className="data-point" />
111+
<circle cx="160" cy="110" r="3" fill="#FDB516" className="data-point" />
112+
<circle cx="230" cy="100" r="3" fill="#FDB516" className="data-point" />
113+
<circle cx="310" cy="110" r="3" fill="#FDB516" className="data-point" />
114+
115+
<circle cx="100" cy="140" r="3" fill="#30A2FF" className="data-point" />
116+
<circle cx="180" cy="130" r="3" fill="#30A2FF" className="data-point" />
117+
<circle cx="250" cy="140" r="3" fill="#30A2FF" className="data-point" />
118+
<circle cx="300" cy="130" r="3" fill="#30A2FF" className="data-point" />
119+
</g>
120+
121+
{/* Chip pins */}
122+
<g className={styles.pinsGroup}>
123+
{/* Left pins */}
124+
<rect x="30" y="80" width="20" height="4" fill="#8CC5FF" />
125+
<rect x="30" y="100" width="20" height="4" fill="#8CC5FF" />
126+
<rect x="30" y="120" width="20" height="4" fill="#8CC5FF" />
127+
<rect x="30" y="140" width="20" height="4" fill="#8CC5FF" />
128+
<rect x="30" y="160" width="20" height="4" fill="#8CC5FF" />
129+
<rect x="30" y="180" width="20" height="4" fill="#8CC5FF" />
130+
<rect x="30" y="200" width="20" height="4" fill="#8CC5FF" />
131+
<rect x="30" y="220" width="20" height="4" fill="#8CC5FF" />
132+
133+
{/* Right pins */}
134+
<rect x="350" y="80" width="20" height="4" fill="#8CC5FF" />
135+
<rect x="350" y="100" width="20" height="4" fill="#8CC5FF" />
136+
<rect x="350" y="120" width="20" height="4" fill="#8CC5FF" />
137+
<rect x="350" y="140" width="20" height="4" fill="#8CC5FF" />
138+
<rect x="350" y="160" width="20" height="4" fill="#8CC5FF" />
139+
<rect x="350" y="180" width="20" height="4" fill="#8CC5FF" />
140+
<rect x="350" y="200" width="20" height="4" fill="#8CC5FF" />
141+
<rect x="350" y="220" width="20" height="4" fill="#8CC5FF" />
142+
</g>
143+
144+
{/* Gradients and definitions */}
145+
<defs>
146+
<linearGradient id="chipGradient" x1="0%" y1="0%" x2="100%" y2="100%">
147+
<stop offset="0%" stopColor="#1a1a2e" />
148+
<stop offset="50%" stopColor="#16213e" />
149+
<stop offset="100%" stopColor="#0f3460" />
150+
</linearGradient>
151+
152+
<linearGradient id="chipBorder" x1="0%" y1="0%" x2="100%" y2="100%">
153+
<stop offset="0%" stopColor="#58A6FF" />
154+
<stop offset="50%" stopColor="#30A2FF" />
155+
<stop offset="100%" stopColor="#0969DA" />
156+
</linearGradient>
157+
158+
<linearGradient id="circuitGradient" x1="0%" y1="0%" x2="100%" y2="0%">
159+
<stop offset="0%" stopColor="#58A6FF" />
160+
<stop offset="50%" stopColor="#FDB516" />
161+
<stop offset="100%" stopColor="#58A6FF" />
162+
</linearGradient>
163+
164+
<radialGradient id="coreGradient" cx="50%" cy="50%" r="50%">
165+
<stop offset="0%" stopColor="#FDB516" />
166+
<stop offset="70%" stopColor="#30A2FF" />
167+
<stop offset="100%" stopColor="#0969DA" />
168+
</radialGradient>
169+
</defs>
170+
</svg>
171+
172+
<div className={styles.chipLabel}>
173+
<span className={styles.chipTitle}>Neural Processing Unit</span>
174+
<span className={styles.chipSubtitle}>Embedding • Classify • Similarity</span>
175+
</div>
176+
</div>
177+
);
178+
};
179+
180+
export default AIChipAnimation;

‎website/src/components/AIChipAnimation.module.css‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
.chipContainer {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
padding: 2rem;
7+
background: rgba(255, 255, 255, 0.8);
8+
border-radius: 16px;
9+
border: 1px solid rgba(88, 166, 255, 0.2);
10+
backdrop-filter: blur(10px);
11+
transition: all 0.3s ease;
12+
max-width: 400px;
13+
margin: 0 auto;
14+
box-shadow: 0 8px 32px rgba(9, 105, 218, 0.1);
15+
}
16+
17+
.chipContainer:hover {
18+
transform: translateY(-4px);
19+
box-shadow: 0 16px 48px rgba(9, 105, 218, 0.15);
20+
border-color: rgba(88, 166, 255, 0.3);
21+
}
22+
23+
.chipSvg {
24+
width: 100%;
25+
height: auto;
26+
max-width: 350px;
27+
filter: drop-shadow(0 4px 16px rgba(9, 105, 218, 0.2));
28+
}
29+
30+
.chipBase {
31+
animation: chipPulse 3s ease-in-out infinite;
32+
}
33+
34+
.circuitGroup .circuit-path {
35+
stroke-dasharray: 10 5;
36+
animation: circuitFlow 2s linear infinite;
37+
}
38+
39+
.coresGroup .processingCore {
40+
animation: coreProcess 1.5s ease-in-out infinite alternate;
41+
transform-origin: center;
42+
}
43+
44+
.coreLabel {
45+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
46+
font-size: 8px;
47+
font-weight: bold;
48+
fill: #ffffff;
49+
text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
50+
}
51+
52+
.dataFlowGroup .data-point {
53+
animation: dataFlow 1s ease-in-out infinite;
54+
transform-origin: center;
55+
}
56+
57+
.pinsGroup rect {
58+
animation: pinActivity 2s ease-in-out infinite;
59+
}
60+
61+
.chipLabel {
62+
margin-top: 1.5rem;
63+
text-align: center;
64+
}
65+
66+
.chipTitle {
67+
display: block;
68+
font-size: 1.2rem;
69+
font-weight: 700;
70+
color: #1F2328;
71+
margin-bottom: 0.5rem;
72+
background: linear-gradient(45deg, #0969DA, #8250DF);
73+
-webkit-background-clip: text;
74+
-webkit-text-fill-color: transparent;
75+
background-clip: text;
76+
}
77+
78+
.chipSubtitle {
79+
display: block;
80+
font-size: 0.9rem;
81+
color: #656D76;
82+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
83+
letter-spacing: 1px;
84+
}
85+
86+
/* Animations */
87+
@keyframes chipPulse {
88+
0%, 100% {
89+
filter: brightness(1) drop-shadow(0 0 10px rgba(88, 166, 255, 0.3));
90+
}
91+
50% {
92+
filter: brightness(1.1) drop-shadow(0 0 20px rgba(88, 166, 255, 0.5));
93+
}
94+
}
95+
96+
@keyframes circuitFlow {
97+
0% {
98+
stroke-dashoffset: 0;
99+
stroke: #58A6FF;
100+
}
101+
50% {
102+
stroke: #FDB516;
103+
}
104+
100% {
105+
stroke-dashoffset: -15;
106+
stroke: #58A6FF;
107+
}
108+
}
109+
110+
@keyframes coreProcess {
111+
0% {
112+
transform: scale(1);
113+
filter: brightness(1);
114+
}
115+
100% {
116+
transform: scale(1.1);
117+
filter: brightness(1.3) drop-shadow(0 0 8px rgba(253, 181, 22, 0.6));
118+
}
119+
}
120+
121+
@keyframes dataFlow {
122+
0%, 100% {
123+
transform: scale(1);
124+
opacity: 0.7;
125+
}
126+
50% {
127+
transform: scale(1.5);
128+
opacity: 1;
129+
filter: drop-shadow(0 0 6px currentColor);
130+
}
131+
}
132+
133+
@keyframes pinActivity {
134+
0%, 100% {
135+
opacity: 0.6;
136+
transform: scaleY(1);
137+
}
138+
50% {
139+
opacity: 1;
140+
transform: scaleY(1.2);
141+
filter: drop-shadow(0 0 4px #8CC5FF);
142+
}
143+
}
144+
145+
/* Responsive design */
146+
@media screen and (max-width: 768px) {
147+
.chipContainer {
148+
padding: 1.5rem;
149+
max-width: 300px;
150+
}
151+
152+
.chipSvg {
153+
max-width: 280px;
154+
}
155+
156+
.chipTitle {
157+
font-size: 1rem;
158+
}
159+
160+
.chipSubtitle {
161+
font-size: 0.8rem;
162+
}
163+
}
164+
165+
@media screen and (max-width: 480px) {
166+
.chipContainer {
167+
padding: 1rem;
168+
max-width: 250px;
169+
}
170+
171+
.chipSvg {
172+
max-width: 220px;
173+
}
174+
175+
.chipTitle {
176+
font-size: 0.9rem;
177+
}
178+
179+
.chipSubtitle {
180+
font-size: 0.7rem;
181+
}
182+
}
183+
184+
/* Reduce motion for accessibility */
185+
@media (prefers-reduced-motion: reduce) {
186+
.chipBase,
187+
.circuit-path,
188+
.processingCore,
189+
.data-point,
190+
.pinsGroup rect {
191+
animation: none;
192+
}
193+
194+
.chipContainer:hover {
195+
transform: none;
196+
}
197+
}

0 commit comments

Comments
 (0)