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

New Estuary Design #179

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

New Estuary Design #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5ff7d42
front-end changes
umershaikh123 Mar 15, 2023
8c7ef9b
code section update
umershaikh123 Mar 16, 2023
4a0b464
Landing-page changes
umershaikh123 Mar 19, 2023
0a7aba0
sign-up page
umershaikh123 Mar 19, 2023
56b4b8a
commit
umershaikh123 Mar 21, 2023
65d4345
responsiveness added
umershaikh123 Mar 22, 2023
892d7b8
Merge branch 'application-research:master' into master
umershaikh123 Mar 22, 2023
fc27f65
Merge branch 'master' of https://github.com/umershaikh123/estuary-www
umershaikh123 Mar 22, 2023
7bd9d16
animation added
umershaikh123 Mar 22, 2023
3fa2480
commit
umershaikh123 Mar 25, 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
24 changes: 16 additions & 8 deletions components/Button.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,37 @@





.button {
background-color: var(--main-button-background);
color: var(--main-button-text);
background-color: #292C31;
color: #0BFF48;
box-shadow: 0px 4px 4px #0A7225;
// max-width: 20rem;
text-transform: capitalize;
box-sizing: border-box;
text-transform: uppercase;
border-radius: 4px;
outline: 0;
border: 0;

min-height: 40px;
padding: 4px 24px 4px 24px;
padding: 16px 24px 16px 24px;

display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-size: 16px;
letter-spacing: 0.6px;
font-weight: 600;
overflow-wrap: break-word;
user-select: none;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
// box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: 200ms ease all;
transform: scale(1);
text-decoration: none;

&:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
box-shadow: 0px 4px 4px #0BFF48;
}
}

Expand Down
160 changes: 160 additions & 0 deletions components/DataStore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import React from 'react';

import { Grid, Stack, Typography, Box, Container, Link } from '@mui/material';

