Skip to content

Commit

Permalink
feat: add animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@wagmi-x
wagmi-x committed Nov 5, 2023
1 parent 89cb20b commit 38a1a48
Show file tree
Hide file tree
Showing 10 changed files with 741 additions and 129 deletions.
17 changes: 16 additions & 1 deletion app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,14 @@ body {
}

.why-button {
@apply bg-gradient-to-r from-[rgb(255,150,79)] to-[rgb(230,59,11)] py-3 px-6 rounded-2xl text-white font-semibold flex items-center gap-2;
visibility: hidden;
@apply bg-gradient-to-r from-[rgb(255,150,79)] to-[rgb(230,59,11)] flex opacity-0 mt-1 transition-all duration-500;
@apply py-3 px-6 rounded-2xl text-white font-semibold items-center gap-2;
}

.why-button.active {
visibility: visible !important;
@apply opacity-100 mt-0;
}

.rower-header>div {
Expand All @@ -98,3 +105,11 @@ body {
.rower>div.rower-primary {
@apply bg-[rgba(252,120,35,0.1)] border-b border-b-[rgba(252,120,35,0.2)] font-semibold border-x border-x-transparent;
}

.why-popover {
@apply absolute border border-primary p-4 rounded-2xl top-4 z-50 text-[#373C4F] bg-[rgba(250,247,243,.6)];
}

.why-popover.active {
@apply text-white bg-gradient-to-br from-[#FC7823] to-[#FF2F00];
}
182 changes: 74 additions & 108 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
'use client'
import { Banner } from '@/components/Banner'
import Image from 'next/image'
import { What } from '@/components/What'
import { With } from '@/components/With'
import { Offer } from '@/components/Offer'
import { Footer } from '@/components/Footer'
import { ArrowTopRightIcon } from '@radix-ui/react-icons'
import { Competitive } from '@/components/Competitive'
import * as Popover from '@radix-ui/react-popover'
import { useState } from 'react'

export default function Home() {
const [enter, setEnter] = useState(false)

return (
<>
<Banner />
Expand All @@ -17,130 +22,91 @@ export default function Home() {
<Offer />
</div>
<div
style={{ backgroundImage: 'url(/why-bg.png)', backgroundSize: '100%' }}
className={'py-20 mx-8 flex items-center justify-center py-16'}
style={{ backgroundImage: 'url(/why-bg.png)', backgroundSize: '100% 100%' }}
className={'py-24 mx-8 flex items-center justify-center py-16 bg-no-repeat'}
onMouseEnter={() => setEnter(true)}
onMouseLeave={() => setEnter(false)}
>
<div className={'w-[660px]'}>
<div className='flex justify-end mb-12'>
<button className={'why-button'}>
Seamless
<ArrowTopRightIcon className={'w-[20px] h-[20px]'} />
</button>
<div className={'relative h-[48px]'}>
<Popover.Root>
<Popover.Trigger asChild>
<button className={`why-button ${enter ? 'active' : ''}`}>
Seamless
<ArrowTopRightIcon className={'w-[20px] h-[20px]'} />
</button>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content sideOffset={5} align={'start'}>
<div className={`why-popover w-[400px]`}>
<div className={'text-[16px] font-medium mb-2'}>Native Blob-Carrying Transactions Support</div>
<div className={'text-sm leading-7'}>
EthDA bolsters on-chain availability and storage capabilities for large data sets through its native support for
blob-carrying transactions, enabling sharding and storage of large data blocks.
</div>
</div>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
</div>
</div>
<div className={'flex items-center justify-between mb-12'}>
<button className={'why-button'}>
Availibility
<ArrowTopRightIcon className={'w-[20px] h-[20px]'} />
</button>
<div className={'relative'}>
<Popover.Root>
<Popover.Trigger asChild>
<button className={`why-button ${enter ? 'active' : ''}`}>
Security
<ArrowTopRightIcon className={'w-[20px] h-[20px]'} />
</button>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content side={'right'} align={'end'}>
<div className={'why-popover active w-[380px]'} style={{ transform: 'translateX(-380px)' }}>
<div className={'text-[16px] font-medium mb-2'}>Data Availability Sampling Mechanism</div>
<div className={'text-sm leading-7'}>
EthDA employs DAS to secure DA data storage, and derives security from Ethereum consensus by rolling-up storage
proofs to Ethereum for fraud proving and trustless finality
</div>
</div>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
</div>
<div className={'text-[80px] font-bold leading-[90px]'}>
<div>Why</div>
<div>EthDA</div>
</div>
<button />
<button className={'w-[100px]'} />
</div>
<div className='flex justify-end pr-20'>
<button className={'why-button'}>
Alignment
<ArrowTopRightIcon className={'w-[20px] h-[20px]'} />
</button>
</div>
</div>
</div>
</div>

<div className={'py-14 bg-gradient-to-b from-[rgb(245,230,221)] to-[rgb(249,246,241)]'}>
<div className='text-center title mb-10'>Competitive Landscape</div>
<div className='container mx-auto'>
<div className='flex mb-2 rower-header'>
<div className={'w-1/6'}>&nbsp;</div>
<div className={'w-1/6'}>
<Image src={'/ethda.svg'} alt={'ethda'} width={101} height={22} />
</div>
<div className={'w-1/6'}>
<Image src={'/celestia.svg'} alt={'ethda'} width={110} height={28} />
</div>
<div className={'w-1/6'}>
<Image src={'/avail.svg'} alt={'ethda'} width={97} height={28} />
</div>
<div className={'w-1/6'}>
<Image src={'/eigenda.svg'} alt={'ethda'} width={134} height={28} />
</div>
<div className={'w-1/6'}>
<div className={'flex flex-col'}>
<Image src={'/eth.svg'} alt={'ethda'} width={144} height={30} />
<div className={'text-[10px] mt-1 pl-7'}>(Pre-EIP4844)</div>
<div className={'relative h-[48px]'}>
<Popover.Root>
<Popover.Trigger asChild>
<button className={`why-button ${enter ? 'active' : ''}`}>
Alignment
<ArrowTopRightIcon className={'w-[20px] h-[20px]'} />
</button>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content sideOffset={5} align={'start'}>
<div className={'why-popover w-[480px]'}>
<div className={'text-[16px] font-medium mb-2'}>A Fully Ethereum-based Layer 2 Solution</div>
<div className={'text-sm leading-7'}>
As an Ethereum layer2 network, EthDA is fully aligned with Ethereum technologies and features, adhering to
Ethereum’s danksharding roadmap in its design and implementation.
</div>
</div>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
</div>
</div>
</div>
<div className={'border border-2 border-[#f0e7e1] rounded-[4px]'}>
<div className='flex rower'>
<div className='w-1/6'>Technology</div>
<div className='w-1/6 rower-primary'>Ethereum Rollup</div>
<div className='w-1/6'>Tendermint</div>
<div className='w-1/6'>Substrate</div>
<div className='w-1/6'>Smart Contract</div>
<div className='w-1/6'>Ethereum</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Payment</div>
<div className='w-1/6 rower-primary'>$ETH</div>
<div className='w-1/6'>$TIA</div>
<div className='w-1/6'>TBD</div>
<div className='w-1/6'>$ETH</div>
<div className='w-1/6'>$ETH</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Data Retention</div>
<div className='w-1/6 rower-primary'>Permanent</div>
<div className='w-1/6'>Temporary</div>
<div className='w-1/6'>Temporary</div>
<div className='w-1/6'>Temporary</div>
<div className='w-1/6'>Temporary</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>dStorage</div>
<div className='w-1/6 rower-primary'>Yes</div>
<div className='w-1/6'>No</div>
<div className='w-1/6'>No</div>
<div className='w-1/6'>No</div>
<div className='w-1/6'>Yes</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Data Availability sampling</div>
<div className='w-1/6 rower-primary'>Yes</div>
<div className='w-1/6'>Yes</div>
<div className='w-1/6'>Yes</div>
<div className='w-1/6'>No</div>
<div className='w-1/6'>No</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Proof schema</div>
<div className='w-1/6 rower-primary'>Fraud & Validity Proofs</div>
<div className='w-1/6'>Fraud Proofs</div>
<div className='w-1/6'>Validity Proofs</div>
<div className='w-1/6'>Validity Proofs</div>
<div className='w-1/6'>Validity Proofs</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Ability to scale</div>
<div className='w-1/6 rower-primary'>Yes</div>
<div className='w-1/6'>Yes</div>
<div className='w-1/6'>Yes</div>
<div className='w-1/6'>No</div>
<div className='w-1/6'>No</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Cosst</div>
<div className='w-1/6 rower-primary'>Low</div>
<div className='w-1/6'>Low</div>
<div className='w-1/6'>Low</div>
<div className='w-1/6'>TDB</div>
<div className='w-1/6'>High</div>
</div>
</div>
</div>
</div>

<Competitive />
<Footer />
</>
)
Expand Down
14 changes: 10 additions & 4 deletions components/Banner.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Header } from '@/components/Header'
import Image from 'next/image'
import Link from 'next/link'

export const Banner = () => {
return (
Expand All @@ -13,9 +13,15 @@ export const Banner = () => {
</div>
<div className={'text-[70px]'}>With Data</div>
<div className={'text-[70px]'}>Availability Layer2</div>
<button className={'w-[200px] h-[58px] border border-white rounded-[12px] font-semibold text-[20px] mt-8'}>
Read the doc.
</button>
<Link
href={'https://ipfs.io/ipfs/QmdMvxeQMzc8FyiKL7PeXkRDpsSmGr3CRSQSpXZtPtAiyV\n'}
target={'_blank'}
className={
'flex items-center justify-center w-[200px] h-[58px] border border-white rounded-[12px] font-semibold text-[20px] mt-8'
}
>
Read the Doc.
</Link>
</div>
<div className={'-mt-10'}>
<img src={'/banner.gif'} alt={'banner'} width={520} height={200} />
Expand Down
98 changes: 98 additions & 0 deletions components/Competitive.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import Image from 'next/image'

export const Competitive = () => {
return (
<div className={'py-28 bg-gradient-to-b from-[rgb(245,230,221)] to-[rgb(249,246,241)]'}>
<div className='text-center title mb-10'>Competitive Landscape</div>
<div className='container mx-auto'>
<div className='flex mb-2 rower-header'>
<div className={'w-1/6'}>&nbsp;</div>
<div className={'w-1/6'}>
<Image src={'/ethda.svg'} alt={'ethda'} width={101} height={22} />
</div>
<div className={'w-1/6'}>
<Image src={'/celestia.svg'} alt={'ethda'} width={110} height={28} />
</div>
<div className={'w-1/6'}>
<Image src={'/avail.svg'} alt={'ethda'} width={97} height={28} />
</div>
<div className={'w-1/6'}>
<Image src={'/eigenda.svg'} alt={'ethda'} width={134} height={28} />
</div>
<div className={'w-1/6'}>
<div className={'flex flex-col'}>
<Image src={'/eth.svg'} alt={'ethda'} width={144} height={30} />
<div className={'text-[10px] mt-1 pl-7'}>(Pre-EIP4844)</div>
</div>
</div>
</div>
<div className={'border border-2 border-[#f0e7e1] rounded-[4px]'}>
<div className='flex rower'>
<div className='w-1/6'>Technology</div>
<div className='w-1/6 rower-primary'>Ethereum Rollup</div>
<div className='w-1/6'>Tendermint</div>
<div className='w-1/6'>Substrate</div>
<div className='w-1/6'>Smart Contract</div>
<div className='w-1/6'>Ethereum</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Payment</div>
<div className='w-1/6 rower-primary'>$ETH</div>
<div className='w-1/6'>$TIA</div>
<div className='w-1/6'>TBD</div>
<div className='w-1/6'>$ETH</div>
<div className='w-1/6'>$ETH</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Data Retention</div>
<div className='w-1/6 rower-primary'>Permanent</div>
<div className='w-1/6'>Temporary</div>
<div className='w-1/6'>Temporary</div>
<div className='w-1/6'>Temporary</div>
<div className='w-1/6'>Temporary</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>dStorage</div>
<div className='w-1/6 rower-primary'>Yes</div>
<div className='w-1/6'>No</div>
<div className='w-1/6'>No</div>
<div className='w-1/6'>No</div>
<div className='w-1/6'>Yes</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Data Availability sampling</div>
<div className='w-1/6 rower-primary'>Yes</div>
<div className='w-1/6'>Yes</div>
<div className='w-1/6'>Yes</div>
<div className='w-1/6'>No</div>
<div className='w-1/6'>No</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Proof schema</div>
<div className='w-1/6 rower-primary'>Fraud & Validity Proofs</div>
<div className='w-1/6'>Fraud Proofs</div>
<div className='w-1/6'>Validity Proofs</div>
<div className='w-1/6'>Validity Proofs</div>
<div className='w-1/6'>Validity Proofs</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Ability to scale</div>
<div className='w-1/6 rower-primary'>Yes</div>
<div className='w-1/6'>Yes</div>
<div className='w-1/6'>Yes</div>
<div className='w-1/6'>No</div>
<div className='w-1/6'>No</div>
</div>
<div className='flex rower'>
<div className='w-1/6'>Cosst</div>
<div className='w-1/6 rower-primary'>Low</div>
<div className='w-1/6'>Low</div>
<div className='w-1/6'>Low</div>
<div className='w-1/6'>TDB</div>
<div className='w-1/6'>High</div>
</div>
</div>
</div>
</div>
)
}
9 changes: 8 additions & 1 deletion components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
'use client'
import Image from 'next/image'
import { usePathname } from 'next/navigation'
import Link from 'next/link'

export const Header = () => {
const pathname = usePathname()
Expand All @@ -12,7 +13,13 @@ export const Header = () => {
<div className={'flex items-center gap-8 text-white text-sm'}>
<div className={`nav-item ${pathname === '/' ? 'active' : ''}`}>Home</div>
<div className={`nav-item ${pathname === '/build' ? 'active' : ''}`}>Build</div>
<div className={`nav-item ${pathname === '/document' ? 'active' : ''}`}>Document</div>
<Link
href={'https://ipfs.io/ipfs/QmdMvxeQMzc8FyiKL7PeXkRDpsSmGr3CRSQSpXZtPtAiyV\n'}
target={'_blank'}
className={`block nav-item`}
>
Document
</Link>
</div>
</div>
</header>
Expand Down
Loading

0 comments on commit 38a1a48

Please sign in to comment.