Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Website addons #51

Merged
merged 3 commits into from
Aug 13, 2023
Merged

Website addons #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8aff775
add: features, testimonials, footer section
KlumsyKamikaze Aug 10, 2023
7c70256
Merge pull request #46 from KlumsyKamikaze/master
VenkatTeja Aug 13, 2023
e57eef5
add content to webapp design
VenkatTeja Aug 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions webapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"react-ipfs-image": "^0.6.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"swiper": "^10.1.0",
"typescript": "^4.7.4",
"wagmi": "^0.7.2",
"web-vitals": "^2.1.4"
Expand Down
247 changes: 14 additions & 233 deletions webapp/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,16 @@
import React, { useEffect } from "react";
// import "./App.css";
// import AppBar from '@mui/material/AppBar';
import { Button, Flex, HStack, Image, Stack, Text, ButtonGroup, Icon, IconButton, Link } from "@chakra-ui/react";
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
// import ellipse from "./assets/ellipse1.svg";
import ellipse from "./assets/ellipse-bottom-left.svg";
import gradient from "./assets/gradient.png";
import polygon_blockchain_logo from "./assets/polygon_blockchain_logo.svg";
import { FaDiscord } from 'react-icons/fa';
import TwitterIcon from '@mui/icons-material/Twitter';
import { useNavigate } from "react-router-dom";
var mixpanel = require('mixpanel-browser');

import { Flex } from "@chakra-ui/react";
import Hero from "pages/landing/Hero";
import Features from "pages/landing/Features";
import Footer from "Footer";
import Testimonials from "pages/landing/Testimonials";
var mixpanel = require("mixpanel-browser");

function App() {
const navigate = useNavigate();

useEffect(() => {
mixpanel.init(process.env.REACT_APP_MIXPANEL);
mixpanel.track('Open Landing Page');
}, [])
mixpanel.track("Open Landing Page");
}, []);