const DataStore = () => {
const mainPrimary = `#0BFF48`;
const darkGreen = `#0A7225`;

return (
<>
<Box
sx={{
// backgroundColor: '#0C0B0B',
color: 'white',

mt: 15,
mb: 20,
}}
>
<Container maxWidth="lg" sx={{}}>
<Typography variant="body2" sx={{ color: 'white', px: 2, mt: '6px', fontSize: '32px', fontWeight: 'bold' }}>
Your uploaded data on estuary goes to 7 places for 540 days!{' '}
</Typography>

<Stack direction="row" spacing={8} sx={{ position: 'relative', mt: 10 }} className=" lg:flex-row flex-col space-y-20" justifyContent="center" alignItems="center">
<Box
sx={{
boxShadow: `0px 4px 4px ${mainPrimary}`,
border: `1px solid ${mainPrimary}`,
background: '#070707',
}}
// className="absolute top-20 left-0 w-96 p-5 mt-5"
className=" w-96 pt-5 pb-10 px-4 lg:mt-24 m-4"
>
<Stack direction="column" spacing={3} justifyContent="center" alignItems="center">
<Typography variant="body2" sx={{ color: 'white', mt: '0px', fontSize: '28px', fontWeight: 'bold' }}>
Estuary IPFS node
</Typography>

<Typography variant="body2" sx={{ color: 'white', mt: '6px', fontSize: '20px', fontWeight: 'regular', opacity: '0.9', lineHeight: '2.0rem', textAlign: 'center' }}>
This is like a hot cache! You can retrieve your data from any public IPFS gateway
</Typography>

<Link href="https://shuttle-1.estuary.tech/gw/ipfs/QmPBHAjRLZqvJwcBUTiVxNtvugToAnTyJxpzTCgKZVHsvw/" underline="none" target="_blank">
<Typography
variant="body2"
sx={{}}
className="text-secondary border-2 rounded-sm text-center border-secondary bg-black py-1 text-lg font-bold items-center w-56 hover:scale-105 transition-transform "
>
Pinning example
</Typography>
</Link>

<Link underline="none" href="https://estuary.tech/verify-cid?cid=QmPBHAjRLZqvJwcBUTiVxNtvugToAnTyJxpzTCgKZVHsvw" target="_blank">
<Typography
variant="body2"
sx={{}}
className="text-secondary border-2 rounded-sm text-center border-secondary hover:scale-105 transition-transform bg-black py-1 text-lg font-bold items-center w-56"
>
Reciept example
</Typography>
</Link>
</Stack>
</Box>

{/* card 2 */}
<Box
sx={{
boxShadow: `0px 4px 4px ${mainPrimary}`,
border: `1px solid ${mainPrimary}`,
background: '#070707',

// width: '40rem',

// top: '3.8rem',
// right: 0,
}}
// className="absolute top-20 right-0 w-128 p-2 mt-5"
className=" py-8 px-8 mt-12"
>
<Stack direction="column" spacing={5} justifyContent="center" alignItems="center">
<Typography variant="body2" sx={{ color: 'white', mt: '16px', fontSize: '28px', fontWeight: 'bold' }}>
Filecoin Storage Provider
</Typography>

<Stack direction="row" spacing={3} justifyContent="center" alignItems="center">
<Link target="_blank" underline="none" href="https://estuary.tech/providers/stats/f01345523">
<Typography
variant="body2"
sx={{}}
className="text-secondary border-2 rounded-sm text-center border-secondary hover:scale-105 transition-transform bg-black py-1 text-lg font-bold items-center w-56"
>
Provider 1
</Typography>
</Link>

<Link target="_blank" underline="none" href="https://estuary.tech/providers/stats/f01392893">
<Typography
variant="body2"
sx={{}}
className="text-secondary border-2 rounded-sm text-center border-secondary hover:scale-105 transition-transform bg-black py-1 text-lg font-bold items-center w-56"
>
Provider 2
</Typography>
</Link>
</Stack>

<Stack direction="row" spacing={3} justifyContent="center" alignItems="center">
<Link target="_blank" underline="none" href="https://estuary.tech/providers/stats/f022352">
<Typography
variant="body2"
sx={{}}
className="text-secondary border-2 rounded-sm text-center border-secondary hover:scale-105 transition-transform bg-black py-1 text-lg font-bold items-center w-56"
>
Provider 3
</Typography>
</Link>

<Link target="_blank" underline="none" href="https://estuary.tech/providers/stats/f01096124">
<Typography
variant="body2"
sx={{}}
className="text-secondary border-2 rounded-sm text-center border-secondary hover:scale-105 transition-transform bg-black py-1 text-lg font-bold items-center w-56"
>
Provider 4
</Typography>
</Link>
</Stack>

<Stack direction="row" spacing={3} justifyContent="center" alignItems="center">
<Link target="_blank" underline="none" href="https://estuary.tech/providers/stats/f01199442">
<Typography
variant="body2"
sx={{}}
className="text-secondary border-2 rounded-sm text-center border-secondary hover:scale-105 transition-transform bg-black py-1 text-lg font-bold items-center w-56"
>
Provider 5
</Typography>
</Link>

<Link target="_blank" underline="none" href="https://estuary.tech/providers/stats/f0763337">
<Typography
variant="body2"
sx={{}}
className="text-secondary border-2 rounded-sm text-center border-secondary hover:scale-105 transition-transform bg-black py-1 text-lg font-bold items-center w-56"
>
Provider 6
</Typography>
</Link>
</Stack>
</Stack>
</Box>
</Stack>
</Container>
</Box>
</>
);
};

export default DataStore;
173 changes: 121 additions & 52 deletions components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,127 @@
import styles from '@components/Footer.module.scss';
import React from 'react';

function FooterLink({ children, href }: { href: string, children: React.ReactNode }) {
return (
<li className={styles.listItemLink}>
<a className={styles.footerLink} style={{ textDecoration: 'none' }} href={href} target="_blank">
{children}
</a>
</li>
);
}
import { Link, Stack, Typography, Box, Container } from '@mui/material';

