Skip to content

Commit

Permalink
feat:add new ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@YongZL
YongZL committed Jan 29, 2024
1 parent 065e4b4 commit 0d4818d
Show file tree
Hide file tree
Showing 8 changed files with 132 additions and 125 deletions.
12 changes: 6 additions & 6 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function Home() {
<>
<Banner />
<div className={'bg-[rgb(252,246,238)] '}>
<div className='container mx-auto pt-20 mo:pt-10'>
<div className='container mx-auto pt-20 mo:pt-10 '>
<What />
<With />
<Offer />
Expand All @@ -64,10 +64,10 @@ export default function Home() {
<Popover.Portal>
<Popover.Content side={isMobile ? 'bottom' : 'right'} align={'start'} style={{ width: width + 'px' }}>
<div
className={'why-popover active w-[380px] mo:w-auto mo:mx-10 mo:mt-[20px] mo:h-[258px] '}
className={'why-popover active w-[380px] mo:w-auto mo:mx-10 mo:mt-[20px] mo:h-[258px] '}
style={{ transform: !isMobile ? 'translateX(-380px)' : 'none' }}
>
<div className={'text-[16px] mo:text-lg mo:font-medium font-medium mb-2'}>
<div className={'text-[16px] mo:text-lg mo:font-medium font-medium mb-2 '}>
Data Availability Sampling Mechanism
</div>
<div className={'text-sm mo:text-base mo:font-medium leading-7'}>
Expand Down Expand Up @@ -110,7 +110,7 @@ export default function Home() {
</div>
</div>
<div className={'flex items-center justify-between mo:inline-block mb-12 mo:w-full'}>
<div className={'relative mo:hidden'}>
<div className={'relative mo:hidden '}>
<Popover.Root>
<Popover.Trigger asChild>
<button className={`why-button ${enter ? 'active' : ''}`}>
Expand All @@ -123,11 +123,11 @@ export default function Home() {
side={'right'}
align={'end'}
style={{ width: width + 'px' }}
className='mo:max-w-[430px] mo:px-10 mo:mt-[30px]'
className='mo:max-w-[430px] md:ml-[130px] mo:px-10 mo:mt-[30px] '
>
<div
className={
'why-popover active w-[380px] mo:backdrop-blur-lg mo:w-full mo:whitespace-normal mo:p-4 mo:text-left mo:border mo:border-primary mo:rounded-2xl mo:text-[#373C4F] mo:bg-[rgba(250,247,243,.6)]'
'why-popover active w-[380px] md:w-[300px] mo:backdrop-blur-lg mo:w-full mo:whitespace-normal mo:p-4 mo:text-left mo:border mo:border-primary mo:rounded-2xl mo:text-[#373C4F] mo:bg-[rgba(250,247,243,.6)]'
}
style={{ transform: 'translateX(-380px)' }}
>
Expand Down
10 changes: 5 additions & 5 deletions components/Banner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import Link from 'next/link'
export const Banner = () => {
return (
<div className={'h-[750px] bg-cover'} style={{ backgroundImage: 'url(/banner.png)' }}>
<Header wrapperClassName={'mt-[67px]'} btnClassName={'text-white '} className={'py-[28px]'} />
<div className={'h-[calc(100%-66px)] flex flex-col justify-center mo:justify-center mo:flex-row mo:mt-10'}>
<Header wrapperClassName={'mt-[67px]'} btnClassName={'text-white '} className={'py-[28px] md:mx-[30px]'} />
<div className={'h-[calc(100%-66px)] flex flex-col justify-center mo:justify-center mo:flex-row mo:mt-10 md:px-[30px]'}>
<div className='container mx-auto text-white font-bold flex justify-between mo:justify-center mo:text-center mo:flex mo:flex-wrap'>
<div className='mo:text-center'>
<div className={'text-[80px] mo:text-[38px]'}>
<div className={'text-[80px] mo:text-[38px] md:text-[60px]'}>
Scale <span className={'text-transparent bg-clip-text bg-gradient-to-r from-[#ff9937] to-[#ff3d00]'}>Ethereum</span>
</div>
<div className={'text-[70px] mo:text-[38px]'}>With Data</div>
<div className={'text-[70px] mo:text-[38px]'}>Availability Layer2</div>
<div className={'text-[70px] mo:text-[38px] md:text-[60px]'}>With Data</div>
<div className={'text-[70px] mo:text-[38px] md:text-[60px]'}>Availability Layer2</div>
<div className='mo:flex justify-center'>
<Link
href={'https://docs.ethda.io/'}
Expand Down
2 changes: 1 addition & 1 deletion components/Competitive.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Image from 'next/image'

export const Competitive = () => {
return (
<div className={'py-28 mo:py-5 bg-gradient-to-b from-[rgb(245,230,221)] to-[rgb(249,246,241)] '}>
<div className={'py-28 md:px-[30px] mo:py-5 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 mo:mx-10 mo:w-auto '>
<div className='table-container '>
Expand Down
7 changes: 4 additions & 3 deletions components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ import { GithubIcon } from '@/components/icons/Github'
import { DiscordIcon } from '@/components/icons/Discord'

export const Footer = () => {
const currentYear = new Date()?.getFullYear()
return (
<footer className={'bg-gray-900 py-20 mo:py-10'}>
<div className='container mx-auto mo:flex mo:flex-row justify-center mo:flex-wrap'>
<footer className={'bg-gray-900 py-20 mo:py-10 '}>
<div className='container mx-auto mo:flex mo:flex-row justify-center mo:flex-wrap md:px-[30px]'>
<div className='flex justify-between mo:flex-col '>
<div className={'text-white text-[24px] mo:text-xl font-semibold mo:w-full mo:flex mo:justify-center'}>
Sign up for EthDA updates
Expand All @@ -32,7 +33,7 @@ export const Footer = () => {
</div>
<div className={'bg-[#333] my-10 mo:my-5 h-[1px] w-full'} />
<div className='flex justify-between items-center mo:flex-col mo:w-full '>
<div className={'text-gray-500 text-sm '}>Copyright © EthDA 2023 All Rights Reserved</div>
<div className={'text-gray-500 text-sm '}>Copyright © EthDA {currentYear} All Rights Reserved</div>
<div className='flex gap-10 mo:gap-[60px] mo:my-5 mo:w-full mo:justify-center'>
<Link href={'https://t.me/CrustNetwork'} target={'_blank'} className={'link-icon'}>
<TelegramIcon />
Expand Down
98 changes: 50 additions & 48 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,56 +91,58 @@ export const Header: FC<HeaderType> = ({
push(address)
}
return (
<header className={classNames(`py-5 border-b ${isShow && ' bg-white'} border-b-[rgba(255,255,255,.2)]`, className)}>
<div className=' mo:mx-[30px] '>
<div className={classNames('flex justify-between items-center', containerClassName)}>
<Link href={'/'}>
<Image src={`${isShow ? 'b-EthDA.svg' : logo}`} alt={` ${isShow ? 'b-EthDA.svg' : 'logo.svg'}`} width={110} height={22} />
</Link>
{isMobile ? (
<button
onClick={() => {
setIsShow(!isShow)
document.documentElement.classList.add('overflow-hidden')
document.body.classList.add('overflow-hidden')
}}
>
{isShow ? (
<HiOutlineX className={classNames(`${isShow && '!text-black'} w-6 h-6 `, btnClassName)} />
) : (
<HiOutlineMenu className={classNames(btnClassName, `w-6 h-6 `)} />
)}
</button>
) : (
<div className={classNames('flex items-center gap-8 text-white text-sm', headerTextClassName)}>
<div onClick={() => onSwitchTo('/')} className={`nav-item ${pathname === '/' ? 'active' : ''}`}>
Home
</div>
<div
onClick={() => onSwitchTo('https://scan-devnet.ethda.io')}
className={`nav-item ${pathname === '/Explorer' ? 'active' : ''}`}
>
Explorer
</div>
<div
onClick={() => onSwitchTo('https://blobscan-devnet.ethda.io/')}
className={`nav-item ${pathname === '/Blobscan' ? 'active' : ''}`}
<div className='border-b'>
<header className={classNames(`py-5 ${isShow && ' bg-white'} border-b-[rgba(255,255,255,.2)]`, className)}>
<div className=' mo:mx-[30px] '>
<div className={classNames('flex justify-between items-center', containerClassName)}>
<Link href={'/'}>
<Image src={`${isShow ? 'b-EthDA.svg' : logo}`} alt={` ${isShow ? 'b-EthDA.svg' : 'logo.svg'}`} width={110} height={22} />
</Link>
{isMobile ? (
<button
onClick={() => {
setIsShow(!isShow)
document.documentElement.classList.add('overflow-hidden')
document.body.classList.add('overflow-hidden')
}}
>
Blobscan
</div>
<div onClick={() => onSwitchTo('blobtx')} className={`nav-item ${pathname === '/blobtx' ? 'active' : ''}`}>
Try BlobTx
{isShow ? (
<HiOutlineX className={classNames(`${isShow && '!text-black'} w-6 h-6 `, btnClassName)} />
) : (
<HiOutlineMenu className={classNames(btnClassName, `w-6 h-6 `)} />
)}
</button>
) : (
<div className={classNames('flex items-center gap-8 text-white text-sm', headerTextClassName)}>
<div onClick={() => onSwitchTo('/')} className={`nav-item ${pathname === '/' ? 'active' : ''}`}>
Home
</div>
<div
onClick={() => onSwitchTo('https://scan-devnet.ethda.io')}
className={`nav-item ${pathname === '/Explorer' ? 'active' : ''}`}
>
Explorer
</div>
<div
onClick={() => onSwitchTo('https://blobscan-devnet.ethda.io/')}
className={`nav-item ${pathname === '/Blobscan' ? 'active' : ''}`}
>
Blobscan
</div>
<div onClick={() => onSwitchTo('blobtx')} className={`nav-item ${pathname === '/blobtx' ? 'active' : ''}`}>
Try BlobTx
</div>
<Link href={'https://docs.ethda.io/'} target={'_blank'} className={`block nav-item`}>
Document
</Link>
</div>
<Link href={'https://docs.ethda.io/'} target={'_blank'} className={`block nav-item`}>
Document
</Link>
</div>
)}
)}
</div>
</div>
</div>
{isShow && (
<FullModal wrapperClassName={wrapperClassName} menus={currentMenus} onChooseItem={onChooseItem} chooseValue={chooseValue} />
)}
</header>
{isShow && (
<FullModal wrapperClassName={wrapperClassName} menus={currentMenus} onChooseItem={onChooseItem} chooseValue={chooseValue} />
)}
</header>
</div>
)
}
54 changes: 28 additions & 26 deletions components/Offer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
export const Offer = () => {
return (
<div
className={'bg-no-repeat pb-20 mo:px-10 '}
className={'bg-no-repeat pb-20 mo:px-10'}
style={{ backgroundImage: 'url(/offer-1.png)', backgroundSize: '900px', backgroundPosition: '300px top' }}
>
<div className={'subtitle mt-20 mb-6 mo:text-center'}>
<span className={'text-[25px] mo:text-xl text-primary '}>DApps</span> Leverage EthDA for Decentralized Storage
</div>
<div className='flex gap-6 mb-8 mo:w-full mo:flex-wrap'>
<button className={'feature-button mo:w-full mo:text-sm mo:font-light mo:h-[42px]'}>Fully on-chain</button>
<button className={'feature-button mo:w-full mo:text-sm mo:font-light mo:h-[42px]'}>ETH as fees</button>
</div>
<div className='flex gap-12 justify-between mo:flex-wrap mo:flex-col-reverse '>
<div className='screen w-[380px] grow shrink-0 mo:w-full'>
<div className='flex mb-4 gap-1'>
<div className='screen-dot' />
<div className='screen-dot' />
<div className='screen-dot' />
</div>
<div className={'screen-content mo:text-base mo:font-light'}>
DApps use EthDA's dStorage infrastructures and toolset to store websites and user-generated data, making DApps fully-on-chain,
censorship-resistant and unstoppable.
<div className='md:mx-[30px]'>
<div className={'subtitle mt-20 mb-6 mo:text-center'}>
<span className={'text-[25px] mo:text-xl text-primary '}>DApps</span> Leverage EthDA for Decentralized Storage
</div>
<div className='flex gap-6 mb-8 mo:w-full mo:flex-wrap'>
<button className={'feature-button mo:w-full mo:text-sm mo:font-light mo:h-[42px]'}>Fully on-chain</button>
<button className={'feature-button mo:w-full mo:text-sm mo:font-light mo:h-[42px]'}>ETH as fees</button>
</div>
<div className='flex gap-12 justify-between mo:flex-wrap mo:flex-col-reverse '>
<div className='screen w-[380px] grow shrink-0 mo:w-full'>
<div className='flex mb-4 gap-1'>
<div className='screen-dot' />
<div className='screen-dot' />
<div className='screen-dot' />
</div>
<div className={'screen-content mo:text-base mo:font-light'}>
DApps use EthDA's dStorage infrastructures and toolset to store websites and user-generated data, making DApps fully-on-chain,
censorship-resistant and unstoppable.
</div>
<div className='flex mt-4'>
<div className='screen-bar w-[40px]' />
<div className='screen-bar w-[40px] ml-4' />
<div className='screen-bar w-[40px] ml-auto' />
<div className='screen-bar w-[40px] ml-4' />
</div>
</div>
<div className='flex mt-4'>
<div className='screen-bar w-[40px]' />
<div className='screen-bar w-[40px] ml-4' />
<div className='screen-bar w-[40px] ml-auto' />
<div className='screen-bar w-[40px] ml-4' />
<div className={'shrink'}>
<img src='/offer-2.png' alt='offer' width={'80%'} className='mo:w-auto' />
</div>
</div>
<div className={'shrink'}>
<img src='/offer-2.png' alt='offer' width={'80%'} className='mo:w-auto' />
</div>
</div>
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions components/What.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const What = () => {
backgroundSize: '420px, 700px',
}}
>
<div className='w-[420px] shrink-0 mo:w-full'>
<div className='w-[420px] shrink-0 mo:w-full md:mx-[30px] '>
<div className='subtitle mb-6 mo:text-xl mo:text-center'>
{isMobile ? (
<span>EthDA is a scalable Ethereum layer2 Data Availability solution.</span>
Expand All @@ -47,7 +47,7 @@ export const What = () => {
</div>
</div>
</div>
<div className={'flex justify-center w-[560px] mo:w-full'}>
<div className={'flex justify-center w-[560px] mo:w-full '}>
<div className={'sm:text-right mo:text-center mo:w-full'}>
<Link
target={'_blank'}
Expand Down
70 changes: 36 additions & 34 deletions components/With.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,46 @@ export const With = () => {
const title: Title = [{ name: 'Cost saving' }, { name: 'Persistent DA' }, { name: 'High throughput' }]
return (
<div
className={'bg-no-repeat mo:px-10'}
className={'bg-no-repeat mo:px-10 '}
style={{ backgroundImage: 'url(/with-1.png)', backgroundSize: '1100px', backgroundPosition: '0 100px' }}
>
<div className={'title mo:text-center mo:text-[28px]'}>With EthDA</div>
<div className='desc mb-8 just mo:text-base mo:text-center'>
With EthDA, Ethereum's scalability is enhanced by extending its data availability and storage at layer2
</div>
<div className='subtitle mb-6 mo:text-center'>
<span className={'text-[25px] mo:text-xl text-primary'}>L2s</span> Leverage EthDA for Data Availability.
</div>
<div className='flex gap-8 mo:flex-wrap mo:w-full'>
<div className={'w-[660px] mo:w-full'}>
<div className='flex gap-6 mb-8 mo:flex-wrap mo:w-full'>
{title.map((item, i: number) => {
return (
<button key={`btn_title_${i}`} className={'feature-button mo:w-full mo:text-sm mo:h-[42px] font-light'}>
{item.name}
</button>
)
})}
</div>
<img src='/with-2.png' alt='with' width={'90%'} className='mo:w-full' />
<div className='md:mx-[30px]'>
<div className={'title mo:text-center mo:text-[28px]'}>With EthDA</div>
<div className='desc mb-8 just mo:text-base mo:text-center'>
With EthDA, Ethereum's scalability is enhanced by extending its data availability and storage at layer2
</div>
<div className='screen w-[380px] mt-8 mo:mt-5 mo:w-full '>
<div className='flex mb-4 gap-1'>
<div className='screen-dot' />
<div className='screen-dot' />
<div className='screen-dot' />
</div>
<div className={'screen-content mo:text-base'}>
Optimistic rollups post compressed transaction data to EthDA via EIP-4844 blob-carrying transactions. EthDA employs DAS scheme to store
blobs among a decentralized sequencer network, and posts storage proofs to Ethereum L1. Rollups check storage proofs to validate
data storage, and download transaction data blobs from EthDA for fraud proving.
<div className='subtitle mb-6 mo:text-center'>
<span className={'text-[25px] mo:text-xl text-primary'}>L2s</span> Leverage EthDA for Data Availability.
</div>
<div className='flex gap-8 mo:flex-wrap mo:w-full'>
<div className={'w-[660px] mo:w-full'}>
<div className='flex gap-6 mb-8 mo:flex-wrap mo:w-full'>
{title.map((item, i: number) => {
return (
<button key={`btn_title_${i}`} className={'feature-button mo:w-full mo:text-sm mo:h-[42px] font-light'}>
{item.name}
</button>
)
})}
</div>
<img src='/with-2.png' alt='with' width={'90%'} className='mo:w-full' />
</div>
<div className='flex mt-4'>
<div className='screen-bar w-[120px]' />
<div className='screen-bar w-[60px] ml-auto' />
<div className='screen-bar w-[60px] ml-4' />
<div className='screen w-[380px] mt-8 mo:mt-5 mo:w-full '>
<div className='flex mb-4 gap-1'>
<div className='screen-dot' />
<div className='screen-dot' />
<div className='screen-dot' />
</div>
<div className={'screen-content mo:text-base'}>
Optimistic rollups post compressed transaction data to EthDA via EIP-4844 blob-carrying transactions. EthDA employs DAS scheme
to store blobs among a decentralized sequencer network, and posts storage proofs to Ethereum L1. Rollups check storage proofs
to validate data storage, and download transaction data blobs from EthDA for fraud proving.
</div>
<div className='flex mt-4'>
<div className='screen-bar w-[120px]' />
<div className='screen-bar w-[60px] ml-auto' />
<div className='screen-bar w-[60px] ml-4' />
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 0d4818d

Please sign in to comment.