Skip to content
This repository was archived by the owner on Dec 26, 2023. It is now read-only.

Commit a5f9d15

Browse files
author
chambaz
authored
add intro component (#217)
1 parent dbb24a4 commit a5f9d15

File tree

9 files changed

+311
-2
lines changed

9 files changed

+311
-2
lines changed

‎frontend/public/intro_person_1.svg

Lines changed: 17 additions & 0 deletions
Loading

‎frontend/public/intro_person_2.svg

Lines changed: 18 additions & 0 deletions
Loading

‎frontend/public/intro_person_3.svg

Lines changed: 17 additions & 0 deletions
Loading

‎frontend/public/intro_person_4.svg

Lines changed: 17 additions & 0 deletions
Loading

‎frontend/public/intro_person_top.svg

Lines changed: 4 additions & 0 deletions
Loading

‎frontend/src/Components/Intro/index.tsx

Lines changed: 232 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,237 @@
1-
import { Box } from '@chakra-ui/react';
1+
import {
2+
Box,
3+
Flex,
4+
Text,
5+
Button,
6+
Image,
7+
Grid,
8+
GridItem,
9+
useBreakpointValue,
10+
} from '@chakra-ui/react';
11+
import { BsFillLightningChargeFill } from 'react-icons/bs';
12+
import { FaDiscord } from 'react-icons/fa';
13+
import '@fontsource/inter/500.css';
14+
import '@fontsource/inter/700.css';
15+
import '@fontsource/inter/800.css';
16+
17+
const codeLaunched = false;
218

319
const IntroComponent = () => {
4-
return <Box>Intro Component</Box>;
20+
return (
21+
<Flex
22+
direction={{ base: 'column', lg: 'row' }}
23+
justifyContent="space-between"
24+
pt={{ base: '0', lg: '4.5rem' }}
25+
w="100%"
26+
>
27+
{!codeLaunched && (
28+
<Box
29+
w={{ base: '100%', xl: '34rem' }}
30+
border="1px solid"
31+
borderRadius="11px"
32+
p="2rem"
33+
>
34+
<Box pr="4rem">
35+
<Text
36+
fontFamily="Inter"
37+
fontWeight="800"
38+
mr="2rem"
39+
fontSize={{ base: '2.625rem', xl: '3.375rem' }}
40+
lineHeight={{ base: '2.625rem', xl: '4rem' }}
41+
>
42+
Build web3 with friends.
43+
</Text>
44+
<Text
45+
fontFamily="Inter"
46+
fontWeight="500"
47+
mt="2rem"
48+
lineHeight="1.5"
49+
fontSize={{ base: '1.25rem', xl: '1.5rem' }}
50+
>
51+
Developer DAO is a community of thousand of web3 builders creating
52+
a better internet. Join us and create the future.
53+
</Text>
54+
</Box>
55+
<Box
56+
border="1px solid"
57+
borderRadius="0.75rem"
58+
bg="white"
59+
py="1.25rem"
60+
px="1.5rem"
61+
mt="2rem"
62+
>
63+
<Text
64+
fontFamily="Inter"
65+
fontWeight="700"
66+
color="black"
67+
fontSize={{ base: '1rem', xl: '1.5rem' }}
68+
>
69+
Current Status: Season 0
70+
</Text>
71+
<Text
72+
fontFamily="Inter"
73+
fontWeight="500"
74+
color="black"
75+
mt="1rem"
76+
fontSize={{ base: '0.8rem', xl: '1.25rem' }}
77+
lineHeight={{ base: '1.125rem', xl: '1.75rem' }}
78+
>
79+
We&rsquo;re forming guilds, creating culture, strengthening our
80+
community, teaching & learning, and building cool things together.
81+
</Text>
82+
<Button
83+
mt="1rem"
84+
pl="1rem"
85+
border="1px solid black"
86+
fontWeight="bold"
87+
color="black"
88+
pr={{ base: '1rem', xl: '1.2rem' }}
89+
py={{ base: '1rem', xl: '1.5rem' }}
90+
borderRadius={{ base: '.438rem', xl: '0.688rem' }}
91+
fontSize={{ base: '0.75rem', xl: '1.25rem' }}
92+
>
93+
<Box as={BsFillLightningChargeFill} mr=".5rem" color="#FFD666" />
94+
Read our snapshot
95+
</Button>
96+
</Box>
97+
</Box>
98+
)}
99+
100+
{codeLaunched && (
101+
<Box w={{ base: '100%', xl: '35rem' }}>
102+
<Text
103+
fontFamily="Inter"
104+
fontWeight="800"
105+
fontSize={{ base: '3.3rem', lg: '4rem', xl: '5.375rem' }}
106+
lineHeight={{ base: '4.375rem', xl: '6.5rem' }}
107+
>
108+
Build web3 with friends.
109+
</Text>
110+
<Text
111+
fontFamily="Inter"
112+
fontWeight="500"
113+
mt="2.5rem"
114+
lineHeight="1.5"
115+
fontSize={{ base: '1.25rem', xl: '1.5rem' }}
116+
>
117+
Developer DAO is a community of thousand of web3 builders creating a
118+
better internet. Join us and create the future.
119+
</Text>
120+
121+
<Flex justifyContent="center" w="100" mt="3rem">
122+
<Button
123+
px="1.5rem"
124+
border="1px solid black"
125+
borderRadius="0.625rem"
126+
bg="white"
127+
color="black"
128+
flexGrow={1}
129+
fontSize={{ base: '0.875rem', xl: '1.25rem' }}
130+
py={{ base: '1.75rem', xl: '2rem' }}
131+
_hover={{
132+
bg: 'black',
133+
color: 'white',
134+
}}
135+
>
136+
Claim $CODE
137+
</Button>
138+
139+
<Button
140+
px="1.5rem"
141+
border="1px solid white"
142+
borderRadius="0.625rem"
143+
bg="black"
144+
color="white"
145+
flexGrow={1}
146+
py={{ base: '1.75rem', xl: '2rem' }}
147+
ml={{ base: '1.25rem', xl: '2rem' }}
148+
fontSize={{ base: '0.875rem', xl: '1.25rem' }}
149+
_hover={{
150+
bg: 'white',
151+
color: 'black',
152+
borderColor: 'black',
153+
}}
154+
>
155+
<Box as={FaDiscord} mr=".75rem" fontSize="2rem" />
156+
Join Discord
157+
</Button>
158+
</Flex>
159+
</Box>
160+
)}
161+
<Flex
162+
direction="column"
163+
maxWidth={{ base: 'none', xl: '45%', '2xl': 'none' }}
164+
mr={{ base: 'auto', xl: '0' }}
165+
ml={{ base: 'auto', lg: '2rem' }}
166+
mt={{ base: '5rem', lg: 0 }}
167+
mb={{ base: '2rem', xl: 0 }}
168+
transform={{ base: 'translateY(0)', xl: 'translateY(-40px)' }}
169+
>
170+
<Image
171+
h={{ base: '2rem', xl: '2.6875rem' }}
172+
alignSelf="end"
173+
src="/intro_person_top.svg"
174+
alt="intro_person_top"
175+
mr={{ base: '3rem', lg: '5rem', xl: '7.75rem' }}
176+
/>
177+
<Grid
178+
templateRows="repeat(2, 1fr)"
179+
templateColumns="repeat(2, 1fr)"
180+
columnGap={10}
181+
rowGap={20}
182+
mt="2rem"
183+
w={{ base: '80vw', lg: '50vw', xl: 'auto' }}
184+
>
185+
<GridItem justifySelf="center">
186+
<Image
187+
src="/intro_person_1.svg"
188+
alt="intro_person_1"
189+
transition=".3s"
190+
w={{ base: '15rem', xl: '17rem', '2xl': '19.75rem' }}
191+
transform={{
192+
base: 'translateX(0)',
193+
xl: 'translateX(-100px)',
194+
}}
195+
/>
196+
</GridItem>
197+
<GridItem justifySelf="center">
198+
<Image
199+
src="/intro_person_2.svg"
200+
alt="intro_person_2"
201+
transition=".3s"
202+
w={{ base: '15rem', xl: '17rem', '2xl': '19.75rem' }}
203+
transform={{
204+
base: 'translateY(30px)',
205+
}}
206+
/>
207+
</GridItem>
208+
<GridItem justifySelf="center">
209+
<Image
210+
src="/intro_person_3.svg"
211+
alt="intro_person_3"
212+
transition=".3s"
213+
w={{ base: '15rem', xl: '17rem', '2xl': '19.75rem' }}
214+
transform={{
215+
base: 'translate(40px)',
216+
md: 'translate(0)',
217+
lg: 'translateX(60px)',
218+
xl: 'translate(0)',
219+
}}
220+
/>
221+
</GridItem>
222+
<GridItem justifySelf="center">
223+
<Image
224+
src="/intro_person_4.svg"
225+
alt="intro_person_4"
226+
transition=".3s"
227+
w={{ base: '9rem', md: '12rem', lg: '13rem', '2xl': '15.75rem' }}
228+
style={{ transform: 'translate(-30px, 30px)' }}
229+
/>
230+
</GridItem>
231+
</Grid>
232+
</Flex>
233+
</Flex>
234+
);
5235
};
6236

7237
export default IntroComponent;

‎frontend/src/layout/Page/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ function Page({ children }: { children?: object }) {
1515
top: '0',
1616
left: '0',
1717
position: 'fixed',
18+
zIndex: 10,
1819
}}
1920
gradient={false}
2021
loop={0}
@@ -50,6 +51,7 @@ function Page({ children }: { children?: object }) {
5051
bottom: '0',
5152
left: '0',
5253
position: 'fixed',
54+
zIndex: 10,
5355
}}
5456
gradient={false}
5557
loop={0}

‎frontend/src/pages/_app.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import '@fontsource/inter/variable-full.css';
77
import '@fontsource/source-code-pro/400.css';
88
import '@fontsource/source-code-pro/600.css';
99
import { AppProps } from 'next/app';
10+
import '../styles/globals.css';
1011

1112
import { DEVELOPER_DAO_WEBSITE } from '../utils/DeveloperDaoConstants';
1213
import { theme } from '../theme';

‎frontend/src/styles/globals.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.css-sfv4qq {
2+
flex-direction: column;
3+
}

0 commit comments

Comments
 (0)