Skip to content

Commit d0a6492

Browse files
shudingshuding
authored
New website structure (#121)
1 parent e6f323c commit d0a6492

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1854
-2676
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ node_modules
22
.next
33
.DS_Store
44
yarn-error.log
5+
.yalc
6+
yalc.lock
57

68
public/*.st
79
public/*.toml

‎components/features.js

+178-130
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,193 @@
1-
import { useRouter } from 'next/router'
1+
import { useRouter } from "next/router";
22

3-
import styles from './features.module.css'
3+
import styles from "./features.module.css";
44

55
const Feature = ({ text, icon }) => (
66
<div className={styles.feature}>
77
{icon}
88
<h4>{text}</h4>
99
</div>
10-
)
10+
);
1111

1212
const TITLE_WITH_TRANSLATIONS = {
13-
'en-US': 'React Hooks library for data fetching',
14-
'es-ES': 'Biblioteca React Hooks para la obtención de datos',
15-
'zh-CN': '用于数据请求的 React Hooks 库',
16-
'ja': 'データ取得のための React Hooks ライブラリ',
17-
}
13+
"en-US": "React Hooks for Data Fetching",
14+
"es-ES": "Biblioteca React Hooks para la obtención de datos",
15+
"zh-CN": "用于数据请求的 React Hooks 库",
16+
ja: "データ取得のための React Hooks ライブラリ",
17+
};
1818

1919
export default () => {
20-
const {locale} = useRouter()
20+
const { locale } = useRouter();
2121
return (
22-
<div>
23-
<p className="text-lg mb-2 text-gray-600 md:text-xl">{TITLE_WITH_TRANSLATIONS[locale]}</p>
22+
<div className="mx-auto max-w-full w-[880px] text-center px-4 mb-10">
23+
<p className="text-lg mb-2 text-gray-600 md:!text-2xl">
24+
{TITLE_WITH_TRANSLATIONS[locale]}
25+
</p>
2426
<div className={styles.features}>
25-
<Feature
26-
text="Lightweight"
27-
icon={
28-
<svg
29-
viewBox="0 0 24 24"
30-
width="24"
31-
height="24"
32-
stroke="currentColor"
33-
strokeWidth="1.5"
34-
strokeLinecap="round"
35-
strokeLinejoin="round"
36-
fill="none"
37-
shapeRendering="geometricPrecision"
38-
style={{ color: 'var(--geist-foreground)' }}
39-
>
40-
<path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z" />
41-
</svg>
42-
}
43-
/>
44-
<Feature
45-
text="Backend Agnostic"
46-
icon={
47-
<svg
48-
viewBox="0 0 24 24"
49-
width="24"
50-
height="24"
51-
stroke="currentColor"
52-
strokeWidth="1.5"
53-
strokeLinecap="round"
54-
strokeLinejoin="round"
55-
fill="none"
56-
shapeRendering="geometricPrecision"
57-
>
58-
<path d="M20 17.58A5 5 0 0018 8h-1.26A8 8 0 104 16.25" />
59-
<path d="M8 16h.01" />
60-
<path d="M8 20h.01" />
61-
<path d="M12 18h.01" />
62-
<path d="M12 22h.01" />
63-
<path d="M16 16h.01" />
64-
<path d="M16 20h.01" />
65-
</svg>
66-
}
67-
/>
68-
<Feature
69-
text="Realtime"
70-
icon={
71-
<svg
72-
width="24"
73-
height="24"
74-
fill="none"
75-
stroke="currentColor"
76-
strokeLinecap="round"
77-
strokeLinejoin="round"
78-
strokeWidth="1.5"
79-
shapeRendering="geometricPrecision"
80-
viewBox="0 0 24 24"
81-
>
82-
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
83-
</svg>
84-
}
85-
/>
86-
<Feature
87-
text="Jamstack Oriented"
88-
icon={
89-
<svg
90-
width="24"
91-
height="24"
92-
fill="none"
93-
stroke="currentColor"
94-
strokeLinecap="round"
95-
strokeLinejoin="round"
96-
strokeWidth="1.5"
97-
shapeRendering="geometricPrecision"
98-
viewBox="0 0 24 24"
99-
>
100-
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
101-
</svg>
102-
}
103-
/>
104-
<Feature
105-
text="TypeScript Ready"
106-
icon={
107-
<svg
108-
width="24"
109-
height="24"
110-
fill="none"
111-
stroke="currentColor"
112-
strokeLinecap="round"
113-
strokeLinejoin="round"
114-
strokeWidth="1.5"
115-
shapeRendering="geometricPrecision"
116-
viewBox="0 0 24 24"
117-
>
118-
<path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"></path>
119-
<path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"></path>
120-
</svg>
121-
}
122-
/>
123-
<Feature
124-
text="Remote + Local"
125-
icon={
126-
<svg
127-
width="24"
128-
height="24"
129-
fill="none"
130-
stroke="currentColor"
131-
strokeLinecap="round"
132-
strokeLinejoin="round"
133-
strokeWidth="1.5"
134-
shapeRendering="geometricPrecision"
135-
viewBox="0 0 24 24"
136-
>
137-
<circle cx="12" cy="12" r="2"></circle>
138-
<path d="M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14"></path>
139-
</svg>
140-
}
141-
/>
27+
<div>
28+
<Feature
29+
text="Lightweight"
30+
icon={
31+
<svg
32+
viewBox="0 0 24 24"
33+
width="24"
34+
height="24"
35+
stroke="currentColor"
36+
strokeWidth="2"
37+
fill="none"
38+
strokeLinecap="round"
39+
strokeLinejoin="round"
40+
>
41+
<path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path>
42+
<line x1="16" y1="8" x2="2" y2="22"></line>
43+
<line x1="17.5" y1="15" x2="9" y2="15"></line>
44+
</svg>
45+
}
46+
/>
47+
<Feature
48+
text="Backend Agnostic"
49+
icon={
50+
<svg
51+
viewBox="0 0 24 24"
52+
width="24"
53+
height="24"
54+
stroke="currentColor"
55+
strokeWidth="2"
56+
strokeLinecap="round"
57+
strokeLinejoin="round"
58+
fill="none"
59+
shapeRendering="geometricPrecision"
60+
>
61+
<path d="M20 17.58A5 5 0 0018 8h-1.26A8 8 0 104 16.25" />
62+
<path d="M8 16h.01" />
63+
<path d="M8 20h.01" />
64+
<path d="M12 18h.01" />
65+
<path d="M12 22h.01" />
66+
<path d="M16 16h.01" />
67+
<path d="M16 20h.01" />
68+
</svg>
69+
}
70+
/>
71+
</div>
72+
<div>
73+
<Feature
74+
text="Realtime"
75+
icon={
76+
<svg
77+
width="24"
78+
height="24"
79+
fill="none"
80+
stroke="currentColor"
81+
strokeLinecap="round"
82+
strokeLinejoin="round"
83+
strokeWidth="2"
84+
shapeRendering="geometricPrecision"
85+
viewBox="0 0 24 24"
86+
>
87+
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
88+
</svg>
89+
}
90+
/>
91+
<Feature
92+
text="Jamstack Oriented"
93+
icon={
94+
<svg
95+
width="24"
96+
height="24"
97+
fill="none"
98+
stroke="currentColor"
99+
strokeLinecap="round"
100+
strokeLinejoin="round"
101+
strokeWidth="2"
102+
shapeRendering="geometricPrecision"
103+
viewBox="0 0 24 24"
104+
>
105+
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
106+
</svg>
107+
}
108+
/>
109+
</div>
110+
<div>
111+
<Feature
112+
text="Suspense"
113+
icon={
114+
<svg
115+
viewBox="0 0 24 24"
116+
width="24"
117+
height="24"
118+
stroke="currentColor"
119+
strokeWidth="2"
120+
fill="none"
121+
strokeLinecap="round"
122+
strokeLinejoin="round"
123+
>
124+
<circle cx="12" cy="12" r="10"></circle>
125+
<line x1="10" y1="15" x2="10" y2="9"></line>
126+
<line x1="14" y1="15" x2="14" y2="9"></line>
127+
</svg>
128+
}
129+
/>
130+
<Feature
131+
text="TypeScript Ready"
132+
icon={
133+
<svg
134+
width="24"
135+
height="24"
136+
fill="none"
137+
stroke="currentColor"
138+
strokeLinecap="round"
139+
strokeLinejoin="round"
140+
strokeWidth="2"
141+
shapeRendering="geometricPrecision"
142+
viewBox="0 0 24 24"
143+
>
144+
<path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"></path>
145+
<path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"></path>
146+
</svg>
147+
}
148+
/>
149+
</div>
150+
<div>
151+
<Feature
152+
text="Pagination"
153+
icon={
154+
<svg
155+
viewBox="0 0 24 24"
156+
width="24"
157+
height="24"
158+
stroke="currentColor"
159+
strokeWidth="2"
160+
fill="none"
161+
strokeLinecap="round"
162+
strokeLinejoin="round"
163+
>
164+
<circle cx="12" cy="12" r="1"></circle>
165+
<circle cx="12" cy="5" r="1"></circle>
166+
<circle cx="12" cy="19" r="1"></circle>
167+
</svg>
168+
}
169+
/>
170+
<Feature
171+
text="Remote + Local"
172+
icon={
173+
<svg
174+
width="24"
175+
height="24"
176+
fill="none"
177+
stroke="currentColor"
178+
strokeLinecap="round"
179+
strokeLinejoin="round"
180+
strokeWidth="2"
181+
shapeRendering="geometricPrecision"
182+
viewBox="0 0 24 24"
183+
>
184+
<circle cx="12" cy="12" r="2"></circle>
185+
<path d="M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14"></path>
186+
</svg>
187+
}
188+
/>
189+
</div>
142190
</div>
143191
</div>
144-
)
145-
}
192+
);
193+
};

‎components/features.module.css

+34-7
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,54 @@
11
.features {
22
display: flex;
33
flex-wrap: wrap;
4-
margin: 2.5rem -.5rem 2rem;
4+
margin: 2.5rem 0 2rem;
5+
justify-content: space-around;
56
}
6-
77
.feature {
8-
flex: 0 0 33%;
98
align-items: center;
109
display: inline-flex;
11-
padding: 0 0.5rem 1.5rem;
12-
margin: 0 auto;
10+
padding-bottom: 1.5rem;
11+
}
12+
.features > div {
13+
display: flex;
14+
flex-direction: column;
15+
justify-content: flex-start;
16+
padding: 0 0.5rem;
1317
}
1418
.feature h4 {
1519
margin: 0 0 0 0.5rem;
1620
font-weight: 700;
17-
font-size: 0.95rem;
21+
font-size: 1.1rem;
1822
white-space: nowrap;
1923
}
2024
@media (max-width: 860px) {
2125
.feature {
2226
padding-left: 0;
27+
justify-content: center;
28+
}
29+
.feature h4 {
30+
font-size: 0.8rem;
31+
}
32+
}
33+
@media (max-width: 660px) {
34+
.features > div {
35+
flex: 0 0 50%;
36+
}
37+
}
38+
@media (max-width: 420px) {
39+
.feature {
40+
justify-content: flex-start;
41+
}
42+
}
43+
@media (max-width: 370px) {
44+
.features > div {
45+
flex: 0 0 100%;
46+
padding: 0 1rem;
47+
}
48+
.feature {
49+
padding-bottom: 0.75rem;
2350
}
2451
.feature h4 {
25-
font-size: 0.75rem;
52+
font-size: 1rem;
2653
}
2754
}

0 commit comments

Comments
 (0)