Skip to content

Commit a885cd8

Browse files
Add files via upload
1 parent 33d50db commit a885cd8

File tree

6 files changed

+446
-0
lines changed

6 files changed

+446
-0
lines changed
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
import { changeLanguage } from "i18next"
3+
import { GetStaticPathsResult } from "astro"
4+
import redirects from "../../features/redirects/redirects.json"
5+
6+
changeLanguage("fr")
7+
8+
export async function getStaticPaths(): Promise<GetStaticPathsResult> {
9+
const sanitizeSource = (source: string) => {
10+
let newSource = source
11+
if (newSource[newSource.length - 1] === "/") newSource = newSource.slice(0, newSource.length - 1)
12+
if (newSource[0] === "/") return newSource.slice(1, newSource.length)
13+
return newSource
14+
}
15+
return redirects.redirects.map((entry) => {
16+
return {
17+
params: { redirect: sanitizeSource(entry.source) },
18+
props: {
19+
to:
20+
entry.destination.charAt(0) === "/" || entry.destination.includes("https://")
21+
? entry.destination
22+
: "/" + entry.destination,
23+
},
24+
}
25+
})
26+
}
27+
const { to } = Astro.props
28+
---
29+
30+
<meta http-equiv="refresh" content={`0; url=${to}`} />
Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
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+
import NoteSvg from "~/assets/svgs/home/Note.svg?raw"
8+
9+
const mediaList = [
10+
{
11+
icon: DiscordSvg,
12+
name: "Rejoindre notre Discord",
13+
content: "Connectez-vous avec d'autres développeurs et utilisateurs de Scroll.",
14+
link: "https://discord.gg/scroll",
15+
},
16+
{
17+
icon: NoteSvg,
18+
name: "Prendre contact",
19+
content: "Contactez-nous directement si vous avez besoin d'un soutien supplémentaire pour votre projet.",
20+
link: "https://tally.so/r/waxLBW",
21+
},
22+
{
23+
icon: ForumSvg,
24+
name: "Forum de la communauté",
25+
content: "Discutez et proposez des modifications aux protocoles de base du Scroll.",
26+
link: "http://community.scroll.io/",
27+
},
28+
{
29+
icon: ContributeSvg,
30+
name: "Contribuer à Scroll",
31+
content: "Construisez avec d'autres développeurs.",
32+
link: "https://github.com/scroll-tech/contribute-to-scroll",
33+
},
34+
]
35+
36+
37+
<div class="connect-us">
38+
<SectionHeader
39+
title="Connectez-vous à nous"
40+
content="Restez informés des dernières nouvelles et développements de la communauté Scroll."
41+
/>
42+
<div class="medias">
43+
{
44+
mediaList.map(({ icon, name, content, link }) => (
45+
<a class="media-item" href={link} target="_blank">
46+
<div class="media-item-header">
47+
<span class="media-item-link">
48+
<Fragment set:html={LinkArrowSvg} />
49+
</span>
50+
<span class="media-item-icon">
51+
<Fragment set:html={icon} />
52+
</span>
53+
</div>
54+
55+
<span class="media-item-title">{name}</span>
56+
<span class="media-item-content">{content}</span>
57+
</a>
58+
))
59+
}
60+
</div>
61+
</div>
62+
63+
<style>
64+
.connect-us {
65+
margin-top: 155px;
66+
}
67+
68+
.medias {
69+
display: flex;
70+
gap: 1.6rem;
71+
margin-top: 90px;
72+
}
73+
.media-item {
74+
width: 325px;
75+
height: 325px;
76+
padding: 30px;
77+
border-radius: 25px;
78+
display: flex;
79+
flex-direction: column;
80+
align-items: flex-start;
81+
@apply bg-normal dark:bg-dark-normal;
82+
}
83+
84+
.media-item:hover {
85+
@apply bg-highlight dark:bg-dark-highlight;
86+
}
87+
88+
.media-item-header {
89+
flex: 1;
90+
display: flex;
91+
flex-direction: column;
92+
justify-content: space-between;
93+
width: 100%;
94+
}
95+
96+
.media-item-link {
97+
width: 23px;
98+
height: 23px;
99+
background-size: contain;
100+
align-self: flex-end;
101+
@apply text-black dark:text-white-800;
102+
}
103+
104+
.media-item-icon {
105+
display: inline-flex;
106+
width: 35px;
107+
height: 35px;
108+
align-items: center;
109+
}
110+
.media-item-title {
111+
font-size: 22px;
112+
font-weight: 600;
113+
margin-top: 22px;
114+
line-height: normal;
115+
margin-bottom: 6px;
116+
}
117+
.media-item-content {
118+
font-size: 20px;
119+
line-height: normal;
120+
height: 84px;
121+
}
122+
123+
@media screen and (max-width: 50em) {
124+
.connect-us {
125+
margin-top: 112px;
126+
}
127+
.medias {
128+
flex-direction: column;
129+
gap: 3rem;
130+
}
131+
.media-item {
132+
width: 100%;
133+
height: 150px;
134+
padding: 20px;
135+
}
136+
.media-item-header {
137+
flex-direction: row-reverse;
138+
flex: unset;
139+
}
140+
.media-item-link {
141+
width: 13px;
142+
height: 13px;
143+
align-self: flex-start;
144+
}
145+
.media-item-icon {
146+
width: 26px;
147+
height: 26px;
148+
}
149+
.media-item-title {
150+
font-size: 20px;
151+
margin-top: 8px;
152+
margin-bottom: 0px;
153+
}
154+
.media-item-content {
155+
font-size: 16px;
156+
height: auto;
157+
}
158+
}
159+
</style>
Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<div>
2+
<SectionHeader
3+
title="Démarrage rapide du développeur"
4+
content="Commencez à développer sur Scroll avec tous vos outils favoris pour la création et le test de contrats intelligents."
5+
/>
6+
<div class="tools">
7+
{
8+
toolList.map(({ icon, name, quickstartAnchor, color }) => (
9+
<a href={`/en/developers/developer-quickstart#${quickstartAnchor}`} class={`tools-item ${color}`}>
10+
<figure class={color ? "p-[18px]" : ""}>
11+
{color ? <Fragment set:html={icon} /> : <img src={icon} alt={name} />}
12+
</figure>
13+
<span>{name}</span>
14+
</a>
15+
))
16+
}
17+
</div>
18+
</div>
19+
20+
<style>
21+
.tools {
22+
margin-top: 96px;
23+
display: flex;
24+
justify-content: space-between;
25+
}
26+
.tools-item {
27+
display: flex;
28+
flex-direction: column;
29+
align-items: center;
30+
gap: 22px;
31+
}
32+
.tools-item figure {
33+
font-size: 0;
34+
width: 140px;
35+
height: 140px;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
border-radius: 50%;
40+
@apply bg-normal dark:bg-dark-normal;
41+
}
42+
.tools-item figure:hover {
43+
@apply dark:bg-dark-highlight;
44+
}
45+
46+
.tools-item figure svg {
47+
width: 80% !important;
48+
}
49+
.tools-item span {
50+
font-size: 20px;
51+
font-weight: 600;
52+
}
53+
54+
@media screen and (max-width: 72em) {
55+
.tools-item figure {
56+
font-size: 0;
57+
width: 12vw;
58+
height: 12vw;
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
border-radius: 50%;
63+
}
64+
65+
.tools-item figure img {
66+
width: 8vw;
67+
}
68+
69+
.tools-item span {
70+
font-size: 18px;
71+
}
72+
}
73+
74+
@media screen and (max-width: 50em) {
75+
.tools {
76+
flex-wrap: wrap;
77+
gap: 50px;
78+
justify-content: center;
79+
}
80+
.tools-item figure {
81+
width: 116px;
82+
height: 116px;
83+
}
84+
.tools-item figure img {
85+
width: 78px;
86+
}
87+
.tools-item span {
88+
font-size: 16px;
89+
}
90+
}
91+
</style>
Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
const toolList = [
2+
{ icon: "/svgs/Hardhat.svg", name: "Hardhat", link: "https://hardhat.org/", quickstartAnchor: "hardhat" },
3+
{ icon: "/svgs/Foundry.svg", name: "Foundry", link: "https://getfoundry.sh/", quickstartAnchor: "foundry" },
4+
{ icon: "/svgs/Remix.svg", name: "Remix", link: "https://remix-project.org/", quickstartAnchor: "remix-web-ide" },
5+
{
6+
icon: EtherSvg,
7+
color: "text-[#2A4B78] dark:text-white-800",
8+
name: "EthersJS",
9+
link: "https://ethers.org/",
10+
quickstartAnchor: "ethersjs",
11+
},
12+
{ icon: "/svgs/Brownie.svg", name: "Brownie", link: "https://github.com/eth-brownie", quickstartAnchor: "brownie" },
13+
{ icon: "/svgs/Truffle.svg", name: "Truffle", link: "https://trufflesuite.com/", quickstartAnchor: "truffle" },
14+
]
15+
16+
<div>
17+
<SectionHeader
18+
title="Démarrage rapide du développeur"
19+
content="Commencez à développer sur Scroll avec tous vos outils favoris pour la création et le test de contrats intelligents."
20+
/>
21+
<div class="tools">
22+
{
23+
toolList.map(({ icon, name, quickstartAnchor, color }) => (
24+
<a href={`/en/developers/developer-quickstart#${quickstartAnchor}`} class={`tools-item ${color}`}>
25+
<figure class={color ? "p-[18px]" : ""}>
26+
{color ? <Fragment set:html={icon} /> : <img src={icon} alt={name} />}
27+
</figure>
28+
<span>{name}</span>
29+
</a>
30+
))
31+
}
32+
</div>
33+
</div>
34+
35+
<style>
36+
.tools {
37+
margin-top: 96px;
38+
display: flex;
39+
justify-content: space-between;
40+
}
41+
.tools-item {
42+
display: flex;
43+
flex-direction: column;
44+
align-items: center;
45+
gap: 22px;
46+
}
47+
.tools-item figure {
48+
font-size: 0;
49+
width: 140px;
50+
height: 140px;
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
border-radius: 50%;
55+
@apply bg-normal dark:bg-dark-normal;
56+
}
57+
.tools-item figure:hover {
58+
@apply dark:bg-dark-highlight;
59+
}
60+
61+
.tools-item figure svg {
62+
width: 80% !important;
63+
}
64+
.tools-item span {
65+
font-size: 20px;
66+
font-weight: 600;
67+
}
68+
69+
@media screen and (max-width: 72em) {
70+
.tools-item figure {
71+
font-size: 0;
72+
width: 12vw;
73+
height: 12vw;
74+
display: flex;
75+
justify-content: center;
76+
align-items: center;
77+
border-radius: 50%;
78+
}
79+
80+
.tools-item figure img {
81+
width: 8vw;
82+
}
83+
84+
.tools-item span {
85+
font-size: 18px;
86+
}
87+
}
88+
89+
@media screen and (max-width: 50em) {
90+
.tools {
91+
flex-wrap: wrap;
92+
gap: 50px;
93+
justify-content: center;
94+
}
95+
.tools-item figure {
96+
width: 116px;
97+
height: 116px;
98+
}
99+
.tools-item figure img {
100+
width: 78px;
101+
}
102+
.tools-item span {
103+
font-size: 16px;
104+
}
105+
}
106+
</style>

0 commit comments

Comments
 (0)