return (
<Flex
Expand All @@ -29,223 +20,13 @@ function App() {
textAlign="center"
minHeight="100vh"
position="relative"
maxWidth="100%"
overflowX="hidden"
>
<Stack
direction={{ base: "column", md: "row" }}
// gap={{ base: "1rem", md: "0rem" }}
justifyContent="center"
alignItems="center"
spacing={{ base: "1rem", md: "0.75rem" }}
marginTop="5rem"
zIndex="3"
></Stack>
<Text
lineHeight="120%"
width={{ base: "90%", md: "80%", lg: "80%", xl: "65%" }}
color="white"
// fontSize={"6.5rem"}
fontSize={{
base: "1.8rem",
md: "3.0rem",
lg: "3.5rem",
xl: "4rem",
"2xl": "5.0rem",
}}
zIndex="3"
>
We are here to make
</Text>
<Text
lineHeight="120%"
width={{ base: "90%", md: "80%", lg: "80%", xl: "65%" }}
color="white"
// fontSize={"6.5rem"}
fontSize={{
base: "1.8rem",
md: "3.0rem",
lg: "3.5rem",
xl: "4rem",
"2xl": "5.0rem",
}}
zIndex="3"
>
web safe for everyone
</Text>
<Text
zIndex="3"
color="white"
width={{ base: "100%", md: "50%", lg: "60%", xl: "60%", "2xl": "50%" }}
fontWeight={300}
fontSize={{
md: "1.1rem",
lg: "1.2rem",
xl: "1.2rem",
"2xl": "1.45rem",
}}
marginTop="1.5rem"
>
Decentralised Internet organisation
</Text>
<Text
zIndex="3"
color="white"
width={{ base: "60%", md: "50%", lg: "60%", xl: "60%", "2xl": "50%" }}
fontWeight={300}
fontSize={{
md: "1.1rem",
lg: "1.2rem",
xl: "1.2rem",
"2xl": "1.45rem",
}}
>
that protects you online
</Text>

<Stack
direction={{ base: "column", md: "row" }}
// gap={{ base: "1rem", md: "0rem" }}
justifyContent="center"
alignItems="center"
spacing={{ base: "1rem", md: "0.75rem" }}
marginTop="3rem"
zIndex="3"
>
<Button
variant="solid"
as="a"
href="https://chrome.google.com/webstore/detail/web3-vigilance-browser-se/olgmmbfdmfbnihhcfhalglddbjobgpli?hl=en"
target="_blank"
size={{ base: "md", md: "lg" }}
bgColor="#5400CD"
borderRadius="0.125rem"
paddingInline={"1rem"}
paddingY="0.75rem"
color="white"
lineHeight="120%"
fontWeight={600}
fontSize="1.125rem"
rightIcon={<ArrowOutwardIcon />}
_hover={{
bgColor: "#3c0191",
}}
style={{
boxShadow: "0px 4px 156px #8C00FB",
}}
>
Download Extension
</Button>
<Button
variant="outline"
size={{ base: "md", md: "lg" }}
as="a"
target="_blank"
href="https://docs.vigilancedao.org/"
borderColor="#5400CD"
borderStyle="solid"
borderWidth="0.1rem"
paddingInline={"1rem"}
paddingY="0.75rem"
bgColor="rgba(84, 0, 205, 0.05)"
borderRadius="0.125rem"
_hover={{
color: "whiteAlpha.600",
bgColor: "#3c0191",
}}
style={{
boxShadow: "0px 4px 156px rgba(140, 0, 251, 0.25)",
color: "white",
}}
>
See how it works
</Button>
</Stack>
<Stack style={{marginTop: '50px'}}>
<ButtonGroup
gap='1'
style={{zIndex: 10000}}
>
<Link href='https://twitter.com/VigilanceDao' isExternal>
{/* <TwitterIcon color /> */}
<Icon as={TwitterIcon} color='white' boxSize={6} />
</Link>
<Link href='https://discord.gg/xUSf2zdYmD' isExternal>
<Icon as={FaDiscord} color='white' boxSize={6} />
</Link>
</ButtonGroup>
</Stack>
{/* <Stack
direction={{ base: "row", md: "row" }}
// gap={{ base: "1rem", md: "0rem" }}
justifyContent="top"
alignItems="top"
spacing={{ base: "1rem", md: "0.75rem" }}
marginTop="5rem"
zIndex="3"
>
<Text
zIndex="3"
color="#b89fdf"
width={{ base: "50%" }}
fontWeight={300}
fontSize={{
md: "0.65rem",
lg: "0.7rem",
xl: "0.7rem",
"2xl": "1.0rem",
}}
marginRight="1.5rem"
>
Powered by
<Image src={polygon_blockchain_logo} height="50px" />
</Text>
<Text
zIndex="3"
color="#b89fdf"
width={{ base: "50%" }}
fontWeight={300}
fontSize={{
md: "0.65rem",
lg: "0.7rem",
xl: "0.7rem",
"2xl": "1.0rem",
}}
marginLeft="1.5rem"
>
Backed by
<Image
src="https://grants.filecoin.io/vintage/images/filecoin-logo.png"
height="35px"
marginTop="7px"
/>
</Text>
</Stack> */}
<Stack
direction={{ base: "column", md: "row" }}
// gap={{ base: "1rem", md: "0rem" }}
justifyContent="center"
alignItems="center"
spacing={{ base: "1rem", md: "0.75rem" }}
marginTop="3rem"
zIndex="3"
></Stack>

<Image
position="absolute"
bottom="0"
marginTop="auto"
src={gradient}
width="100%"
zIndex="1"
/>
<Image
position="absolute"
bottom="0"
// left="0"
marginTop="auto"
src={ellipse}
width={{ base: "100%" }}
zIndex="2"
/>
<Hero />
<Features />
<Testimonials />
<Footer />
</Flex>
);
}
Expand Down
Loading