Skip to content

Commit f86166e

Browse files
Anton-MushninAnton-Mushnin
committed
home page improvements
1 parent d450b62 commit f86166e

File tree

2 files changed

+113
-67
lines changed

2 files changed

+113
-67
lines changed

‎frontend/pages/index.js‎

Lines changed: 57 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
Icon,
1919
Spacer,
2020
SimpleGrid,
21+
Button,
2122
} from "@chakra-ui/react";
2223
import { HiOutlineChatAlt2 } from "react-icons/hi";
2324
import useUser from "../src/core/hooks/useUser";
@@ -28,7 +29,6 @@ import {
2829
BACKGROUND_COLOR,
2930
} from "../src/core/constants";
3031
import TrustedBadge from "../src/components/TrustedBadge";
31-
import RouteButton from "../src/components/RouteButton";
3232
import AnalyticsContext from "../src/core/providers/AnalyticsProvider/context";
3333
import RouterLink from "next/link";
3434
import FAQCard from "../src/components/FAQCard";
@@ -68,6 +68,7 @@ const assets = {
6868
optimism: `${AWS_ASSETS_PATH}/optimism_logo.png`,
6969
orangedao: `${AWS_ASSETS_PATH}/featured_by/orangedao_logo.png`,
7070
polygon: `${AWS_ASSETS_PATH}/polygon_blockchain_logo.png`,
71+
tech_crunch_winner: `${AWS_ASSETS_PATH}/tc_crypto_sessions_transparent.png`,
7172
};
7273

