Skip to content

Commit e4b9f05

Browse files
zzq0826zzq0826
committed
Add homepage for Español
1 parent 9264ecf commit e4b9f05

File tree

11 files changed

+784
-12
lines changed

11 files changed

+784
-12
lines changed

‎astro-i18next.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
export default {
33
defaultLocale: "en",
44
showDefaultLocale: true,
5-
locales: ["en", "zh", "es"],
5+
locales: ["en", "es"],
66
load: ["server", "client"],
77
}

‎src/components/Header/LanguageSelector/LanguageSelector.astro‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const supportedLanguages = i18next.languages
99
1010
const { pathname } = Astro.url
1111
12-
const { showFlag = false, languageMapping, ...attributes } = Astro.props
12+
const { showFlag = false, languageMapping } = Astro.props
1313
const { dark } = Astro.props
1414
1515
const getLabel = (language) => {
@@ -67,10 +67,6 @@ const getLabel = (language) => {
6767
position: relative;
6868
}
6969

70-
.language-selector.dark {
71-
--black-100: #fff;
72-
--orange-500: #fff;
73-
}
7470
.language-selector:hover .options-modal {
7571
display: flex;
7672
}
@@ -84,14 +80,15 @@ const getLabel = (language) => {
8480
.current-language {
8581
width: 100px;
8682
border-radius: 5px;
87-
border: 1px solid var(--black-100);
83+
border-width: 1px;
84+
border-style: solid;
8885
display: flex;
8986
height: 36px;
9087
padding: 0 12px;
9188
justify-content: space-between;
9289
align-items: center;
9390
cursor: pointer;
94-
color: var(--black-100);
91+
@apply text-black dark:text-white border-black dark:border-white;
9592
}
9693

9794
.options-list {
@@ -101,15 +98,16 @@ const getLabel = (language) => {
10198
letter-spacing: 0.14px;
10299
padding: 4px 12px;
103100
border-radius: 5px;
104-
border: 1px solid var(--black-100);
101+
border-width: 1px;
102+
border-style: solid;
105103
overflow: hidden;
106104
cursor: pointer;
107105
transition: height 0.3s ease;
108106
display: flex;
109107
justify-content: center;
110108
align-items: center;
111109
flex-direction: column;
112-
background: var(--white-100);
110+
@apply bg-pure-white dark:bg-black border-black dark:border-white;
113111
}
114112

115113
.options-list li {
@@ -119,7 +117,7 @@ const getLabel = (language) => {
119117
align-items: center;
120118
flex-direction: row;
121119
padding: 8px 0px;
122-
color: var(--black-100);
120+
@apply text-black dark:text-white;
123121
}
124122

125123
.options-list li svg,

‎src/pages/es/home/ConnectUs.astro‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
---
2+
import SectionHeader from "~/components/SectionHeader/index.astro"
3+
import LinkArrowSvg from "~/assets/svgs/home/home-link-arrow.svg?raw"
4+
import DiscordSvg from "~/assets/svgs/home/Discord.svg?raw"
5+
import ForumSvg from "~/assets/svgs/home/Forum.svg?raw"
6+
import ContributeSvg from "~/assets/svgs/home/Contribute.svg?raw"
7+
8+
const mediaList = [
9+
{
10+
icon: DiscordSvg,
11+
name: "Join our Discord",
12+
content: "Connect with other Scroll developers and users.",
13+
link: "https://discord.gg/scroll",
14+
},
15+
{
16+
icon: ForumSvg,
17+
name: "Community Forum",
18+
content: "Discuss and propose changes to Scroll’s core protocols.",
19+
link: "http://community.scroll.io/",
20+
},
21+
{
22+
icon: ContributeSvg,
23+
name: "Contribute to Scroll",
24+
content: "Build with other developers.",
25+
link: "https://github.com/scroll-tech/contribute-to-scroll",
26+
},
27+
]
28+
---
29+
30+
<div class="connect-us">
31+
<SectionHeader
32+
title="Connect with us"
33+
content="Keep up to date with the latest news and developments from the Scroll Community."
34+
/>
35+
<div class="medias">
36+
{
37+
mediaList.map(({ icon, name, content, link }) => (
38+
<a class="media-item" href={link} target="_blank">
39+
<div class="media-item-header">
40+
<span class="media-item-link">
41+
<Fragment set:html={LinkArrowSvg} />
42+
</span>
43+
<span class="media-item-icon">
44+
<Fragment set:html={icon} />
45+
</span>
46+
</div>
47+
48+
<span class="media-item-title">{name}</span>
49+
<span class="media-item-content">{content}</span>
50+
</a>
51+
))
52+
}
53+
</div>
54+
</div>
55+
56+
<style>
57+
.connect-us {
58+
margin-top: 155px;
59+
}
60+
61+
.medias {
62+
display: flex;
63+
gap: 3rem;
64+
margin-top: 90px;
65+
}
66+
.media-item {
67+
width: 325px;
68+
height: 325px;
69+
padding: 30px;
70+
border-radius: 25px;
71+
display: flex;
72+
flex-direction: column;
73+
align-items: flex-start;
74+
@apply bg-normal dark:bg-dark-normal;
75+
}
76+
77+
.media-item:hover {
78+
@apply bg-highlight dark:bg-dark-highlight;
79+
}
80+
81+
.media-item-header {
82+
flex: 1;
83+
display: flex;
84+
flex-direction: column;
85+
justify-content: space-between;
86+
width: 100%;
87+
}
88+
89+
.media-item-link {
90+
width: 23px;
91+
height: 23px;
92+
background-size: contain;
93+
align-self: flex-end;
94+
@apply text-black dark:text-white;
95+
}
96+
97+
.media-item-icon {
98+
display: inline-flex;
99+
width: 35px;
100+
height: 35px;
101+
align-items: center;
102+
}
103+
.media-item-title {
104+
font-size: 22px;
105+
font-weight: 600;
106+
margin-top: 22px;
107+
line-height: normal;
108+
margin-bottom: 6px;
109+
}
110+
.media-item-content {
111+
font-size: 20px;
112+
line-height: normal;
113+
height: 56px;
114+
}
115+
116+
@media screen and (max-width: 50em) {
117+
.connect-us {
118+
margin-top: 112px;
119+
}
120+
.medias {
121+
flex-direction: column;
122+
gap: 3rem;
123+
}
124+
.media-item {
125+
width: 100%;
126+
height: 150px;
127+
padding: 20px;
128+
}
129+
.media-item-header {
130+
flex-direction: row-reverse;
131+
flex: unset;
132+
}
133+
.media-item-link {
134+
width: 13px;
135+
height: 13px;
136+
align-self: flex-start;
137+
}
138+
.media-item-icon {
139+
width: 26px;
140+
height: 26px;
141+
}
142+
.media-item-title {
143+
font-size: 20px;
144+
margin-top: 8px;
145+
margin-bottom: 0px;
146+
}
147+
.media-item-content {
148+
font-size: 16px;
149+
height: auto;
150+
}
151+
}
152+
</style>

‎src/pages/es/home/Navigate.astro‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
import NavCard from "~/components/NavCard.astro"
3+
import StartSvg from "~/assets/svgs/home/home-start.svg?raw"
4+
import DevelopSvg from "~/assets/svgs/home/home-develop.svg?raw"
5+
import TechnologySvg from "~/assets/svgs/home/home-technology.svg?raw"
6+
import LearnSvg from "~/assets/svgs/home/home-learn.svg?raw"
7+
import SectionHeader from "~/components/SectionHeader/index.astro"
8+
9+
const navList = [
10+
{
11+
icon: StartSvg,
12+
name: "Getting started",
13+
content: "Bridge into Scroll and explore our dApp Ecosystem.",
14+
link: "/en/getting-started/overview",
15+
},
16+
{
17+
icon: DevelopSvg,
18+
name: "Developers",
19+
content: "Dive into Scroll’s developer documentation.",
20+
link: "/en/developers",
21+
},
22+
{
23+
icon: TechnologySvg,
24+
name: "Technology",
25+
content: "An overview of Scroll’s zkEVM Architecture.",
26+
link: "/en/technology",
27+
},
28+
{
29+
icon: LearnSvg,
30+
name: "Learn",
31+
content: "An introduction to the world of ZK and Scalability.",
32+
link: "/en/learn",
33+
},
34+
]
35+
---
36+
37+
<div class="navigate">
38+
<SectionHeader title="Navigate the Docs" content="Start developing on Scroll today." />
39+
<div class="navs">
40+
{navList.map(({ icon, name, content, link }) => <NavCard icon={icon} name={name} content={content} link={link} />)}
41+
</div>
42+
</div>
43+
44+
<style>
45+
.navigate {
46+
margin-top: 146px;
47+
}
48+
49+
.navs {
50+
display: flex;
51+
justify-content: space-between;
52+
}
53+
54+
@media screen and (max-width: 50em) {
55+
.navigate {
56+
margin-top: 106px;
57+
}
58+
.navs {
59+
flex-direction: column;
60+
align-items: center;
61+
}
62+
}
63+
</style>

0 commit comments

Comments
 (0)