Skip to content

Commit

Permalink
New website structure (vercel#121)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shuding
shuding authored Jul 8, 2021
1 parent e6f323c commit d0a6492
Show file tree
Hide file tree
Showing 50 changed files with 1,854 additions and 2,676 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ node_modules
.next
.DS_Store
yarn-error.log
.yalc
yalc.lock

public/*.st
public/*.toml
308 changes: 178 additions & 130 deletions components/features.js
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,193 @@
import { useRouter } from 'next/router'
import { useRouter } from "next/router";

import styles from './features.module.css'
import styles from "./features.module.css";

const Feature = ({ text, icon }) => (
<div className={styles.feature}>
{icon}
<h4>{text}</h4>
</div>
)
);

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

export default () => {
const {locale} = useRouter()
const { locale } = useRouter();
return (
<div>
<p className="text-lg mb-2 text-gray-600 md:text-xl">{TITLE_WITH_TRANSLATIONS[locale]}</p>
<div className="mx-auto max-w-full w-[880px] text-center px-4 mb-10">
<p className="text-lg mb-2 text-gray-600 md:!text-2xl">
{TITLE_WITH_TRANSLATIONS[locale]}
</p>
<div className={styles.features}>
<Feature
text="Lightweight"
icon={
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision"
style={{ color: 'var(--geist-foreground)' }}
>
<path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z" />
</svg>
}
/>
<Feature
text="Backend Agnostic"
icon={
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision"
>
<path d="M20 17.58A5 5 0 0018 8h-1.26A8 8 0 104 16.25" />
<path d="M8 16h.01" />
<path d="M8 20h.01" />
<path d="M12 18h.01" />
<path d="M12 22h.01" />
<path d="M16 16h.01" />
<path d="M16 20h.01" />
</svg>
}
/>
<Feature
text="Realtime"
icon={
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
shapeRendering="geometricPrecision"
viewBox="0 0 24 24"
>
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
</svg>
}
/>
<Feature
text="Jamstack Oriented"
icon={
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
shapeRendering="geometricPrecision"
viewBox="0 0 24 24"
>
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
}
/>
<Feature
text="TypeScript Ready"
icon={
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
shapeRendering="geometricPrecision"
viewBox="0 0 24 24"
>
<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>
<path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"></path>
</svg>
}
/>
<Feature
text="Remote + Local"
icon={
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
shapeRendering="geometricPrecision"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="2"></circle>
<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>
</svg>
}
/>
<div>
<Feature
text="Lightweight"
icon={
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path>
<line x1="16" y1="8" x2="2" y2="22"></line>
<line x1="17.5" y1="15" x2="9" y2="15"></line>
</svg>
}
/>
<Feature
text="Backend Agnostic"
icon={
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision"
>
<path d="M20 17.58A5 5 0 0018 8h-1.26A8 8 0 104 16.25" />
<path d="M8 16h.01" />
<path d="M8 20h.01" />
<path d="M12 18h.01" />
<path d="M12 22h.01" />
<path d="M16 16h.01" />
<path d="M16 20h.01" />
</svg>
}
/>
</div>
<div>
<Feature
text="Realtime"
icon={
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
shapeRendering="geometricPrecision"
viewBox="0 0 24 24"
>
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
</svg>
}
/>
<Feature
text="Jamstack Oriented"
icon={
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
shapeRendering="geometricPrecision"
viewBox="0 0 24 24"
>
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
}
/>
</div>
<div>
<Feature
text="Suspense"
icon={
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="10" y1="15" x2="10" y2="9"></line>
<line x1="14" y1="15" x2="14" y2="9"></line>
</svg>
}
/>
<Feature
text="TypeScript Ready"
icon={
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
shapeRendering="geometricPrecision"
viewBox="0 0 24 24"
>
<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>
<path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"></path>
</svg>
}
/>
</div>
<div>
<Feature
text="Pagination"
icon={
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="12" cy="5" r="1"></circle>
<circle cx="12" cy="19" r="1"></circle>
</svg>
}
/>
<Feature
text="Remote + Local"
icon={
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
shapeRendering="geometricPrecision"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="2"></circle>
<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>
</svg>
}
/>
</div>
</div>
</div>
)
}
);
};
41 changes: 34 additions & 7 deletions components/features.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,54 @@
.features {
display: flex;
flex-wrap: wrap;
margin: 2.5rem -.5rem 2rem;
margin: 2.5rem 0 2rem;
justify-content: space-around;
}

.feature {
flex: 0 0 33%;
align-items: center;
display: inline-flex;
padding: 0 0.5rem 1.5rem;
margin: 0 auto;
padding-bottom: 1.5rem;
}
.features > div {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0 0.5rem;
}
.feature h4 {
margin: 0 0 0 0.5rem;
font-weight: 700;
font-size: 0.95rem;
font-size: 1.1rem;
white-space: nowrap;
}
@media (max-width: 860px) {
.feature {
padding-left: 0;
justify-content: center;
}
.feature h4 {
font-size: 0.8rem;
}
}
@media (max-width: 660px) {
.features > div {
flex: 0 0 50%;
}
}
@media (max-width: 420px) {
.feature {
justify-content: flex-start;
}
}
@media (max-width: 370px) {
.features > div {
flex: 0 0 100%;
padding: 0 1rem;
}
.feature {
padding-bottom: 0.75rem;
}
.feature h4 {
font-size: 0.75rem;
font-size: 1rem;
}
}
Loading

0 comments on commit d0a6492

Please sign in to comment.