7374
const Homepage = () => {
@@ -165,28 +166,43 @@ const Homepage = () => {
165166
align="center"
166167
justify="center"
167168
boxSize="full"
168-
pt={["90px", "120px"]}
169+
pt={["90px", "142px"]}
169170
pb={10}
170171
px="5%"
171172
flexDir="column"
172173
>
173174
<Stack
174175
textAlign="center"
175176
alignItems="center"
176-
spacing={6}
177177
maxW={["1620px", null, null, null, "1620px", "2222px"]}
178178
w="100%"
179179
>
180-
<Heading
181-
fontSize={["4xl", "4xl", "5xl", "5xl", "5xl", "6xl"]}
182-
fontWeight="bold"
183-
color="white"
184-
as="h1"
185-
pb={[2, 4]}
186-
maxW={[null, "90%", "80%", "40%"]}
180+
<Link
181+
mb="60px"
182+
isExternal
183+
href="https://www.crypto-reporter.com/press-releases/moonstream-to-wins-techcrunch-pitch-off-earning-a-spot-at-disrupt-2023-39287/
184+
"
185+
>
186+
<ChakraImage
187+
src={assets.tech_crunch_winner}
188+
w="272px"
189+
h="59px"
190+
cursor="pointer"
191+
bg="#46C370"
192+
borderRadius="10px"
193+
_hover={{
194+
bg: "#3BB563",
195+
}}
196+
/>
197+
</Link>
198+
<Box
199+
fontSize={["30px", "50px"]}
200+
fontWeight="700"
201+
maxW="613px"
202+
mt="0px"
187203
>
188204
{DEFAULT_METATAGS.title}
189-
</Heading>
205+
</Box>
190206
<chakra.span
191207
pb={[2, 6]}
192208
fontSize={["md", "md", "md", "md", null]}
@@ -208,45 +224,34 @@ const Homepage = () => {
208224
pb={10}
209225
>
210226
<Center>
211-
<RouteButton
212-
variant="whiteOnOrange"
213-
bg={
214-
"linear-gradient(92.26deg, #F56646 8.41%, #FFFFFF 255.37%);"
215-
}
216-
minW={["320px", "150px", null]}
217-
border="none"
227+
<Button
228+
variant="orangeGradient"
218229
onClick={() => {
219230
buttonReport(
220231
"Boost",
221232
"front-and-center",
222233
"landing"
223234
);
235+
router.push("/contact");
224236
}}
225-
href={"/contact"}
226237
>
227238
Get Started
228-
</RouteButton>
239+
</Button>
229240
</Center>
230241
<Center>
231-
<RouteButton
232-
variant="orangeAndBlue"
233-
bg="transparent"
234-
borderWidth="2px"
235-
borderColor="white"
236-
textColor="white"
237-
minW={["320px", "200px", null]}
242+
<Button
243+
variant="whiteOutline"
238244
onClick={() => {
239245
buttonReport(
240246
"Discord",
241247
"front-and-center",
242248
"landing"
243249
);
250+
router.push("/discordleed");
244251
}}
245-
href={"/discordleed"}
246-
isExternal
247252
>
248253
Join our Discord
249-
</RouteButton>
254+
</Button>
250255
</Center>
251256
</Stack>
252257
</Stack>
@@ -550,36 +555,28 @@ const Homepage = () => {
550555
pb={4}
551556
>
552557
<Center>
553-
<RouteButton
554-
variant="whiteOnOrange"
555-
backgroundColor="#F56646"
556-
minW={["320px", "300px", null]}
558+
<Button
559+
variant="plainOrange"
557560
onClick={() => {
558561
buttonReport("Features", "features", "landing");
562+
router.push("/features");
559563
}}
560-
href={"/features"}
561564
>
562565
Learn more about our features
563-
</RouteButton>
566+
</Button>
564567
</Center>
565568
<Center>
566-
<RouteButton
567-
variant="orangeAndBlue"
568-
bg="transparent"
569-
borderWidth="2px"
570-
borderColor="white"
571-
textColor="white"
572-
minW={["320px", "300px", null]}
569+
<Button
570+
variant="whiteOutline"
573571
onClick={() => {
574572
buttonReport("Use Cases", "features", "landing");
573+
router.push(
574+
"https://docs.google.com/document/d/1mjfF8SgRrAZvtCVVxB2qNSUcbbmrH6dTEYSMfHKdEgc/view"
575+
);
575576
}}
576-
href={
577-
"https://docs.google.com/document/d/1mjfF8SgRrAZvtCVVxB2qNSUcbbmrH6dTEYSMfHKdEgc/view"
578-
}
579-
isExternal
580577
>
581578
Explore the use cases
582-
</RouteButton>
579+
</Button>
583580
</Center>
584581
</Stack>
585582
</Center>
@@ -914,7 +911,7 @@ const Homepage = () => {
914911
</Accordion>
915912
</GridItem>
916913
<GridItem
917-
px={["5%", null, "12%", "15%"]}
914+
px="7%"
918915
py={10}
919916
colSpan="12"
920917
bgColor={BACKGROUND_COLOR}
@@ -985,7 +982,7 @@ const Homepage = () => {
985982
</Center>
986983
</GridItem>
987984
<GridItem
988-
px={["5%", null, "12%", "15%"]}
985+
px="7%"
989986
pt={10}
990987
pb={20}
991988
colSpan="12"
@@ -1024,18 +1021,15 @@ const Homepage = () => {
10241021
</Text>
10251022
</Box>
10261023
<Spacer />
1027-
<RouteButton
1028-
variant="orangeAndBlue"
1029-
bg="white"
1030-
minW={["250px", "250px", null]}
1031-
textColor={BACKGROUND_COLOR}
1024+
<Button
1025+
variant="solidWhite"
10321026
onClick={() => {
10331027
buttonReport("Boost", "page-bottom", "landing");
1028+
router.push("/contact");
10341029
}}
1035-
href={"/contact"}
10361030
>
10371031
Boost my game economy
1038-
</RouteButton>
1032+
</Button>
10391033
</Stack>
10401034
<Flex
10411035
w="100%"
@@ -1061,20 +1055,17 @@ const Homepage = () => {
10611055
{`Learn more about crypto, NFT and DAOs, find links to educational resources, discuss gaming projects, and laugh at memes.`}
10621056
</Text>
10631057

1064-
<RouteButton
1065-
variant="orangeAndBlue"
1066-
bg="white"
1067-
borderColor={lightOrangeColor}
1068-
textColor={lightOrangeColor}
1069-
minW={["200px", "250px", "250px", "250px", null]}
1058+
<Button
1059+
variant="whiteOutline"
1060+
color="orange.1000"
1061+
borderColor="orange.1000"
10701062
onClick={() => {
10711063
buttonReport("Discord", "page-bottom", "landing");
1064+
router.push("/discordleed");
10721065
}}
1073-
href={"/discordleed"}
1074-
isExternal
10751066
>
10761067
Join our Discord
1077-
</RouteButton>
1068+
</Button>
10781069
</Flex>
10791070
</GridItem>
10801071
</Grid>

‎frontend/src/Theme/Button/index.js‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,13 +144,42 @@ const variantWhiteOnOrange = () => {
144144
};
145145
};
146146

147+
const variantOrangeGradient = () => {
148+
return {
149+
border: "none",
150+
borderRadius: "30px",
151+
fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
152+
textColor: "white",
153+
bg: "linear-gradient(92.26deg, #F56646 8.41%, #FFFFFF 255.37%)",
154+
fontWeight: "700",
155+
padding: "10px 30px",
156+
_hover: {
157+
bg: "linear-gradient(264.06deg, #F56646 -6.89%, #FFFFFF 335.28%)",
158+
},
159+
};
160+
};
161+
162+
const variantSolidWhite = () => {
163+
return {
164+
bg: "white",
165+
textColor: "black",
166+
border: "none",
167+
borderRadius: "30px",
168+
p: "10px 30px",
169+
fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
170+
_hover: {
171+
bg: "#E6E6E6",
172+
},
173+
};
174+
};
175+
147176
const variantPlainOrange = () => {
148177
return {
149178
alignItems: "center",
150179
justifyContent: "center",
151180
border: "solid transparent",
152181
borderRadius: "30px",
153-
variant: "solid",
182+
// variant: "solid",
154183
fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
155184
textColor: "white",
156185
bg: "#F56646",
@@ -168,6 +197,29 @@ const variantPlainOrange = () => {
168197
};
169198
};
170199

200+
const variantWhiteOutline = () => {
201+
return {
202+
color: "white",
203+
border: "2px solid white",
204+
borderRadius: "30px",
205+
bg: "transparent",
206+
p: "10px 30px",
207+
fontSize: "20px",
208+
textDecoration: "none",
209+
_hover: {
210+
backgroundColor: "transparent",
211+
borderWidth: "3px",
212+
p: "9px 29px",
213+
},
214+
_focus: {
215+
backgroundColor: "transparent",
216+
},
217+
_active: {
218+
backgroundColor: "transparent",
219+
},
220+
};
221+
};
222+
171223
const Button = {
172224
// 1. We can update the base styles
173225
baseStyle: () => ({
@@ -208,6 +260,9 @@ const Button = {
208260
orangeAndBlue: variantOrangeAndBlue,
209261
whiteOnOrange: variantWhiteOnOrange,
210262
plainOrange: variantPlainOrange,
263+
whiteOutline: variantWhiteOutline,
264+
orangeGradient: variantOrangeGradient,
265+
solidWhite: variantSolidWhite,
211266
},
212267
};
213268
export default Button;

0 commit comments

Comments
 (0)