function Footer() {
const Footer = () => {
return (
<footer className={styles.footer}>
<section className={styles.container}>
<div className={styles.footerColumn} style={{ borderRight: '1px dashed var(--text-space-gray)' }}>
<h4 className={styles.footerHeading}>Learn more</h4>
<ul className={styles.unorderedList}>
<FooterLink href={'https://arg.protocol.ai'}>Our Team</FooterLink>
<FooterLink href={'https://github.com/application-research/estuary-knowledge-base'}>Knowledge Base</FooterLink>
</ul>
</div>
<div className={styles.footerColumn} style={{ borderRight: '1px dashed var(--text-space-gray)' }}>
<h4 className={styles.footerHeading}>Reach out</h4>
<ul className={styles.unorderedList}>
<FooterLink href={'https://filecoinproject.slack.com/join/shared_invite/zt-1k3lv7938-9pDAqSpH4eWVHtX12elqvg#/shared-invite/email'}>Slack</FooterLink>
<FooterLink href={'https://github.com/filecoin-project/community#forums'}>Github Discussions</FooterLink>
</ul>
</div>
<div className={styles.footerColumn}>
<h4 className={styles.footerHeading}>Follow us</h4>
<ul className={styles.unorderedList}>
<FooterLink href={'https://twitter.com/estuary_tech'}>Twitter</FooterLink>
<FooterLink href={'https://github.com/application-research/estuary-www'}>Github</FooterLink>
</ul>
</div>
</section>

<section className={styles.footerBranding}>
<div className={styles.footerBrandingContent}>
<div className={styles.footerLeft}>
<a href="https://estuary.tech/" target="_blank">
<img className={styles.footerLogo} height="24px" src="https://user-images.githubusercontent.com/28320272/204942093-88d8027a-2e0f-4d41-877e-1a462ab15c8d.svg" />
</a>
</div>
<div className={styles.footerRight}>
<a href={'https://arg.protocol.ai'} style={{ textDecoration: 'none', color: 'black', whiteSpace: 'nowrap' }}>
@2022 ARG
</a>
</div>
</div>
</section>
</footer>
<>
<Box
sx={{
// backgroundColor: '#0C0B0B',
color: 'white',
position: 'relative',
background: 'linear-gradient(90deg, #000000 50%, #001A06 100%)',
p: 5,
}}
>
<Container maxWidth="lg">
<Stack direction="row" justifyContent="space-between" spacing={5}>
<Stack direction="column" spacing={3}>
<Typography variant="body2" sx={{ color: 'white', px: 2, mt: '6px', fontSize: '28px', fontWeight: 'bold' }}>
Estuary
</Typography>

<Typography variant="body2" sx={{ color: 'white', px: 2, mt: '6px', fontSize: '16px', opacity: '0.9' }}>
If you choose to use Estuary you agree to our
<Link className=" text-secondary underline hover:scale-105 transition-transform" href="https://docs.estuary.tech/terms/">
{' '}
Terms of Service.
</Link>
</Typography>
</Stack>

<Stack direction="column" spacing={2}>
<Typography variant="body2" sx={{ color: 'white', px: 2, mt: '6px', fontSize: '20px' }}>
Links
</Typography>

<Link
target="_blank"
href="https://docs.estuary.tech/"
className="hover:scale-105 transition-transform"
sx={{ color: '#0BFF48', px: 2, mt: '6px', fontSize: '14px', fontWeight: 'regular' }}
underline="none"
>
Documentation
</Link>

<Link
href="./verify-cid"
target="_blank"
className="hover:scale-105 transition-transform"
sx={{ color: '#0BFF48', px: 2, mt: '6px', fontSize: '14px', fontWeight: 'regular' }}
underline="none"
>
Verify
</Link>

<Link
href="./sign-up"
target="_blank"
className="hover:scale-105 transition-transform"
sx={{ color: '#0BFF48', px: 2, mt: '6px', fontSize: '14px', fontWeight: 'regular' }}
underline="none"
>
Sign up
</Link>
</Stack>

<Stack direction="column" spacing={2}>
<Typography variant="body2" sx={{ color: 'white', px: 2, mt: '6px', fontSize: '20px' }}>
Resources
</Typography>

<Link
href="https://github.com/application-research/estuary-www"
target="_blank"
className="hover:scale-105 transition-transform"
sx={{ color: '#0BFF48', px: 2, mt: '6px', fontSize: '14px' }}
underline="none"
>
Github
</Link>

<Link
href="https://fw.services/"
target="_blank"
className="hover:scale-105 transition-transform"
sx={{ color: '#0BFF48', px: 2, mt: '6px', fontSize: '14px' }}
underline="none"
>
Roadmap
</Link>
</Stack>

<Stack direction="column" spacing={2}>
<Typography variant="body2" sx={{ color: 'white', px: 2, mt: '6px', fontSize: '20px' }}>
Socials
</Typography>

<Link
href="https://filecoinproject.slack.com/join/shared_invite/zt-1mx9d08sj-Xo4pRqDQBeuVQyTUFPty5w#/shared-invite/email"
target="_blank"
className="hover:scale-105 transition-transform"
sx={{ color: '#0BFF48', px: 2, mt: '6px', fontSize: '14px' }}
underline="none"
>
Slack
</Link>

<Link
href="https://twitter.com/estuary_tech"
target="_blank"
className="hover:scale-105 transition-transform"
sx={{ color: '#0BFF48', px: 2, mt: '6px', fontSize: '14px' }}
underline="none"
>
Twitter
</Link>
</Stack>
</Stack>
</Container>
</Box>
</>
);
}
};

export default Footer;
Loading