diff --git a/public/landing/drag.svg b/public/landing/drag.svg index 166dbab65..6efb004db 100644 --- a/public/landing/drag.svg +++ b/public/landing/drag.svg @@ -1,20 +1,20 @@ - - - + + + - - - + + + - + - + - + diff --git a/public/landing/subtract.svg b/public/landing/subtract.svg index 02d514546..3dbf7ebd5 100644 --- a/public/landing/subtract.svg +++ b/public/landing/subtract.svg @@ -1,15 +1,15 @@ - - - + + + - - + + - - - - - - + + + + + + diff --git a/public/landing/why-launch.jpg b/public/landing/why-launch.jpg index d88ecef4d..912b12e6c 100644 Binary files a/public/landing/why-launch.jpg and b/public/landing/why-launch.jpg differ diff --git a/src/modules/landing/Componets/Article/ItemArticle/index.tsx b/src/modules/landing/Componets/Article/ItemArticle/index.tsx index c50eca01d..a2c67260f 100644 --- a/src/modules/landing/Componets/Article/ItemArticle/index.tsx +++ b/src/modules/landing/Componets/Article/ItemArticle/index.tsx @@ -13,7 +13,7 @@ export default function ItemArticle({ data }: { data: IBlog }) { src={data.imageUrl} alt={data.title} width={'100%'} - height={mobileScreen ? 'auto' : '300px'} + height={mobileScreen ? 'auto' : '250px'} />
{data.title}
diff --git a/src/modules/landing/Componets/Chain/ItemChain/styles.module.scss b/src/modules/landing/Componets/Chain/ItemChain/styles.module.scss index 1474c3402..ccb106803 100644 --- a/src/modules/landing/Componets/Chain/ItemChain/styles.module.scss +++ b/src/modules/landing/Componets/Chain/ItemChain/styles.module.scss @@ -15,6 +15,7 @@ @include is-tablet { width: calc(50% - 30px); + padding: 12px; } :global { diff --git a/src/modules/landing/Componets/Comunity/ItemCommunity/styles.module.scss b/src/modules/landing/Componets/Comunity/ItemCommunity/styles.module.scss index 9e23a7559..1b7d50c95 100644 --- a/src/modules/landing/Componets/Comunity/ItemCommunity/styles.module.scss +++ b/src/modules/landing/Componets/Comunity/ItemCommunity/styles.module.scss @@ -83,6 +83,7 @@ position: relative; @include is-mobile { padding-left: 10px; + font-size: 14px; } &_frame { position: absolute; diff --git a/src/modules/landing/Componets/Comunity/index.tsx b/src/modules/landing/Componets/Comunity/index.tsx index 0c33a19a4..c4f172090 100644 --- a/src/modules/landing/Componets/Comunity/index.tsx +++ b/src/modules/landing/Componets/Comunity/index.tsx @@ -24,7 +24,7 @@ export default function Comunity() { Why launch your own blockchain? - + (null); const refSlide = useRef({ index: 0 }); @@ -21,22 +19,31 @@ export default function ScalableSlide() { const refTime = useRef(); useEffect(() => { - const animation = (tout: HTMLDivElement, tin: HTMLDivElement) => { - const tout_image = tout.querySelector('.js-image'); gsap.to(tout_image, { scale: 1.1, ease: 'power3.inOut', duration: 1 }); gsap.to(tout, { zIndex: 1, y: -160, ease: 'power3.inOut', duration: 1 }); const tin_image = tin.querySelector('.js-image'); - gsap.fromTo(tin_image, { scale: 1.2 }, { scale: 1, ease: 'power3.inOut', duration: 1 }); - gsap.fromTo(tin, { '--clipPath': 'inset(100% 0% 0% 0%)', y: 0, zIndex: 2 }, { '--clipPath': 'inset(0% 0% 0% 0%)', ease: 'power3.inOut', duration: 1 }); - + gsap.fromTo( + tin_image, + { scale: 1.2 }, + { scale: 1, ease: 'power3.inOut', duration: 1 }, + ); + gsap.fromTo( + tin, + { '--clipPath': 'inset(100% 0% 0% 0%)', y: 0, zIndex: 2 }, + { + '--clipPath': 'inset(0% 0% 0% 0%)', + ease: 'power3.inOut', + duration: 1, + }, + ); }; const gc = gsap.context(() => { - - refItems.current = refContent.current?.querySelectorAll('.js-scalableItem'); + refItems.current = + refContent.current?.querySelectorAll('.js-scalableItem'); if (!refItems.current || !refItems.current.length) return; refItems.current?.forEach((item, index) => { @@ -51,84 +58,108 @@ export default function ScalableSlide() { repeat: -1, }); - refTime.current.fromTo(refPo.current, { y: '0%' }, { - width: '33.33%', duration: 3, onStart: () => { - if (refSlide.current.index === 0) return; - - refItems.current && animation(refItems.current[2], refItems.current[0]); - refSlide.current.index = 0; - setIndexActive(0); - + refTime.current.fromTo( + refPo.current, + { y: '0%' }, + { + width: '33.33%', + duration: 3, + onStart: () => { + if (refSlide.current.index === 0) return; + + refItems.current && + animation(refItems.current[2], refItems.current[0]); + refSlide.current.index = 0; + setIndexActive(0); + }, }, - }); + ); refTime.current.to(refPo.current, { - width: '66.66%', duration: 3, onStart: () => { - refItems.current && animation(refItems.current[0], refItems.current[1]); + width: '66.66%', + duration: 3, + onStart: () => { + refItems.current && + animation(refItems.current[0], refItems.current[1]); setIndexActive(1); refSlide.current.index = 1; }, }); refTime.current.to(refPo.current, { - width: '100%', duration: 3, onStart: () => { - refItems.current && animation(refItems.current[1], refItems.current[2]); + width: '100%', + duration: 3, + onStart: () => { + refItems.current && + animation(refItems.current[1], refItems.current[2]); setIndexActive(2); refSlide.current.index = 2; }, }); refTime.current.to(refPo.current, { - x: '100%', duration: 1, ease: 'power3.inOut', + x: '100%', + duration: 1, + ease: 'power3.inOut', }); - }, [refContent.current]); return () => gc.revert(); }, []); useEffect(() => { - if (inView) refTime.current?.resume(); else refTime.current?.paused(); + if (inView) refTime.current?.resume(); + else refTime.current?.paused(); }, [inView]); - return
- -
-
-
-

- - Scalable infrastructure for Bitcoin - -

-
- - If Ethereum is the world’s computer, Bitcoin is the world’s supercomputer. With Bitcoin Virtual Machine, - anyone - can launch their own Bitcoin L2 blockchain. - + return ( +
+
+
+
+

+ Scalable infrastructure for Bitcoin +

+
+ + If Ethereum is the world’s computer, Bitcoin is the world’s + supercomputer. With Bitcoin Virtual Machine, anyone can launch + their own Bitcoin L2 blockchain. + +
-
-
- - - -
-
- - Hyperscale Bitcoin with an unlimited number of Bitcoin Virtual Machines as Bitcoin L2 blockchains. - - - Bitcoin Virtual Machines support Solidity smart contracts on Bitcoin, so you can quickly build all kinds of - decentralized applications on Bitcoin. - - - Bitcoin Virtual Machines implement rollups on Bitcoin. Rollups significantly reduce the block time and - transaction fees. - -
-
+
+ + + +
+
+ + Hyperscale Bitcoin with an unlimited number of Bitcoin Virtual + Machines as Bitcoin L2 blockchains. + + + Bitcoin Virtual Machines support Solidity smart contracts on + Bitcoin, so you can quickly build all kinds of decentralized + applications on Bitcoin. + + + Bitcoin Virtual Machines implement rollups on Bitcoin. Rollups + significantly reduce the block time and transaction fees. + +
+
+
-
; + ); } diff --git a/src/modules/landing/Componets/ScalableSlide/style.module.scss b/src/modules/landing/Componets/ScalableSlide/style.module.scss index c104af04c..c9c452bbe 100644 --- a/src/modules/landing/Componets/ScalableSlide/style.module.scss +++ b/src/modules/landing/Componets/ScalableSlide/style.module.scss @@ -7,6 +7,11 @@ width: 100vw; position: sticky; top: 0; + + @include is-tablet { + overflow: hidden; + width: 100%; + } } &_top { @@ -24,7 +29,7 @@ } &_heading { - color: #FFF; + color: #fff; text-align: center; font-size: 48px; font-style: normal; @@ -34,7 +39,7 @@ } &_content { - color: #FFF; + color: #fff; text-align: center; font-size: 24px; font-style: normal; @@ -52,7 +57,13 @@ position: absolute; z-index: 2; left: 0; - border-top: 1px solid rgba(white, .2); + border-top: 1px solid rgba(white, 0.2); + + @include is-tablet { + flex-wrap: nowrap; + flex-direction: row; + gap: unset; + } &_po { width: 0; diff --git a/src/modules/landing/index.tsx b/src/modules/landing/index.tsx index ddbd1ba61..9e1170f0d 100644 --- a/src/modules/landing/index.tsx +++ b/src/modules/landing/index.tsx @@ -22,13 +22,7 @@ export default function Landing() { - {mobileScreen ? ( - - ) : tabletScreen ? ( - - ) : ( - - )} + {mobileScreen ? : } {mobileScreen || tabletScreen ? : }
);