Skip to content

Commit

Permalink
fix ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@picascaz
picascaz committed Apr 10, 2024
1 parent 4b5e0a0 commit b4b697d
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 44 deletions.
7 changes: 6 additions & 1 deletion components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ type HeaderType = {
containerClassName?: any
wrapperClassName?: any
btnClassName?: any
contentClassName?: any

}

export const Header: FC<HeaderType> = ({
Expand All @@ -25,6 +27,7 @@ export const Header: FC<HeaderType> = ({
wrapperClassName,
className,
btnClassName,
contentClassName = ' border-b',
isShow: isHidden,
}) => {
const { push } = useRouter()
Expand Down Expand Up @@ -92,8 +95,10 @@ export const Header: FC<HeaderType> = ({
}
push(address)
}
console.log('contentClassNamecontentClassName',contentClassName);

return (
<div className='border-b'>
<div className={classNames(` ${contentClassName}`)}>
<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)}>
Expand Down
4 changes: 2 additions & 2 deletions components/Home/ABanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const ABanner = () => {
}
return (
<div className=' h-[1040px] bg-[url(/blackStar.svg)] bg-cover'>
<Header wrapperClassName={'mt-[67px]'} btnClassName={'text-white '} className={'py-[28px] md:mx-[30px]'} />
<Header contentClassName={'border-b-[#E0890033] border-b'} wrapperClassName={'mt-[67px]'} btnClassName={'text-white '} className={'py-[28px] md:mx-[30px] '} />
<div className=' flex justify-center mo:mx-10 px-10 mo:flex-wrap mo:w-full mx-auto w-container md:w-full md:px-[30px] '>
<div className=' w-full '>
<div className=' font-bold text-[62px] md:text-[50px] text-center text-white pt-[206px] '>
Expand Down Expand Up @@ -71,7 +71,7 @@ const ABanner = () => {
</div>

</div>
<div className=' pt-[120px] font-hlc w-full flex justify-center' style={{ letterSpacing: '2px' }}>
<div className=' pt-[60px] font-hlc w-full flex justify-center' style={{ letterSpacing: '2px' }}>
Designed for
<div className='text-[#E08900] ml-4 md:text-[50px]'>
<Typewriter phrases={phrases} />
Expand Down
4 changes: 3 additions & 1 deletion components/Home/AConnectEthDA.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
const AConnectEthDA = () => {
return (
<>
<div className=' text-center bg-black md:px-[30px] '>
<div className=' text-center bg-black '>
<div className=" mo:mx-10 px-10 mo:flex-wrap mo:w-full mx-auto w-container md:w-full md:px-[30px]">
<div className='flex justify-center'>
<div className=' pt-[72px] pb-20 text-white text-[42px] font-black font-hlc'>
<div className='flex z-20'>
Expand All @@ -23,6 +24,7 @@ const AConnectEthDA = () => {
<img src='./design.svg' />
</div>
</div>
</div>
</div>
</>
)
Expand Down
14 changes: 7 additions & 7 deletions components/Home/AIntroduce.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const AIntroduce = () => {
<div className=' pt-20 flex gap-[30px] md:flex-wrap justify-center mo:mx-10 px-10 mo:flex-wrap mo:w-full mx-auto w-container md:w-full md:px-[30px]'>
<div className=' rounded-[10px] border-[#E08900] py-[50px] border w-[575px] md:w-full '>
<div className=' px-[50px] '>
<div className='text-white font-medium text-base leading-10'>
<div style={{ fontFamily: 'inter',opacity:'80%'}} className='text-white font-medium text-base leading-10'>
The core of being a rollup is the unconditional security guarantee: you can get your assets out even if everyone else colludes
against you. Can't get that if DA is dependent on an external system. But being a validium is a correct choice for many apps,
and using good distributed DA guarantee systems can be a good way to increase the practical security of a validium.
Expand All @@ -67,8 +67,8 @@ const AIntroduce = () => {
</div>
<div className=' flex items-end ml-[50px] '>
<div>
<div className='flex font-medium text-base mt-[128px] ml-[180px]'>@VitalikButerin</div>
<div className=' ml-[50px] font-black font-hlc text-[28px] mt-[30px]'>--Ethereum Founder</div>
<div style={{ fontFamily: 'inter',opacity:'80%'}} className='flex font-medium text-base mt-[128px] ml-[180px]'>@VitalikButerin</div>
<div style={{fontStyle:'italic'}} className=' ml-[50px] font-black font-hlc text-[28px] mt-[30px]'>--Ethereum Founder</div>
<div className=' font-black text-[42px] font-hlc text-[#E08900] mt-[30px]'>VitalikButerin</div>
</div>
<div className=' mr-5 md:w-full md:flex md:justify-end'>
Expand All @@ -77,11 +77,11 @@ const AIntroduce = () => {
</div>
</div>
<div className=' rounded-[10px] border-[#E08900] py-[50px] border-dashed border w-[575px] md:w-full '>
<div className=' mx-[50px] text-[#E08900] font-black text-[42px] font-hlc'>Sandeep</div>
<div className=' mx-[50px] text-[#E08900] font-black text-[42px] font-hlc'>Sandeep</div>
<div className='flex items-center mb-0'>
<div className=' font-hlc pb-[130px]'>
<div className=' font-black text-[28px] ml-[113px] mt-[30px]'>--Polygon Founder</div>
<div className=' font-medium text-base ml-[236px] mt-[30px]'>@sandeepnailwal</div>
<div style={{fontStyle:'italic'}} className=' font-black text-[28px] ml-[113px] mt-[30px]'>--Polygon Founder</div>
<div style={{ fontFamily: 'inter',opacity:'80%'}} className='font-medium text-base ml-[236px] mt-[30px]'>@sandeepnailwal</div>
</div>
<div className=' mt-[-230px]'>
<img src='./img.svg' />
Expand All @@ -90,7 +90,7 @@ const AIntroduce = () => {
<div>
<div className=' ml-[50px]'>
<img src='./block-p.svg' />
<div className=' font-medium text-base mt-5 leading-10 md:pr-[50px]'>
<div style={{ fontFamily: 'inter',opacity:'80%'}} className=' font-medium text-base mt-5 leading-10 md:pr-[50px]'>
The core of being a rollup is the unconditional security guarantee: you can get your assets out even if everyone else
colludes against you. Can't get that if DA is dependent on an external system. But being a validium is a correct choice for
many apps, and using good distributed DA guarantee systems can be a good way to increase the practical security of a
Expand Down
2 changes: 1 addition & 1 deletion components/Home/Aaggregated.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const Aaggregated = () => {
return (
<div className=' '>
<div className='flex flex-row w-full justify-center mt-[113px] gap-[27px]'>
<div className='flex flex-row justify-center mt-5 gap-[27px] mo:mx-10 px-10 mo:flex-wrap mo:w-full mx-auto w-container md:w-full md:px-[30px]'>
<div className=' font-hlc font-black text-[42px]'>Aggregated with EthDA</div>
<img src='./arrow.svg' />
</div>
Expand Down
51 changes: 19 additions & 32 deletions components/Home/Agg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,11 @@ const Agg = () => {
content: (
<>
<div className=' mt-[60px] leading-8 flex flex-col text-left'>
<span className=' text-[32px] font-extrabold text-black'> ETH Restaking:</span>
<span className=' text-[32px] md:text-[28px] font-extrabold text-black'> ETH Restaking:</span>
<span className=' text-2xl font-medium text-black mt-6'> restake ETH on EthDA DAS nodes.</span>
</div>
<div className=' mt-[60px] leading-8 flex flex-col text-left'>
<span className=' text-[32px] font-extrabold text-black'>Dual-Staking: </span>
<span className=' text-[32px] md:text-[28px] font-extrabold text-black'>Dual-Staking: </span>
<span className=' text-2xl font-medium text-black mt-6'>dual-stake native token of L2 protocols.</span>
</div>
</>
Expand All @@ -69,15 +69,15 @@ const Agg = () => {
),
content: (
<>
<div className=' mt-[60px] leading-8 flex flex-col text-left'>
<span className=' text-[32px] md:text-3xl font-extrabold text-black'>zkBlob:</span>
<span className=' text-2xl md:text-xl font-medium text-black mt-6'>
<div className=' mt-[60px] leading-8 flex flex-col text-left mr-[60px]'>
<span className=' text-[32px] md:text-[28px] font-extrabold text-black'>zkBlob:</span>
<span className=' text-2xl md:text-xl font-medium text-black mt-6 '>
Ethereum Blob TX {'—>'} DAS {'—>'} Data Proof via ZK rollup.
</span>
</div>
<div className=' mt-[60px] leading-8 flex flex-col text-left'>
<span className=' text-[32px] md:text-3xl font-extrabold text-black'> Data Programmability: </span>
<span className=' text-2xl md:text-xl font-medium text-black mt-6'>
<div className=' mt-[60px] leading-8 flex flex-col text-left mr-[60px]'>
<span className=' text-[32px] md:text-[28px] font-extrabold text-black'> Data Programmability: </span>
<span className=' text-2xl md:text-xl font-medium text-black mt-6 leading-10'>
On-chain interfaces for data functions can be instanly accessed by smart contracts and AggLayer blockchains.
</span>
</div>
Expand All @@ -100,14 +100,14 @@ const Agg = () => {
img: <img src='./Growth.svg' />,
content: (
<>
<div className=' mt-[60px] leading-8 flex flex-col text-left'>
<span className=' text-[32px] md:text-3xl font-extrabold text-black'> Data Value Extraction:</span>
<div className=' mt-[60px] leading-8 flex flex-col text-left mr-[60px]'>
<span className=' text-[32px] md:text-[28px] font-extrabold text-black'> Data Value Extraction:</span>
<span className=' text-2xl md:text-xl font-medium text-black mt-6'>
bi-directional value growth driven by data amount and value.
</span>
</div>
<div className=' mt-[60px] leading-8 flex flex-col text-left'>
<span className='text-[32px] md:text-3xl font-extrabold text-black'> Benfit Sharing: </span>
<div className=' mt-[60px] leading-8 flex flex-col text-left mr-[60px]'>
<span className='text-[32px] md:text-[28px] font-extrabold text-black'> Benfit Sharing: </span>
<span className='text-2xl md:text-xl font-medium text-black mt-6'>
Value stream reward back to all blockchain users that connect with EthDA.
</span>
Expand Down Expand Up @@ -159,7 +159,7 @@ const Agg = () => {

return (
<div className=''>
<div id='myBar' onWheel={handleWheel} data-aos='fade-up' data-aos-anchor-placement='top-bottom' className={` scrollable-content`}>
<div id='myBar' onWheel={handleWheel} data-aos='fade-up' data-aos-anchor-placement='top-bottom' className={` scrollable-content `}>
<Slider
{...settings}
ref={(slider: any) => {
Expand All @@ -170,23 +170,8 @@ const Agg = () => {
{content.map((item, index) => {
return (
<div key={`slider${index}`} className='!flex h-[900px]'>
<div className=' bg-[url(/GroupBg.svg)] w-[50%] font-le text-white diagram-right '>
<div className='flex justify-end flex-wrap items-center mr-[50px] text-sm font-light '>
<div className='gap-[10px] flex mr-5'>
<button
onClick={onPrev}
disabled={current === 0}
className={`${current === 0 ? 'cursor-not-allowed' : ' cursor-pointer'}`}
></button>
<button
onClick={onNext}
className={`${current + 1 === maxSlides ? 'cursor-not-allowed' : 'cursor-pointer'}`}
disabled={current + 1 === maxSlides}
></button>
</div>
</div>

<div className='flex w-[450px] flex-wrap mr-[70px] md:mr-0 md:px-[20px] h-full text-center items-center justify-end float-end'>
<div className=' bg-[url(/GroupBg.svg)] w-[50%] font-le text-white diagram-right'>
<div className='flex w-[640px] flex-wrap md:w-full md:px-[30px] h-full text-center items-center float-end'>
<div className='flex flex-col '>
<div className='flex items-center flex-row'>
<span className='font-bold text-[48px] xmd:text-[40px] md:text-3xl'>{item.title}</span>
Expand All @@ -196,7 +181,8 @@ const Agg = () => {
</div>
</div>
<div className='bg-black w-[50%]'>
<div className='flex flex-start mt-[62px] ml-[60px] flex-row items-start md:flex md:flex-wrap '>
<div className=' w-[640px]'>
<div className='flex flex-start mt-[62px] mx-[40px] flex-row items-start md:flex md:flex-wrap justify-between '>
<div className='flex items-center gap-[30px]'>
{[...Array(content.length)].map((_, i) => {
return (
Expand All @@ -211,7 +197,7 @@ const Agg = () => {
)
})}
</div>
<div className='ml-[188px] md:ml-0 md:w-full md:mt-[30px] '>
<div className=' md:ml-0 md:w-full md:mt-[30px] '>
<div className='flex flex-end'>{item.other}</div>
<div className='flex mt-6'>{item.other1}</div>
</div>
Expand All @@ -225,6 +211,7 @@ const Agg = () => {
</div>
</div>
</div>
</div>
</div>
)
})}
Expand Down

0 comments on commit b4b697d

Please sign in to comment.