From 533a1d0e02f128578b95ee3e89091646e88c323f Mon Sep 17 00:00:00 2001
From: Archaon
Date: Thu, 7 Nov 2024 09:31:40 +0700
Subject: [PATCH 01/19] update video controls
---
.../landingV3/Componets/HeroV5/index.tsx | 22 +++++++++++--------
1 file changed, 13 insertions(+), 9 deletions(-)
diff --git a/src/modules/landingV3/Componets/HeroV5/index.tsx b/src/modules/landingV3/Componets/HeroV5/index.tsx
index 15c991168..99346f5ca 100644
--- a/src/modules/landingV3/Componets/HeroV5/index.tsx
+++ b/src/modules/landingV3/Componets/HeroV5/index.tsx
@@ -10,7 +10,8 @@ import cn from 'classnames';
const HeroV5 = () => {
const videoRef = React.useRef(null);
- const [isOpenModalVideo, setIsOpenModalVideo] = useState(false);
+ // const [isOpenModalVideo, setIsOpenModalVideo] = useState(false);
+ const [firstClick, setFirstClick] = useState(false);
return (
@@ -58,15 +59,18 @@ const HeroV5 = () => {
className={`${s.thumbnail} `}
// ref={refContent}
onClick={() => {
+ setFirstClick(true);
// toggle video
- if (videoRef.current) {
- // check if video playing
- if (videoRef.current.paused) {
- videoRef.current.play();
- } else {
- videoRef.current.pause();
+ setTimeout(() => {
+ if (videoRef.current) {
+ // check if video playing
+ if (videoRef.current.paused) {
+ videoRef.current.play();
+ } else {
+ videoRef.current.pause();
+ }
}
- }
+ }, 100);
}}
>
{
height={90}
preload="auto"
playsInline
- // controls
+ controls={!!firstClick}
/>
From 9a9337ce7eae55db0e9cdb5194bb6617e97728a6 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Thu, 7 Nov 2024 13:57:43 +0700
Subject: [PATCH 02/19] update layout
---
.../UserReviews/UserReviews.module.scss | 34 ++++++++------
.../landingV3/Componets/UserReviews/index.tsx | 44 +++++++++++++++----
2 files changed, 55 insertions(+), 23 deletions(-)
diff --git a/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss b/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
index 467ea43c8..6c3022edc 100644
--- a/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
+++ b/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
@@ -2,33 +2,41 @@
.item_wrapper {
height: 225px;
position: relative;
- padding: 48px 24px 12px;
+ // padding: 48px 24px 12px;
border-radius: 8px;
background: #FAFAFA;
margin: 0 12px;
- margin-top: 40px;
+ // margin-top: 40px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
.avatar {
- max-width: 71px;
- position: absolute;
- top: 0;
- left: 24px;
- transform: translateY(-50%);
+ padding: 12px 20px;
+ background: #F4F4F4;
+
+ // position: absolute;
+ // top: 0;
+ // left: 24px;
+ // transform: translateY(-50%);
}
.text {
display: flex;
align-items: start;
gap: 8px;
+ padding-left: 20px;
+ padding-right: 27px;
p {
flex: 1;
color: #000;
font-family: "SF Pro Display";
- font-size: 14px;
- // font-style: italic;
+ font-size: 16px;
+ font-style: normal;
font-weight: 400;
- line-height: 140%;
+ line-height: 24px;
+ /* 150% */
margin-top: 3px;
/* 19.6px */
// margin-bottom: 16px;
@@ -39,22 +47,20 @@
.name {
color: #000;
font-family: "SF Pro Display";
- font-size: 12px;
+ font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 140%;
white-space: nowrap;
- /* 16.8px */
}
.username {
color: #000;
font-family: "SF Pro Display";
- font-size: 11px;
+ font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 140%;
- /* 15.4px */
opacity: 0.7;
}
}
diff --git a/src/modules/landingV3/Componets/UserReviews/index.tsx b/src/modules/landingV3/Componets/UserReviews/index.tsx
index aee6e3606..288d9b52c 100644
--- a/src/modules/landingV3/Componets/UserReviews/index.tsx
+++ b/src/modules/landingV3/Componets/UserReviews/index.tsx
@@ -18,12 +18,8 @@ const CONTENT = [
content: () => (
<>
Rollups are the new server.
- Rollup as a service providers are the new Wordpress.
-
- They handle the infra so you can focus on the user experience /
- application / business logic
- lfg! crazy to think this is all happening
+ Rollup as a service providers are the new Wordpress.
>
),
name: 'Patrick McCorry',
@@ -54,11 +50,12 @@ provability, etc`,
<>
@ethereum is the verifiable internet
+
Rollups are the verifiable web server
- @eigenlayer is the verifiable cloud
+ {/* @eigenlayer is the verifiable cloud
- eoracle is the verifiable real-world
+ eoracle is the verifiable real-world */}
>
),
@@ -94,8 +91,8 @@ const Item = (props: ItemProps) => {
return (
-
-
+
+
{name}
{username}
@@ -104,6 +101,35 @@ const Item = (props: ItemProps) => {
+
+
+
+
+
+
+
+
+
+
+
+
{typeof content === 'function' ? content() : content}
From fdb83f97b2743ddf7da8bdf404b55710c85bcb37 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Thu, 7 Nov 2024 13:57:57 +0700
Subject: [PATCH 03/19] update layout
---
src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss b/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss
index 854cd1f91..4b6fef6b1 100644
--- a/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss
+++ b/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss
@@ -6,11 +6,12 @@
display: flex;
align-items: flex-start;
gap: 125px;
- margin-bottom: 40px;
+ margin-bottom: 60px;
@include is-mobile {
gap: 60px;
flex-direction: column;
+ margin-bottom: 40px;
}
.left {
From e1fb4ea993e754b945e22f4ac5b562ae16871980 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Thu, 7 Nov 2024 14:02:41 +0700
Subject: [PATCH 04/19] update css
---
.../landingV3/Componets/UserReviews/UserReviews.module.scss | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss b/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
index 6c3022edc..dc57d03ef 100644
--- a/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
+++ b/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
@@ -1,9 +1,10 @@
.wrapper {
.item_wrapper {
- height: 225px;
+ height: 210px;
position: relative;
// padding: 48px 24px 12px;
border-radius: 8px;
+ overflow: hidden;
background: #FAFAFA;
margin: 0 12px;
// margin-top: 40px;
From cedcf5a4eb429a3a481aaed6f5c0a6f092a8782f Mon Sep 17 00:00:00 2001
From: Archaon
Date: Thu, 7 Nov 2024 14:31:34 +0700
Subject: [PATCH 05/19] fix css bg on mobile
---
src/modules/landingV3/styles.module.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/modules/landingV3/styles.module.scss b/src/modules/landingV3/styles.module.scss
index 27e2af5d8..6caca6721 100644
--- a/src/modules/landingV3/styles.module.scss
+++ b/src/modules/landingV3/styles.module.scss
@@ -15,6 +15,7 @@
}
.bottom {
+ background-color: rgb(250, 250, 250);
//margin-top: 80px;
//@include is-min-table {
From 9f524d8230bf67a28a2d9ae23489666f367d3a83 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Thu, 7 Nov 2024 15:01:03 +0700
Subject: [PATCH 06/19] update sapcing
---
.../landingV3/Componets/UserReviews/index.tsx | 26 +++++++++----------
src/modules/landingV3/styles.module.scss | 9 +------
2 files changed, 13 insertions(+), 22 deletions(-)
diff --git a/src/modules/landingV3/Componets/UserReviews/index.tsx b/src/modules/landingV3/Componets/UserReviews/index.tsx
index 288d9b52c..e765c813e 100644
--- a/src/modules/landingV3/Componets/UserReviews/index.tsx
+++ b/src/modules/landingV3/Componets/UserReviews/index.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import Slider from 'react-slick';
import s from './UserReviews.module.scss';
-import { Flex, Image } from '@chakra-ui/react';
+import { Flex, Image, Text } from '@chakra-ui/react';
type Props = {};
@@ -17,9 +17,8 @@ const CONTENT = [
avatarSrc: '/landing-v6/avt-stonecoldpat0.png',
content: () => (
<>
- Rollups are the new server.
-
- Rollup as a service providers are the new Wordpress.
+ Rollups are the new server.
+ Rollup as a service providers are the new Wordpress.
>
),
name: 'Patrick McCorry',
@@ -48,11 +47,8 @@ provability, etc`,
// eoracle is the verifiable real-world connection.`,
content: () => (
<>
- @ethereum is the verifiable internet
-
-
- Rollups are the verifiable web server
-
+ @ethereum is the verifiable internet
+ Rollups are the verifiable web server
{/* @eigenlayer is the verifiable cloud
eoracle is the verifiable real-world */}
@@ -73,10 +69,10 @@ provability, etc`,
avatarSrc: '/landing-v6/avt-Polymer_Labs.png',
content: () => (
<>
- The future of Ethereum interop will resemble the cloud today
-
-
- Rollups = on-chain web servers
+
+ The future of Ethereum interop will resemble the cloud today
+
+ Rollups = on-chain web servers
>
),
@@ -130,7 +126,9 @@ const Item = (props: ItemProps) => {
- {typeof content === 'function' ? content() : content}
+
+ {typeof content === 'function' ? content() : content}
+
diff --git a/src/modules/landingV3/styles.module.scss b/src/modules/landingV3/styles.module.scss
index 6caca6721..dbc3d34e2 100644
--- a/src/modules/landingV3/styles.module.scss
+++ b/src/modules/landingV3/styles.module.scss
@@ -6,22 +6,15 @@
background-color: #fff;
padding: 80px 0;
- //padding-bottom: 0;
- //background-color: #f4f4f4;
@include is-min-table {
padding: 120px 0;
- //padding-bottom: 0;
}
}
.bottom {
background-color: rgb(250, 250, 250);
- //margin-top: 80px;
- //@include is-min-table {
- // padding-top: 80px;
- // padding-bottom: 80px;
- //}
+
&_top {
text-align: center;
From 3d9bc8eb78b7078481211e4d394dbc584a915bc3 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Thu, 7 Nov 2024 15:04:24 +0700
Subject: [PATCH 07/19] update spacing
---
src/modules/landingV3/Componets/UserReviews/index.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/modules/landingV3/Componets/UserReviews/index.tsx b/src/modules/landingV3/Componets/UserReviews/index.tsx
index e765c813e..3795e61ff 100644
--- a/src/modules/landingV3/Componets/UserReviews/index.tsx
+++ b/src/modules/landingV3/Componets/UserReviews/index.tsx
@@ -126,7 +126,7 @@ const Item = (props: ItemProps) => {
-
+
{typeof content === 'function' ? content() : content}
From 4500988507fcf17a11d0166da5237742b027f5c4 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Fri, 8 Nov 2024 10:11:21 +0700
Subject: [PATCH 08/19] update review css
---
.../UserReviews/UserReviews.module.scss | 18 ++++++++----------
.../landingV3/Componets/UserReviews/index.tsx | 13 +++++++++----
2 files changed, 17 insertions(+), 14 deletions(-)
diff --git a/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss b/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
index dc57d03ef..65f84c310 100644
--- a/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
+++ b/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
@@ -1,11 +1,12 @@
.wrapper {
.item_wrapper {
- height: 210px;
+ height: 200px;
position: relative;
// padding: 48px 24px 12px;
- border-radius: 8px;
overflow: hidden;
- background: #FAFAFA;
+ border-radius: 8px;
+ border: 1px solid #E5E7EB;
+ background: #FFF;
margin: 0 12px;
// margin-top: 40px;
display: flex;
@@ -13,8 +14,9 @@
gap: 16px;
.avatar {
- padding: 12px 20px;
- background: #F4F4F4;
+ padding: 20px;
+ padding-bottom: 0px;
+ // background: #F4F4F4;
// position: absolute;
// top: 0;
@@ -27,7 +29,7 @@
align-items: start;
gap: 8px;
padding-left: 20px;
- padding-right: 27px;
+ padding-right: 20px;
p {
flex: 1;
@@ -37,10 +39,6 @@
font-style: normal;
font-weight: 400;
line-height: 24px;
- /* 150% */
- margin-top: 3px;
- /* 19.6px */
- // margin-bottom: 16px;
}
}
diff --git a/src/modules/landingV3/Componets/UserReviews/index.tsx b/src/modules/landingV3/Componets/UserReviews/index.tsx
index 3795e61ff..ae98e8277 100644
--- a/src/modules/landingV3/Componets/UserReviews/index.tsx
+++ b/src/modules/landingV3/Componets/UserReviews/index.tsx
@@ -87,8 +87,13 @@ const Item = (props: ItemProps) => {
return (
-
-
+
+
{name}
{username}
@@ -97,7 +102,7 @@ const Item = (props: ItemProps) => {
-
{
/>
-
+ */}
{typeof content === 'function' ? content() : content}
From 0da8b8869cb0b1184d3f09d99bd6a55ab612b554 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Fri, 8 Nov 2024 14:05:32 +0700
Subject: [PATCH 09/19] update css
---
.../landingV3/Componets/UserReviews/UserReviews.module.scss | 2 +-
src/modules/landingV3/Componets/UserReviews/index.tsx | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss b/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
index 65f84c310..5bf45227d 100644
--- a/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
+++ b/src/modules/landingV3/Componets/UserReviews/UserReviews.module.scss
@@ -56,7 +56,7 @@
.username {
color: #000;
font-family: "SF Pro Display";
- font-size: 12px;
+ font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 140%;
diff --git a/src/modules/landingV3/Componets/UserReviews/index.tsx b/src/modules/landingV3/Componets/UserReviews/index.tsx
index ae98e8277..8d8e3b4df 100644
--- a/src/modules/landingV3/Componets/UserReviews/index.tsx
+++ b/src/modules/landingV3/Componets/UserReviews/index.tsx
@@ -131,7 +131,7 @@ const Item = (props: ItemProps) => {
*/}
-
+
{typeof content === 'function' ? content() : content}
From e5fccfd173b722889452f489e79940fd55265a31 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Fri, 8 Nov 2024 14:51:12 +0700
Subject: [PATCH 10/19] udpate copy
---
.../Componets/HeroV5/HeroV5.module.scss | 6 +++---
.../landingV3/Componets/HeroV5/index.tsx | 17 +++++++----------
2 files changed, 10 insertions(+), 13 deletions(-)
diff --git a/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss b/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss
index 4b6fef6b1..ffe5e265e 100644
--- a/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss
+++ b/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss
@@ -5,7 +5,7 @@
.upper {
display: flex;
align-items: flex-start;
- gap: 125px;
+ gap: 100px;
margin-bottom: 60px;
@include is-mobile {
@@ -15,7 +15,7 @@
}
.left {
- flex: 0.4;
+ flex: 0.45;
@include is-mobile {
flex: 1;
@@ -25,7 +25,7 @@
.title {
color: #000;
font-family: var(--font-jetbrains);
- font-size: 40px;
+ font-size: 38px;
font-style: normal;
font-weight: 700;
line-height: 120%;
diff --git a/src/modules/landingV3/Componets/HeroV5/index.tsx b/src/modules/landingV3/Componets/HeroV5/index.tsx
index 99346f5ca..1e29150a6 100644
--- a/src/modules/landingV3/Componets/HeroV5/index.tsx
+++ b/src/modules/landingV3/Componets/HeroV5/index.tsx
@@ -17,20 +17,17 @@ const HeroV5 = () => {
-
Virtual servers running on Bitcoin.
+
Servers with superpowers.
- Bitcoin Virtual Machines are servers with superpowers like smart
- contracts, censorship resistance, and transparency. Backed by
- Bitcoin's security. They are designed to power an entirely new kind
- of applications: decentralized applications.
- Set up your Bitcoin Virtual Machine today and start
- building decentralized applications that can change the world.
+ Bitcoin Virtual Machines are a new kind of server running on
+ Bitcoin. Open, verifiable, and censorship-resistant. Built to power
+ the next generation of unstoppable applications.
- Start building
+ Get Started
-
-
+ */}
From 608ddaf8d28fdb206bf8c1c6965be09218903145 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Fri, 8 Nov 2024 15:35:28 +0700
Subject: [PATCH 11/19] update layout
---
public/landing-v6/ic-play.png | Bin 0 -> 4132 bytes
.../Componets/HeroV5/HeroV5.module.scss | 53 +++++++++++++-
.../landingV3/Componets/HeroV5/index.tsx | 66 ++++++++++++++----
.../landingV3/Componets/UserReviews/index.tsx | 24 +++----
4 files changed, 115 insertions(+), 28 deletions(-)
create mode 100644 public/landing-v6/ic-play.png
diff --git a/public/landing-v6/ic-play.png b/public/landing-v6/ic-play.png
new file mode 100644
index 0000000000000000000000000000000000000000..24a39240ee4ccaf089c142ac177ffedfc0e0cbef
GIT binary patch
literal 4132
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 {
// const [isOpenModalVideo, setIsOpenModalVideo] = useState(false);
const [firstClick, setFirstClick] = useState(false);
+ // const [playVideo, setPlayVideo] = useState(false);
return (
@@ -56,23 +57,37 @@ const HeroV5 = () => {
className={`${s.thumbnail} `}
// ref={refContent}
onClick={() => {
- setFirstClick(true);
- // toggle video
- setTimeout(() => {
- if (videoRef.current) {
- // check if video playing
- if (videoRef.current.paused) {
- videoRef.current.play();
- } else {
- videoRef.current.pause();
+ if (!firstClick) {
+ setFirstClick(true);
+
+ setTimeout(() => {
+ if (videoRef.current) {
+ // check if video playing
+ if (videoRef.current.paused) {
+ videoRef.current.play();
+ } else {
+ videoRef.current.pause();
+ }
}
- }
- }, 100);
+ }, 100);
+ }
+ // else {
+ // if (videoRef.current) {
+ // // check if video playing
+ // if (videoRef.current.paused) {
+ // // videoRef.current.play();
+ // } else {
+ // videoRef.current.pause();
+ // }
+ // }
+ // }
+
+ // toggle video
}}
>
{
playsInline
controls={!!firstClick}
/>
+ {!firstClick && (
+
+
+
+
+
+
+ )}
diff --git a/src/modules/landingV3/Componets/UserReviews/index.tsx b/src/modules/landingV3/Componets/UserReviews/index.tsx
index 8d8e3b4df..dcf16059e 100644
--- a/src/modules/landingV3/Componets/UserReviews/index.tsx
+++ b/src/modules/landingV3/Componets/UserReviews/index.tsx
@@ -33,12 +33,12 @@ provability, etc`,
name: 'Hayden Adams',
username: '@haydenzadams',
},
- {
- avatarSrc: '/landing-v6/avt-mattmurrs.png',
- content: `Rollups are open, verifiable web servers`,
- name: 'Matt Murray',
- username: '@mattmurrs',
- },
+ // {
+ // avatarSrc: '/landing-v6/avt-mattmurrs.png',
+ // content: `Rollups are open, verifiable web servers`,
+ // name: 'Matt Murray',
+ // username: '@mattmurrs',
+ // },
{
avatarSrc: '/landing-v6/avt-eoracle_network.png',
// content: `@ethereum is the verifiable internet.
@@ -58,13 +58,13 @@ provability, etc`,
name: 'eOracle',
username: '@eoracle_network',
},
- {
- avatarSrc: '/landing-v6/avt-allred_chase.png',
+ // {
+ // avatarSrc: '/landing-v6/avt-allred_chase.png',
- content: () => <>Rollups are the new server>,
- name: 'Chunk',
- username: '@allred_chase',
- },
+ // content: () => <>Rollups are the new server>,
+ // name: 'Chunk',
+ // username: '@allred_chase',
+ // },
{
avatarSrc: '/landing-v6/avt-Polymer_Labs.png',
content: () => (
From 2f564c245171496b8878395ce6d9e240ac6e4b31 Mon Sep 17 00:00:00 2001
From: tony
Date: Fri, 8 Nov 2024 17:14:45 +0700
Subject: [PATCH 12/19] hide ui + change text
---
src/modules/blockchains/Buy/studio/Main/index.tsx | 4 ++--
src/modules/landingV3/Componets/HeroV5/index.tsx | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/modules/blockchains/Buy/studio/Main/index.tsx b/src/modules/blockchains/Buy/studio/Main/index.tsx
index 26fa9f4d6..7a9cf1a1c 100644
--- a/src/modules/blockchains/Buy/studio/Main/index.tsx
+++ b/src/modules/blockchains/Buy/studio/Main/index.tsx
@@ -61,14 +61,14 @@ const StudioMain = (): ReactElement => {
>
Studio
- setTab(TABS.EXPLORE)}
>
Bitcoin L2s
-
+ */}
>
)}
diff --git a/src/modules/landingV3/Componets/HeroV5/index.tsx b/src/modules/landingV3/Componets/HeroV5/index.tsx
index f1ea16ceb..da7cc89f9 100644
--- a/src/modules/landingV3/Componets/HeroV5/index.tsx
+++ b/src/modules/landingV3/Componets/HeroV5/index.tsx
@@ -26,7 +26,7 @@ const HeroV5 = () => {
- Get Started
+ Get started
{/*
Date: Tue, 12 Nov 2024 09:31:03 +0700
Subject: [PATCH 13/19] rollback home - public sale
---
src/layouts-rollback/BoxContent/index.tsx | 38 ++
.../BoxContent/styles.module.scss | 2 +
src/layouts-rollback/Footer/index.tsx | 24 ++
.../Footer/styles.module.scss | 7 +
.../Header/components/DesktopNav.tsx | 59 +++
.../Header/components/DesktopNavLeft.tsx | 44 +++
.../Header/components/DesktopNavRight.tsx | 134 +++++++
.../Header/components/DrawerMenu.tsx | 49 +++
.../Header/components/IcGit.tsx | 11 +
.../Header/components/IcTW.tsx | 19 +
.../Header/components/MobileNav.tsx | 30 ++
.../Header/components/styles.module.scss | 91 +++++
src/layouts-rollback/Header/index.tsx | 122 +++++++
src/layouts-rollback/Header/menuConfig.ts | 150 ++++++++
src/layouts-rollback/Header/style.module.scss | 26 ++
src/layouts-rollback/MainLayout.tsx | 34 ++
src/layouts-rollback/styles.module.scss | 9 +
.../Componets/Article/ItemArticle/index.tsx | 41 +++
.../Article/ItemArticle/styles.module.scss | 58 +++
.../Componets/Article/index.tsx | 66 ++++
.../Componets/Article/styles.module.scss | 66 ++++
.../Componets/BitEth/index.tsx | 70 ++++
.../Componets/BitEth/styles.module.scss | 33 ++
.../Componets/Chain/Cursor/index.tsx | 60 ++++
.../Componets/Chain/Cursor/styles.module.scss | 32 ++
.../Componets/Chain/Cursor/useCursorStore.ts | 14 +
.../Chain/ItemChain/SectionBottom/index.tsx | 76 ++++
.../SectionBottom/styles.module.scss | 127 +++++++
.../Chain/ItemChain/SectionTop/index.tsx | 43 +++
.../ItemChain/SectionTop/styles.module.scss | 58 +++
.../Componets/Chain/ItemChain/index.tsx | 60 ++++
.../Chain/ItemChain/styles.module.scss | 63 ++++
.../Componets/Chain/index.tsx | 185 ++++++++++
.../Componets/Chain/styles.module.scss | 68 ++++
.../Comunity/ItemCommunity/index.tsx | 46 +++
.../Comunity/ItemCommunity/styles.module.scss | 99 +++++
.../Componets/Comunity/index.tsx | 61 ++++
.../Componets/Comunity/styles.module.scss | 114 ++++++
.../Componets/ContentSection/index.tsx | 17 +
.../ContentSection/styles.module.scss | 16 +
.../Componets/Ecosystem/index.tsx | 70 ++++
.../Componets/Ecosystem/styles.module.scss | 39 ++
.../Componets/HeadingSection/index.tsx | 9 +
.../HeadingSection/styles.module.scss | 22 ++
.../Componets/HeadingText/index.tsx | 71 ++++
.../Componets/HeadingText/styles.module.scss | 18 +
.../Componets/HeadingTextTyping/index.tsx | 125 +++++++
.../HeadingTextTyping/styles.module.scss | 17 +
.../Componets/HeadingTextV2/index.tsx | 65 ++++
.../HeadingTextV2/styles.module.scss | 20 ++
.../Componets/Hero/Bg/index.tsx | 17 +
.../Componets/Hero/Bg/styles.module.scss | 14 +
.../Componets/Hero/Content/index.tsx | 17 +
.../Componets/Hero/Content/styles.module.scss | 61 ++++
.../Componets/Hero/HeroLabel/index.tsx | 65 ++++
.../Hero/HeroLabel/styles.module.scss | 69 ++++
.../Componets/Hero/ItemHero/index.tsx | 36 ++
.../Hero/ItemHero/styles.module.scss | 64 ++++
.../Componets/Hero/JoinAllowList/index.tsx | 139 +++++++
.../Hero/JoinAllowList/styles.module.scss | 288 +++++++++++++++
.../landing-rollback/Componets/Hero/index.tsx | 24 ++
.../Componets/Hero/styles.module.scss | 44 +++
.../Componets/Intro/index.tsx | 244 +++++++++++++
.../Componets/Intro/styles.module.scss | 339 ++++++++++++++++++
.../landing-rollback/Componets/Lego/index.tsx | 63 ++++
.../Componets/Lego/styles.module.scss | 32 ++
.../Componets/LegoV2/LegoItem/index.tsx | 95 +++++
.../LegoV2/LegoItem/style.module.scss | 322 +++++++++++++++++
.../Componets/LegoV2/index.tsx | 119 ++++++
.../Componets/LegoV2/styles.module.scss | 87 +++++
.../ScalableSlide/ScalableContnet/index.tsx | 21 ++
.../ScalableContnet/styles.module.scss | 40 +++
.../ScalableSlide/ScalableItem/index.tsx | 8 +
.../ScalableItem/styles.module.scss | 34 ++
.../Componets/ScalableSlide/index.tsx | 162 +++++++++
.../Componets/ScalableSlide/style.module.scss | 79 ++++
.../ItemScaleableMobile/index.tsx | 38 ++
.../ItemScaleableMobile/styles.module.scss | 69 ++++
.../Componets/ScaleableMobile/index.tsx | 47 +++
.../ScaleableMobile/styles.module.scss | 4 +
.../Section_7/Section_7_Mobile/index.tsx | 23 ++
.../Section_7_Mobile/styles.module.scss | 33 ++
.../Componets/Section_7/constant.ts | 188 ++++++++++
.../Componets/Section_7/index.tsx | 152 ++++++++
.../Componets/Section_7/styles.module.scss | 146 ++++++++
.../Componets/Tool/ItemTool/index.tsx | 49 +++
.../Tool/ItemTool/styles.module.scss | 124 +++++++
.../landing-rollback/Componets/Tool/index.tsx | 98 +++++
.../Componets/Tool/styles.module.scss | 84 +++++
src/modules/landing-rollback/index.tsx | 32 ++
.../landing-rollback/styles.module.scss | 2 +
91 files changed, 6350 insertions(+)
create mode 100644 src/layouts-rollback/BoxContent/index.tsx
create mode 100644 src/layouts-rollback/BoxContent/styles.module.scss
create mode 100644 src/layouts-rollback/Footer/index.tsx
create mode 100644 src/layouts-rollback/Footer/styles.module.scss
create mode 100644 src/layouts-rollback/Header/components/DesktopNav.tsx
create mode 100644 src/layouts-rollback/Header/components/DesktopNavLeft.tsx
create mode 100644 src/layouts-rollback/Header/components/DesktopNavRight.tsx
create mode 100644 src/layouts-rollback/Header/components/DrawerMenu.tsx
create mode 100644 src/layouts-rollback/Header/components/IcGit.tsx
create mode 100644 src/layouts-rollback/Header/components/IcTW.tsx
create mode 100644 src/layouts-rollback/Header/components/MobileNav.tsx
create mode 100644 src/layouts-rollback/Header/components/styles.module.scss
create mode 100644 src/layouts-rollback/Header/index.tsx
create mode 100644 src/layouts-rollback/Header/menuConfig.ts
create mode 100644 src/layouts-rollback/Header/style.module.scss
create mode 100644 src/layouts-rollback/MainLayout.tsx
create mode 100644 src/layouts-rollback/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Article/ItemArticle/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Article/ItemArticle/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Article/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Article/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/BitEth/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/BitEth/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Chain/Cursor/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Chain/Cursor/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Chain/Cursor/useCursorStore.ts
create mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Chain/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Chain/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Comunity/ItemCommunity/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Comunity/ItemCommunity/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Comunity/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Comunity/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/ContentSection/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/ContentSection/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Ecosystem/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Ecosystem/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/HeadingSection/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/HeadingSection/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/HeadingText/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/HeadingText/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/HeadingTextTyping/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/HeadingTextTyping/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/HeadingTextV2/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/HeadingTextV2/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Hero/Bg/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Hero/Bg/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Hero/Content/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Hero/Content/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Hero/HeroLabel/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Hero/HeroLabel/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Hero/ItemHero/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Hero/ItemHero/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Hero/JoinAllowList/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Hero/JoinAllowList/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Hero/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Hero/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Intro/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Intro/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Lego/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Lego/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/LegoV2/LegoItem/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/LegoV2/LegoItem/style.module.scss
create mode 100644 src/modules/landing-rollback/Componets/LegoV2/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/LegoV2/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/style.module.scss
create mode 100644 src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/ScaleableMobile/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/ScaleableMobile/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Section_7/constant.ts
create mode 100644 src/modules/landing-rollback/Componets/Section_7/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Section_7/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Tool/ItemTool/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Tool/ItemTool/styles.module.scss
create mode 100644 src/modules/landing-rollback/Componets/Tool/index.tsx
create mode 100644 src/modules/landing-rollback/Componets/Tool/styles.module.scss
create mode 100644 src/modules/landing-rollback/index.tsx
create mode 100644 src/modules/landing-rollback/styles.module.scss
diff --git a/src/layouts-rollback/BoxContent/index.tsx b/src/layouts-rollback/BoxContent/index.tsx
new file mode 100644
index 000000000..53f5b3463
--- /dev/null
+++ b/src/layouts-rollback/BoxContent/index.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { Box } from '@chakra-ui/react';
+import { HTMLChakraProps } from '@chakra-ui/system';
+import * as _chakra_ui_system from '@chakra-ui/system';
+
+// const breakpoints = {
+// base: "0em", // 0px => Mobile
+// sm: "30em", // ~480px. em is a relative unit and is dependant on the font size.
+// md: "48em", // ~768px
+// lg: "62em", // ~992px
+// xl: "80em", // ~1280px
+// "2xl": "96em", // ~1536px
+// };
+
+const BoxContent: _chakra_ui_system.ChakraComponent<'div', {}> = (
+ props: HTMLChakraProps<'div'>,
+) => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+export default BoxContent;
diff --git a/src/layouts-rollback/BoxContent/styles.module.scss b/src/layouts-rollback/BoxContent/styles.module.scss
new file mode 100644
index 000000000..485140808
--- /dev/null
+++ b/src/layouts-rollback/BoxContent/styles.module.scss
@@ -0,0 +1,2 @@
+.container {
+}
diff --git a/src/layouts-rollback/Footer/index.tsx b/src/layouts-rollback/Footer/index.tsx
new file mode 100644
index 000000000..ac4fb8275
--- /dev/null
+++ b/src/layouts-rollback/Footer/index.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { Box, Container, Stack, Text } from '@chakra-ui/react';
+
+const Footer = () => {
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/src/layouts-rollback/Footer/styles.module.scss b/src/layouts-rollback/Footer/styles.module.scss
new file mode 100644
index 000000000..8ba023df6
--- /dev/null
+++ b/src/layouts-rollback/Footer/styles.module.scss
@@ -0,0 +1,7 @@
+.footerBar {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+}
diff --git a/src/layouts-rollback/Header/components/DesktopNav.tsx b/src/layouts-rollback/Header/components/DesktopNav.tsx
new file mode 100644
index 000000000..0d8ceab74
--- /dev/null
+++ b/src/layouts-rollback/Header/components/DesktopNav.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { Box, HStack, Text } from '@chakra-ui/react';
+
+import Link from 'next/link';
+import { NAV_ITEMS } from '../menuConfig';
+import { IcTW } from './IcTW';
+
+type Props = {
+ primaryColor?: 'black' | 'white';
+};
+
+export const DesktopNav = (props: Props) => {
+ return (
+
+ {NAV_ITEMS.map((navItem) => (
+
+ {navItem?.isTwitter ? (
+ {
+ window.open(navItem.href, '_blank');
+ }}
+ >
+
+
+ ) : (
+
+ {navItem.label}
+
+ )}
+
+ ))}
+
+ );
+};
diff --git a/src/layouts-rollback/Header/components/DesktopNavLeft.tsx b/src/layouts-rollback/Header/components/DesktopNavLeft.tsx
new file mode 100644
index 000000000..37f336fed
--- /dev/null
+++ b/src/layouts-rollback/Header/components/DesktopNavLeft.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { Box, HStack, Text } from '@chakra-ui/react';
+
+import Link from 'next/link';
+import { NAV_ITEMS, NAV_ITEMS_LEFT } from '../menuConfig';
+import s from './styles.module.scss'
+
+type Props = {
+ primaryColor?: 'black' | 'white';
+};
+
+export const DesktopNavLeft = (props: Props) => {
+ return (
+
+ {NAV_ITEMS_LEFT.map((navItem) => (
+
+ {
+ navItem.isStrong &&
+ ✨
+
+ }
+
+
+ {navItem.label}
+
+
+ ))}
+
+ );
+};
diff --git a/src/layouts-rollback/Header/components/DesktopNavRight.tsx b/src/layouts-rollback/Header/components/DesktopNavRight.tsx
new file mode 100644
index 000000000..6fe0291f0
--- /dev/null
+++ b/src/layouts-rollback/Header/components/DesktopNavRight.tsx
@@ -0,0 +1,134 @@
+'use client';
+
+import { Box, HStack, Text } from '@chakra-ui/react';
+
+import Link from 'next/link';
+import { NAV_ITEMS, NAV_ITEMS_RIGHT } from '../menuConfig';
+import { IcTW } from './IcTW';
+import { ReactElement } from 'react';
+import SvgInset from '@/components/SvgInset';
+import s from './styles.module.scss';
+import { IcGit } from '@/layouts/Header/components/IcGit';
+
+type Props = {
+ primaryColor?: 'black' | 'white';
+};
+
+export const DesktopNavRight = (props: Props) => {
+ return (
+
+ {NAV_ITEMS_RIGHT.map((navItem) => (
+ <>
+
+ {
+ navItem.subMenu ?
+
+ :
+
+
+
+ {navItem.label}
+
+
+ }
+
+
+
+ >
+ ))}
+
+
+
+ {
+ window.open('https://github.com/trustlesscomputer/', '_blank');
+ }}
+ >
+
+
+
+
+
+
+ {
+ window.open('https://twitter.com/bvmnetwork', '_blank');
+ }}
+ >
+
+
+
+
+ );
+};
+
+type PropD = {
+ title: string, lists: string[], primaryColor?: string
+};
+const DropDown = ({ title, lists, primaryColor }: PropD): ReactElement => {
+
+ return ;
+};
diff --git a/src/layouts-rollback/Header/components/DrawerMenu.tsx b/src/layouts-rollback/Header/components/DrawerMenu.tsx
new file mode 100644
index 000000000..c2eeef2e2
--- /dev/null
+++ b/src/layouts-rollback/Header/components/DrawerMenu.tsx
@@ -0,0 +1,49 @@
+'use client';
+import {
+ Drawer,
+ DrawerBody,
+ DrawerContent,
+ DrawerFooter,
+ DrawerOverlay,
+ Image,
+ useDisclosure,
+} from '@chakra-ui/react';
+import { MobileNav } from './MobileNav';
+
+export type HeaderProps = {
+ isOpen: boolean;
+ onToggle: any;
+};
+
+const DrawerMobileMenu = (props: HeaderProps) => {
+ return (
+
+
+
+ { }
+
+
+
+
+
+ );
+};
+
+export default DrawerMobileMenu;
diff --git a/src/layouts-rollback/Header/components/IcGit.tsx b/src/layouts-rollback/Header/components/IcGit.tsx
new file mode 100644
index 000000000..6792e640c
--- /dev/null
+++ b/src/layouts-rollback/Header/components/IcGit.tsx
@@ -0,0 +1,11 @@
+//#30ccfb
+const IcGit= ({ fillColor }: { fillColor?: string }) => {
+ return (
+
+
+
+
+ );
+};
+
+export { IcGit };
diff --git a/src/layouts-rollback/Header/components/IcTW.tsx b/src/layouts-rollback/Header/components/IcTW.tsx
new file mode 100644
index 000000000..a744d0e35
--- /dev/null
+++ b/src/layouts-rollback/Header/components/IcTW.tsx
@@ -0,0 +1,19 @@
+//#30ccfb
+const IcTW = ({ fillColor }: { fillColor?: string }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export { IcTW };
diff --git a/src/layouts-rollback/Header/components/MobileNav.tsx b/src/layouts-rollback/Header/components/MobileNav.tsx
new file mode 100644
index 000000000..518afb523
--- /dev/null
+++ b/src/layouts-rollback/Header/components/MobileNav.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button, Link, StackDivider, Text, VStack } from '@chakra-ui/react';
+import { NAV_ITEMS } from '../menuConfig';
+
+export const MobileNav = () => {
+ return (
+ }
+ spacing={10}
+ alignItems={'flex-start'}
+ px={'24px'}
+ py={'60px'}
+ >
+ {NAV_ITEMS.map((item) => (
+
+ {item.label}
+
+ ))}
+
+ );
+};
diff --git a/src/layouts-rollback/Header/components/styles.module.scss b/src/layouts-rollback/Header/components/styles.module.scss
new file mode 100644
index 000000000..27785d629
--- /dev/null
+++ b/src/layouts-rollback/Header/components/styles.module.scss
@@ -0,0 +1,91 @@
+.dropMenu {
+ position: relative;
+ color: white;
+
+ &_label {
+ display: flex;
+ gap: 5px;
+ align-items: center;
+ font-weight: 500;
+
+ &.black {
+ color: black;
+
+ svg path {
+ stroke: black !important;
+ }
+ }
+
+ img, svg {
+ transform: translateY(.05em);
+ }
+ }
+
+ &:hover {
+ .dropMenu_list {
+ opacity: 1;
+ visibility: visible;
+ z-index: 2 !important;
+ }
+ }
+
+ &_list {
+ opacity: 0;
+ width: 240px;
+ background: white;
+ position: absolute;
+ right: 0;
+ list-style: none;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ visibility: hidden;
+ }
+}
+
+.listItem {
+
+ a {
+ color: #000000 !important;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ svg * {
+ transition: fill .4s var(--easeOutQuart);
+ }
+
+ &:hover {
+ rect {
+ fill: red;
+ }
+
+ path {
+ fill: white
+ }
+ }
+ }
+}
+
+
+.isStrong {
+ padding: 4px 12px;
+ border-radius: 100px;
+ background: #000000;
+ display: flex;
+ align-items: center;
+
+ p {
+ color: #FF6A00 !important;
+ background: linear-gradient(90deg, #EE0979 0%, #FF6A00 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ font-weight: 500;
+ }
+}
+
+.strongText {
+ color: yellow !important;
+}
diff --git a/src/layouts-rollback/Header/index.tsx b/src/layouts-rollback/Header/index.tsx
new file mode 100644
index 000000000..2035ba02a
--- /dev/null
+++ b/src/layouts-rollback/Header/index.tsx
@@ -0,0 +1,122 @@
+'use client';
+import {
+ Box,
+ Flex,
+ IconButton,
+ Image,
+ useBreakpointValue,
+ useDisclosure,
+} from '@chakra-ui/react';
+import Link from 'next/link';
+import BoxContent from '../BoxContent';
+import DrawerMobileMenu from './components/DrawerMenu';
+import useAnimationStore from '@/stores/useAnimationStore';
+import { useMemo } from 'react';
+import { usePathname } from 'next/navigation';
+import cn from 'classnames';
+import s from './style.module.scss';
+import useWindowSize from '@/hooks/useWindowSize';
+import { DesktopNavLeft } from '@/layouts/Header/components/DesktopNavLeft';
+import { DesktopNavRight } from '@/layouts/Header/components/DesktopNavRight';
+
+export type HeaderProps = {
+ color?: 'black' | 'white';
+ position?: 'absolute' | 'relative';
+ bgColor?: string;
+};
+
+export const HEADER_ID = 'HEADER_VIEW';
+
+const Header = (props: HeaderProps) => {
+ const primaryColor = props.color || 'white';
+ const position = props.position || 'absolute';
+ const bgColor = props.bgColor || 'transparent';
+ const pathName = usePathname();
+
+ const { isOpen, onToggle } = useDisclosure();
+ const { play } = useAnimationStore();
+ const isHome = useMemo(() => {
+ return pathName === '/';
+ }, [pathName]);
+ const isMobile = useBreakpointValue({ base: true, md: false }) as boolean;
+ const { tabletScreen, isDesktop } = useWindowSize();
+
+ return (
+ <>
+
+
+ >
+ );
+};
+
+export default Header;
diff --git a/src/layouts-rollback/Header/menuConfig.ts b/src/layouts-rollback/Header/menuConfig.ts
new file mode 100644
index 000000000..3d198a7cc
--- /dev/null
+++ b/src/layouts-rollback/Header/menuConfig.ts
@@ -0,0 +1,150 @@
+import { DEVELOPERS_DOC_URL, WHITEPAPER_DOC_URL } from '@/config';
+import { checkIsPublicSale } from '@/modules/Whitelist/utils';
+
+export interface NavItem {
+ label: string;
+ subLabel?: string;
+ children?: Array;
+ isNewWindow?: boolean;
+ href?: string;
+ isHide?: boolean;
+ isTwitter?: boolean;
+ isStrong?: boolean;
+ subMenu?: any;
+}
+
+export const NAV_ITEMS: Array = [
+ {
+ label: 'Bitcoin L2s',
+ href: '/blockchains',
+ isNewWindow: false,
+ isHide: false,
+ },
+ {
+ label: 'Module Store',
+ href: '/module-store',
+ isNewWindow: false,
+ isHide: false,
+ },
+ {
+ label: checkIsPublicSale() ? 'Public Sale' : 'Launchpad',
+ href: checkIsPublicSale() ? '/public-sale' : '/launchpad',
+ isNewWindow: false,
+ isHide: false,
+ },
+ {
+ label: '$BVM',
+ href: '/bvm',
+ isNewWindow: false,
+ isHide: false,
+ },
+ {
+ label: 'Roadmap',
+ href: '/roadmap',
+ isNewWindow: false,
+ isHide: false,
+ },
+ {
+ label: 'Onepager',
+ href: 'https://bvm.network/onepager.pdf',
+ isNewWindow: true,
+ isHide: false,
+ },
+
+ {
+ label: 'Deck',
+ href: 'https://bvm.network/deck.pdf',
+ isNewWindow: true,
+ isHide: false,
+ },
+ {
+ label: 'Whitepaper',
+ href: WHITEPAPER_DOC_URL,
+ isNewWindow: true,
+ isHide: false,
+ },
+ {
+ label: 'Developers',
+ href: DEVELOPERS_DOC_URL,
+ isNewWindow: true,
+ isHide: false,
+ },
+ {
+ label: 'Twitter',
+ isTwitter: true,
+ href: 'https://twitter.com/bvmnetwork',
+ isNewWindow: true,
+ isHide: false,
+ },
+ {
+ label: 'Github',
+ isTwitter: true,
+ href: 'https://github.com/trustlesscomputer/',
+ isNewWindow: true,
+ isHide: false,
+ },
+].filter((item) => !item.isHide);
+
+export const NAV_ITEMS_LEFT: Array = [
+ {
+ label: 'Bitcoin L2s',
+ href: '/blockchains',
+ isNewWindow: false,
+ isHide: false,
+ },
+ {
+ label: 'Module Store',
+ href: '/module-store',
+ isNewWindow: false,
+ isHide: false,
+ },
+ {
+ label: checkIsPublicSale() ? 'Public Sale' : 'Launchpad',
+ href: checkIsPublicSale() ? '/public-sale' : '/launchpad',
+ isNewWindow: false,
+ isStrong: checkIsPublicSale(),
+ isHide: false,
+ },
+].filter((item) => !item.isHide);
+
+export const NAV_ITEMS_RIGHT: Array = [
+ {
+ label: '$BVM',
+ href: '/bvm',
+ isNewWindow: false,
+ isHide: false,
+ },
+ {
+ label: 'Roadmap',
+ href: '/roadmap',
+ isNewWindow: false,
+ isHide: false,
+ },
+ {
+ label: 'Learn',
+ href: DEVELOPERS_DOC_URL,
+ isNewWindow: true,
+ isHide: false,
+ subMenu: [
+ {
+ link: 'https://bvm.network/onepager.pdf',
+ title: 'Onepager',
+ },
+ {
+ link: 'https://bvm.network/deck.pdf',
+ title: 'Deck',
+ },
+ {
+ link: WHITEPAPER_DOC_URL,
+ title: 'Whitepaper',
+ },
+ ],
+ },
+ {
+ label: 'Build',
+ href: DEVELOPERS_DOC_URL,
+ isNewWindow: true,
+ isHide: false,
+ },
+
+].filter((item) => !item.isHide);
diff --git a/src/layouts-rollback/Header/style.module.scss b/src/layouts-rollback/Header/style.module.scss
new file mode 100644
index 000000000..7973ecf4c
--- /dev/null
+++ b/src/layouts-rollback/Header/style.module.scss
@@ -0,0 +1,26 @@
+.container111 {
+ background-color: transparent !important;
+ background: transparent !important;
+}
+
+
+.isHome {
+ transform: translateY(-100%);
+ opacity: 0;
+
+ &.play {
+ transition: all .8s var(--easeOutQuart);
+ transform: translateY(0%);
+ opacity: 1;
+ }
+}
+
+
+.logo {
+ @include is-pc{
+ position: absolute;
+ z-index: 3;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+}
diff --git a/src/layouts-rollback/MainLayout.tsx b/src/layouts-rollback/MainLayout.tsx
new file mode 100644
index 000000000..2904625ae
--- /dev/null
+++ b/src/layouts-rollback/MainLayout.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import Header, { HeaderProps } from '@/layouts/Header';
+import React, { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+import useAnimationStore from '@/stores/useAnimationStore';
+
+type IMainProps = {
+ hideHeader?: boolean;
+ hideFooter?: boolean;
+ children?: React.ReactNode;
+ headerProps?: HeaderProps;
+};
+
+const MainLayout = ({
+ hideHeader = false,
+ hideFooter = false,
+ headerProps,
+ children,
+ }: IMainProps) => {
+
+ const pathName = usePathname();
+ const { resetPlay } = useAnimationStore();
+ useEffect(() => {
+ resetPlay();
+ }, [pathName]);
+
+ return <>
+ {!hideHeader && }
+ {children}
+ >;
+};
+
+export default MainLayout;
diff --git a/src/layouts-rollback/styles.module.scss b/src/layouts-rollback/styles.module.scss
new file mode 100644
index 000000000..767290067
--- /dev/null
+++ b/src/layouts-rollback/styles.module.scss
@@ -0,0 +1,9 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ height: 100vh;
+ width: 100vw;
+ color: #fff;
+ background-color: #000;
+}
diff --git a/src/modules/landing-rollback/Componets/Article/ItemArticle/index.tsx b/src/modules/landing-rollback/Componets/Article/ItemArticle/index.tsx
new file mode 100644
index 000000000..f7098c572
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Article/ItemArticle/index.tsx
@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import s from './styles.module.scss';
+import { IBlog, LOGOS } from '../../Section_7/constant';
+import { Image } from '@chakra-ui/react';
+import useWindowSize from '@/hooks/useWindowSize';
+
+export default function ItemArticle({ data }: { data: IBlog }) {
+ const { mobileScreen } = useWindowSize();
+ const getLogo = useMemo((): string => {
+ const tmp = LOGOS.filter((itemLogo => {
+ return itemLogo.id === data.logo;
+ }));
+ return tmp.length ? tmp[0].img : '';
+ }, [data]);
+ return (
+
+
+ {
+ getLogo &&
+
+
+ }
+
+
{data.title}
+
{data.desc}
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Article/ItemArticle/styles.module.scss b/src/modules/landing-rollback/Componets/Article/ItemArticle/styles.module.scss
new file mode 100644
index 000000000..35049e8cd
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Article/ItemArticle/styles.module.scss
@@ -0,0 +1,58 @@
+.itemArticle {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ @include is-mobile {
+ gap: 20px;
+ }
+ &_img {
+ width: 100%;
+ height: auto;
+ }
+ &_content {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include is-mobile {
+ gap: 12px;
+ }
+ &_title {
+ font-size: 24px;
+ line-height: 31.2px;
+ font-weight: 400;
+ color: #000;
+ @include is-mobile {
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 130%;
+ }
+ }
+ &_description {
+ font-size: 16px;
+ font-weight: 400;
+ color: #4d4d4d;
+ line-height: 22.4px;
+
+ @include is-mobile {
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+ }
+ }
+ }
+}
+
+.cardLogo {
+ border-bottom: 1px solid #ECECEC;
+ padding-bottom: 12px;
+
+ img {
+ height: 28px;
+ width: auto;
+ object-fit: contain;
+ }
+}
+
diff --git a/src/modules/landing-rollback/Componets/Article/index.tsx b/src/modules/landing-rollback/Componets/Article/index.tsx
new file mode 100644
index 000000000..3caa94b00
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Article/index.tsx
@@ -0,0 +1,66 @@
+// import React from 'react';
+// import s from './styles.module.scss';
+// import ItemArticle from './ItemArticle';
+// import article_1 from '@/public/landing/images/article_1.jpg';
+// import article_2 from '@/public/landing/images/article_2.jpg';
+// import article_3 from '@/public/landing/images/article_3.jpg';
+// import article_4 from '@/public/landing/images/article_4.jpg';
+
+// const DATA_ARTICLE = {
+// top: [
+// {
+// title: 'What Are BRC-20 Tokens? Explaining the Bitcoin Memecoin Hype',
+// description:
+// '"Memecoins" on Bitcoin is probably not what Satoshi Nakamoto envisioned when he released the Bitcoin whitepaper in 2008, but it just might be the mass adoption Bitcoin deserves.',
+// img: article_1,
+// },
+// {
+// title:
+// 'Ordinals turned Bitcoin into a worse version of Ethereum: Can we fix it?',
+// description:
+// 'No one expected the Taproot upgrade would lead to a surge of NFTs and memecoins on Bitcoin. Are they here to stay, or can the problems they’re causing be fixed?',
+// img: article_2,
+// },
+// ],
+// bottom: [
+// {
+// title: 'BRC-721: The Token Standard Defying Bitcoin’s 4MB Storage Limit',
+// description:
+// 'Degens will immediately recognize BRC-721’s acronymous name as being akin to ERC-721 — AKA the premiere token standard for Ethereum NFTs. Put simply, BRC-721s are smart-contract-based NFTs, but on BTC.',
+// img: article_3,
+// },
+// {
+// title: 'BRC-721: The Token Standard Defying Bitcoin’s 4MB Storage Limit',
+// description:
+// 'Degens will immediately recognize BRC-721’s acronymous name as being akin to ERC-721 — AKA the premiere token standard for Ethereum NFTs. Put simply, BRC-721s are smart-contract-based NFTs, but on BTC.',
+// img: article_4,
+// },
+// ],
+// };
+
+// export default function Article() {
+// return (
+//
+//
+//
+//
+// Oh, and the press loves us too!
+//
+//
+//
+// {DATA_ARTICLE.top.map((item, index) => {
+// return ;
+// })}
+//
+//
+//
+// {DATA_ARTICLE.bottom.map((item, index) => {
+// return ;
+// })}
+//
+//
+//
+//
+//
+// );
+// }
diff --git a/src/modules/landing-rollback/Componets/Article/styles.module.scss b/src/modules/landing-rollback/Componets/Article/styles.module.scss
new file mode 100644
index 000000000..87160800f
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Article/styles.module.scss
@@ -0,0 +1,66 @@
+.article {
+ padding-top: 140px;
+ padding-bottom: 105px;
+ background-color: #fff;
+ &_inner {
+ display: flex;
+ flex-direction: column;
+
+ &_heading {
+ font-weight: 400;
+ font-size: 48px;
+ line-height: 52.8px;
+ color: #000;
+ span {
+ color: #fa4e0e;
+ }
+ }
+
+ &_content {
+ display: flex;
+ flex-direction: column;
+ padding-top: 60px;
+ padding-bottom: 40px;
+
+ &_top {
+ display: flex;
+ flex-direction: row;
+ gap: 36px;
+ }
+ &_divide {
+ height: 1px;
+ width: 100%;
+ background-color: #eeeeee;
+ margin: 40px 0;
+ }
+ &_bottom {
+ display: flex;
+ flex-direction: row;
+ gap: 36px;
+ }
+ }
+
+ &_groupButton {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+
+ &_left {
+ background-color: #f6f6f6;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ }
+ &_right {
+ background-color: #000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ }
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/BitEth/index.tsx b/src/modules/landing-rollback/Componets/BitEth/index.tsx
new file mode 100644
index 000000000..048913074
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/BitEth/index.tsx
@@ -0,0 +1,70 @@
+import s from './styles.module.scss';
+import Image from 'next/image';
+import { Button } from '@chakra-ui/react';
+import Fade from '@/interactive/Fade';
+import { useRouter } from 'next/navigation';
+import useWindowSize from '@/hooks/useWindowSize';
+import Scale from '@/interactive/Scale';
+import Lines from '@/interactive/Lines';
+import HeadingSection from '../HeadingSection';
+import Chars from '@/interactive/Chars';
+import ContentSection from '@/modules/landing/Componets/ContentSection';
+
+export default function BitEth() {
+
+ const router = useRouter();
+ const { mobileScreen } = useWindowSize();
+
+ return
+
+
+
+
+
+
+
+ Minimal effort to migrate from Ethereum to Bitcoin.
+
+
+
+
+ BVM is EVM equivalent. It allows Ethereum developers to migrate their Solidity smart contracts and dapps
+ from Ethereum to Bitcoin with minimal or no modifications.
+
+
+
+
+ {
+ window.open('https://docs.bvm.network', '_blank');
+ // router.push('/blockchains/customize');
+ }}
+ >
+ {`Read developer docs`}
+
+
+
+
+
+
+
+
+
;
+}
diff --git a/src/modules/landing-rollback/Componets/BitEth/styles.module.scss b/src/modules/landing-rollback/Componets/BitEth/styles.module.scss
new file mode 100644
index 000000000..cd09f9aed
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/BitEth/styles.module.scss
@@ -0,0 +1,33 @@
+.bitEth {
+ padding-top: 120px;
+ background: #000;
+ overflow: hidden;
+
+ &_content {
+ max-width: 1200px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 60px;
+ text-align: center;
+ }
+
+ .thumb {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 28px;
+ }
+
+ .heading {
+ color: #FFF;
+ }
+
+ .content {
+ text-align: center;
+ color: #FFF;
+ }
+
+ .actions {
+ display: flex;
+ justify-content: center;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Chain/Cursor/index.tsx b/src/modules/landing-rollback/Componets/Chain/Cursor/index.tsx
new file mode 100644
index 000000000..2fe86f143
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/Cursor/index.tsx
@@ -0,0 +1,60 @@
+import s from './styles.module.scss';
+import useCursorStore from '@/modules/landing/Componets/Chain/Cursor/useCursorStore';
+import { PropsWithChildren, useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+
+interface IProp extends PropsWithChildren {
+};
+export default function Cursor({ children }: IProp) {
+ const refContent = useRef(null);
+ const refCursor = useRef(null);
+
+ const { isShow } = useCursorStore();
+
+ useEffect(() => {
+ if (isShow) {
+ gsap.to(refCursor.current, { opacity: 1, ease: 'power3.out', duration: .4 });
+ } else {
+ gsap.to(refCursor.current, { opacity: 0, ease: 'power3.out', duration: .4 });
+ }
+ }, [isShow]);
+
+ useEffect(() => {
+
+ const quickX = gsap.quickTo(refCursor.current, 'x', { duration: 0.4, ease: 'power3' });
+ const quickY = gsap.quickTo(refCursor.current, 'y', { duration: 0.4, ease: 'power3' });
+
+ if (refContent.current) {
+ const rectWrap = refContent.current.getBoundingClientRect();
+ quickY(rectWrap.height / 2);
+ quickX(rectWrap.width / 2);
+ }
+
+ const onMouseMove = (e: MouseEvent) => {
+ if (!refContent.current) return;
+
+ const rectWrap = refContent.current.getBoundingClientRect();
+ const disX = e.clientX - rectWrap.left + 10;
+ const disY = e.clientY - rectWrap.top + 10;
+
+ quickX(disX);
+ quickY(disY);
+ };
+
+ window.addEventListener('mousemove', onMouseMove);
+ return () => {
+ window.removeEventListener('mousemove', onMouseMove);
+ };
+ }, []);
+
+ return (
+ {
+ children
+ }
+
+
+
Learn more
+
+
+
);
+}
diff --git a/src/modules/landing-rollback/Componets/Chain/Cursor/styles.module.scss b/src/modules/landing-rollback/Componets/Chain/Cursor/styles.module.scss
new file mode 100644
index 000000000..c7b3c7f15
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/Cursor/styles.module.scss
@@ -0,0 +1,32 @@
+.wrapCursor {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+}
+
+.cursor {
+ position: absolute;
+ pointer-events: none;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ background: #fff;
+ will-change: opacity, transform;
+
+ &_inner {
+ padding: 6px;
+ display: flex;
+ color: #000;
+ text-align: center;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ align-items: center;
+ }
+
+ &_text {
+ padding-left: 12px;
+ padding-right: 12px;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Chain/Cursor/useCursorStore.ts b/src/modules/landing-rollback/Componets/Chain/Cursor/useCursorStore.ts
new file mode 100644
index 000000000..ffd5c14b4
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/Cursor/useCursorStore.ts
@@ -0,0 +1,14 @@
+import { create } from 'zustand';
+
+interface IProp {
+ isShow: boolean,
+ show: ()=>void
+ hide: ()=>void
+}
+const useCursorStore =create((set) => ({
+ isShow: false,
+ show: () => set({ isShow: true }),
+ hide: () => set({ isShow: false }),
+}))
+
+export default useCursorStore;
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/index.tsx b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/index.tsx
new file mode 100644
index 000000000..e76506288
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/index.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import s from './styles.module.scss';
+import Image from 'next/image';
+import Chars from '@/interactive/Chars';
+import Fade from '@/interactive/Fade';
+
+type TSectionBottom = {
+ title: string;
+ link?: string;
+ data?: {
+ left: string;
+ right: string;
+ icon: string;
+ }[];
+ bgBottom: string;
+};
+
+export default function SectionBottom({
+ data,
+ delay,
+ isLaunch = false,
+}: {
+ data: TSectionBottom;
+ delay: number;
+ isLaunch?: boolean;
+ subText?: string;
+}) {
+ return (
+
+
+
+ {data.title}
+
+
+
+ {!data?.link && !isLaunch && 'Coming soon'}
+
+
+
+
+ {!isLaunch && (
+
+ {data.data &&
+ data.data.map((item, index) => {
+ return (
+
+
+
+
+
+ {item.left}
+
+
+
+ {item.right}
+
+
+
+ );
+ })}
+
+ )}
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/styles.module.scss b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/styles.module.scss
new file mode 100644
index 000000000..ecbae61b1
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/styles.module.scss
@@ -0,0 +1,127 @@
+.sectionBottom {
+ padding: 51px 24px 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ min-height: 142px;
+ justify-content: center;
+
+ &_title {
+ //display: flex;
+ //flex-direction: row;
+ //justify-content: space-between;
+
+ &_main {
+ font-size: 24px;
+ color: #fff;
+ font-weight: 500;
+ line-height: 26.4px;
+
+ &_isLaunch {
+
+ text-align: center;
+ padding: 0;
+ @include is-pc{
+ padding: 0 40px;
+ padding-bottom: 24px;
+ }
+ }
+
+ @include is-tablet {
+ font-size: 20px;
+ }
+
+ @include is-mobile {
+ font-size: 18px;
+ line-height: 19.8px;
+ }
+ }
+
+ &_sub {
+ line-height: 25.2px;
+ font-size: 18px;
+ color: rgba(255, 255, 255, 0.7);
+
+ @include is-tablet {
+ font-size: 16px;
+ }
+
+ @include is-mobile {
+ font-size: 14px;
+ line-height: 19.6px;
+ }
+ }
+ }
+
+ &_listInfo {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ &_item {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ &__left {
+ display: flex;
+ flex-direction: row;
+ gap: 12px;
+
+ &_text {
+ font-size: 18px;
+ line-height: 25.2px;
+ color: rgba(255, 255, 255, 0.7);
+
+ @include is-tablet {
+ font-size: 14px;
+ }
+
+ @include is-mobile {
+ font-size: 14px;
+ line-height: 19.6px;
+ }
+ }
+ }
+
+ &__right {
+ font-size: 18px;
+ line-height: 25.2px;
+ font-weight: 400;
+
+ @include is-mobile {
+ font-size: 14px;
+ line-height: 19.6px;
+ }
+
+ @include is-tablet {
+ font-size: 14px;
+ }
+ }
+ }
+ }
+
+ &__007659 {
+ background: #007659;
+ }
+
+ &__A05700 {
+ background: #a05700;
+ }
+
+ &__0074BB {
+ background: #0074bb;
+ }
+
+ &__EBEFF7 {
+ background: #ebeff7;
+ }
+
+ &__303030 {
+ background: #303030;
+ }
+
+ &__7D8AA7 {
+ background: #7d8aa7;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/index.tsx b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/index.tsx
new file mode 100644
index 000000000..756d80722
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/index.tsx
@@ -0,0 +1,43 @@
+import Image, { StaticImageData } from 'next/image';
+import React from 'react';
+import s from './styles.module.scss';
+
+import cn from 'classnames';
+import Scale from '@/interactive/Scale';
+
+type TSectionTop = {
+ img: StaticImageData;
+ color: string;
+ stud: number;
+ delay: number;
+};
+
+export default function SectionTop({ img, color, stud, delay }: TSectionTop) {
+ const listStud = Array.from({ length: stud }, () => 0);
+
+ return (
+
+
+
+
+
+
+
+ {listStud.map((item, index) => {
+ return (
+
+ );
+ })}
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/styles.module.scss b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/styles.module.scss
new file mode 100644
index 000000000..ebeb98d21
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/styles.module.scss
@@ -0,0 +1,58 @@
+.sectionTop {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 1.315;
+
+ &_wrap {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ overflow: hidden;
+ }
+
+ &_img {
+ object-fit: contain;
+ width: 100%;
+ height: 100%;
+ }
+
+ &_studs {
+ position: absolute;
+ top: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ width: 100%;
+ height: 50px;
+
+ &_item {
+ width: 64.44px;
+ height: 31px;
+ border-bottom-left-radius: 16px;
+ border-bottom-right-radius: 16px;
+ }
+ }
+}
+
+.bg__FFD73B {
+ background: #ffd73b;
+}
+
+.bg__35CCA6 {
+ background: #35cca6;
+}
+
+.bg__4DBDE0 {
+ background: #4dbde0;
+}
+
+.bg__000 {
+ background: #000;
+}
+
+.bg__EBEFF7 {
+ background: #ebeff7;
+}
+.bg__B4EDFF {
+ background: #b4edff;
+}
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/index.tsx b/src/modules/landing-rollback/Componets/Chain/ItemChain/index.tsx
new file mode 100644
index 000000000..fde4912f2
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/ItemChain/index.tsx
@@ -0,0 +1,60 @@
+import { StaticImageData } from 'next/image';
+import React from 'react';
+import s from './styles.module.scss';
+import SectionTop from './SectionTop';
+import SectionBottom from './SectionBottom';
+import Fade from '@/interactive/Fade';
+import useCursorStore from '@/modules/landing/Componets/Chain/Cursor/useCursorStore';
+
+type TItemChain = {
+ img: StaticImageData;
+ title: string;
+ stud: number;
+ link?: string;
+ data?: {
+ left: string;
+ right: string;
+ icon: string;
+ }[];
+ bgTop: string;
+ bgBottom: string;
+};
+
+export default function ItemChain({
+ data,
+ delay,
+ isLaunch,
+}: {
+ data: TItemChain;
+ delay: number;
+ isLaunch?: boolean;
+}) {
+ const { img, bgTop, stud, ...dataSectionBottom } = data;
+ const { show, hide } = useCursorStore();
+ return (
+ {
+ data.link && window.open(data.link, '_blank');
+ }}
+ >
+
+
+
+
+ {isLaunch ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/styles.module.scss b/src/modules/landing-rollback/Componets/Chain/ItemChain/styles.module.scss
new file mode 100644
index 000000000..53e566c81
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/ItemChain/styles.module.scss
@@ -0,0 +1,63 @@
+.itemChain {
+ width: fit-content;
+ flex: 1;
+ cursor: pointer;
+
+ &_inner{
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ background-color: #fff;
+ }
+
+ @include is-mobile {
+ width: 90vw;
+ flex: 0 0 auto;
+ padding: 7.64px;
+ flex-grow: 1;
+ }
+
+ @include is-tablet {
+ flex: 0 0 auto;
+ width: 50%;
+ padding: 12px;
+ }
+
+ :global {
+ .fade {
+ width: 100%;
+ }
+
+ .sectionTop_img {
+ transition: transform 0.4s var(--easeOutQuart);
+ }
+ }
+
+ &:hover {
+ :global {
+ .sectionTop_img {
+ transform: scale(1.2);
+ }
+ }
+ }
+}
+
+.itemLaunch {
+ width: 100%;
+ gap: unset;
+}
+.itemLaunch:first-child {
+ grid-column: span 2;
+ grid-column-start: 1;
+}
+.itemLaunch:nth-child(3n) {
+ grid-column: span 2;
+ grid-column-start: 2;
+ @include is-tablet{
+ grid-column-start: 1;
+ }
+
+ @include is-mobile{
+ grid-column-start: 1;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Chain/index.tsx b/src/modules/landing-rollback/Componets/Chain/index.tsx
new file mode 100644
index 000000000..f0b97debb
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/index.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import ItemChain from './ItemChain';
+import s from './styles.module.scss';
+
+import chain_1 from 'public/landing/compress/app-chain.png';
+import chain_2 from 'public/landing/compress/naka-chain.png';
+import chain_3 from 'public/landing/images/arcade-chain.jpg';
+import Chars from '@/interactive/Chars';
+import Fade from '@/interactive/Fade';
+import { Button, HStack } from '@chakra-ui/react';
+import { useRouter } from 'next/navigation';
+import useWindowSize from '@/hooks/useWindowSize';
+import HeroLabel from '../Hero/HeroLabel';
+import Cursor from '@/modules/landing/Componets/Chain/Cursor';
+import HeadingSection from '../HeadingSection';
+
+const DATA_CHAINS = [
+ {
+ img: chain_1,
+ title: 'Alpha Chain',
+ subTitle: '',
+ stud: 1,
+ link: 'https://alpha.wtf',
+ data: [
+ {
+ left: 'Currency',
+ right: 'BVM',
+ icon: '/landing/svg/lego_icon_flat.svg',
+ },
+ {
+ left: 'Use Case',
+ right: 'SocialFi',
+ icon: '/landing/svg/lego_icon_rect.svg',
+ },
+ {
+ left: 'Rollups',
+ right: 'Optimistic, Sovereign',
+ icon: '/landing/svg/lego_icon_rollup.svg',
+ },
+ {
+ left: 'Data Validity',
+ right: 'Bitcoin',
+ icon: '/landing/svg/lego_icon_cube.svg',
+ },
+ {
+ left: 'Data Availability',
+ right: 'Polygon',
+ icon: '/landing/svg/lego_icon_cube.svg',
+ },
+ ],
+
+ bgTop: '35CCA6',
+ bgBottom: '007659',
+ },
+ {
+ img: chain_2,
+ title: 'Naka Chain',
+ stud: 2,
+ link: 'https://nakachain.xyz/',
+ data: [
+ {
+ left: 'Currency',
+ right: 'BTC',
+ icon: '/landing/svg/lego_icon_flat.svg',
+ },
+ {
+ left: 'Use Case',
+ right: 'DeFi',
+ icon: '/landing/svg/lego_icon_rect.svg',
+ },
+ {
+ left: 'Rollups',
+ right: 'Optimistic, Sovereign',
+ icon: '/landing/svg/lego_icon_rollup.svg',
+ },
+ {
+ left: 'Data Validity',
+ right: 'Bitcoin',
+ icon: '/landing/svg/lego_icon_cube.svg',
+ },
+ {
+ left: 'Data Availability',
+ right: 'NearDA',
+ icon: '/landing/svg/lego_icon_cube.svg',
+ },
+ ],
+ bgTop: 'FFD73B',
+ bgBottom: 'A05700',
+ },
+ {
+ img: chain_3,
+ title: 'Arcade Chain',
+ stud: 3,
+ link: 'https://bitcoinarcade.xyz/',
+ data: [
+ {
+ left: 'Currency',
+ right: 'GAME',
+ icon: '/landing/svg/lego_icon_flat.svg',
+ },
+ {
+ left: 'Use Case',
+ right: 'GameFi',
+ icon: '/landing/svg/lego_icon_rect.svg',
+ },
+ {
+ left: 'Rollups',
+ right: 'Optimistic, Sovereign',
+ icon: '/landing/svg/lego_icon_rollup.svg',
+ },
+ {
+ left: 'Data Validity',
+ right: 'Bitcoin',
+ icon: '/landing/svg/lego_icon_cube.svg',
+ },
+ {
+ left: 'Data Availability',
+ right: 'EigenDA',
+ icon: '/landing/svg/lego_icon_cube.svg',
+ },
+ ],
+ bgTop: '4DBDE0',
+ bgBottom: '0074BB',
+ },
+];
+
+export default function Chain() {
+ const router = useRouter();
+ const { mobileScreen, tabletScreen } = useWindowSize();
+ return (
+
+
+
+
+ Case studies
+
+
+ Say hello to the first modular Bitcoin L2 blockchains powered by BVM.
+
+
+
+
+ {
+ router.push('/blockchains/customize');
+ }}
+ >
+ {`Build your Bitcoin L2`}
+
+
+
+
+ {DATA_CHAINS.map((item, index) => {
+ return ;
+ })}
+
+
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Chain/styles.module.scss b/src/modules/landing-rollback/Componets/Chain/styles.module.scss
new file mode 100644
index 000000000..db9751d62
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Chain/styles.module.scss
@@ -0,0 +1,68 @@
+.listChains {
+ display: flex;
+ flex-direction: row;
+ gap: 36px;
+ flex-wrap: wrap;
+ overflow: hidden;
+
+ @include is-mobile {
+ width: 100%;
+ padding: 0 20px;
+ gap: 8px;
+ }
+
+ @include is-tablet {
+ gap: 0;
+ justify-content: center;
+ }
+}
+
+.chain {
+ background: #f6f6f6;
+ overflow: hidden;
+
+ &_case {
+ color: #000;
+ text-align: center;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: normal;
+ text-transform: uppercase;
+ padding-bottom: 16px;
+ }
+
+ &_label {
+ @include is-mobile {
+ padding-top: 24px;
+ padding-bottom: 40px;
+ }
+ @include is-tablet {
+ padding-top: 24px;
+ padding-bottom: 40px;
+ }
+ }
+
+ &_heading {
+ max-width: 980px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ &_inner {
+ background: #f6f6f6;
+ padding: 100px 0;
+
+ @include is-mobile {
+ position: relative;
+ overflow: hidden;
+ left: -20px;
+ width: calc(100% + 40px);
+ padding-top: 32px;
+ padding-bottom: 30px;
+ }
+ }
+
+ &_label {
+ background: #fff;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/index.tsx b/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/index.tsx
new file mode 100644
index 000000000..fe00af6b1
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/index.tsx
@@ -0,0 +1,46 @@
+import SvgInset from '@/components/SvgInset';
+import useWindowSize from '@/hooks/useWindowSize';
+import Fade from '@/interactive/Fade';
+import s from './styles.module.scss';
+
+export default function ItemCommunity({
+ content,
+ delay,
+}: {
+ content: string;
+ delay: number;
+}) {
+ const { mobileScreen } = useWindowSize();
+ return (
+
+
+
+
+
+ {content}
+ {!mobileScreen && (
+
+ )}
+
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/styles.module.scss b/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/styles.module.scss
new file mode 100644
index 000000000..b298f3c3d
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/styles.module.scss
@@ -0,0 +1,99 @@
+.itemCommunity {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ align-items: center;
+ height: 74px;
+ @include is-mobile {
+ border: 1px solid #ff7e214d;
+ background-color: #ff7e210f;
+ height: auto;
+ padding: 12px 0;
+ padding-left: 10px;
+ align-items: start;
+ }
+ @include is-tablet {
+ height: 100%;
+ }
+ &_inner {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ align-items: center;
+ height: 74px;
+
+ @include is-mobile {
+ height: auto;
+ align-items: start;
+ }
+ @include is-tablet {
+ height: 100%;
+ }
+ }
+
+ &_lego {
+ background: #6abd00;
+ width: 74px;
+ height: 74px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ @include is-mobile {
+ background-color: transparent;
+ width: 20px;
+ height: 20px;
+ }
+
+ &_stud {
+ position: absolute;
+ left: 99%;
+ background-color: #6abd00;
+ width: 10px;
+ height: 25px;
+ top: 50%;
+ border-top-right-radius: 6px;
+ border-bottom-right-radius: 6px;
+ transform: translateY(-50%);
+
+ @include is-mobile {
+ background-color: transparent;
+ }
+ }
+
+ svg {
+ width: 18.92px;
+ height: 15.5px;
+ path {
+ @include is-mobile {
+ fill: #6abd00;
+ }
+ }
+ }
+ }
+ &_content {
+ padding-left: 24px;
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ height: 100%;
+ line-height: 26px;
+ font-weight: 400;
+ flex: 1;
+ position: relative;
+ @include is-mobile {
+ padding-left: 10px;
+ font-size: 14px;
+ line-height: 20px;
+ }
+ &_frame {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ svg {
+ height: 100%;
+ }
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Comunity/index.tsx b/src/modules/landing-rollback/Componets/Comunity/index.tsx
new file mode 100644
index 000000000..33ed9cb50
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Comunity/index.tsx
@@ -0,0 +1,61 @@
+import Chars from '@/interactive/Chars';
+import Lines from '@/interactive/Lines';
+import Scale from '@/interactive/Scale';
+import community_img from '@/public/landing/compress/why-launch.jpg';
+import Image from 'next/image';
+import ItemCommunity from './ItemCommunity';
+import s from './styles.module.scss';
+
+const DATA_COMMUNITY = [
+ ' Earn sequencer fees',
+ 'Offer low transaction fees to your users',
+ 'Have dedicated throughput',
+ 'Complete control over gas fee, gas block limit, and withdrawal periods',
+];
+
+export default function Comunity() {
+ return (
+
+
+
+
+
+
+ Why launch your own blockchain?
+
+
+
+
+
+
+
+
+
+ Whatever your vision — a dapp, a fully onchain game, a DEX, or
+ an ecosystem — there are many benefits of running your own
+ blockchain.
+
+
+
+ {DATA_COMMUNITY.map((item, index) => {
+ return (
+
+ );
+ })}
+
+
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Comunity/styles.module.scss b/src/modules/landing-rollback/Componets/Comunity/styles.module.scss
new file mode 100644
index 000000000..1d1a13a54
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Comunity/styles.module.scss
@@ -0,0 +1,114 @@
+.community {
+ padding: 140px 0;
+ background-color: #fff;
+ &_left {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 110px;
+
+ @include is-mobile {
+ gap: unset;
+ }
+ @include is-tablet {
+ gap: 32px;
+ }
+ }
+
+ @include is-mobile {
+ padding: 40px 0;
+ }
+
+ &_right {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ &_inner {
+ display: flex;
+ gap: 127px;
+ justify-content: space-between;
+ flex-direction: row;
+ @include is-mobile {
+ gap: 24px;
+ flex-direction: column;
+ }
+ @include is-tablet {
+ flex-direction: column;
+ gap: 40px;
+ }
+ &_bottom {
+ color: #000;
+ gap: 128px;
+ display: flex;
+ flex-direction: row;
+
+ &_img {
+ width: 100%;
+
+ @include is-mobile {
+ display: none;
+ }
+ }
+ &_content {
+ color: #000;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100;
+
+ @include is-mobile {
+ padding-top: 24px;
+ }
+ @include is-tablet {
+ padding-top: 32px;
+ }
+ }
+ }
+
+ &_top {
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ gap: 128px;
+
+ @include is-mobile {
+ gap: 12px;
+ flex-direction: column;
+ }
+ &_heading {
+ color: #000;
+ gap: 16px;
+ font-size: 48px;
+ font-weight: 400;
+ line-height: 57.6px;
+ flex-shrink: 0;
+ width: 736px;
+
+ @include is-mobile {
+ width: 100%;
+ font-size: 28px;
+ line-height: 39.2px;
+ }
+ span {
+ color: #fa4e0e;
+ }
+ }
+
+ &_text {
+ font-size: 24px;
+ color: #000;
+ line-height: 36px;
+ font-weight: 400;
+ width: 100%;
+ @include is-mobile {
+ font-size: 16px;
+ line-height: 24px;
+ }
+ }
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/ContentSection/index.tsx b/src/modules/landing-rollback/Componets/ContentSection/index.tsx
new file mode 100644
index 000000000..592a19747
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ContentSection/index.tsx
@@ -0,0 +1,17 @@
+import s from './styles.module.scss';
+import React, { PropsWithChildren } from 'react';
+import Lines from '@/interactive/Lines';
+
+interface IProp extends PropsWithChildren {
+ className: string;
+};
+export default function ContentSection({
+ className,
+ children,
+ }: IProp) {
+
+
+ return
+ {children}
+
;
+}
diff --git a/src/modules/landing-rollback/Componets/ContentSection/styles.module.scss b/src/modules/landing-rollback/Componets/ContentSection/styles.module.scss
new file mode 100644
index 000000000..d0f0ff0f1
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ContentSection/styles.module.scss
@@ -0,0 +1,16 @@
+.content {
+ color: #fff;
+ text-align: center;
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 36px;
+ margin-bottom: 24px;
+
+ @include is-mobile {
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Ecosystem/index.tsx b/src/modules/landing-rollback/Componets/Ecosystem/index.tsx
new file mode 100644
index 000000000..1f0b47c7c
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Ecosystem/index.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import s from './styles.module.scss';
+import ecosystem1 from '@/public/landing/images/ecosystem1.png';
+import ecosystem2 from '@/public/landing/images/ecosystem2.png';
+import ecosystem3 from '@/public/landing/images/ecosystem3.png';
+import ecosystem4 from '@/public/landing/images/ecosystem4.png';
+
+import ItemChain from '../Chain/ItemChain';
+import HeadingSection from '@/modules/landing/Componets/HeadingSection';
+import ContentSection from '@/modules/landing/Componets/ContentSection';
+import Chars from '@/interactive/Chars';
+import Lines from '@/interactive/Lines';
+
+const DATA_ECOSYSTEM = [
+ {
+ img: ecosystem1,
+ title: 'Earn sequencer fees',
+ stud: 2,
+ bgTop: 'FFD73B',
+ bgBottom: 'A05700',
+ },
+ {
+ img: ecosystem2,
+ title: 'Have 100% dedicated throughput',
+ stud: 2,
+ bgTop: 'B4EDFF',
+ bgBottom: '0074BB',
+ },
+ {
+ img: ecosystem3,
+ title: 'Customize specifically for your use case',
+ stud: 2,
+ bgTop: '000',
+ bgBottom: '303030',
+ },
+ {
+ img: ecosystem4,
+ title: 'Receive airdrop from BVM builder reward programs',
+ stud: 2,
+ bgTop: 'EBEFF7',
+ bgBottom: '7D8AA7',
+ },
+];
+export default function Ecosystem() {
+ return (
+
+
+
+
+
+ Why launch your own modular Bitcoin L2 blockchain ?
+
+
+
+
+ Whatever your vision — a dapp, a fully onchain game, a DEX, or an ecosystem — there are many benefits of
+ running your own Bitcoin L2 blockchain.
+
+
+
+
+
+ {DATA_ECOSYSTEM.map((item, index) => {
+ return ;
+ })}
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Ecosystem/styles.module.scss b/src/modules/landing-rollback/Componets/Ecosystem/styles.module.scss
new file mode 100644
index 000000000..fdf1293e8
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Ecosystem/styles.module.scss
@@ -0,0 +1,39 @@
+.ecosystem {
+ padding: 140px 0;
+ background: #eee;
+ overflow: hidden;
+
+ @include is-mobile{
+ padding: 80px 0;
+ }
+
+ &_heading {
+ &_title {
+ color: #000;
+ text-align: left;
+ }
+
+ &_description {
+ max-width: 850px;
+ text-align: left !important;
+ color: #000;
+ }
+ }
+
+ &_content {
+ padding-top: 60px;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 36px;
+
+ @include is-mobile{
+ padding-top: 24px;
+ grid-template-columns: repeat(1, 1fr);
+ }
+ @include is-tablet{
+ gap: 0;
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/HeadingSection/index.tsx b/src/modules/landing-rollback/Componets/HeadingSection/index.tsx
new file mode 100644
index 000000000..0a1b3113e
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/HeadingSection/index.tsx
@@ -0,0 +1,9 @@
+import s from './styles.module.scss';
+import React, { PropsWithChildren } from 'react';
+
+interface IProp extends PropsWithChildren {
+ className: string;
+}
+export default function HeadingSection({ className, children }: IProp) {
+ return {children} ;
+}
diff --git a/src/modules/landing-rollback/Componets/HeadingSection/styles.module.scss b/src/modules/landing-rollback/Componets/HeadingSection/styles.module.scss
new file mode 100644
index 000000000..629c99d0b
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/HeadingSection/styles.module.scss
@@ -0,0 +1,22 @@
+.heading {
+ text-align: center;
+ color: #000;
+ font-size: 48px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 120%;
+ margin-bottom: 20px;
+
+ @include is-mobile {
+ font-size: 28px;
+ font-weight: 400;
+ line-height: 140%;
+ margin-bottom: 12px;
+ }
+
+ b {
+ font-weight: normal;
+ color: #fa4e0e;
+ display: inline !important;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/HeadingText/index.tsx b/src/modules/landing-rollback/Componets/HeadingText/index.tsx
new file mode 100644
index 000000000..71505b6d6
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/HeadingText/index.tsx
@@ -0,0 +1,71 @@
+import React, { PropsWithChildren, useEffect, useRef } from 'react';
+import useAnimationStore from '@/stores/useAnimationStore';
+import s from './styles.module.scss';
+import { Portal } from '@chakra-ui/portal';
+
+interface IProp extends PropsWithChildren {
+ headings: string[];
+ className: string
+}
+
+export default function HeadingText({ children, headings, className }: IProp) {
+ const refSpan = useRef(null);
+ const reftime = useRef();
+ const { play } = useAnimationStore();
+
+ useEffect(() => {
+ if (!refSpan.current || !play) return;
+
+ const sentences = headings;
+
+ let currentIndex = 0;
+ let offset = 0;
+ const sentenceElement = refSpan.current;
+ let forwards = true;
+ let skipCount = 0;
+ const skipDelay = 30;
+ const speed = 70;
+
+ const updateSentence = () => {
+ if (!sentenceElement) return;
+ sentenceElement.innerHTML = sentences[currentIndex].substring(
+ 0,
+ offset,
+ );
+ };
+
+ const handleAnimation = () => {
+ if (forwards) {
+ if (offset >= sentences[currentIndex].length) {
+ if (++skipCount === skipDelay) {
+ forwards = false;
+ skipCount = 0;
+ }
+ }
+ } else if (offset === 0) {
+ forwards = true;
+ currentIndex = (currentIndex + 1) % sentences.length;
+ }
+
+ if (skipCount === 0) {
+ forwards ? offset++ : offset--;
+ }
+
+ updateSentence();
+ };
+
+ reftime.current = setInterval(handleAnimation, speed);
+ return () => {
+ clearInterval(reftime.current);
+ };
+ }, [play]);
+
+
+ return (
+
+ {children}{' '}
+
+ _
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/HeadingText/styles.module.scss b/src/modules/landing-rollback/Componets/HeadingText/styles.module.scss
new file mode 100644
index 000000000..a36b32cbe
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/HeadingText/styles.module.scss
@@ -0,0 +1,18 @@
+.heading {
+ &_mouse{
+ animation: loopFrames .75s ease-out infinite;
+ color: #fa4e0e;
+ }
+}
+
+@keyframes loopFrames {
+ 0%{
+ opacity: 0;
+ }
+ 50%{
+ opacity: 1;
+ }
+ 100%{
+ opacity: 0;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/HeadingTextTyping/index.tsx b/src/modules/landing-rollback/Componets/HeadingTextTyping/index.tsx
new file mode 100644
index 000000000..1f806addd
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/HeadingTextTyping/index.tsx
@@ -0,0 +1,125 @@
+import React, { PropsWithChildren, useEffect, useState, useRef } from 'react';
+import s from './styles.module.scss';
+// import useLabStore from '../useLabStore';
+
+interface IProp extends PropsWithChildren {
+ first: string;
+ headings: string[];
+ headingsStyles: any[];
+ last: string;
+}
+
+export default function HeadingTextTyping({ headings, headingsStyles, first, last }: IProp) {
+ const refSpan = useRef(null);
+ const refSpanFirst = useRef(null);
+ const reftime = useRef();
+ const reftimeDelayFirst = useRef();
+
+ // const { isFirst, setIsFirst } = useLabStore();
+ const isFirst = false;
+ const [run, setRun] = useState(isFirst);
+
+ useEffect(() => {
+ if (!refSpan.current || !run) return;
+
+ const sentences = headings;
+
+ let currentIndex = 0;
+ let offset = 0;
+ const sentenceElement = refSpan.current;
+ let forwards = true;
+ let skipCount = 0;
+ const skipDelay = 30;
+ const speed = 70;
+
+ const updateSentence = () => {
+ sentenceElement.textContent = (sentences[currentIndex] as string).substring(
+ 0,
+ offset
+ );
+ sentenceElement.className = headingsStyles[currentIndex] as string;
+ };
+
+ const handleAnimation = () => {
+ if (forwards) {
+ if (offset >= (sentences[currentIndex] as string).length) {
+ // setIsFirst();
+ if (++skipCount === skipDelay) {
+ forwards = false;
+ skipCount = 0;
+ }
+ }
+ } else if (offset === 0) {
+ forwards = true;
+ currentIndex = (currentIndex + 1) % sentences.length;
+ }
+
+ if (skipCount === 0) {
+ forwards ? offset++ : offset--;
+ }
+
+ updateSentence();
+ };
+
+ reftime.current = setInterval(handleAnimation, speed);
+ return () => {
+ clearInterval(reftime.current);
+ };
+ }, [run]);
+
+ useEffect(() => {
+ if (!refSpanFirst.current) return;
+
+ const sentences = [first, last];
+
+ let currentIndex = 0;
+ let offset = 0;
+ const sentenceElement = refSpanFirst.current;
+ // let forwards = true;
+ let skipCount = 0;
+ // const skipDelay = 30;
+ const speed = 70;
+
+ const updateSentence = () => {
+ sentenceElement.textContent = (sentences[currentIndex] as string).substring(
+ 0,
+ offset
+ );
+ };
+
+ const handleAnimation = () => {
+ if (offset >= (sentences[currentIndex] as string).length) setRun(true);
+
+ if (skipCount === 0) {
+ offset++;
+ }
+
+ updateSentence();
+ };
+
+ reftimeDelayFirst.current = setTimeout(() => {
+ reftime.current = setInterval(handleAnimation, speed);
+ }, 200);
+ return () => {
+ reftimeDelayFirst.current && clearTimeout(reftimeDelayFirst.current);
+ reftime.current && clearInterval(reftime.current);
+ };
+ }, []);
+
+ return (
+
+ {!run && (
+ <>
+
+ _
+ >
+ )}
+ {run && first}
+ {/* */}
+
+ {run && _ }
+ {/* */}
+ {run && last}
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/HeadingTextTyping/styles.module.scss b/src/modules/landing-rollback/Componets/HeadingTextTyping/styles.module.scss
new file mode 100644
index 000000000..81d9a9fbb
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/HeadingTextTyping/styles.module.scss
@@ -0,0 +1,17 @@
+.heading {
+ &_mouse{
+ animation: loopFrames .75s ease-out infinite;
+ }
+}
+
+@keyframes loopFrames {
+ 0%{
+ opacity: 0;
+ }
+ 50%{
+ opacity: 1;
+ }
+ 100%{
+ opacity: 0;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/HeadingTextV2/index.tsx b/src/modules/landing-rollback/Componets/HeadingTextV2/index.tsx
new file mode 100644
index 000000000..bc03a399a
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/HeadingTextV2/index.tsx
@@ -0,0 +1,65 @@
+import React, { PropsWithChildren, useEffect, useRef } from 'react';
+import s from './styles.module.scss';
+import { gsap } from 'gsap';
+import useAnimationStore from '@/stores/useAnimationStore';
+
+interface IProp extends PropsWithChildren {
+ className: string;
+ headings: string[];
+}
+
+export default function HeadingTextV2({ headings, className, children }: IProp) {
+ const { play } = useAnimationStore();
+ const refCOntent = useRef(null);
+ const list = useRef();
+ const refNext = useRef(-1);
+ const refLoop = useRef();
+ const refTime = useRef();
+ const refMask = useRef(null);
+
+ useEffect(() => {
+ if (!refCOntent.current) return;
+ list.current = refCOntent.current.querySelectorAll('.js-el');
+ gsap.set(list.current, { yPercent: 100 });
+ }, []);
+
+
+ const nextSlide = () => {
+ const old = refNext.current;
+ refNext.current++;
+ if (refNext.current >= list.current.length) {
+ refNext.current = 0;
+ }
+
+
+ refMask.current && gsap.to(refMask.current, {width: list.current[refNext.current].scrollWidth, ease: 'power3.out', duration: .6});
+ gsap.to(list.current[old], { yPercent: -100, ease: 'power3.out', duration: .6 });
+ gsap.fromTo(list.current[refNext.current], { yPercent: 100 }, { yPercent: 0, ease: 'power3.out', duration: .6 });
+
+ };
+
+ useEffect(() => {
+ if (!play) return;
+ refTime.current = setTimeout(nextSlide, 500);
+ refLoop.current = setInterval(nextSlide, 2000);
+ return () => {
+ clearInterval(refLoop.current);
+ clearTimeout(refTime.current);
+ };
+ }, [play]);
+
+ return (
+
+ {children}
+ {' '}
+
+ {
+ headings.map((h, index) => {
+ return {h} ;
+ })
+ }
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/HeadingTextV2/styles.module.scss b/src/modules/landing-rollback/Componets/HeadingTextV2/styles.module.scss
new file mode 100644
index 000000000..8f56a5dda
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/HeadingTextV2/styles.module.scss
@@ -0,0 +1,20 @@
+.heading {
+
+ &_mask {
+ position: relative;
+ display: block;
+ overflow: hidden;
+
+ &_el:not(:first-child) {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: max-content;
+ }
+
+ &_el {
+ display: block;
+ white-space: nowrap;
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/Bg/index.tsx b/src/modules/landing-rollback/Componets/Hero/Bg/index.tsx
new file mode 100644
index 000000000..303053aa5
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/Bg/index.tsx
@@ -0,0 +1,17 @@
+import s from './styles.module.scss';
+import Image from 'next/image';
+import useAnimationStore from '@/stores/useAnimationStore';
+import { useEffect, useRef } from 'react';
+
+export default function BgHero() {
+ const { play } = useAnimationStore();
+ const refVideo = useRef(null);
+
+ useEffect(() => {
+ if (play) refVideo.current?.play();
+ }, [play]);
+ return
+
+
;
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/Bg/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/Bg/styles.module.scss
new file mode 100644
index 000000000..16494e56d
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/Bg/styles.module.scss
@@ -0,0 +1,14 @@
+.bgHero {
+ height: 100vh;
+ height: 100svh;
+ width: 100%;
+ background: #509e4e;
+
+ img,
+ video {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ aspect-ratio: 16/9;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/Content/index.tsx b/src/modules/landing-rollback/Componets/Hero/Content/index.tsx
new file mode 100644
index 000000000..52fc902de
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/Content/index.tsx
@@ -0,0 +1,17 @@
+import BorderLine from '@/interactive/BorderLine';
+import Lines from '@/interactive/Lines';
+import s from './styles.module.scss';
+
+export default function HeroContent() {
+ return (
+
+
+
+ BVM is the first modular blockchain metaprotocol that lets anyone
+ launch their own Bitcoin L2 blockchain in a few clicks.
+
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/Content/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/Content/styles.module.scss
new file mode 100644
index 000000000..7f17ec34d
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/Content/styles.module.scss
@@ -0,0 +1,61 @@
+.heroContent {
+ max-width: 480px;
+ font-size: 24px;
+ line-height: 36px;
+ padding-bottom: 28px;
+
+ @include is-mobile {
+ width: 100%;
+ font-size: 16px;
+ line-height: 150%;
+ }
+ @include is-tablet {
+ max-width: unset;
+ font-size: 20px;
+ width: 100%;
+ }
+
+ &_content {
+ color: #fff;
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%;
+
+ @include is-tablet{
+ font-size: 20px;
+ }
+
+ @include is-mobile {
+ font-size: 16px;
+ }
+
+ }
+
+ &_inner{
+ padding-bottom: 28px;
+ }
+
+ &_lists {
+ padding-left: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+ &_itemSub {
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ color: #fff;
+
+ &::before {
+ margin-left: -4px;
+ content: '';
+ }
+
+ &_hightLight {
+ color: rgba(255, 255, 255, 0.7);
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/HeroLabel/index.tsx b/src/modules/landing-rollback/Componets/Hero/HeroLabel/index.tsx
new file mode 100644
index 000000000..ff1124415
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/HeroLabel/index.tsx
@@ -0,0 +1,65 @@
+import s from './styles.module.scss';
+import ItemHero from '@/modules/landing/Componets/Hero/ItemHero';
+import Image from 'next/image';
+import Fade from '@/interactive/Fade';
+
+const DATA_HERO = [
+ {
+ icon: '/landing/svg/lego_coin.svg',
+ title: 'Bitcoin',
+ },
+ {
+ icon: '/landing/svg/lego_optimism.svg',
+ title: 'Optimism',
+ },
+ {
+ icon: '/landing/svg/lego_celestia.svg',
+ title: 'Celestia',
+ },
+ {
+ icon: '/landing/svg/lego_polygon.svg',
+ title: 'Polygon',
+ },
+ {
+ icon: '/landing/uni-v2.svg',
+ title: 'Uniswap',
+ },
+ {
+ icon: '/landing/ic-ordinal.svg',
+ title: 'Ordinals',
+ },
+ {
+ icon: '/landing/ic-near.svg',
+ title: 'Near',
+ },
+];
+
+const DELAY = 1.8;
+
+export default function HeroLabel({ isMobile }: { isMobile?: boolean }) {
+ const delay = !isMobile ? DELAY : 0;
+ return (
+
+
+
+
+
+
+ Powered by the best-of-breed modules
+
+
+
+
+ {DATA_HERO.map((item, index) => {
+ return ;
+ })}
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/HeroLabel/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/HeroLabel/styles.module.scss
new file mode 100644
index 000000000..39688892d
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/HeroLabel/styles.module.scss
@@ -0,0 +1,69 @@
+.heroLabel {
+
+ padding-top: 48px;
+ padding-bottom: 48px;
+
+ @include is-pc {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ .inner{
+ display: flex;
+ gap: 12px;
+ @include is-min-table{
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ @include is-mobile{
+ flex-direction: column;
+ }
+ }
+
+
+ &_content {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 12px;
+
+ @include is-mobile {
+ flex-direction: column;
+ justify-content: center;
+ gap: 8px;
+ }
+
+ @include is-tablet {
+ flex-direction: column;
+ justify-content: center;
+ gap: 8px;
+ }
+
+ &_text {
+ font-size: 20px;
+ line-height: 36px;
+ font-weight: 400;
+ color: #fff;
+
+ @include is-mobile {
+ color: #000;
+ font-size: 16px;
+ line-height: 24px;
+ }
+ @include is-tablet {
+ color: #000;
+ }
+ }
+ }
+
+ &_listHero {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 4px;
+ @include is-mobile {
+ justify-content: center;
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/ItemHero/index.tsx b/src/modules/landing-rollback/Componets/Hero/ItemHero/index.tsx
new file mode 100644
index 000000000..6bf7d6ed0
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/ItemHero/index.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import s from './styles.module.scss';
+import Image from 'next/image';
+import Fade from '@/interactive/Fade';
+
+type TItemHero = {
+ icon: string;
+ title: string;
+};
+
+export default function ItemHero({
+ data,
+ delay,
+}: {
+ data: TItemHero;
+ delay: number;
+}) {
+ return (
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/ItemHero/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/ItemHero/styles.module.scss
new file mode 100644
index 000000000..de87ece0b
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/ItemHero/styles.module.scss
@@ -0,0 +1,64 @@
+.itemHero {
+ position: relative;
+
+ &_inner {
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #ffffff33;
+ height: 80px;
+ width: fit-content;
+ padding-left: 12px;
+ padding-right: 12px;
+
+ @include is-min-table{
+ width: 90px;
+ padding-left: 0px;
+ padding-right: 0px;
+ aspect-ratio: 1;
+ height: 80px;
+ }
+
+ @include is-mobile {
+ background-color: #f6f6f6;
+ width: calc(33vw - 30px);
+ align-items: center;
+ aspect-ratio: 1;
+ }
+
+ @include is-tablet {
+ background-color: #f6f6f6;
+ width: calc(33vw - 30px);
+ align-items: center;
+ aspect-ratio: 1;
+ }
+ }
+
+ &_img {
+ height: 40px;
+ width: auto;
+ }
+
+ &_content {
+ display: flex;
+ flex-direction: column;
+ z-index: 2;
+ gap: 8px;
+
+ &_title {
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 400;
+ text-align: center;
+ color: #fff;
+
+ @include is-mobile {
+ color: #000;
+ }
+ @include is-tablet {
+ color: #000;
+ }
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/JoinAllowList/index.tsx b/src/modules/landing-rollback/Componets/Hero/JoinAllowList/index.tsx
new file mode 100644
index 000000000..e14815c39
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/JoinAllowList/index.tsx
@@ -0,0 +1,139 @@
+import { Button, Flex } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import s from './styles.module.scss';
+import { useRouter } from 'next/navigation';
+import Fade from '@/interactive/Fade';
+import Chars from '@/interactive/Chars';
+import { getTopLeaderBoards } from '@/services/whitelist';
+import { ILeaderBoardPoint } from '@/interfaces/leader-board-point';
+import Image from 'next/image';
+import { formatCurrency } from '@/utils/format';
+import Countdown from '@/modules/Whitelist/stepAirdrop/Countdown';
+import dayjs from 'dayjs';
+import { PUBLIC_SALE_END, PUBLIC_SALE_START } from '@/modules/Whitelist';
+import { CDN_URL_ICONS } from '@/config';
+import { getPublicSaleSummary } from '@/services/public-sale';
+import { checkIsPublicSale } from '@/modules/Whitelist/utils';
+import cs from 'classnames';
+import HeroLabel from '@/modules/landing/Componets/Hero/HeroLabel';
+
+const DELAY = 2;
+const JoinAllowList = ({isFooter}: {isFooter?: boolean}) => {
+ const router = useRouter();
+ const [isCreating, setIsCreating] = useState(false);
+ const [totalUser, setTotalUser] = useState('');
+ const [totalDeposit, setTotalDeposit] = useState('');
+ const [listUser, setListUser] = useState([]);
+
+ const isPublicSale = React.useMemo(() => checkIsPublicSale(), [])
+
+ const getCount = async () => {
+ try {
+ if (isPublicSale) {
+ const response = await getPublicSaleSummary();
+ setTotalUser(response.total_user.toString());
+ setTotalDeposit(response.total_usdt_value_not_boost.toString())
+ } else {
+ const response = await getTopLeaderBoards({ page: 1, limit: 20 });
+ const topWhiteList = response.data.filter((item, index) => index < 5);
+ setTotalUser(response.count);
+ setListUser(topWhiteList);
+ }
+ } catch (e) {
+ console.log(e);
+ }
+ };
+
+ React.useEffect(() => {
+ getCount();
+ }, [isPublicSale]);
+
+ const delay = isFooter ? 0 : DELAY;
+
+ return (
+
+
+
+
+
+
+
+
+ {isPublicSale ? (
+ (!!totalUser && Number(totalUser || 0)) ? (
+
+ {/*Join {formatCurrency(totalUser, 0, 0)} people backing us building the future of Bitcoin.*/}
+ Join the {formatCurrency(totalUser, 0, 0)} early contributors backing us with
+ {" "}${formatCurrency(
+ totalDeposit || '0',
+ 0,
+ 0,
+ 'BTC',
+ true,
+ )} to build the future of Bitcoin.
+
+ ) : (
+
+ Back us building the future of Bitcoin
+
+ )
+ ) : (
+
+ Be the first to know.
+
+ Allowlisters get up to 30% extra tokens .
+
+ )}
+
+
+
+
+
+ {
+ if (isPublicSale) return router.push('/public-sale')
+ router.push('/allowlist');
+ }}
+ >
+ {isPublicSale ? "Join the BVM public sale" : "Get on the allowlist"}
+
+ {!isPublicSale && (
+
+
+
+
+
+ {formatCurrency(totalUser, 0,0)} people {isPublicSale ? "made contributions" : "are on the allowlist"}
+
+
+ )}
+
+
+ {isPublicSale ? 'Ends' : 'Public sale starting'} in
+
+
+
+
+
+
+
+
+ {/**/}
+
+
+ );
+};
+
+export default JoinAllowList;
diff --git a/src/modules/landing-rollback/Componets/Hero/JoinAllowList/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/JoinAllowList/styles.module.scss
new file mode 100644
index 000000000..1b8d17421
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/JoinAllowList/styles.module.scss
@@ -0,0 +1,288 @@
+.container {
+
+ width: 100%;
+ background: url('/landing/images/hero-bg-allow.jpg');
+ background-repeat: no-repeat;
+ background-size: cover;
+
+ &:not(.isFooter) {
+ padding: 20px 0;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ @include is-min-table {
+ padding: 30px 0;
+ }
+ }
+
+ .countDown {
+ &_wrapper {
+ white-space: nowrap;
+ font-size: 14px;
+ font-weight: 400;
+ margin-top: 20px;
+ justify-content: center;
+ }
+
+ img {
+ margin-right: 8px;
+ }
+
+ &_title {
+ color: rgba(255, 255, 255, 0.7);
+ }
+
+ &_time {
+ width: fit-content;
+ text-transform: uppercase;
+ }
+ }
+
+ &.isFooter {
+ padding: 30px 0;
+ }
+
+ @include is-min-table {
+ padding: 40px 0;
+ }
+
+ .content {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ gap: 24px;
+
+ @include is-pc {
+ justify-content: space-between;
+ flex-direction: row;
+ }
+ }
+
+ .titleWrapper {
+ display: block;
+ width: fit-content;
+ }
+
+ .title {
+
+ font-size: 12px;
+ line-height: normal;
+ font-weight: 500;
+ background: -webkit-linear-gradient(90deg, #00f5a0 0%, #00d9f5 100%);
+ background: -moz-linear-gradient(90deg, #00f5a0 0%, #00d9f5 100%);
+ background: linear-gradient(90deg, #00f5a0 0%, #00d9f5 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ width: fit-content;
+
+ @include is-mobile {
+ font-size: 10px;
+ }
+ }
+
+ .desc {
+
+ text-align: left;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 130%;
+ max-width: 620px;
+
+ @include is-mobile {
+ font-size: 20px;
+ }
+
+ @include is-tablet {
+ font-size: 24px;
+ }
+
+ @include is-pc {
+ font-size: 32px;
+ }
+
+ span {
+ color: #fa4e0e;
+ }
+ }
+
+ .form {
+ width: 100%;
+ }
+
+ .inputContainer {
+ border-radius: 0px;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid #cecece;
+ display: flex;
+ padding: 12px;
+ align-items: center;
+ gap: 12px;
+ width: 371px;
+ }
+
+ .input {
+ height: 100%;
+ overflow: hidden;
+ color: #ffffff;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 140%;
+ background-color: transparent;
+ width: 100%;
+ letter-spacing: 0.01em;
+ text-align: center;
+
+ &::placeholder {
+ color: rgba(255, 255, 255, 0.5);
+ }
+
+ &::-ms-input-placeholder {
+ /* Edge 12-18 */
+ color: rgba(255, 255, 255, 0.5);
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ .button {
+ height: 60px !important;
+ border-radius: 0px !important;
+ background: #fa4e0e !important;
+ color: #fff !important;
+ width: 331px !important;
+ font-weight: normal !important;
+ font-size: 20px;
+ line-height: 1.3;
+ }
+}
+
+.grid {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ // display: grid;
+ // grid-template-columns: 1fr 1fr 1fr;
+ gap: 20px;
+
+ // @include w-max(768px) {
+ // grid-template-columns: 1fr 1fr;
+ // }
+
+ // @include w-max(468px) {
+ // grid-template-columns: 1fr;
+ // }
+
+ .item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ padding: 28px 0px;
+ background-color: #1c1c1c;
+ padding: 28px 32px;
+ background-color: #1c1c1c;
+ min-width: 380px;
+ width: fit-content;
+
+ @include w-max(768px) {
+ min-width: 320px;
+ }
+ }
+
+ .item_title {
+ text-align: center;
+ font-size: 16px;
+ margin-top: 8px;
+ }
+
+ .item_desc {
+ text-align: center;
+ font-size: 28px;
+ margin-top: 12px;
+ font-weight: 800;
+ line-height: 30px;
+ }
+
+ .btn {
+ height: 16px;
+ opacity: 0.8;
+ cursor: pointer;
+ }
+}
+
+.whiteList {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
+ margin-top: 20px;
+ justify-content: center;
+
+ &_users {
+ display: flex;
+ flex-direction: row;
+
+ &_avatar {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ border-radius: 999px;
+ overflow: hidden;
+ background-color: #fff;
+ margin-left: -8px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ padding: 1px;
+ border-radius: 999px;
+ position: absolute;
+ transform: translate(-50%, -50%);
+ top: 50%;
+ left: 50%;
+ }
+ }
+ }
+
+ &_total {
+ white-space: nowrap;
+ color: rgba(255, 255, 255, 0.7);
+ text-align: center;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+
+ span {
+ color: #fff;
+ }
+ }
+}
+
+.countDown_wrapper {
+ * {
+ font-size: 14px !important;
+ line-height: 1.4 !important;
+ font-weight: 400 !important;
+ }
+}
+
+
+.hero_inner__desktop {
+ display: none;
+ @include is-min-table {
+ display: block;
+ }
+
+ :global {
+ .heroLabel_inner {
+ border-top: 1px solid #FFFFFF26;
+ padding-top: 28px;
+ margin-top: 28px;
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/index.tsx b/src/modules/landing-rollback/Componets/Hero/index.tsx
new file mode 100644
index 000000000..eb8146cea
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/index.tsx
@@ -0,0 +1,24 @@
+import s from './styles.module.scss';
+import Intro from '@/modules/landing/Componets/Intro';
+import BgHero from '@/modules/landing/Componets/Hero/Bg';
+import HeroLabel from '@/modules/landing/Componets/Hero/HeroLabel';
+import JoinAllowList from './JoinAllowList';
+
+export default function Hero() {
+ return (
+
+ <>
+
+
+
+
+ >
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Hero/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/styles.module.scss
new file mode 100644
index 000000000..7a9fbe63c
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Hero/styles.module.scss
@@ -0,0 +1,44 @@
+.hero {
+ width: 100%;
+ position: relative;
+
+
+ @include is-pc {
+ overflow: hidden;
+ height: 100svh;
+ }
+
+ &_wrap {
+ height: 100svh;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+ }
+
+ @include is-mobile {
+ width: auto;
+ }
+ @include is-tablet {
+ width: 100%;
+ }
+
+ &_inner {
+ position: absolute;
+ z-index: 2;
+ width: 100%;
+ display: none;
+
+ @include is-pc {
+ bottom: 210px;
+ display: block;
+ }
+ }
+
+}
+
+.hero_wrap__mobile {
+ background: white;
+ @include is-pc {
+ display: none;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Intro/index.tsx b/src/modules/landing-rollback/Componets/Intro/index.tsx
new file mode 100644
index 000000000..9a6b09fbb
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Intro/index.tsx
@@ -0,0 +1,244 @@
+import s from './styles.module.scss';
+import { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+import useAnimationStore from '@/stores/useAnimationStore';
+import { MathMap } from '@/utils/mathUtils';
+import { DotLottiePlayer } from '@dotlottie/react-player';
+import Image from 'next/image';
+
+const FRAMES = 169;
+
+export default function Intro() {
+ const refBtn = useRef(null);
+ const refWrap = useRef(null);
+ const gradientRef = useRef(null);
+ const refContent = useRef(null);
+ const refThumb = useRef(null);
+ const refActions = useRef({ isDown: false, isComplete: false, current: 0, xFrame: 0 });
+ const quickTo = useRef();
+ const quickFillter = useRef();
+ const { setPlay, setPlayed, played } = useAnimationStore();
+ const lottieRef = useRef();
+ const refFlare = useRef(null);
+ const refSky = useRef(null);
+
+
+ useEffect(() => {
+ played && completed();
+ }, [played]);
+
+ useEffect(() => {
+ if (typeof document !== undefined) {
+ document.body.style.overflow = 'hidden';
+ }
+ quickTo.current = gsap.quickTo(refBtn.current, 'x', {
+ duration: 0.2,
+ });
+
+ quickFillter.current = gsap.quickTo(refThumb.current, '--clipPath', {
+ duration: 0.2,
+ });
+ }, []);
+ const completed = () => {
+
+ gsap.fromTo(
+ refContent.current,
+ { pointerEvents: 'none' },
+ {
+ opacity: 0,
+ scale: 1.2,
+ delay: 0.4,
+ ease: 'power3.inOut',
+ onComplete: () => {
+ document.body.style.overflow = 'auto';
+ setPlayed();
+ if (refContent.current) refContent.current.style.display = 'none';
+ },
+ },
+ );
+ setTimeout(setPlay, 300);
+ };
+
+ const playCompleted = () => {
+ refActions.current.isComplete = true;
+ const tm = { value: refActions.current.xFrame };
+ gsap.to(tm, {
+ value: FRAMES, ease: 'power3.inOut', duration: .4, onUpdate: () => {
+ lottieRef.current?.seek(tm.value);
+ },
+ onComplete: completed,
+ });
+ gsap.to(refFlare.current, { '--bg': 1, '--shadown': '500px', ease: 'power3.inOut', duration: .6 });
+ gsap.to(refSky.current, { '--bg': 1, duration: 1.2, ease: 'power3.inOut' });
+ };
+
+ const onMouseUp = () => {
+ if (refActions.current.isComplete || !refBtn.current || !refWrap.current)
+ return;
+ refActions.current.isDown = false;
+ const rectBtn = refBtn.current.getBoundingClientRect();
+ const rectWrap = refWrap.current.getBoundingClientRect();
+
+ if (refActions.current.current > rectWrap.width / 2) {
+ const dis = rectWrap.width - rectBtn.width;
+ refActions.current.current = 0;
+ quickTo.current && quickTo.current(dis);
+ // lottieRef.current?.seek(FRAMES);
+ playCompleted();
+ } else {
+ refActions.current.current = 0;
+ quickTo.current && quickTo.current(0);
+ lottieRef.current?.seek(0);
+ gsap.to(gradientRef.current, {
+ opacity: 1,
+ ease: 'power3.out',
+ duration: 0.6,
+ });
+ }
+ };
+
+ const onMouseDown = () => {
+ if (refActions.current.isComplete) return;
+ refActions.current.isDown = true;
+ gsap.to(gradientRef.current, {
+ opacity: 0,
+ ease: 'power3.out',
+ duration: 0.6,
+ });
+ };
+
+ const onMouse = (e: any) => {
+ if (!refActions.current.isDown || refActions.current.isComplete) return;
+ if (!refBtn.current || !refWrap.current) return;
+
+ const rectBtn = refBtn.current.getBoundingClientRect();
+ const rectWrap = refWrap.current.getBoundingClientRect();
+
+ const xx = (e?.touches?.length && e?.touches[0]) ? e?.touches[0]?.clientX : e.clientX;
+ refActions.current.current = (xx) - rectWrap.left - rectBtn.width / 2;
+ refActions.current.current = Math.max(
+ Math.min(refActions.current.current, rectWrap.width - rectBtn.width),
+ 0,
+ );
+
+ const x = MathMap(
+ refActions.current.current,
+ 0,
+ rectWrap.width - rectBtn.width,
+ 0,
+ FRAMES,
+ );
+ lottieRef.current?.seek(x);
+ quickTo.current && quickTo.current(refActions.current.current);
+ refActions.current.xFrame = x;
+
+ if (refActions.current.current > rectWrap.width / 2) {
+ const dis = rectWrap.width - rectBtn.width;
+ refActions.current.current = 0;
+ quickTo.current && quickTo.current(dis);
+ playCompleted();
+ }
+ };
+
+ return (
+
+ {!played && (
+
+
+
Welcome to the future of Bitcoin.
+
+ BVM is the first modular Bitcoin L2 metaprotocol on Bitcoin. With a few clicks, anyone can plug and
+ play
+ the best-of-breed blockchain modules to launch their own Bitcoin L2 blockchain.
+
+
+
+
+
+
+
+ HOLD & DRAG TO STEP INSIDE
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Intro/styles.module.scss b/src/modules/landing-rollback/Componets/Intro/styles.module.scss
new file mode 100644
index 000000000..c8876d519
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Intro/styles.module.scss
@@ -0,0 +1,339 @@
+.intro {
+ height: 100svh;
+ width: 100vw;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 9;
+ overflow: hidden;
+ background: url("/landing/compress/banner-bg.jpg?v=2");
+ background-size: cover;
+ background-repeat: no-repeat;
+
+ &:after {
+ content: '';
+ display: block;
+ background: url("/landing/compress/noise.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ z-index: 99;
+ pointer-events: none;
+ }
+
+ &_inner {
+ position: relative;
+ z-index: 3;
+ height: 100%;
+ width: 100%;
+
+ &_thumbnail {
+ --clipPath: 0%;
+ position: absolute;
+ top: calc(50% - 3vh);
+ left: 50%;
+ transform: translate(-50%, -50%);
+ @include is-min-table {
+ top: 50%;
+ }
+
+ &_inner {
+ display: flex;
+ justify-content: center;
+ position: relative;
+ }
+
+ :global {
+ .dotlottie-container {
+ aspect-ratio: 150/334;
+ width: 100px;
+
+ @include is-min-table {
+ width: 150px;
+ }
+ }
+ }
+
+ .clone {
+ position: absolute;
+ filter: grayscale(100%);
+ opacity: .4;
+ }
+
+ .real {
+ position: relative;
+ z-index: 2;
+ clip-path: inset(calc(100% - var(--clipPath)) 0% 0% 0%);
+ }
+ }
+
+ &_content {
+ color: #fff;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 140%;
+ text-align: center;
+ text-transform: uppercase;
+
+ span {
+ color: #FA4E0E;
+ }
+ }
+ }
+}
+
+.drag {
+ width: 242px;
+ display: flex;
+ position: relative;
+ margin-top: 16px;
+ justify-content: space-between;
+ font-size: 0;
+ line-height: 0;
+ padding: 4px;
+ margin-left: auto;
+ margin-right: auto;
+ background: linear-gradient(
+ -90deg,
+ rgba(225, 225, 225, .07) 0,
+ rgba(225, 225, 225, 0) 100%
+ );
+
+ transform: translateX(-20px);
+ @include is-min-table {
+ transform: translateX(-90px);
+ }
+
+ svg,
+ img {
+ -webkit-user-drag: none;
+ user-select: none;
+ user-focus: none;
+ pointer-events: none;
+ }
+
+ &_inner {
+ position: absolute;
+ z-index: 5;
+ width: calc(100% - 9px);
+ }
+
+ &_line {
+ position: absolute;
+ top: calc(50% - 10px);
+ left: calc(50% - 5px);
+ transform: translateX(-50%);
+ pointer-events: none;
+ z-index: 5;
+
+ &_inner {
+ position: relative;
+ }
+
+ img {
+
+ mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(171, 171, 171, 0) 100%);
+ -webkit-mask-position-x: -132px;
+ mask-repeat: no-repeat;
+ animation: looparrwos 4s ease-out infinite;
+ width: 115%;
+ height: auto;
+ display: block;
+ max-width: inherit;
+
+ &:nth-child(2) {
+ width: 115%;
+ height: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ animation-delay: 2s;
+ }
+ }
+ }
+
+ &_gradient {
+ position: absolute;
+ height: 100%;
+ left: 0;
+ top: 0;
+ width: 100%;
+ --bg: 0%;
+ z-index: 2;
+ pointer-events: none;
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 0, 0, 1) var(--bg),
+ rgba(171, 171, 171, 0) 100%
+ );
+ }
+}
+
+.mood {
+ flex: 0 0 auto;
+ margin-left: auto;
+ position: relative;
+ z-index: 3;
+
+ &_substract {
+ position: relative;
+ z-index: 2;
+ }
+
+ &_door {
+ position: absolute;
+ top: calc(50% + 40px);
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 364px;
+ height: auto;
+ max-width: none;
+ mix-blend-mode: color-dodge;
+ }
+}
+
+.grid {
+ position: absolute;
+ bottom: -30%;
+
+ svg {
+ width: 500px;
+ height: auto;
+
+ @include is-min-table {
+ width: 720px;
+ height: auto;
+ }
+ }
+}
+
+
+.intro_inner_bottom {
+ position: absolute;
+ bottom: 90px;
+ left: 50%;
+ transform: translateX(-50%);
+
+ &_cotnent {
+ position: absolute;
+ color: #FFF;
+ text-align: center;
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 140%; /* 19.6px */
+ letter-spacing: 0.28px;
+ top: -60px;
+ right: -45px;
+ text-transform: uppercase;
+
+ @include is-min-table {
+ right: 25px;
+ }
+ }
+}
+
+.intro_supper_content {
+ padding-top: 60px;
+ padding-left: 16px;
+ padding-right: 16px;
+
+ @include is-min-table {
+ padding-top: 120px;
+ padding-left: 32px;
+ padding-right: 32px;
+ }
+
+ &_bitcoin {
+ color: var(--Color-newsystem-White-100, #FFF);
+ text-align: center;
+ text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
+ font-size: 50px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 100%; /* 50px */
+ text-transform: uppercase;
+ margin-bottom: 28px;
+
+ @include is-tablet {
+ font-size: 42px;
+ }
+
+ @include is-mobile {
+ font-size: 34px;
+ }
+
+ b {
+ font-weight: 400;
+ color: #FA4E0E;
+ }
+ }
+
+ &_desc {
+ color: rgba(#FFF, .7);
+ text-align: center;
+ font-size: 28px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%;
+ max-width: 960px;
+ margin-left: auto;
+ margin-right: auto;
+
+ @include is-tablet {
+ font-size: 20px;
+ }
+
+ @include is-mobile {
+ font-size: 16px;
+ }
+
+ b {
+ font-weight: 500;
+ color: white;
+ }
+ }
+}
+
+
+.flare {
+
+ --shadown: 0px;
+ --bg: 0;
+
+ height: 133px;
+ width: 88px;
+ border: 2px solid rgba(255, 255, 255, var(--bg));
+ box-shadow: 0 0 var(--shadown) calc(var(--shadown) / 2) #FFFFFF;
+ position: absolute;
+ bottom: -43px;
+ right: -20px;
+ z-index: 10;
+ background: rgba(255, 255, 255, var(--bg));
+}
+
+.sky {
+ --bg: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ position: absolute;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+ background: rgba(255, 255, 255, var(--bg));
+}
+
+@keyframes looparrwos {
+ 0% {
+ -webkit-mask-position-x: -132px;
+ }
+ 100% {
+ -webkit-mask-position-x: 132px;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Lego/index.tsx b/src/modules/landing-rollback/Componets/Lego/index.tsx
new file mode 100644
index 000000000..73bad60fb
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Lego/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import s from './styles.module.scss';
+import Chars from '@/interactive/Chars';
+import Fade from '@/interactive/Fade';
+import { Button, Flex } from '@chakra-ui/react';
+import HeadingSection from '@/modules/landing/Componets/HeadingSection';
+import ContentSection from '@/modules/landing/Componets/ContentSection';
+import Lines from '@/interactive/Lines';
+import { useRouter } from 'next/navigation';
+
+export default function Lego() {
+ const router = useRouter();
+ return (
+
+
+
+
+
+ Customize your Bitcoin L2 blockchain with{' '}
+ the best-of-breed building blocks.
+
+
+
+
+
+ Choose a rollup method, select a data availability layer, and then
+ launch to the world — it’s that easy. You can even install default
+ dapps like Uniswap, Compound, and DAO. It’s a new way to build
+ blockchain.
+
+
+
+
+
+ {
+ router.push('/blockchains/customize');
+ }}
+ _hover={{
+ bgColor: '#000',
+ }}
+ >
+ {`Launch your Bitcoin L2`}
+
+
+
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Lego/styles.module.scss b/src/modules/landing-rollback/Componets/Lego/styles.module.scss
new file mode 100644
index 000000000..b99c9e7d5
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Lego/styles.module.scss
@@ -0,0 +1,32 @@
+.lego {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ background: url('/landing/bg-home-2.jpg') no-repeat center / cover;
+ position: relative;
+ height: 100vh;
+ max-height: 1070px;
+ display: flex;
+ align-items: center;
+
+ &_content {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 894px;
+ text-align: center;
+
+ @include is-tablet {
+ max-width: 100%;
+ }
+
+ &_title {
+ color: #fff;
+ }
+
+ &_description {
+ color: #fff;
+ align-self: stretch;
+ display: flex;
+ flex-direction: column;
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/LegoV2/LegoItem/index.tsx b/src/modules/landing-rollback/Componets/LegoV2/LegoItem/index.tsx
new file mode 100644
index 000000000..1086f3258
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/LegoV2/LegoItem/index.tsx
@@ -0,0 +1,95 @@
+import { ReactElement, useEffect, useRef } from 'react';
+import s from './style.module.scss';
+import ImagePlaceholder from '@/components/ImagePlaceholder';
+
+import Image from 'next/image';
+import { gsap } from 'gsap';
+import Fade from '@/interactive/Fade';
+
+interface IProp {
+ data: any;
+ delay: number;
+}
+
+export default function LegoItem({ data, delay }: IProp): ReactElement {
+ const refContent = useRef(null);
+
+ useEffect(() => {
+ onLeave();
+ }, []);
+
+ const onHover = () => {
+ if (!refContent.current) return;
+ const box = refContent.current?.querySelector('.js-box');
+ const items = refContent.current?.querySelectorAll('.js-item');
+
+ gsap.to(box, { y: 0, opacity: 1, ease: 'power3.out', duration: 0.4 });
+ gsap.to(items, {
+ y: 0,
+ delay: 0.05,
+ opacity: 1,
+ stagger: 0.05,
+ duration: 0.4,
+ ease: 'power3.out',
+ });
+ };
+
+ const onLeave = () => {
+ if (!refContent.current) return;
+ const box = refContent.current?.querySelector('.js-box');
+ const items = refContent.current?.querySelectorAll('.js-item');
+
+ gsap.to(items, {
+ y: 10,
+ opacity: 0,
+ stagger: 0.05,
+ duration: 0.4,
+ ease: 'power3.out',
+ });
+ gsap.to(box, {
+ y: 30,
+ delay: 0.05,
+ opacity: 0,
+ ease: 'power3.out',
+ duration: 0.4,
+ });
+ };
+ return (
+
+
+
+
+
+
+
+
+ {data.icons.map((src: any) => {
+ return (
+
+
+
+ );
+ })}
+
+
+
{data.title}
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/LegoV2/LegoItem/style.module.scss b/src/modules/landing-rollback/Componets/LegoV2/LegoItem/style.module.scss
new file mode 100644
index 000000000..a60fb155b
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/LegoV2/LegoItem/style.module.scss
@@ -0,0 +1,322 @@
+.legoItem {
+ width: 100%;
+ background: #f6f6f6;
+ position: relative;
+ &_inner {
+ aspect-ratio: 1;
+ transition: background 0.4s var(--easeOutQuart);
+
+ &:hover {
+ background: #eeeeee;
+ }
+ }
+ &_thumbnail {
+ padding: 64px 22px 50px 22px;
+
+ @include is-mobile {
+ padding: 32px 11px 23px 11px;
+ }
+ }
+ &_title {
+ position: absolute;
+ bottom: 0;
+ color: #000;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 100%;
+ text-align: left;
+ padding: 16px;
+ border-top: 1px solid #e6e6e6;
+ text-transform: uppercase;
+ width: 100%;
+
+ @include is-mobile {
+ font-size: 10px;
+ padding: 8px;
+ }
+ }
+
+ position: relative;
+
+ @include is-mobile {
+ &:not(:last-child) {
+ &:after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 1px;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background: linear-gradient(
+ 270deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 53.5%,
+ rgba(236, 236, 236, 0) 100%
+ );
+ }
+ }
+ }
+
+ @include is-tablet {
+ &:nth-child(3) {
+ &:after {
+ content: '';
+ display: block;
+ width: 1px;
+ height: 100%;
+ bottom: 0;
+ right: 0;
+ position: absolute;
+ background: #ececec;
+ }
+ }
+
+ &:nth-child(1) {
+ &:after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 1px;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background: linear-gradient(
+ 90deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+
+ &:before {
+ content: '';
+ display: block;
+ width: 1px;
+ height: 100%;
+ bottom: 0;
+ right: 0;
+ position: absolute;
+ background: linear-gradient(
+ -180deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+ }
+
+ &:nth-child(2) {
+ &:after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 1px;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background: linear-gradient(
+ 270deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+ }
+ &:nth-child(5) {
+ &:after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 1px;
+ top: 0;
+ left: 0;
+ position: absolute;
+ background: linear-gradient(
+ 90deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+
+ &:before {
+ content: '';
+ display: block;
+ width: 1px;
+ height: 100%;
+ bottom: 0;
+ right: 0;
+ position: absolute;
+ background: linear-gradient(
+ 0deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+ }
+
+ &:nth-child(6) {
+ &:after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 1px;
+ top: 0;
+ left: 0;
+ position: absolute;
+ background: linear-gradient(
+ 270deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+ }
+ }
+
+ @include is-pc {
+ &:nth-child(2) {
+ &:after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 1px;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background: #ececec;
+ }
+ }
+
+ &:nth-child(1) {
+ &:after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 1px;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background: linear-gradient(
+ 90deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+
+ &:before {
+ content: '';
+ display: block;
+ width: 1px;
+ height: 100%;
+ bottom: 0;
+ right: 0;
+ position: absolute;
+ background: linear-gradient(
+ -180deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+ }
+
+ &:nth-child(3) {
+ &:after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 1px;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background: linear-gradient(
+ 270deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+
+ &:before {
+ content: '';
+ display: block;
+ width: 1px;
+ height: 100%;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background: linear-gradient(
+ -180deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+ }
+
+ &:nth-child(4) {
+ &:before {
+ content: '';
+ display: block;
+ width: 1px;
+ height: 100%;
+ top: 0;
+ right: 0;
+ position: absolute;
+ background: linear-gradient(
+ 0deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+ }
+
+ &:nth-child(6) {
+ &:before {
+ content: '';
+ display: block;
+ width: 1px;
+ height: 100%;
+ top: 0;
+ left: 0;
+ position: absolute;
+ background: linear-gradient(
+ 0deg,
+ rgba(236, 236, 236, 0) 0%,
+ #ececec 100%
+ );
+ }
+ }
+ }
+}
+
+.boxWrapper {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: fit-content;
+}
+
+.boxs {
+ border-radius: 100px;
+ border: 1px solid #ececec;
+ background: #fff;
+ box-shadow: 0px 0px 32px -6px rgba(0, 0, 0, 0.16);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ width: fit-content;
+ padding: 10px;
+ list-style: none;
+
+ li {
+
+ width: 40px;
+ flex: 0 0 auto;
+ height: 40px;
+
+ img {
+ object-fit: contain;
+ aspect-ratio: 1/1;
+ width: 100%;
+ height: 100%;
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/LegoV2/index.tsx b/src/modules/landing-rollback/Componets/LegoV2/index.tsx
new file mode 100644
index 000000000..30106e6ad
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/LegoV2/index.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import s from './styles.module.scss';
+import lego1 from '@/public/landing/ls-1.png';
+import lego2 from '@/public/landing/ls-2.png';
+import lego3 from '@/public/landing/ls-3.png';
+import lego4 from '@/public/landing/ls-4.png';
+import lego5 from '@/public/landing/ls-5.png';
+import lego6 from '@/public/landing/ls-6.png';
+
+import HeadingSection from '@/modules/landing/Componets/HeadingSection';
+import ContentSection from '@/modules/landing/Componets/ContentSection';
+import Chars from '@/interactive/Chars';
+import Lines from '@/interactive/Lines';
+import LegoItem from '@/modules/landing/Componets/LegoV2/LegoItem';
+import { Button, Flex } from '@chakra-ui/react';
+import Fade from '@/interactive/Fade';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+
+const DATA_ECOSYSTEM = [
+ {
+ img: lego1,
+ title: 'DATA MODULES',
+ icons: [10, 2, 6, 7, 8, 9],
+ },
+ {
+ img: lego2,
+ title: 'EXECUTION MODULES',
+ icons: [1, 2, 3, 4, 5],
+ },
+ {
+ img: lego3,
+ title: 'ROLLUP MODULES',
+ icons: [1, 11],
+ },
+ {
+ img: lego4,
+ title: 'BRIDGE MODULES',
+ icons: [12, 13, 14],
+ },
+ {
+ img: lego5,
+ title: 'SETTLEMENT MODULES',
+ icons: [10],
+ },
+ {
+ img: lego6,
+ title: 'DAPP MODULES',
+ icons: [15, 16, 17],
+ },
+];
+export default function LegoV2() {
+ const router = useRouter();
+ return (
+
+
+
+
+
+ Customize and launch your modular Bitcoin L2 blockchain with the best-of-breed modules with a few clicks.
+
+
+
+
+
+ Choose a rollup module, select a data availability module, and
+ then launch to theworld — it’s that easy. You can even install
+ dapp modules like Uniswap, Compound, and NFT Marketplace. It’s a
+ whole new way to build a Bitcoin L2.
+
+
+
+
+ {
+ router.push('/blockchains/customize');
+ }}
+ _hover={{
+ bgColor: '#000',
+ }}
+ >
+ {`Launch your Bitcoin L2`}
+
+
+
+
+
+
+
+ {DATA_ECOSYSTEM.map((item, index) => {
+ return ;
+ })}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/LegoV2/styles.module.scss b/src/modules/landing-rollback/Componets/LegoV2/styles.module.scss
new file mode 100644
index 000000000..43eacad68
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/LegoV2/styles.module.scss
@@ -0,0 +1,87 @@
+.lego {
+ padding: 140px 0;
+ overflow: hidden;
+ background: #ffffff;
+
+ @include is-mobile {
+ padding-top: 32px;
+ padding-bottom: 44px;
+ }
+
+ &_heading {
+ max-width: 989px;
+ padding-bottom: 68px;
+
+ @include is-mobile {
+ padding-bottom: 32px;
+ }
+
+ &_title {
+ color: #000;
+ text-align: left !important;
+ }
+
+ &_description {
+ max-width: 850px;
+ color: #000;
+ text-align: unset !important;
+
+ @include is-mobile {
+ margin-bottom: 12px;
+ }
+ }
+ }
+
+ &_wrapper {
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ justify-content: space-between;
+ gap: 16px;
+
+ @include is-tablet {
+ flex-direction: column-reverse;
+ }
+
+ @include is-mobile {
+ flex-direction: column-reverse;
+ gap: 8px;
+ }
+ }
+
+ &_bg {
+ background: #44955b;
+ max-width: 923px;
+ width: 62.5%;
+ flex-shrink: 0;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+
+ @include is-tablet {
+ width: 100%;
+ max-width: unset;
+ }
+ @include is-mobile {
+ width: 100%;
+ }
+ }
+
+ &_content {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(3, 1fr);
+ row-gap: 15.5px;
+ column-gap: 16px;
+ flex: 1;
+
+ @include is-mobile {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ @include is-tablet {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/index.tsx b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/index.tsx
new file mode 100644
index 000000000..73ad9895e
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/index.tsx
@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import s from './styles.module.scss';
+import cn from 'classnames';
+
+interface IProp extends PropsWithChildren {
+ title: string;
+ indexActive: boolean;
+}
+
+export default function ScalableContent({
+ title,
+ children,
+ indexActive,
+}: IProp) {
+ return (
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/styles.module.scss b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/styles.module.scss
new file mode 100644
index 000000000..620a47ce1
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/styles.module.scss
@@ -0,0 +1,40 @@
+.scalableContent {
+ flex: 1;
+ max-width: 445px;
+ position: relative;
+ padding-top: 16px;
+ opacity: 0.5;
+ transition: opacity 0.5s ease-out;
+
+ @include is-tablet {
+ width: 33.33%;
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+
+ &_heading {
+ color: #fff;
+ text-align: center;
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 110%; /* 26.4px */
+ margin-bottom: 40px;
+ position: absolute;
+ top: -54px;
+ width: 100%;
+ }
+
+ &_content {
+ color: #fff;
+ text-align: center;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 26px; /* 144.444% */
+ }
+
+ &.indexActive {
+ opacity: 1;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/index.tsx b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/index.tsx
new file mode 100644
index 000000000..a069f2d8c
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/index.tsx
@@ -0,0 +1,8 @@
+import Image from 'next/image';
+import s from './styles.module.scss';
+
+export default function ScalableItem({layer}:{layer: number}) {
+ return
+
+
;
+}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/styles.module.scss b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/styles.module.scss
new file mode 100644
index 000000000..8bfec2e33
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/styles.module.scss
@@ -0,0 +1,34 @@
+.scalableItem {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ clip-path: var(--clipPath);
+
+ img {
+ object-fit: contain;
+ max-width: 100%;
+ max-height: calc(100% - 40vh);
+
+ @include is-tablet {
+ width: 40%;
+ }
+ }
+
+ &__1 {
+ background: #1a67e3;
+ }
+
+ &__2 {
+ background: #2aa848;
+ }
+
+ &__3 {
+ background: #dd9910;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/index.tsx b/src/modules/landing-rollback/Componets/ScalableSlide/index.tsx
new file mode 100644
index 000000000..686f33b83
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ScalableSlide/index.tsx
@@ -0,0 +1,162 @@
+import s from './style.module.scss';
+import ScalableItem from './ScalableItem';
+import { gsap } from 'gsap';
+import ScalableContent from './ScalableContnet';
+import { useEffect, useRef, useState } from 'react';
+import Chars from '@/interactive/Chars';
+import Lines from '@/interactive/Lines';
+import { useIsInViewport } from '@/hooks/useIsInViewport';
+import HeadingSection from '@/modules/landing/Componets/HeadingSection';
+import ContentSection from '@/modules/landing/Componets/ContentSection';
+
+export default function ScalableSlide() {
+ const refContent = useRef(null);
+
+ const refSlide = useRef({ index: 0 });
+ const [indexActive, setIndexActive] = useState(0);
+ const refPo = useRef(null);
+
+ const inView = useIsInViewport(refContent, { threshold: 0 });
+ const refItems = useRef>();
+ 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,
+ },
+ );
+ };
+
+ const gc = gsap.context(() => {
+ refItems.current =
+ refContent.current?.querySelectorAll('.js-scalableItem');
+ if (!refItems.current || !refItems.current.length) return;
+
+ refItems.current?.forEach((item, index) => {
+ if (index === 0) return;
+ const tin_image = item.querySelector('.js-image');
+ gsap.set(tin_image, { scale: 1.2 });
+ gsap.set(item, { '--clipPath': 'inset(100% 0% 0% 0%)' });
+ });
+
+ refTime.current = gsap.timeline({
+ paused: true,
+ 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.to(refPo.current, {
+ 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]);
+ setIndexActive(2);
+ refSlide.current.index = 2;
+ },
+ });
+
+ refTime.current.to(refPo.current, {
+ x: '100%',
+ duration: 1,
+ ease: 'power3.inOut',
+ });
+ }, [refContent.current]);
+
+ return () => gc.revert();
+ }, []);
+
+ useEffect(() => {
+ if (inView) refTime.current?.resume();
+ else refTime.current?.paused();
+ }, [inView]);
+
+ return (
+
+
+
+
+
+ Welcome to the future of 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.
+
+
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/style.module.scss b/src/modules/landing-rollback/Componets/ScalableSlide/style.module.scss
new file mode 100644
index 000000000..036566e93
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ScalableSlide/style.module.scss
@@ -0,0 +1,79 @@
+.scalable {
+ position: relative;
+ height: 200vh;
+
+ &_wrap {
+ height: 100vh;
+ width: 100%;
+ position: sticky;
+ top: 0;
+
+ @include is-tablet {
+ overflow: hidden;
+ width: 100%;
+ }
+ }
+
+ &_top {
+ position: absolute;
+ top: 6vh;
+ z-index: 3;
+ left: 0;
+ width: 100%;
+
+ &_inner {
+ max-width: 985px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ }
+
+ &_heading {
+ color: #fff;
+ }
+
+ &_content {
+ color: #fff;
+ }
+
+ &_bottom {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 3vw;
+ bottom: 60px;
+ width: 100%;
+ position: absolute;
+ z-index: 2;
+ left: 0;
+ border-top: 1px solid rgba(white, 0.2);
+ padding-left: 32px;
+ padding-right: 32px;
+
+ @include is-tablet {
+ flex-wrap: nowrap;
+ flex-direction: row;
+ gap: unset;
+ }
+
+ &_po {
+ width: 0;
+ border-bottom: 1px solid white;
+
+ &_wrap {
+ overflow: hidden;
+ position: absolute;
+ top: -1px;
+ left: 0;
+ width: 100%;
+ }
+ }
+ }
+
+ &_inner {
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/index.tsx b/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/index.tsx
new file mode 100644
index 000000000..ca8067b5a
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/index.tsx
@@ -0,0 +1,38 @@
+import Image, { StaticImageData } from 'next/image';
+import React from 'react';
+import s from './styles.module.scss';
+import HeadingSection from '@/modules/landing/Componets/HeadingSection';
+import ContentSection from '@/modules/landing/Componets/ContentSection';
+
+type TScale = {
+ title: string;
+ description: string;
+ img: StaticImageData;
+ bottomContent: string;
+ bg: string;
+ subContent: string;
+};
+
+export default function ItemScaleableMobile({ data }: { data: TScale }) {
+ return (
+
+ {data.title && (
+
+ {data.title}
+ {data.description}
+
+ )}
+
+
+
{data.bottomContent}
+
{data.subContent}
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/styles.module.scss b/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/styles.module.scss
new file mode 100644
index 000000000..150fa86ea
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/styles.module.scss
@@ -0,0 +1,69 @@
+.itemScale {
+ width: 100%;
+ &_top {
+ padding: 0 20px;
+ padding-top: 32px;
+
+ @include is-tablet {
+ max-width: 620px;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+ }
+
+ &_heading {
+ text-align: center;
+ color: white;
+ }
+ &_description {
+ text-align: center;
+ }
+ }
+ &_img {
+ width: 80vw;
+ height: auto;
+ padding-top: 24px;
+ margin-left: auto;
+ margin-right: auto;
+
+ @include is-tablet {
+ width: 50vw;
+ }
+ }
+ &_bottom {
+ padding: 0 20px;
+ padding-bottom: 24px;
+
+ @include is-tablet {
+ max-width: 480px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ &_content {
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 110%;
+ text-align: center;
+ padding-bottom: 12px;
+ }
+ &_subContent {
+ text-align: center;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+ }
+ }
+
+ &__1A67E3 {
+ background-color: #1a67e3;
+ }
+ &__2AA848 {
+ background-color: #2aa848;
+ }
+ &__DD9910 {
+ background-color: #dd9910;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/ScaleableMobile/index.tsx b/src/modules/landing-rollback/Componets/ScaleableMobile/index.tsx
new file mode 100644
index 000000000..7a5471e29
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ScaleableMobile/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import img1 from '@/public/landing/images/scaleble_mobile_1.png';
+import img2 from '@/public/landing/images/scaleble_mobile_2.png';
+import img3 from '@/public/landing/images/scaleble_mobile_3.png';
+import s from './styles.module.scss';
+import ItemScaleableMobile from './ItemScaleableMobile';
+
+const DATA_MOBILE = [
+ {
+ title: 'Welcome to the future of Bitcoin.',
+ description:
+ '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.',
+ img: img1,
+ bottomContent: 'Unlimited throughput',
+ bg: '1A67E3',
+ subContent:
+ 'Hyperscale Bitcoin with an unlimited number of Bitcoin Virtual Machines as Bitcoin L2 blockchains.',
+ },
+ {
+ title: '',
+ description: '',
+ img: img2,
+ bottomContent: 'Infinite applications',
+ bg: '2AA848',
+ subContent:
+ 'Bitcoin Virtual Machines support Solidity smart contracts on Bitcoin, so you can quickly build all kinds of decentralized applications on Bitcoin.',
+ },
+ {
+ title: '',
+ description: '',
+ img: img3,
+ bottomContent: 'Fast & cheap',
+ bg: 'DD9910',
+ subContent:
+ 'Bitcoin Virtual Machines implement rollups on Bitcoin. Rollups significantly reduce the block time and transaction fees.',
+ },
+];
+
+export default function ScaleableMobile() {
+ return (
+
+ {DATA_MOBILE.map((item, index) => {
+ return ;
+ })}
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/ScaleableMobile/styles.module.scss b/src/modules/landing-rollback/Componets/ScaleableMobile/styles.module.scss
new file mode 100644
index 000000000..e2f9767a2
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/ScaleableMobile/styles.module.scss
@@ -0,0 +1,4 @@
+.scalebleMobile {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/index.tsx b/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/index.tsx
new file mode 100644
index 000000000..e5acec1a1
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/index.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import React from 'react';
+import s from './styles.module.scss';
+import ItemArticle from '../../Article/ItemArticle';
+import { BLOGS } from '../constant';
+
+export default function Section7Mobile() {
+ return (
+
+
+
+ Oh, and the press loves us too!
+
+
+ {BLOGS.map((item, index) => {
+ return ;
+ })}
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/styles.module.scss b/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/styles.module.scss
new file mode 100644
index 000000000..35f8b7604
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/styles.module.scss
@@ -0,0 +1,33 @@
+.wrapper {
+ background: #fff;
+ padding: 40px 0;
+
+ &_heading {
+ font-weight: 400;
+ font-size: 48px;
+ line-height: 52.8px;
+ color: #000;
+ padding-bottom: 60px;
+
+ @include is-mobile {
+ font-size: 28px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 140%;
+ padding-bottom: 24px;
+ }
+ span {
+ color: #fa4e0e;
+ }
+ }
+ &_lists {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ column-gap: 36px;
+ row-gap: 24px;
+ @include is-mobile {
+ grid-template-columns: 1fr;
+ row-gap: 24px;
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Section_7/constant.ts b/src/modules/landing-rollback/Componets/Section_7/constant.ts
new file mode 100644
index 000000000..e59577188
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Section_7/constant.ts
@@ -0,0 +1,188 @@
+import { CDN_URL } from '@/config';
+
+const CDN_URL_BLOGS = CDN_URL + '/nbc/images/blogs';
+
+export interface IBlog {
+ id: string;
+ title: string;
+ desc: string;
+ logo: string;
+ imageUrl: string;
+ link: string;
+ linkTarget: string;
+}
+
+export const LOGOS = [
+ {
+ id: 'cryptobriefing',
+ img: 'landing/images/cryptobriefing.png'
+ },
+ {
+ id: 'blockworks',
+ img: 'landing/images/blockworks.png'
+ },
+ {
+ id: 'cointelegraph_brazil',
+ img: 'landing/images/cointelegraph_brazil.png'
+ },
+ {
+ id: 'coindesk',
+ img: 'landing/images/coindesk.png'
+ }
+]
+
+const BLOGS = [
+ {
+ id: '16',
+ title: `Bitcoin developer sees ‘Bitcoin’s L2 era’ as key to mass adoption`,
+ desc: `Punk 3700, one of the developers behind Bitcoin Virtual Machine, assesses the potential of layer-two blockchains on top of Bitcoin as an important narrative in crypto's landscape for 2024.`,
+ logo: 'cryptobriefing',
+ imageUrl: `${CDN_URL_BLOGS}/Bitcoin-constructions-1024x585.webp`,
+ link: 'https://cryptobriefing.com/exploring-future-developers-insight-bitcoins-l2-era/',
+ linkTarget: '_blank',
+ },
+ {
+ id: '7',
+ title: `DeFi on Bitcoin? Bitcoin Virtual Machine Says Yes`,
+ desc: `Developers can build decentralized apps on Bitcoin using Solidity smart contracts`,
+ logo: 'blockworks',
+ imageUrl: `${CDN_URL_BLOGS}/Blockworks.webp`,
+ link: 'https://blockworks.co/news/defi-on-bitcoin',
+ linkTarget: '_blank',
+ },
+
+ {
+ id: '6',
+ title: `Bitcoin faster? Project uses Optimism to generate blocks every 2 seconds`,
+ desc: `Blockchain NOS aims to give scalability to the decentralized ecosystem created on Bitcoin, says Punk 3700, one of the developers behind the project`,
+ logo: 'cointelegraph_brazil',
+ imageUrl: `${CDN_URL_BLOGS}/CoinTelegraph_Brazil_02.jpeg`,
+ link: 'https://br.cointelegraph.com/news/bitcoin-becoming-faster-project-uses-optimism-to-generate-blocks-with-2-second-time',
+ linkTarget: '_blank',
+ },
+ {
+ id: '2',
+ title:
+ 'Developers Deploy Uniswap Contracts on Bitcoin as BRC20-Based SHIB, PEPE Gain Popularity',
+ desc: 'A group of developers at @TrustlessOnBTC have deployed Uniswap’s smart contracts onto the Bitcoin network to capitalize on the rise of BRC-20 tokens and develop the decentralized finance ecosystem.',
+ logo: 'coindesk',
+ imageUrl: `${CDN_URL_BLOGS}/Coindesk.png`,
+ link: 'https://www.coindesk.com/tech/2023/05/11/developers-deploy-uniswap-contracts-on-bitcoin-as-brc20-based-shib-pepe-gain-popularity/?utm_content=editorial&utm_term=organic&utm_medium=social&utm_source=twitter&utm_campaign=coindesk_main',
+ linkTarget: '_blank',
+ },
+
+ {
+ id: '1',
+ title: 'What Are BRC-20 Tokens? Explaining the Bitcoin Memecoin Hype',
+ desc: `"Memecoins" on Bitcoin is probably not what Satoshi Nakamoto envisioned when he released the Bitcoin whitepaper in 2008, but it just might be the mass adoption Bitcoin deserves.`,
+ logo: 'coinmarketcap',
+ imageUrl: `${CDN_URL_BLOGS}/CoinMarketCap.png`,
+ link: 'https://coinmarketcap.com/alexandria/article/what-are-brc20-tokens',
+ linkTarget: '_blank',
+ },
+ {
+ id: '8',
+ title: `Trustless Computer Deploys Uniswap v2 Smart Contracts: Huge Milestone For Bitcoin`,
+ desc: `The emergence of #Ordinals and #BRC20 tokens has led to a renaissance period for #Bitcoin
+ With their deployment of Uniswap v2 smart contracts on #BTC, @TrustlessOnBTC is right at the forefront of this exciting development`,
+ logo: 'influencive',
+ imageUrl: `${CDN_URL_BLOGS}/Influencive.png`,
+ link: 'https://twitter.com/Influencive/status/1657455923692986370',
+ linkTarget: '_blank',
+ },
+ {
+ id: '12',
+ title: `Bitcoin Transactions Hit Record High as New Token Type Takes Off`,
+ desc: `Bitcoin Virtual Machine enables its own form of fungible tokens, called SBRC-20s, punk3700, a pseudonymous core contributor to Bitcoin Virtual Machine, told The Defiant.`,
+ logo: 'the_defiant',
+ imageUrl: `${CDN_URL_BLOGS}/defiant.png`,
+ link: 'https://thedefiant.io/bitcoin-transactions-hit-record-high-as-new-token-type-takes-off',
+ linkTarget: '_blank',
+ },
+ {
+ id: '13',
+ title: `A New Bitcoin-Based Arcade Game Is Leaving a Mark on Gamers`,
+ desc: `A platform that went live last week looks to expand bitcoin usage by attracting players to win-to-earn games that run wholly on the Bitcoin blockchain.`,
+ logo: 'coindesk',
+ imageUrl: `${CDN_URL_BLOGS}/13.png`,
+ link: 'https://www.coindesk.com/tech/2023/08/02/a-new-bitcoin-based-arcade-game-is-leaving-a-mark-on-gamers/?utm_content=editorial&utm_medium=social&utm_term=organic&utm_campaign=coindesk_main&utm_source=twitter',
+ linkTarget: '_blank',
+ },
+ {
+ id: '14',
+ title: `Bricks to Bitcoins: The New Bitcoin City`,
+ desc: `The newly launched Bitcoin City, unveiled just last week, provides a place for game enthusiasts to engage in casual games, board games, and strategic challenges, all of which run on BTC, both on web and mobile devices. Alongside this, the platform showcases NFT auctions and features its very own marketplace.`,
+ logo: 'gamestarter',
+ imageUrl: `${CDN_URL_BLOGS}/14.png`,
+ link: 'https://gamestarter.com/blog/the-new-bitcoin-city',
+ linkTarget: '_blank',
+ },
+ {
+ id: '15',
+ title: `A New Bitcoin Based Arcade Game Is Making Waves Among Gamers`,
+ desc: `New Bitcoin City Platform Elevates Gaming with Payouts and NFTs on the Bitcoin Blockchain.`,
+ logo: 'clout_scoop',
+ imageUrl: `${CDN_URL_BLOGS}/15.png`,
+ link: 'https://cloutscoop.com/2023/08/02/a-new-bitcoin-based-arcade-game-is-making-waves-among-gamers/',
+ linkTarget: '_blank',
+ },
+ {
+ id: '9',
+ title: `BRC-721: The Token Standard Defying Bitcoin’s 4MB Storage Limit`,
+ desc: `Just a few months later, on May 22, members of the Spirit DAO — a coalition of collectors devoted to elevating the Azuki universe — effectively blew Wertheimer’s record out of the water. By minting a 6.9MB Comic Banner on Bitcoin, the DAO stole the crown, solidifying the piece as the largest file size stored on BTC to date.`,
+ logo: 'NFTNow',
+ imageUrl: `${CDN_URL_BLOGS}/NFTNow.png`,
+ link: 'https://nftnow.com/features/brc-721-the-token-standard-defying-bitcoins-4mb-storage-limit/',
+ linkTarget: '_blank',
+ },
+ {
+ id: '3',
+ title:
+ 'Ordinals turned Bitcoin into a worse version of Ethereum: Can we fix it?',
+ desc: 'The launch of BRC-20 tokens and Ordinals NFTs on Bitcoin has transformed the No. 1 blockchain overnight into a clunkier version of Ethereum.',
+ logo: 'cointelegraph',
+ imageUrl: `${CDN_URL_BLOGS}/CoinTelegraph.jpeg`,
+ link: 'https://cointelegraph.com/magazine/ordinals-turned-bitcoin-into-a-worse-version-of-ethereum-can-we-fix-it/',
+ linkTarget: '_blank',
+ },
+
+ {
+ id: '4',
+ title:
+ 'The Blocksize Wars Revisited: How Bitcoin’s Civil War Still Resonates Today',
+ desc: 'Today’s debates over non-monetary uses of Bitcoin like ordinals and BRC-20 tokens echo the battle between Big and Small Blockers between 2015 and 2017. This article, by Daniel Kuhn, is part of our “CoinDesk Turns 10” series.',
+ logo: 'coindesk',
+ imageUrl: `${CDN_URL_BLOGS}/Coindesk-02.png`,
+ link: 'https://www.coindesk.com/consensus-magazine/2023/05/17/the-blocksize-wars-revisited-how-bitcoins-civil-war-still-resonates-today/',
+ linkTarget: '_blank',
+ },
+ {
+ id: '5',
+ title: `DeFi is Coming to Bitcoin': Expert Talks Changes to Ordinals`,
+ desc: `Punk 3700, as the developer who integrates New Bitcoin City identifies himself, comments on Bitcoin's potential to become an efficient data layer`,
+ logo: 'cointelegraph_brazil',
+ imageUrl: `${CDN_URL_BLOGS}/CoinTelegraph_Brazil.jpeg`,
+ link: 'https://br.cointelegraph.com/news/defi-is-coming-to-bitcoin-says-expert',
+ linkTarget: '_blank',
+ },
+ {
+ id: '10',
+ title: `Smart Contracts on Bitcoin? Here’s All You Need to Know`,
+ desc: `Move over Ethereum, Bitcoin is now the new home for dApps! The first smart contract is born on Bitcoin and its name is $GM – a memecoin with groundbreaking potential. Moreover, the birth of BRC-721 tokens surpasses its precursor BRC-20 and delivers cutting edge abilities to the Bitcoin blockchain.`,
+ logo: 'NFTEvening',
+ imageUrl: `${CDN_URL_BLOGS}/NFTEvening.webp`,
+ link: 'https://nftevening.com/smart-contracts-on-bitcoin-heres-all-you-need-to-know/?swcfpc=1',
+ linkTarget: '_blank',
+ },
+ {
+ id: '11',
+ title: `Exploring The New Bitcoin City Ecosystem With its Unique DEX`,
+ desc: `New Bitcoin DEX allows for seamless token swaps, liquidity pool creation, and decentralized token launches, providing users greater control and security over their digital assets.`,
+ logo: 'bsc_news',
+ imageUrl: `${CDN_URL_BLOGS}/BSCNews.jpeg`,
+ link: 'https://www.bsc.news/post/exploring-the-new-bitcoin-city-ecosystem-with-its-unique-dex',
+ linkTarget: '_blank',
+ },
+];
+
+export { BLOGS };
diff --git a/src/modules/landing-rollback/Componets/Section_7/index.tsx b/src/modules/landing-rollback/Componets/Section_7/index.tsx
new file mode 100644
index 000000000..e436430ae
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Section_7/index.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import {
+ Box,
+ Button,
+ Card,
+ CardBody,
+ CardFooter,
+ Divider,
+ HStack,
+ Image,
+ Stack,
+ Text,
+ Flex,
+ useBreakpointValue,
+ VStack,
+} from '@chakra-ui/react';
+
+import { isMobile, isTablet } from 'react-device-detect';
+import s from './styles.module.scss';
+
+const SliderSlick = dynamic(
+ () => import('react-slick').then((m) => m.default),
+ {
+ ssr: false,
+ },
+);
+
+import dynamic from 'next/dynamic';
+import { IBlog, BLOGS, LOGOS } from './constant';
+import Chars from '@/interactive/Chars';
+import Fade from '@/interactive/Fade';
+import { useMemo } from 'react';
+
+const Section_7 = () => {
+ const numberSlide = isMobile ? 1 : isTablet ? 2 : 4;
+
+
+ const renderCard = (item: IBlog) => {
+ const getLogo = useMemo((): string => {
+ const tmp = LOGOS.filter((itemLogo => {
+ return itemLogo.id === item.logo;
+ }));
+ return tmp.length ? tmp[0].img : '';
+ }, [item]);
+ return (
+ {
+ window.open(item.link, '_blank');
+ }}
+ >
+
+
+
+ {
+ getLogo &&
+
+
+ }
+
+
+
+
+ {item.title}
+
+
+ {item.desc}
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+ Oh, and the press loves us too!
+
+
+
+
+
+
+ }
+ nextArrow={
+
+ }
+ infinite={true}
+ swipe={true}
+ speed={1000}
+ autoplaySpeed={3000}
+ slidesToShow={numberSlide}
+ slidesToScroll={numberSlide}
+ autoplay={false}
+ centerPadding={'45px'}
+ >
+ {BLOGS.map(renderCard)}
+
+
+
+
+
+ );
+};
+
+export default Section_7;
diff --git a/src/modules/landing-rollback/Componets/Section_7/styles.module.scss b/src/modules/landing-rollback/Componets/Section_7/styles.module.scss
new file mode 100644
index 000000000..fffc5446c
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Section_7/styles.module.scss
@@ -0,0 +1,146 @@
+
+.sliderContainer {
+ max-width: 1600px;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+
+ ::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* the parent */
+ .slick-list {
+ margin: 0 27px !important;
+ }
+
+ .slick-next:before {
+ content: none;
+ }
+
+ .slick-prev:before {
+ content: none;
+ }
+
+ :hover {
+ cursor: pointer;
+ }
+
+ .slick-slide {
+ border-radius: 16px !important;
+ margin: 20px 40px !important;
+ overflow: hidden !important;
+ margin-right: 30px;
+ display: flex !important;;
+ }
+
+
+ .slick-arrow .slick-next,
+ .slick-arrow .slick-prev {
+ z-index: 100;
+ width: fit-content !important;;
+ height: fit-content !important;;
+ display: flex !important;;
+ justify-content: center !important;;
+ align-items: center !important;;
+ }
+
+ .slick-slider .slick-initialized {
+ display: flex !important;;
+ }
+
+ .slick-next {
+ right: 0;
+ }
+
+ .slick-prev {
+ left: 0;
+ }
+
+ .slick-active .slick-current {
+ margin-right: 20px !important;
+ margin-left: 20 !important;
+ }
+
+ .slick-active {
+ margin-left: 10px !important;;
+ }
+
+ .slick-slide .slick-active .slick-current {
+ margin-right: 20px !important;
+ display: flex !important;;
+ }
+}
+
+.item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #000;
+ gap: 20px;
+ padding: 20px;
+ cursor: pointer;
+}
+
+
+.heading {
+ span {
+ color: #FA4E0E;
+ }
+}
+
+.slide {
+
+ padding-top: 48px;
+ padding-bottom: 48px;
+
+ @include is-tablet {
+ padding-top: 80px;
+ padding-bottom: 80px;
+ }
+
+ @include is-pc {
+ padding-top: 120px;
+ padding-bottom: 120px;
+ }
+
+ :global {
+
+ .slick-arrow {
+ top: -80px;
+ right: 18px;
+ border-radius: 0;
+ transition: opacity .4s ease-out;
+
+ &:hover {
+ opacity: .8;
+ }
+
+ &.slick-prev {
+ right: 80px;
+ }
+ }
+
+ .slick-arrow .slick-next,
+ .slick-arrow .slick-prev {
+ z-index: 100;
+ width: fit-content !important;
+ height: fit-content !important;
+ display: flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ }
+ }
+}
+
+
+.cardLogo {
+ border-bottom: 1px solid #ECECEC;
+ padding: 16px 0;
+
+ img {
+ height: 28px;
+ width: auto;
+ object-fit: contain;
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Tool/ItemTool/index.tsx b/src/modules/landing-rollback/Componets/Tool/ItemTool/index.tsx
new file mode 100644
index 000000000..80e271ce6
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Tool/ItemTool/index.tsx
@@ -0,0 +1,49 @@
+import SvgInset from '@/components/SvgInset';
+import useWindowSize from '@/hooks/useWindowSize';
+import s from './styles.module.scss';
+
+type TItemTool = {
+ step: string;
+ title: string;
+ description: string;
+ index: number;
+ length: number;
+};
+
+export default function ItemTool({
+ data,
+ delay,
+}: {
+ data: TItemTool;
+ delay: number;
+}) {
+ const isFrist = data.index === 0;
+ const isLast = data.index === data.length;
+ const { mobileScreen, tabletScreen } = useWindowSize();
+
+ const svgUrl = isFrist
+ ? '/landing/svg/frame_tool_fill.svg'
+ : '/landing/svg/frame_tool_mid.svg';
+
+ return (
+
+
+ {!mobileScreen && !tabletScreen &&
}
+ {!isLast &&
}
+
{data.step}
+
+
+
+
{data.title}
+
+ {data.description}
+
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Tool/ItemTool/styles.module.scss b/src/modules/landing-rollback/Componets/Tool/ItemTool/styles.module.scss
new file mode 100644
index 000000000..e93aa4dd2
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Tool/ItemTool/styles.module.scss
@@ -0,0 +1,124 @@
+.itemTool {
+ flex: 1;
+ border-top: 1px solid #3d3d3d;
+ border-bottom: 1px solid #3d3d3d;
+ @include is-mobile {
+ width: 100%;
+ border: 1px solid #3d3d3d;
+ }
+ @include is-tablet {
+ width: 100%;
+ }
+ &_step {
+ padding: 17.5px 0;
+ padding-left: 32px;
+ font-size: 18px;
+ height: 60px;
+ color: #fa4e0e;
+ font-weight: 500;
+ line-height: 25.2px;
+ position: relative;
+ z-index: 1;
+
+ @include is-mobile {
+ background-color: #262626;
+ padding: 12px 0;
+ padding-left: 12px;
+ height: 44px;
+ }
+ @include is-tablet {
+ background-color: #262626;
+ padding: 12px 0;
+ padding-left: 12px;
+ height: 60px;
+ }
+ &_text {
+ position: absolute;
+ left: 32px;
+ z-index: 3;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 140%; /* 25.2px */
+ letter-spacing: 0.18px;
+ @include is-mobile {
+ left: 16px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 140%; /* 19.6px */
+ letter-spacing: 0.14px;
+ }
+ }
+ &_stud {
+ position: absolute;
+ left: calc(100% - 1px);
+ width: 8px;
+ height: 25px;
+ top: 50%;
+ transform: translateY(-50%);
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ background: #262626;
+
+ @include is-mobile {
+ display: none;
+ }
+ @include is-tablet {
+ display: none;
+ }
+ }
+ svg {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1;
+ width: 100%;
+ }
+ }
+
+ &_content {
+ padding: 32px;
+
+ @include is-mobile {
+ padding: 16px;
+ }
+ &_inner {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &_title {
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 33.6px;
+
+ @include is-mobile {
+ font-size: 16px;
+ line-height: 22.4px;
+ }
+ }
+ &_description {
+ font-weight: 400;
+ line-height: 25.2px;
+ font-size: 18px;
+ color: rgba(255, 255, 255, 0.7);
+
+ @include is-mobile {
+ font-size: 14px;
+ line-height: 19.6px;
+ width: 70%;
+ }
+ }
+ }
+
+ &__midItem {
+ border: solid 1px #3d3d3d;
+ border-top: none;
+ border-bottom: none;
+
+ @include is-mobile {
+ border: none;
+ }
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/Componets/Tool/index.tsx b/src/modules/landing-rollback/Componets/Tool/index.tsx
new file mode 100644
index 000000000..4860f0402
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Tool/index.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import s from './styles.module.scss';
+import tool_img from '@/public/landing/images/tool_img.png';
+import Image from 'next/image';
+import ItemTool from './ItemTool';
+import Chars from '@/interactive/Chars';
+import Fade from '@/interactive/Fade';
+import Scale from '@/interactive/Scale';
+import useWindowSize from '@/hooks/useWindowSize';
+
+const DATA_CONTENT = [
+ {
+ step: 'Step 1',
+ title: 'Choose a rollup method',
+ description: 'Optimistic rollups or ZK rollups',
+ },
+ {
+ step: 'Step 2',
+ title: 'Choose a block time',
+ description: '10s, 5s, or 2s — entirely up to you.',
+ },
+ {
+ step: 'Step 3',
+ title: 'Choose pre-installed dapps',
+ description: 'DEX, DAO, NFT marketplace, and more over time.',
+ },
+];
+
+export default function Tool() {
+ const { mobileScreen, tabletScreen } = useWindowSize();
+ return (
+
+
+
+
+ {mobileScreen || tabletScreen ? (
+ <>
+
+ A no-code tool
+
+ for building a full-featured Bitcoin L2 blockchain.
+ >
+ ) : (
+ <>
+
+
+ A no-code tool
+
+ for
+ building a full-featured
+ Bitcoin L2 blockchain.
+
+ >
+ )}
+
+ {mobileScreen || tabletScreen ? (
+
+ ) : (
+
+
+
+
+
+ )}
+
+
+
+ {DATA_CONTENT.map((item, index) => {
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/Componets/Tool/styles.module.scss b/src/modules/landing-rollback/Componets/Tool/styles.module.scss
new file mode 100644
index 000000000..7fdc5e7a8
--- /dev/null
+++ b/src/modules/landing-rollback/Componets/Tool/styles.module.scss
@@ -0,0 +1,84 @@
+.tool {
+ background: #000;
+ padding: 100px 0;
+
+ @include is-mobile {
+ padding: 32px 0;
+ }
+ &_heading {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ gap: 24px;
+
+ @include is-mobile {
+ flex-direction: column-reverse;
+ align-items: start;
+ }
+ @include is-tablet {
+ flex-direction: column-reverse;
+ align-items: start;
+ }
+
+ &_text {
+ font-weight: 400;
+ line-height: 57.6px;
+ font-size: 48px;
+ display: flex;
+ flex-direction: column;
+ width: 567px;
+
+ @include is-mobile {
+ width: 100%;
+ font-size: 28px;
+ line-height: 39.2px;
+ display: inline;
+ }
+ @include is-tablet {
+ display: inline;
+ width: 100%;
+ text-align: center;
+ }
+
+ &_hightlight {
+ color: #fa4e0e;
+ width: max-content;
+ }
+ }
+
+ &_img {
+ width: 100%;
+
+ @include is-mobile {
+ width: 50%;
+ }
+ @include is-tablet {
+ width: 50%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ }
+ }
+ &_content {
+ margin-top: 48px;
+ width: 100%;
+ flex-direction: row;
+ display: flex;
+ border: solid 1px #3d3d3d;
+ border-top: none;
+ border-bottom: none;
+ @include is-mobile {
+ margin-top: 24px;
+ flex-direction: column;
+ gap: 24px;
+ border: none;
+ }
+
+ @include is-tablet {
+ flex-direction: column;
+ gap: 24px;
+ border: none;
+ }
+ }
+}
diff --git a/src/modules/landing-rollback/index.tsx b/src/modules/landing-rollback/index.tsx
new file mode 100644
index 000000000..9f98e3f3f
--- /dev/null
+++ b/src/modules/landing-rollback/index.tsx
@@ -0,0 +1,32 @@
+import useWindowSize from '@/hooks/useWindowSize';
+import Chain from './Componets/Chain';
+import Hero from './Componets/Hero';
+import ScaleableMobile from './Componets/ScaleableMobile';
+import s from './styles.module.scss';
+import Section_7 from '@/modules/landing/Componets/Section_7';
+import { useEffect } from 'react';
+import ScalableSlide from '@/modules/landing/Componets/ScalableSlide';
+import Section7Mobile from './Componets/Section_7/Section_7_Mobile';
+import BitEth from '@/modules/landing/Componets/BitEth';
+import Ecosystem from './Componets/Ecosystem';
+import LegoV2 from '@/modules/landing/Componets/LegoV2';
+import JoinAllowList from '@/modules/landing/Componets/Hero/JoinAllowList';
+
+export default function Landing() {
+ const { mobileScreen, tabletScreen } = useWindowSize();
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, []);
+ return (
+
+
+
+
+
+
+ {mobileScreen || tabletScreen ? : }
+ {mobileScreen || tabletScreen ? : }
+
+
+ );
+}
diff --git a/src/modules/landing-rollback/styles.module.scss b/src/modules/landing-rollback/styles.module.scss
new file mode 100644
index 000000000..5455523da
--- /dev/null
+++ b/src/modules/landing-rollback/styles.module.scss
@@ -0,0 +1,2 @@
+.landing {
+}
From acbb2d60b8da40c93f902e31f41782e6b3666783 Mon Sep 17 00:00:00 2001
From: 0xd22f9c
Date: Tue, 12 Nov 2024 09:41:41 +0700
Subject: [PATCH 14/19] fx
---
src/app/home-rollback/page.tsx | 21 ++
src/layouts-rollback/BoxContent/index.tsx | 38 --
.../BoxContent/styles.module.scss | 2 -
src/layouts-rollback/Footer/index.tsx | 24 --
.../Footer/styles.module.scss | 7 -
.../Header/components/DesktopNav.tsx | 59 ---
.../Header/components/DesktopNavLeft.tsx | 44 ---
.../Header/components/DesktopNavRight.tsx | 134 -------
.../Header/components/DrawerMenu.tsx | 49 ---
.../Header/components/IcGit.tsx | 11 -
.../Header/components/IcTW.tsx | 19 -
.../Header/components/MobileNav.tsx | 30 --
.../Header/components/styles.module.scss | 91 -----
src/layouts-rollback/Header/index.tsx | 122 -------
src/layouts-rollback/Header/menuConfig.ts | 150 --------
src/layouts-rollback/Header/style.module.scss | 26 --
src/layouts-rollback/MainLayout.tsx | 34 --
src/layouts-rollback/styles.module.scss | 9 -
.../Componets/Article/ItemArticle/index.tsx | 41 ---
.../Article/ItemArticle/styles.module.scss | 58 ---
.../Componets/Article/index.tsx | 66 ----
.../Componets/Article/styles.module.scss | 66 ----
.../Componets/BitEth/index.tsx | 70 ----
.../Componets/BitEth/styles.module.scss | 33 --
.../Componets/Chain/Cursor/index.tsx | 60 ----
.../Componets/Chain/Cursor/styles.module.scss | 32 --
.../Componets/Chain/Cursor/useCursorStore.ts | 14 -
.../Chain/ItemChain/SectionBottom/index.tsx | 76 ----
.../SectionBottom/styles.module.scss | 127 -------
.../Chain/ItemChain/SectionTop/index.tsx | 43 ---
.../ItemChain/SectionTop/styles.module.scss | 58 ---
.../Componets/Chain/ItemChain/index.tsx | 60 ----
.../Chain/ItemChain/styles.module.scss | 63 ----
.../Componets/Chain/index.tsx | 185 ----------
.../Componets/Chain/styles.module.scss | 68 ----
.../Comunity/ItemCommunity/index.tsx | 46 ---
.../Comunity/ItemCommunity/styles.module.scss | 99 -----
.../Componets/Comunity/index.tsx | 61 ----
.../Componets/Comunity/styles.module.scss | 114 ------
.../Componets/ContentSection/index.tsx | 17 -
.../ContentSection/styles.module.scss | 16 -
.../Componets/Ecosystem/index.tsx | 70 ----
.../Componets/Ecosystem/styles.module.scss | 39 --
.../Componets/HeadingSection/index.tsx | 9 -
.../HeadingSection/styles.module.scss | 22 --
.../Componets/HeadingText/index.tsx | 71 ----
.../Componets/HeadingText/styles.module.scss | 18 -
.../Componets/HeadingTextTyping/index.tsx | 125 -------
.../HeadingTextTyping/styles.module.scss | 17 -
.../Componets/HeadingTextV2/index.tsx | 65 ----
.../HeadingTextV2/styles.module.scss | 20 --
.../Componets/Hero/Bg/index.tsx | 17 -
.../Componets/Hero/Bg/styles.module.scss | 14 -
.../Componets/Hero/Content/index.tsx | 17 -
.../Componets/Hero/Content/styles.module.scss | 61 ----
.../Componets/Hero/HeroLabel/index.tsx | 65 ----
.../Hero/HeroLabel/styles.module.scss | 69 ----
.../Componets/Hero/ItemHero/index.tsx | 36 --
.../Hero/ItemHero/styles.module.scss | 64 ----
.../Componets/Hero/JoinAllowList/index.tsx | 139 -------
.../Hero/JoinAllowList/styles.module.scss | 288 ---------------
.../landing-rollback/Componets/Hero/index.tsx | 24 --
.../Componets/Hero/styles.module.scss | 44 ---
.../Componets/Intro/index.tsx | 244 -------------
.../Componets/Intro/styles.module.scss | 339 ------------------
.../landing-rollback/Componets/Lego/index.tsx | 63 ----
.../Componets/Lego/styles.module.scss | 32 --
.../Componets/LegoV2/LegoItem/index.tsx | 95 -----
.../LegoV2/LegoItem/style.module.scss | 322 -----------------
.../Componets/LegoV2/index.tsx | 119 ------
.../Componets/LegoV2/styles.module.scss | 87 -----
.../ScalableSlide/ScalableContnet/index.tsx | 21 --
.../ScalableContnet/styles.module.scss | 40 ---
.../ScalableSlide/ScalableItem/index.tsx | 8 -
.../ScalableItem/styles.module.scss | 34 --
.../Componets/ScalableSlide/index.tsx | 162 ---------
.../Componets/ScalableSlide/style.module.scss | 79 ----
.../ItemScaleableMobile/index.tsx | 38 --
.../ItemScaleableMobile/styles.module.scss | 69 ----
.../Componets/ScaleableMobile/index.tsx | 47 ---
.../ScaleableMobile/styles.module.scss | 4 -
.../Section_7/Section_7_Mobile/index.tsx | 23 --
.../Section_7_Mobile/styles.module.scss | 33 --
.../Componets/Section_7/constant.ts | 188 ----------
.../Componets/Section_7/index.tsx | 152 --------
.../Componets/Section_7/styles.module.scss | 146 --------
.../Componets/Tool/ItemTool/index.tsx | 49 ---
.../Tool/ItemTool/styles.module.scss | 124 -------
.../landing-rollback/Componets/Tool/index.tsx | 98 -----
.../Componets/Tool/styles.module.scss | 84 -----
src/modules/landing-rollback/index.tsx | 32 --
.../landing-rollback/styles.module.scss | 2 -
92 files changed, 21 insertions(+), 6350 deletions(-)
create mode 100644 src/app/home-rollback/page.tsx
delete mode 100644 src/layouts-rollback/BoxContent/index.tsx
delete mode 100644 src/layouts-rollback/BoxContent/styles.module.scss
delete mode 100644 src/layouts-rollback/Footer/index.tsx
delete mode 100644 src/layouts-rollback/Footer/styles.module.scss
delete mode 100644 src/layouts-rollback/Header/components/DesktopNav.tsx
delete mode 100644 src/layouts-rollback/Header/components/DesktopNavLeft.tsx
delete mode 100644 src/layouts-rollback/Header/components/DesktopNavRight.tsx
delete mode 100644 src/layouts-rollback/Header/components/DrawerMenu.tsx
delete mode 100644 src/layouts-rollback/Header/components/IcGit.tsx
delete mode 100644 src/layouts-rollback/Header/components/IcTW.tsx
delete mode 100644 src/layouts-rollback/Header/components/MobileNav.tsx
delete mode 100644 src/layouts-rollback/Header/components/styles.module.scss
delete mode 100644 src/layouts-rollback/Header/index.tsx
delete mode 100644 src/layouts-rollback/Header/menuConfig.ts
delete mode 100644 src/layouts-rollback/Header/style.module.scss
delete mode 100644 src/layouts-rollback/MainLayout.tsx
delete mode 100644 src/layouts-rollback/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Article/ItemArticle/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Article/ItemArticle/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Article/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Article/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/BitEth/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/BitEth/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Chain/Cursor/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Chain/Cursor/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Chain/Cursor/useCursorStore.ts
delete mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Chain/ItemChain/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Chain/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Chain/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Comunity/ItemCommunity/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Comunity/ItemCommunity/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Comunity/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Comunity/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/ContentSection/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/ContentSection/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Ecosystem/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Ecosystem/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/HeadingSection/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/HeadingSection/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/HeadingText/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/HeadingText/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/HeadingTextTyping/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/HeadingTextTyping/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/HeadingTextV2/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/HeadingTextV2/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Hero/Bg/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Hero/Bg/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Hero/Content/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Hero/Content/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Hero/HeroLabel/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Hero/HeroLabel/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Hero/ItemHero/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Hero/ItemHero/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Hero/JoinAllowList/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Hero/JoinAllowList/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Hero/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Hero/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Intro/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Intro/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Lego/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Lego/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/LegoV2/LegoItem/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/LegoV2/LegoItem/style.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/LegoV2/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/LegoV2/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/ScalableSlide/style.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/ScaleableMobile/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/ScaleableMobile/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Section_7/constant.ts
delete mode 100644 src/modules/landing-rollback/Componets/Section_7/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Section_7/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Tool/ItemTool/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Tool/ItemTool/styles.module.scss
delete mode 100644 src/modules/landing-rollback/Componets/Tool/index.tsx
delete mode 100644 src/modules/landing-rollback/Componets/Tool/styles.module.scss
delete mode 100644 src/modules/landing-rollback/index.tsx
delete mode 100644 src/modules/landing-rollback/styles.module.scss
diff --git a/src/app/home-rollback/page.tsx b/src/app/home-rollback/page.tsx
new file mode 100644
index 000000000..2f1fd5350
--- /dev/null
+++ b/src/app/home-rollback/page.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import MainLayout from '@/layouts/MainLayout';
+import Landing from '@/modules/landing';
+// import LandingV3 from '@/modules/landingV3';
+
+export default function Home() {
+ return (
+
+
+
+ );
+}
diff --git a/src/layouts-rollback/BoxContent/index.tsx b/src/layouts-rollback/BoxContent/index.tsx
deleted file mode 100644
index 53f5b3463..000000000
--- a/src/layouts-rollback/BoxContent/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client';
-
-import { Box } from '@chakra-ui/react';
-import { HTMLChakraProps } from '@chakra-ui/system';
-import * as _chakra_ui_system from '@chakra-ui/system';
-
-// const breakpoints = {
-// base: "0em", // 0px => Mobile
-// sm: "30em", // ~480px. em is a relative unit and is dependant on the font size.
-// md: "48em", // ~768px
-// lg: "62em", // ~992px
-// xl: "80em", // ~1280px
-// "2xl": "96em", // ~1536px
-// };
-
-const BoxContent: _chakra_ui_system.ChakraComponent<'div', {}> = (
- props: HTMLChakraProps<'div'>,
-) => {
- return (
-
- {props.children}
-
- );
-};
-
-export default BoxContent;
diff --git a/src/layouts-rollback/BoxContent/styles.module.scss b/src/layouts-rollback/BoxContent/styles.module.scss
deleted file mode 100644
index 485140808..000000000
--- a/src/layouts-rollback/BoxContent/styles.module.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.container {
-}
diff --git a/src/layouts-rollback/Footer/index.tsx b/src/layouts-rollback/Footer/index.tsx
deleted file mode 100644
index ac4fb8275..000000000
--- a/src/layouts-rollback/Footer/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-
-import { Box, Container, Stack, Text } from '@chakra-ui/react';
-
-const Footer = () => {
- return (
-
- );
-};
-
-export default Footer;
diff --git a/src/layouts-rollback/Footer/styles.module.scss b/src/layouts-rollback/Footer/styles.module.scss
deleted file mode 100644
index 8ba023df6..000000000
--- a/src/layouts-rollback/Footer/styles.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.footerBar {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
-}
diff --git a/src/layouts-rollback/Header/components/DesktopNav.tsx b/src/layouts-rollback/Header/components/DesktopNav.tsx
deleted file mode 100644
index 0d8ceab74..000000000
--- a/src/layouts-rollback/Header/components/DesktopNav.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client';
-
-import { Box, HStack, Text } from '@chakra-ui/react';
-
-import Link from 'next/link';
-import { NAV_ITEMS } from '../menuConfig';
-import { IcTW } from './IcTW';
-
-type Props = {
- primaryColor?: 'black' | 'white';
-};
-
-export const DesktopNav = (props: Props) => {
- return (
-
- {NAV_ITEMS.map((navItem) => (
-
- {navItem?.isTwitter ? (
- {
- window.open(navItem.href, '_blank');
- }}
- >
-
-
- ) : (
-
- {navItem.label}
-
- )}
-
- ))}
-
- );
-};
diff --git a/src/layouts-rollback/Header/components/DesktopNavLeft.tsx b/src/layouts-rollback/Header/components/DesktopNavLeft.tsx
deleted file mode 100644
index 37f336fed..000000000
--- a/src/layouts-rollback/Header/components/DesktopNavLeft.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-import { Box, HStack, Text } from '@chakra-ui/react';
-
-import Link from 'next/link';
-import { NAV_ITEMS, NAV_ITEMS_LEFT } from '../menuConfig';
-import s from './styles.module.scss'
-
-type Props = {
- primaryColor?: 'black' | 'white';
-};
-
-export const DesktopNavLeft = (props: Props) => {
- return (
-
- {NAV_ITEMS_LEFT.map((navItem) => (
-
- {
- navItem.isStrong &&
- ✨
-
- }
-
-
- {navItem.label}
-
-
- ))}
-
- );
-};
diff --git a/src/layouts-rollback/Header/components/DesktopNavRight.tsx b/src/layouts-rollback/Header/components/DesktopNavRight.tsx
deleted file mode 100644
index 6fe0291f0..000000000
--- a/src/layouts-rollback/Header/components/DesktopNavRight.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-'use client';
-
-import { Box, HStack, Text } from '@chakra-ui/react';
-
-import Link from 'next/link';
-import { NAV_ITEMS, NAV_ITEMS_RIGHT } from '../menuConfig';
-import { IcTW } from './IcTW';
-import { ReactElement } from 'react';
-import SvgInset from '@/components/SvgInset';
-import s from './styles.module.scss';
-import { IcGit } from '@/layouts/Header/components/IcGit';
-
-type Props = {
- primaryColor?: 'black' | 'white';
-};
-
-export const DesktopNavRight = (props: Props) => {
- return (
-
- {NAV_ITEMS_RIGHT.map((navItem) => (
- <>
-
- {
- navItem.subMenu ?
-
- :
-
-
-
- {navItem.label}
-
-
- }
-
-
-
- >
- ))}
-
-
-
- {
- window.open('https://github.com/trustlesscomputer/', '_blank');
- }}
- >
-
-
-
-
-
-
- {
- window.open('https://twitter.com/bvmnetwork', '_blank');
- }}
- >
-
-
-
-
- );
-};
-
-type PropD = {
- title: string, lists: string[], primaryColor?: string
-};
-const DropDown = ({ title, lists, primaryColor }: PropD): ReactElement => {
-
- return ;
-};
diff --git a/src/layouts-rollback/Header/components/DrawerMenu.tsx b/src/layouts-rollback/Header/components/DrawerMenu.tsx
deleted file mode 100644
index c2eeef2e2..000000000
--- a/src/layouts-rollback/Header/components/DrawerMenu.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-import {
- Drawer,
- DrawerBody,
- DrawerContent,
- DrawerFooter,
- DrawerOverlay,
- Image,
- useDisclosure,
-} from '@chakra-ui/react';
-import { MobileNav } from './MobileNav';
-
-export type HeaderProps = {
- isOpen: boolean;
- onToggle: any;
-};
-
-const DrawerMobileMenu = (props: HeaderProps) => {
- return (
-
-
-
- { }
-
-
-
-
-
- );
-};
-
-export default DrawerMobileMenu;
diff --git a/src/layouts-rollback/Header/components/IcGit.tsx b/src/layouts-rollback/Header/components/IcGit.tsx
deleted file mode 100644
index 6792e640c..000000000
--- a/src/layouts-rollback/Header/components/IcGit.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-//#30ccfb
-const IcGit= ({ fillColor }: { fillColor?: string }) => {
- return (
-
-
-
-
- );
-};
-
-export { IcGit };
diff --git a/src/layouts-rollback/Header/components/IcTW.tsx b/src/layouts-rollback/Header/components/IcTW.tsx
deleted file mode 100644
index a744d0e35..000000000
--- a/src/layouts-rollback/Header/components/IcTW.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-//#30ccfb
-const IcTW = ({ fillColor }: { fillColor?: string }) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export { IcTW };
diff --git a/src/layouts-rollback/Header/components/MobileNav.tsx b/src/layouts-rollback/Header/components/MobileNav.tsx
deleted file mode 100644
index 518afb523..000000000
--- a/src/layouts-rollback/Header/components/MobileNav.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client';
-
-import { Button, Link, StackDivider, Text, VStack } from '@chakra-ui/react';
-import { NAV_ITEMS } from '../menuConfig';
-
-export const MobileNav = () => {
- return (
- }
- spacing={10}
- alignItems={'flex-start'}
- px={'24px'}
- py={'60px'}
- >
- {NAV_ITEMS.map((item) => (
-
- {item.label}
-
- ))}
-
- );
-};
diff --git a/src/layouts-rollback/Header/components/styles.module.scss b/src/layouts-rollback/Header/components/styles.module.scss
deleted file mode 100644
index 27785d629..000000000
--- a/src/layouts-rollback/Header/components/styles.module.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-.dropMenu {
- position: relative;
- color: white;
-
- &_label {
- display: flex;
- gap: 5px;
- align-items: center;
- font-weight: 500;
-
- &.black {
- color: black;
-
- svg path {
- stroke: black !important;
- }
- }
-
- img, svg {
- transform: translateY(.05em);
- }
- }
-
- &:hover {
- .dropMenu_list {
- opacity: 1;
- visibility: visible;
- z-index: 2 !important;
- }
- }
-
- &_list {
- opacity: 0;
- width: 240px;
- background: white;
- position: absolute;
- right: 0;
- list-style: none;
- padding: 24px;
- display: flex;
- flex-direction: column;
- gap: 24px;
- visibility: hidden;
- }
-}
-
-.listItem {
-
- a {
- color: #000000 !important;
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- svg * {
- transition: fill .4s var(--easeOutQuart);
- }
-
- &:hover {
- rect {
- fill: red;
- }
-
- path {
- fill: white
- }
- }
- }
-}
-
-
-.isStrong {
- padding: 4px 12px;
- border-radius: 100px;
- background: #000000;
- display: flex;
- align-items: center;
-
- p {
- color: #FF6A00 !important;
- background: linear-gradient(90deg, #EE0979 0%, #FF6A00 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- font-weight: 500;
- }
-}
-
-.strongText {
- color: yellow !important;
-}
diff --git a/src/layouts-rollback/Header/index.tsx b/src/layouts-rollback/Header/index.tsx
deleted file mode 100644
index 2035ba02a..000000000
--- a/src/layouts-rollback/Header/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client';
-import {
- Box,
- Flex,
- IconButton,
- Image,
- useBreakpointValue,
- useDisclosure,
-} from '@chakra-ui/react';
-import Link from 'next/link';
-import BoxContent from '../BoxContent';
-import DrawerMobileMenu from './components/DrawerMenu';
-import useAnimationStore from '@/stores/useAnimationStore';
-import { useMemo } from 'react';
-import { usePathname } from 'next/navigation';
-import cn from 'classnames';
-import s from './style.module.scss';
-import useWindowSize from '@/hooks/useWindowSize';
-import { DesktopNavLeft } from '@/layouts/Header/components/DesktopNavLeft';
-import { DesktopNavRight } from '@/layouts/Header/components/DesktopNavRight';
-
-export type HeaderProps = {
- color?: 'black' | 'white';
- position?: 'absolute' | 'relative';
- bgColor?: string;
-};
-
-export const HEADER_ID = 'HEADER_VIEW';
-
-const Header = (props: HeaderProps) => {
- const primaryColor = props.color || 'white';
- const position = props.position || 'absolute';
- const bgColor = props.bgColor || 'transparent';
- const pathName = usePathname();
-
- const { isOpen, onToggle } = useDisclosure();
- const { play } = useAnimationStore();
- const isHome = useMemo(() => {
- return pathName === '/';
- }, [pathName]);
- const isMobile = useBreakpointValue({ base: true, md: false }) as boolean;
- const { tabletScreen, isDesktop } = useWindowSize();
-
- return (
- <>
-
-
- >
- );
-};
-
-export default Header;
diff --git a/src/layouts-rollback/Header/menuConfig.ts b/src/layouts-rollback/Header/menuConfig.ts
deleted file mode 100644
index 3d198a7cc..000000000
--- a/src/layouts-rollback/Header/menuConfig.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { DEVELOPERS_DOC_URL, WHITEPAPER_DOC_URL } from '@/config';
-import { checkIsPublicSale } from '@/modules/Whitelist/utils';
-
-export interface NavItem {
- label: string;
- subLabel?: string;
- children?: Array;
- isNewWindow?: boolean;
- href?: string;
- isHide?: boolean;
- isTwitter?: boolean;
- isStrong?: boolean;
- subMenu?: any;
-}
-
-export const NAV_ITEMS: Array = [
- {
- label: 'Bitcoin L2s',
- href: '/blockchains',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: 'Module Store',
- href: '/module-store',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: checkIsPublicSale() ? 'Public Sale' : 'Launchpad',
- href: checkIsPublicSale() ? '/public-sale' : '/launchpad',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: '$BVM',
- href: '/bvm',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: 'Roadmap',
- href: '/roadmap',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: 'Onepager',
- href: 'https://bvm.network/onepager.pdf',
- isNewWindow: true,
- isHide: false,
- },
-
- {
- label: 'Deck',
- href: 'https://bvm.network/deck.pdf',
- isNewWindow: true,
- isHide: false,
- },
- {
- label: 'Whitepaper',
- href: WHITEPAPER_DOC_URL,
- isNewWindow: true,
- isHide: false,
- },
- {
- label: 'Developers',
- href: DEVELOPERS_DOC_URL,
- isNewWindow: true,
- isHide: false,
- },
- {
- label: 'Twitter',
- isTwitter: true,
- href: 'https://twitter.com/bvmnetwork',
- isNewWindow: true,
- isHide: false,
- },
- {
- label: 'Github',
- isTwitter: true,
- href: 'https://github.com/trustlesscomputer/',
- isNewWindow: true,
- isHide: false,
- },
-].filter((item) => !item.isHide);
-
-export const NAV_ITEMS_LEFT: Array = [
- {
- label: 'Bitcoin L2s',
- href: '/blockchains',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: 'Module Store',
- href: '/module-store',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: checkIsPublicSale() ? 'Public Sale' : 'Launchpad',
- href: checkIsPublicSale() ? '/public-sale' : '/launchpad',
- isNewWindow: false,
- isStrong: checkIsPublicSale(),
- isHide: false,
- },
-].filter((item) => !item.isHide);
-
-export const NAV_ITEMS_RIGHT: Array = [
- {
- label: '$BVM',
- href: '/bvm',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: 'Roadmap',
- href: '/roadmap',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: 'Learn',
- href: DEVELOPERS_DOC_URL,
- isNewWindow: true,
- isHide: false,
- subMenu: [
- {
- link: 'https://bvm.network/onepager.pdf',
- title: 'Onepager',
- },
- {
- link: 'https://bvm.network/deck.pdf',
- title: 'Deck',
- },
- {
- link: WHITEPAPER_DOC_URL,
- title: 'Whitepaper',
- },
- ],
- },
- {
- label: 'Build',
- href: DEVELOPERS_DOC_URL,
- isNewWindow: true,
- isHide: false,
- },
-
-].filter((item) => !item.isHide);
diff --git a/src/layouts-rollback/Header/style.module.scss b/src/layouts-rollback/Header/style.module.scss
deleted file mode 100644
index 7973ecf4c..000000000
--- a/src/layouts-rollback/Header/style.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.container111 {
- background-color: transparent !important;
- background: transparent !important;
-}
-
-
-.isHome {
- transform: translateY(-100%);
- opacity: 0;
-
- &.play {
- transition: all .8s var(--easeOutQuart);
- transform: translateY(0%);
- opacity: 1;
- }
-}
-
-
-.logo {
- @include is-pc{
- position: absolute;
- z-index: 3;
- left: 50%;
- transform: translateX(-50%);
- }
-}
diff --git a/src/layouts-rollback/MainLayout.tsx b/src/layouts-rollback/MainLayout.tsx
deleted file mode 100644
index 2904625ae..000000000
--- a/src/layouts-rollback/MainLayout.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-
-import Header, { HeaderProps } from '@/layouts/Header';
-import React, { useEffect } from 'react';
-import { usePathname } from 'next/navigation';
-import useAnimationStore from '@/stores/useAnimationStore';
-
-type IMainProps = {
- hideHeader?: boolean;
- hideFooter?: boolean;
- children?: React.ReactNode;
- headerProps?: HeaderProps;
-};
-
-const MainLayout = ({
- hideHeader = false,
- hideFooter = false,
- headerProps,
- children,
- }: IMainProps) => {
-
- const pathName = usePathname();
- const { resetPlay } = useAnimationStore();
- useEffect(() => {
- resetPlay();
- }, [pathName]);
-
- return <>
- {!hideHeader && }
- {children}
- >;
-};
-
-export default MainLayout;
diff --git a/src/layouts-rollback/styles.module.scss b/src/layouts-rollback/styles.module.scss
deleted file mode 100644
index 767290067..000000000
--- a/src/layouts-rollback/styles.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.container {
- display: flex;
- flex-direction: column;
- flex: 1;
- height: 100vh;
- width: 100vw;
- color: #fff;
- background-color: #000;
-}
diff --git a/src/modules/landing-rollback/Componets/Article/ItemArticle/index.tsx b/src/modules/landing-rollback/Componets/Article/ItemArticle/index.tsx
deleted file mode 100644
index f7098c572..000000000
--- a/src/modules/landing-rollback/Componets/Article/ItemArticle/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useMemo } from 'react';
-import s from './styles.module.scss';
-import { IBlog, LOGOS } from '../../Section_7/constant';
-import { Image } from '@chakra-ui/react';
-import useWindowSize from '@/hooks/useWindowSize';
-
-export default function ItemArticle({ data }: { data: IBlog }) {
- const { mobileScreen } = useWindowSize();
- const getLogo = useMemo((): string => {
- const tmp = LOGOS.filter((itemLogo => {
- return itemLogo.id === data.logo;
- }));
- return tmp.length ? tmp[0].img : '';
- }, [data]);
- return (
-
-
- {
- getLogo &&
-
-
- }
-
-
{data.title}
-
{data.desc}
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Article/ItemArticle/styles.module.scss b/src/modules/landing-rollback/Componets/Article/ItemArticle/styles.module.scss
deleted file mode 100644
index 35049e8cd..000000000
--- a/src/modules/landing-rollback/Componets/Article/ItemArticle/styles.module.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.itemArticle {
- display: flex;
- flex-direction: column;
- gap: 24px;
-
- @include is-mobile {
- gap: 20px;
- }
- &_img {
- width: 100%;
- height: auto;
- }
- &_content {
- display: flex;
- flex-direction: column;
- gap: 16px;
-
- @include is-mobile {
- gap: 12px;
- }
- &_title {
- font-size: 24px;
- line-height: 31.2px;
- font-weight: 400;
- color: #000;
- @include is-mobile {
- font-size: 22px;
- font-weight: 400;
- line-height: 130%;
- }
- }
- &_description {
- font-size: 16px;
- font-weight: 400;
- color: #4d4d4d;
- line-height: 22.4px;
-
- @include is-mobile {
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 20px;
- }
- }
- }
-}
-
-.cardLogo {
- border-bottom: 1px solid #ECECEC;
- padding-bottom: 12px;
-
- img {
- height: 28px;
- width: auto;
- object-fit: contain;
- }
-}
-
diff --git a/src/modules/landing-rollback/Componets/Article/index.tsx b/src/modules/landing-rollback/Componets/Article/index.tsx
deleted file mode 100644
index 3caa94b00..000000000
--- a/src/modules/landing-rollback/Componets/Article/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-// import React from 'react';
-// import s from './styles.module.scss';
-// import ItemArticle from './ItemArticle';
-// import article_1 from '@/public/landing/images/article_1.jpg';
-// import article_2 from '@/public/landing/images/article_2.jpg';
-// import article_3 from '@/public/landing/images/article_3.jpg';
-// import article_4 from '@/public/landing/images/article_4.jpg';
-
-// const DATA_ARTICLE = {
-// top: [
-// {
-// title: 'What Are BRC-20 Tokens? Explaining the Bitcoin Memecoin Hype',
-// description:
-// '"Memecoins" on Bitcoin is probably not what Satoshi Nakamoto envisioned when he released the Bitcoin whitepaper in 2008, but it just might be the mass adoption Bitcoin deserves.',
-// img: article_1,
-// },
-// {
-// title:
-// 'Ordinals turned Bitcoin into a worse version of Ethereum: Can we fix it?',
-// description:
-// 'No one expected the Taproot upgrade would lead to a surge of NFTs and memecoins on Bitcoin. Are they here to stay, or can the problems they’re causing be fixed?',
-// img: article_2,
-// },
-// ],
-// bottom: [
-// {
-// title: 'BRC-721: The Token Standard Defying Bitcoin’s 4MB Storage Limit',
-// description:
-// 'Degens will immediately recognize BRC-721’s acronymous name as being akin to ERC-721 — AKA the premiere token standard for Ethereum NFTs. Put simply, BRC-721s are smart-contract-based NFTs, but on BTC.',
-// img: article_3,
-// },
-// {
-// title: 'BRC-721: The Token Standard Defying Bitcoin’s 4MB Storage Limit',
-// description:
-// 'Degens will immediately recognize BRC-721’s acronymous name as being akin to ERC-721 — AKA the premiere token standard for Ethereum NFTs. Put simply, BRC-721s are smart-contract-based NFTs, but on BTC.',
-// img: article_4,
-// },
-// ],
-// };
-
-// export default function Article() {
-// return (
-//
-//
-//
-//
-// Oh, and the press loves us too!
-//
-//
-//
-// {DATA_ARTICLE.top.map((item, index) => {
-// return ;
-// })}
-//
-//
-//
-// {DATA_ARTICLE.bottom.map((item, index) => {
-// return ;
-// })}
-//
-//
-//
-//
-//
-// );
-// }
diff --git a/src/modules/landing-rollback/Componets/Article/styles.module.scss b/src/modules/landing-rollback/Componets/Article/styles.module.scss
deleted file mode 100644
index 87160800f..000000000
--- a/src/modules/landing-rollback/Componets/Article/styles.module.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-.article {
- padding-top: 140px;
- padding-bottom: 105px;
- background-color: #fff;
- &_inner {
- display: flex;
- flex-direction: column;
-
- &_heading {
- font-weight: 400;
- font-size: 48px;
- line-height: 52.8px;
- color: #000;
- span {
- color: #fa4e0e;
- }
- }
-
- &_content {
- display: flex;
- flex-direction: column;
- padding-top: 60px;
- padding-bottom: 40px;
-
- &_top {
- display: flex;
- flex-direction: row;
- gap: 36px;
- }
- &_divide {
- height: 1px;
- width: 100%;
- background-color: #eeeeee;
- margin: 40px 0;
- }
- &_bottom {
- display: flex;
- flex-direction: row;
- gap: 36px;
- }
- }
-
- &_groupButton {
- display: flex;
- flex-direction: row;
- gap: 10px;
-
- &_left {
- background-color: #f6f6f6;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 48px;
- height: 48px;
- }
- &_right {
- background-color: #000;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 48px;
- height: 48px;
- }
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/BitEth/index.tsx b/src/modules/landing-rollback/Componets/BitEth/index.tsx
deleted file mode 100644
index 048913074..000000000
--- a/src/modules/landing-rollback/Componets/BitEth/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import s from './styles.module.scss';
-import Image from 'next/image';
-import { Button } from '@chakra-ui/react';
-import Fade from '@/interactive/Fade';
-import { useRouter } from 'next/navigation';
-import useWindowSize from '@/hooks/useWindowSize';
-import Scale from '@/interactive/Scale';
-import Lines from '@/interactive/Lines';
-import HeadingSection from '../HeadingSection';
-import Chars from '@/interactive/Chars';
-import ContentSection from '@/modules/landing/Componets/ContentSection';
-
-export default function BitEth() {
-
- const router = useRouter();
- const { mobileScreen } = useWindowSize();
-
- return
-
-
-
-
-
-
-
- Minimal effort to migrate from Ethereum to Bitcoin.
-
-
-
-
- BVM is EVM equivalent. It allows Ethereum developers to migrate their Solidity smart contracts and dapps
- from Ethereum to Bitcoin with minimal or no modifications.
-
-
-
-
- {
- window.open('https://docs.bvm.network', '_blank');
- // router.push('/blockchains/customize');
- }}
- >
- {`Read developer docs`}
-
-
-
-
-
-
-
-
-
;
-}
diff --git a/src/modules/landing-rollback/Componets/BitEth/styles.module.scss b/src/modules/landing-rollback/Componets/BitEth/styles.module.scss
deleted file mode 100644
index cd09f9aed..000000000
--- a/src/modules/landing-rollback/Componets/BitEth/styles.module.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.bitEth {
- padding-top: 120px;
- background: #000;
- overflow: hidden;
-
- &_content {
- max-width: 1200px;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 60px;
- text-align: center;
- }
-
- .thumb {
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 28px;
- }
-
- .heading {
- color: #FFF;
- }
-
- .content {
- text-align: center;
- color: #FFF;
- }
-
- .actions {
- display: flex;
- justify-content: center;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Chain/Cursor/index.tsx b/src/modules/landing-rollback/Componets/Chain/Cursor/index.tsx
deleted file mode 100644
index 2fe86f143..000000000
--- a/src/modules/landing-rollback/Componets/Chain/Cursor/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import s from './styles.module.scss';
-import useCursorStore from '@/modules/landing/Componets/Chain/Cursor/useCursorStore';
-import { PropsWithChildren, useEffect, useRef } from 'react';
-import { gsap } from 'gsap';
-
-interface IProp extends PropsWithChildren {
-};
-export default function Cursor({ children }: IProp) {
- const refContent = useRef(null);
- const refCursor = useRef(null);
-
- const { isShow } = useCursorStore();
-
- useEffect(() => {
- if (isShow) {
- gsap.to(refCursor.current, { opacity: 1, ease: 'power3.out', duration: .4 });
- } else {
- gsap.to(refCursor.current, { opacity: 0, ease: 'power3.out', duration: .4 });
- }
- }, [isShow]);
-
- useEffect(() => {
-
- const quickX = gsap.quickTo(refCursor.current, 'x', { duration: 0.4, ease: 'power3' });
- const quickY = gsap.quickTo(refCursor.current, 'y', { duration: 0.4, ease: 'power3' });
-
- if (refContent.current) {
- const rectWrap = refContent.current.getBoundingClientRect();
- quickY(rectWrap.height / 2);
- quickX(rectWrap.width / 2);
- }
-
- const onMouseMove = (e: MouseEvent) => {
- if (!refContent.current) return;
-
- const rectWrap = refContent.current.getBoundingClientRect();
- const disX = e.clientX - rectWrap.left + 10;
- const disY = e.clientY - rectWrap.top + 10;
-
- quickX(disX);
- quickY(disY);
- };
-
- window.addEventListener('mousemove', onMouseMove);
- return () => {
- window.removeEventListener('mousemove', onMouseMove);
- };
- }, []);
-
- return (
- {
- children
- }
-
-
-
Learn more
-
-
-
);
-}
diff --git a/src/modules/landing-rollback/Componets/Chain/Cursor/styles.module.scss b/src/modules/landing-rollback/Componets/Chain/Cursor/styles.module.scss
deleted file mode 100644
index c7b3c7f15..000000000
--- a/src/modules/landing-rollback/Componets/Chain/Cursor/styles.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.wrapCursor {
- position: relative;
- overflow: hidden;
- width: 100%;
-}
-
-.cursor {
- position: absolute;
- pointer-events: none;
- top: 0;
- left: 0;
- opacity: 0;
- background: #fff;
- will-change: opacity, transform;
-
- &_inner {
- padding: 6px;
- display: flex;
- color: #000;
- text-align: center;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: normal;
- align-items: center;
- }
-
- &_text {
- padding-left: 12px;
- padding-right: 12px;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Chain/Cursor/useCursorStore.ts b/src/modules/landing-rollback/Componets/Chain/Cursor/useCursorStore.ts
deleted file mode 100644
index ffd5c14b4..000000000
--- a/src/modules/landing-rollback/Componets/Chain/Cursor/useCursorStore.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { create } from 'zustand';
-
-interface IProp {
- isShow: boolean,
- show: ()=>void
- hide: ()=>void
-}
-const useCursorStore =create((set) => ({
- isShow: false,
- show: () => set({ isShow: true }),
- hide: () => set({ isShow: false }),
-}))
-
-export default useCursorStore;
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/index.tsx b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/index.tsx
deleted file mode 100644
index e76506288..000000000
--- a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import s from './styles.module.scss';
-import Image from 'next/image';
-import Chars from '@/interactive/Chars';
-import Fade from '@/interactive/Fade';
-
-type TSectionBottom = {
- title: string;
- link?: string;
- data?: {
- left: string;
- right: string;
- icon: string;
- }[];
- bgBottom: string;
-};
-
-export default function SectionBottom({
- data,
- delay,
- isLaunch = false,
-}: {
- data: TSectionBottom;
- delay: number;
- isLaunch?: boolean;
- subText?: string;
-}) {
- return (
-
-
-
- {data.title}
-
-
-
- {!data?.link && !isLaunch && 'Coming soon'}
-
-
-
-
- {!isLaunch && (
-
- {data.data &&
- data.data.map((item, index) => {
- return (
-
-
-
-
-
- {item.left}
-
-
-
- {item.right}
-
-
-
- );
- })}
-
- )}
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/styles.module.scss b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/styles.module.scss
deleted file mode 100644
index ecbae61b1..000000000
--- a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionBottom/styles.module.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-.sectionBottom {
- padding: 51px 24px 24px;
- display: flex;
- flex-direction: column;
- gap: 24px;
- min-height: 142px;
- justify-content: center;
-
- &_title {
- //display: flex;
- //flex-direction: row;
- //justify-content: space-between;
-
- &_main {
- font-size: 24px;
- color: #fff;
- font-weight: 500;
- line-height: 26.4px;
-
- &_isLaunch {
-
- text-align: center;
- padding: 0;
- @include is-pc{
- padding: 0 40px;
- padding-bottom: 24px;
- }
- }
-
- @include is-tablet {
- font-size: 20px;
- }
-
- @include is-mobile {
- font-size: 18px;
- line-height: 19.8px;
- }
- }
-
- &_sub {
- line-height: 25.2px;
- font-size: 18px;
- color: rgba(255, 255, 255, 0.7);
-
- @include is-tablet {
- font-size: 16px;
- }
-
- @include is-mobile {
- font-size: 14px;
- line-height: 19.6px;
- }
- }
- }
-
- &_listInfo {
- display: flex;
- flex-direction: column;
- gap: 24px;
-
- &_item {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-
- &__left {
- display: flex;
- flex-direction: row;
- gap: 12px;
-
- &_text {
- font-size: 18px;
- line-height: 25.2px;
- color: rgba(255, 255, 255, 0.7);
-
- @include is-tablet {
- font-size: 14px;
- }
-
- @include is-mobile {
- font-size: 14px;
- line-height: 19.6px;
- }
- }
- }
-
- &__right {
- font-size: 18px;
- line-height: 25.2px;
- font-weight: 400;
-
- @include is-mobile {
- font-size: 14px;
- line-height: 19.6px;
- }
-
- @include is-tablet {
- font-size: 14px;
- }
- }
- }
- }
-
- &__007659 {
- background: #007659;
- }
-
- &__A05700 {
- background: #a05700;
- }
-
- &__0074BB {
- background: #0074bb;
- }
-
- &__EBEFF7 {
- background: #ebeff7;
- }
-
- &__303030 {
- background: #303030;
- }
-
- &__7D8AA7 {
- background: #7d8aa7;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/index.tsx b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/index.tsx
deleted file mode 100644
index 756d80722..000000000
--- a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import Image, { StaticImageData } from 'next/image';
-import React from 'react';
-import s from './styles.module.scss';
-
-import cn from 'classnames';
-import Scale from '@/interactive/Scale';
-
-type TSectionTop = {
- img: StaticImageData;
- color: string;
- stud: number;
- delay: number;
-};
-
-export default function SectionTop({ img, color, stud, delay }: TSectionTop) {
- const listStud = Array.from({ length: stud }, () => 0);
-
- return (
-
-
-
-
-
-
-
- {listStud.map((item, index) => {
- return (
-
- );
- })}
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/styles.module.scss b/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/styles.module.scss
deleted file mode 100644
index ebeb98d21..000000000
--- a/src/modules/landing-rollback/Componets/Chain/ItemChain/SectionTop/styles.module.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.sectionTop {
- position: relative;
- width: 100%;
- aspect-ratio: 1.315;
-
- &_wrap {
- display: flex;
- align-items: center;
- height: 100%;
- overflow: hidden;
- }
-
- &_img {
- object-fit: contain;
- width: 100%;
- height: 100%;
- }
-
- &_studs {
- position: absolute;
- top: 100%;
- display: flex;
- flex-direction: row;
- justify-content: space-evenly;
- width: 100%;
- height: 50px;
-
- &_item {
- width: 64.44px;
- height: 31px;
- border-bottom-left-radius: 16px;
- border-bottom-right-radius: 16px;
- }
- }
-}
-
-.bg__FFD73B {
- background: #ffd73b;
-}
-
-.bg__35CCA6 {
- background: #35cca6;
-}
-
-.bg__4DBDE0 {
- background: #4dbde0;
-}
-
-.bg__000 {
- background: #000;
-}
-
-.bg__EBEFF7 {
- background: #ebeff7;
-}
-.bg__B4EDFF {
- background: #b4edff;
-}
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/index.tsx b/src/modules/landing-rollback/Componets/Chain/ItemChain/index.tsx
deleted file mode 100644
index fde4912f2..000000000
--- a/src/modules/landing-rollback/Componets/Chain/ItemChain/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { StaticImageData } from 'next/image';
-import React from 'react';
-import s from './styles.module.scss';
-import SectionTop from './SectionTop';
-import SectionBottom from './SectionBottom';
-import Fade from '@/interactive/Fade';
-import useCursorStore from '@/modules/landing/Componets/Chain/Cursor/useCursorStore';
-
-type TItemChain = {
- img: StaticImageData;
- title: string;
- stud: number;
- link?: string;
- data?: {
- left: string;
- right: string;
- icon: string;
- }[];
- bgTop: string;
- bgBottom: string;
-};
-
-export default function ItemChain({
- data,
- delay,
- isLaunch,
-}: {
- data: TItemChain;
- delay: number;
- isLaunch?: boolean;
-}) {
- const { img, bgTop, stud, ...dataSectionBottom } = data;
- const { show, hide } = useCursorStore();
- return (
- {
- data.link && window.open(data.link, '_blank');
- }}
- >
-
-
-
-
- {isLaunch ? (
-
- ) : (
-
- )}
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Chain/ItemChain/styles.module.scss b/src/modules/landing-rollback/Componets/Chain/ItemChain/styles.module.scss
deleted file mode 100644
index 53e566c81..000000000
--- a/src/modules/landing-rollback/Componets/Chain/ItemChain/styles.module.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-.itemChain {
- width: fit-content;
- flex: 1;
- cursor: pointer;
-
- &_inner{
- display: flex;
- flex-direction: column;
- padding: 20px;
- background-color: #fff;
- }
-
- @include is-mobile {
- width: 90vw;
- flex: 0 0 auto;
- padding: 7.64px;
- flex-grow: 1;
- }
-
- @include is-tablet {
- flex: 0 0 auto;
- width: 50%;
- padding: 12px;
- }
-
- :global {
- .fade {
- width: 100%;
- }
-
- .sectionTop_img {
- transition: transform 0.4s var(--easeOutQuart);
- }
- }
-
- &:hover {
- :global {
- .sectionTop_img {
- transform: scale(1.2);
- }
- }
- }
-}
-
-.itemLaunch {
- width: 100%;
- gap: unset;
-}
-.itemLaunch:first-child {
- grid-column: span 2;
- grid-column-start: 1;
-}
-.itemLaunch:nth-child(3n) {
- grid-column: span 2;
- grid-column-start: 2;
- @include is-tablet{
- grid-column-start: 1;
- }
-
- @include is-mobile{
- grid-column-start: 1;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Chain/index.tsx b/src/modules/landing-rollback/Componets/Chain/index.tsx
deleted file mode 100644
index f0b97debb..000000000
--- a/src/modules/landing-rollback/Componets/Chain/index.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React from 'react';
-import ItemChain from './ItemChain';
-import s from './styles.module.scss';
-
-import chain_1 from 'public/landing/compress/app-chain.png';
-import chain_2 from 'public/landing/compress/naka-chain.png';
-import chain_3 from 'public/landing/images/arcade-chain.jpg';
-import Chars from '@/interactive/Chars';
-import Fade from '@/interactive/Fade';
-import { Button, HStack } from '@chakra-ui/react';
-import { useRouter } from 'next/navigation';
-import useWindowSize from '@/hooks/useWindowSize';
-import HeroLabel from '../Hero/HeroLabel';
-import Cursor from '@/modules/landing/Componets/Chain/Cursor';
-import HeadingSection from '../HeadingSection';
-
-const DATA_CHAINS = [
- {
- img: chain_1,
- title: 'Alpha Chain',
- subTitle: '',
- stud: 1,
- link: 'https://alpha.wtf',
- data: [
- {
- left: 'Currency',
- right: 'BVM',
- icon: '/landing/svg/lego_icon_flat.svg',
- },
- {
- left: 'Use Case',
- right: 'SocialFi',
- icon: '/landing/svg/lego_icon_rect.svg',
- },
- {
- left: 'Rollups',
- right: 'Optimistic, Sovereign',
- icon: '/landing/svg/lego_icon_rollup.svg',
- },
- {
- left: 'Data Validity',
- right: 'Bitcoin',
- icon: '/landing/svg/lego_icon_cube.svg',
- },
- {
- left: 'Data Availability',
- right: 'Polygon',
- icon: '/landing/svg/lego_icon_cube.svg',
- },
- ],
-
- bgTop: '35CCA6',
- bgBottom: '007659',
- },
- {
- img: chain_2,
- title: 'Naka Chain',
- stud: 2,
- link: 'https://nakachain.xyz/',
- data: [
- {
- left: 'Currency',
- right: 'BTC',
- icon: '/landing/svg/lego_icon_flat.svg',
- },
- {
- left: 'Use Case',
- right: 'DeFi',
- icon: '/landing/svg/lego_icon_rect.svg',
- },
- {
- left: 'Rollups',
- right: 'Optimistic, Sovereign',
- icon: '/landing/svg/lego_icon_rollup.svg',
- },
- {
- left: 'Data Validity',
- right: 'Bitcoin',
- icon: '/landing/svg/lego_icon_cube.svg',
- },
- {
- left: 'Data Availability',
- right: 'NearDA',
- icon: '/landing/svg/lego_icon_cube.svg',
- },
- ],
- bgTop: 'FFD73B',
- bgBottom: 'A05700',
- },
- {
- img: chain_3,
- title: 'Arcade Chain',
- stud: 3,
- link: 'https://bitcoinarcade.xyz/',
- data: [
- {
- left: 'Currency',
- right: 'GAME',
- icon: '/landing/svg/lego_icon_flat.svg',
- },
- {
- left: 'Use Case',
- right: 'GameFi',
- icon: '/landing/svg/lego_icon_rect.svg',
- },
- {
- left: 'Rollups',
- right: 'Optimistic, Sovereign',
- icon: '/landing/svg/lego_icon_rollup.svg',
- },
- {
- left: 'Data Validity',
- right: 'Bitcoin',
- icon: '/landing/svg/lego_icon_cube.svg',
- },
- {
- left: 'Data Availability',
- right: 'EigenDA',
- icon: '/landing/svg/lego_icon_cube.svg',
- },
- ],
- bgTop: '4DBDE0',
- bgBottom: '0074BB',
- },
-];
-
-export default function Chain() {
- const router = useRouter();
- const { mobileScreen, tabletScreen } = useWindowSize();
- return (
-
-
-
-
- Case studies
-
-
- Say hello to the first modular Bitcoin L2 blockchains powered by BVM.
-
-
-
-
- {
- router.push('/blockchains/customize');
- }}
- >
- {`Build your Bitcoin L2`}
-
-
-
-
- {DATA_CHAINS.map((item, index) => {
- return ;
- })}
-
-
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Chain/styles.module.scss b/src/modules/landing-rollback/Componets/Chain/styles.module.scss
deleted file mode 100644
index db9751d62..000000000
--- a/src/modules/landing-rollback/Componets/Chain/styles.module.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.listChains {
- display: flex;
- flex-direction: row;
- gap: 36px;
- flex-wrap: wrap;
- overflow: hidden;
-
- @include is-mobile {
- width: 100%;
- padding: 0 20px;
- gap: 8px;
- }
-
- @include is-tablet {
- gap: 0;
- justify-content: center;
- }
-}
-
-.chain {
- background: #f6f6f6;
- overflow: hidden;
-
- &_case {
- color: #000;
- text-align: center;
- font-size: 14px;
- font-weight: 500;
- line-height: normal;
- text-transform: uppercase;
- padding-bottom: 16px;
- }
-
- &_label {
- @include is-mobile {
- padding-top: 24px;
- padding-bottom: 40px;
- }
- @include is-tablet {
- padding-top: 24px;
- padding-bottom: 40px;
- }
- }
-
- &_heading {
- max-width: 980px;
- margin-left: auto;
- margin-right: auto;
- }
-
- &_inner {
- background: #f6f6f6;
- padding: 100px 0;
-
- @include is-mobile {
- position: relative;
- overflow: hidden;
- left: -20px;
- width: calc(100% + 40px);
- padding-top: 32px;
- padding-bottom: 30px;
- }
- }
-
- &_label {
- background: #fff;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/index.tsx b/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/index.tsx
deleted file mode 100644
index fe00af6b1..000000000
--- a/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import SvgInset from '@/components/SvgInset';
-import useWindowSize from '@/hooks/useWindowSize';
-import Fade from '@/interactive/Fade';
-import s from './styles.module.scss';
-
-export default function ItemCommunity({
- content,
- delay,
-}: {
- content: string;
- delay: number;
-}) {
- const { mobileScreen } = useWindowSize();
- return (
-
-
-
-
-
- {content}
- {!mobileScreen && (
-
- )}
-
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/styles.module.scss b/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/styles.module.scss
deleted file mode 100644
index b298f3c3d..000000000
--- a/src/modules/landing-rollback/Componets/Comunity/ItemCommunity/styles.module.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-.itemCommunity {
- display: flex;
- flex-direction: row;
- width: 100%;
- align-items: center;
- height: 74px;
- @include is-mobile {
- border: 1px solid #ff7e214d;
- background-color: #ff7e210f;
- height: auto;
- padding: 12px 0;
- padding-left: 10px;
- align-items: start;
- }
- @include is-tablet {
- height: 100%;
- }
- &_inner {
- display: flex;
- flex-direction: row;
- width: 100%;
- align-items: center;
- height: 74px;
-
- @include is-mobile {
- height: auto;
- align-items: start;
- }
- @include is-tablet {
- height: 100%;
- }
- }
-
- &_lego {
- background: #6abd00;
- width: 74px;
- height: 74px;
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- @include is-mobile {
- background-color: transparent;
- width: 20px;
- height: 20px;
- }
-
- &_stud {
- position: absolute;
- left: 99%;
- background-color: #6abd00;
- width: 10px;
- height: 25px;
- top: 50%;
- border-top-right-radius: 6px;
- border-bottom-right-radius: 6px;
- transform: translateY(-50%);
-
- @include is-mobile {
- background-color: transparent;
- }
- }
-
- svg {
- width: 18.92px;
- height: 15.5px;
- path {
- @include is-mobile {
- fill: #6abd00;
- }
- }
- }
- }
- &_content {
- padding-left: 24px;
- display: flex;
- align-items: center;
- font-size: 18px;
- height: 100%;
- line-height: 26px;
- font-weight: 400;
- flex: 1;
- position: relative;
- @include is-mobile {
- padding-left: 10px;
- font-size: 14px;
- line-height: 20px;
- }
- &_frame {
- position: absolute;
- left: 0;
- width: 100%;
- svg {
- height: 100%;
- }
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Comunity/index.tsx b/src/modules/landing-rollback/Componets/Comunity/index.tsx
deleted file mode 100644
index 33ed9cb50..000000000
--- a/src/modules/landing-rollback/Componets/Comunity/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import Chars from '@/interactive/Chars';
-import Lines from '@/interactive/Lines';
-import Scale from '@/interactive/Scale';
-import community_img from '@/public/landing/compress/why-launch.jpg';
-import Image from 'next/image';
-import ItemCommunity from './ItemCommunity';
-import s from './styles.module.scss';
-
-const DATA_COMMUNITY = [
- ' Earn sequencer fees',
- 'Offer low transaction fees to your users',
- 'Have dedicated throughput',
- 'Complete control over gas fee, gas block limit, and withdrawal periods',
-];
-
-export default function Comunity() {
- return (
-
-
-
-
-
-
- Why launch your own blockchain?
-
-
-
-
-
-
-
-
-
- Whatever your vision — a dapp, a fully onchain game, a DEX, or
- an ecosystem — there are many benefits of running your own
- blockchain.
-
-
-
- {DATA_COMMUNITY.map((item, index) => {
- return (
-
- );
- })}
-
-
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Comunity/styles.module.scss b/src/modules/landing-rollback/Componets/Comunity/styles.module.scss
deleted file mode 100644
index 1d1a13a54..000000000
--- a/src/modules/landing-rollback/Componets/Comunity/styles.module.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-.community {
- padding: 140px 0;
- background-color: #fff;
- &_left {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- gap: 110px;
-
- @include is-mobile {
- gap: unset;
- }
- @include is-tablet {
- gap: 32px;
- }
- }
-
- @include is-mobile {
- padding: 40px 0;
- }
-
- &_right {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
-
- &_inner {
- display: flex;
- gap: 127px;
- justify-content: space-between;
- flex-direction: row;
- @include is-mobile {
- gap: 24px;
- flex-direction: column;
- }
- @include is-tablet {
- flex-direction: column;
- gap: 40px;
- }
- &_bottom {
- color: #000;
- gap: 128px;
- display: flex;
- flex-direction: row;
-
- &_img {
- width: 100%;
-
- @include is-mobile {
- display: none;
- }
- }
- &_content {
- color: #000;
- display: flex;
- flex-direction: column;
- gap: 20px;
- width: 100;
-
- @include is-mobile {
- padding-top: 24px;
- }
- @include is-tablet {
- padding-top: 32px;
- }
- }
- }
-
- &_top {
- display: flex;
- flex-direction: row;
- align-items: start;
- gap: 128px;
-
- @include is-mobile {
- gap: 12px;
- flex-direction: column;
- }
- &_heading {
- color: #000;
- gap: 16px;
- font-size: 48px;
- font-weight: 400;
- line-height: 57.6px;
- flex-shrink: 0;
- width: 736px;
-
- @include is-mobile {
- width: 100%;
- font-size: 28px;
- line-height: 39.2px;
- }
- span {
- color: #fa4e0e;
- }
- }
-
- &_text {
- font-size: 24px;
- color: #000;
- line-height: 36px;
- font-weight: 400;
- width: 100%;
- @include is-mobile {
- font-size: 16px;
- line-height: 24px;
- }
- }
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/ContentSection/index.tsx b/src/modules/landing-rollback/Componets/ContentSection/index.tsx
deleted file mode 100644
index 592a19747..000000000
--- a/src/modules/landing-rollback/Componets/ContentSection/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import s from './styles.module.scss';
-import React, { PropsWithChildren } from 'react';
-import Lines from '@/interactive/Lines';
-
-interface IProp extends PropsWithChildren {
- className: string;
-};
-export default function ContentSection({
- className,
- children,
- }: IProp) {
-
-
- return
- {children}
-
;
-}
diff --git a/src/modules/landing-rollback/Componets/ContentSection/styles.module.scss b/src/modules/landing-rollback/Componets/ContentSection/styles.module.scss
deleted file mode 100644
index d0f0ff0f1..000000000
--- a/src/modules/landing-rollback/Componets/ContentSection/styles.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.content {
- color: #fff;
- text-align: center;
- font-size: 24px;
- font-style: normal;
- font-weight: 400;
- line-height: 36px;
- margin-bottom: 24px;
-
- @include is-mobile {
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Ecosystem/index.tsx b/src/modules/landing-rollback/Componets/Ecosystem/index.tsx
deleted file mode 100644
index 1f0b47c7c..000000000
--- a/src/modules/landing-rollback/Componets/Ecosystem/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import s from './styles.module.scss';
-import ecosystem1 from '@/public/landing/images/ecosystem1.png';
-import ecosystem2 from '@/public/landing/images/ecosystem2.png';
-import ecosystem3 from '@/public/landing/images/ecosystem3.png';
-import ecosystem4 from '@/public/landing/images/ecosystem4.png';
-
-import ItemChain from '../Chain/ItemChain';
-import HeadingSection from '@/modules/landing/Componets/HeadingSection';
-import ContentSection from '@/modules/landing/Componets/ContentSection';
-import Chars from '@/interactive/Chars';
-import Lines from '@/interactive/Lines';
-
-const DATA_ECOSYSTEM = [
- {
- img: ecosystem1,
- title: 'Earn sequencer fees',
- stud: 2,
- bgTop: 'FFD73B',
- bgBottom: 'A05700',
- },
- {
- img: ecosystem2,
- title: 'Have 100% dedicated throughput',
- stud: 2,
- bgTop: 'B4EDFF',
- bgBottom: '0074BB',
- },
- {
- img: ecosystem3,
- title: 'Customize specifically for your use case',
- stud: 2,
- bgTop: '000',
- bgBottom: '303030',
- },
- {
- img: ecosystem4,
- title: 'Receive airdrop from BVM builder reward programs',
- stud: 2,
- bgTop: 'EBEFF7',
- bgBottom: '7D8AA7',
- },
-];
-export default function Ecosystem() {
- return (
-
-
-
-
-
- Why launch your own modular Bitcoin L2 blockchain ?
-
-
-
-
- Whatever your vision — a dapp, a fully onchain game, a DEX, or an ecosystem — there are many benefits of
- running your own Bitcoin L2 blockchain.
-
-
-
-
-
- {DATA_ECOSYSTEM.map((item, index) => {
- return ;
- })}
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Ecosystem/styles.module.scss b/src/modules/landing-rollback/Componets/Ecosystem/styles.module.scss
deleted file mode 100644
index fdf1293e8..000000000
--- a/src/modules/landing-rollback/Componets/Ecosystem/styles.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.ecosystem {
- padding: 140px 0;
- background: #eee;
- overflow: hidden;
-
- @include is-mobile{
- padding: 80px 0;
- }
-
- &_heading {
- &_title {
- color: #000;
- text-align: left;
- }
-
- &_description {
- max-width: 850px;
- text-align: left !important;
- color: #000;
- }
- }
-
- &_content {
- padding-top: 60px;
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-template-rows: repeat(2, 1fr);
- gap: 36px;
-
- @include is-mobile{
- padding-top: 24px;
- grid-template-columns: repeat(1, 1fr);
- }
- @include is-tablet{
- gap: 0;
- grid-template-columns: repeat(2, 1fr);
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/HeadingSection/index.tsx b/src/modules/landing-rollback/Componets/HeadingSection/index.tsx
deleted file mode 100644
index 0a1b3113e..000000000
--- a/src/modules/landing-rollback/Componets/HeadingSection/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import s from './styles.module.scss';
-import React, { PropsWithChildren } from 'react';
-
-interface IProp extends PropsWithChildren {
- className: string;
-}
-export default function HeadingSection({ className, children }: IProp) {
- return {children} ;
-}
diff --git a/src/modules/landing-rollback/Componets/HeadingSection/styles.module.scss b/src/modules/landing-rollback/Componets/HeadingSection/styles.module.scss
deleted file mode 100644
index 629c99d0b..000000000
--- a/src/modules/landing-rollback/Componets/HeadingSection/styles.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.heading {
- text-align: center;
- color: #000;
- font-size: 48px;
- font-style: normal;
- font-weight: 400;
- line-height: 120%;
- margin-bottom: 20px;
-
- @include is-mobile {
- font-size: 28px;
- font-weight: 400;
- line-height: 140%;
- margin-bottom: 12px;
- }
-
- b {
- font-weight: normal;
- color: #fa4e0e;
- display: inline !important;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/HeadingText/index.tsx b/src/modules/landing-rollback/Componets/HeadingText/index.tsx
deleted file mode 100644
index 71505b6d6..000000000
--- a/src/modules/landing-rollback/Componets/HeadingText/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { PropsWithChildren, useEffect, useRef } from 'react';
-import useAnimationStore from '@/stores/useAnimationStore';
-import s from './styles.module.scss';
-import { Portal } from '@chakra-ui/portal';
-
-interface IProp extends PropsWithChildren {
- headings: string[];
- className: string
-}
-
-export default function HeadingText({ children, headings, className }: IProp) {
- const refSpan = useRef(null);
- const reftime = useRef();
- const { play } = useAnimationStore();
-
- useEffect(() => {
- if (!refSpan.current || !play) return;
-
- const sentences = headings;
-
- let currentIndex = 0;
- let offset = 0;
- const sentenceElement = refSpan.current;
- let forwards = true;
- let skipCount = 0;
- const skipDelay = 30;
- const speed = 70;
-
- const updateSentence = () => {
- if (!sentenceElement) return;
- sentenceElement.innerHTML = sentences[currentIndex].substring(
- 0,
- offset,
- );
- };
-
- const handleAnimation = () => {
- if (forwards) {
- if (offset >= sentences[currentIndex].length) {
- if (++skipCount === skipDelay) {
- forwards = false;
- skipCount = 0;
- }
- }
- } else if (offset === 0) {
- forwards = true;
- currentIndex = (currentIndex + 1) % sentences.length;
- }
-
- if (skipCount === 0) {
- forwards ? offset++ : offset--;
- }
-
- updateSentence();
- };
-
- reftime.current = setInterval(handleAnimation, speed);
- return () => {
- clearInterval(reftime.current);
- };
- }, [play]);
-
-
- return (
-
- {children}{' '}
-
- _
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/HeadingText/styles.module.scss b/src/modules/landing-rollback/Componets/HeadingText/styles.module.scss
deleted file mode 100644
index a36b32cbe..000000000
--- a/src/modules/landing-rollback/Componets/HeadingText/styles.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.heading {
- &_mouse{
- animation: loopFrames .75s ease-out infinite;
- color: #fa4e0e;
- }
-}
-
-@keyframes loopFrames {
- 0%{
- opacity: 0;
- }
- 50%{
- opacity: 1;
- }
- 100%{
- opacity: 0;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/HeadingTextTyping/index.tsx b/src/modules/landing-rollback/Componets/HeadingTextTyping/index.tsx
deleted file mode 100644
index 1f806addd..000000000
--- a/src/modules/landing-rollback/Componets/HeadingTextTyping/index.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { PropsWithChildren, useEffect, useState, useRef } from 'react';
-import s from './styles.module.scss';
-// import useLabStore from '../useLabStore';
-
-interface IProp extends PropsWithChildren {
- first: string;
- headings: string[];
- headingsStyles: any[];
- last: string;
-}
-
-export default function HeadingTextTyping({ headings, headingsStyles, first, last }: IProp) {
- const refSpan = useRef(null);
- const refSpanFirst = useRef(null);
- const reftime = useRef();
- const reftimeDelayFirst = useRef();
-
- // const { isFirst, setIsFirst } = useLabStore();
- const isFirst = false;
- const [run, setRun] = useState(isFirst);
-
- useEffect(() => {
- if (!refSpan.current || !run) return;
-
- const sentences = headings;
-
- let currentIndex = 0;
- let offset = 0;
- const sentenceElement = refSpan.current;
- let forwards = true;
- let skipCount = 0;
- const skipDelay = 30;
- const speed = 70;
-
- const updateSentence = () => {
- sentenceElement.textContent = (sentences[currentIndex] as string).substring(
- 0,
- offset
- );
- sentenceElement.className = headingsStyles[currentIndex] as string;
- };
-
- const handleAnimation = () => {
- if (forwards) {
- if (offset >= (sentences[currentIndex] as string).length) {
- // setIsFirst();
- if (++skipCount === skipDelay) {
- forwards = false;
- skipCount = 0;
- }
- }
- } else if (offset === 0) {
- forwards = true;
- currentIndex = (currentIndex + 1) % sentences.length;
- }
-
- if (skipCount === 0) {
- forwards ? offset++ : offset--;
- }
-
- updateSentence();
- };
-
- reftime.current = setInterval(handleAnimation, speed);
- return () => {
- clearInterval(reftime.current);
- };
- }, [run]);
-
- useEffect(() => {
- if (!refSpanFirst.current) return;
-
- const sentences = [first, last];
-
- let currentIndex = 0;
- let offset = 0;
- const sentenceElement = refSpanFirst.current;
- // let forwards = true;
- let skipCount = 0;
- // const skipDelay = 30;
- const speed = 70;
-
- const updateSentence = () => {
- sentenceElement.textContent = (sentences[currentIndex] as string).substring(
- 0,
- offset
- );
- };
-
- const handleAnimation = () => {
- if (offset >= (sentences[currentIndex] as string).length) setRun(true);
-
- if (skipCount === 0) {
- offset++;
- }
-
- updateSentence();
- };
-
- reftimeDelayFirst.current = setTimeout(() => {
- reftime.current = setInterval(handleAnimation, speed);
- }, 200);
- return () => {
- reftimeDelayFirst.current && clearTimeout(reftimeDelayFirst.current);
- reftime.current && clearInterval(reftime.current);
- };
- }, []);
-
- return (
-
- {!run && (
- <>
-
- _
- >
- )}
- {run && first}
- {/* */}
-
- {run && _ }
- {/* */}
- {run && last}
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/HeadingTextTyping/styles.module.scss b/src/modules/landing-rollback/Componets/HeadingTextTyping/styles.module.scss
deleted file mode 100644
index 81d9a9fbb..000000000
--- a/src/modules/landing-rollback/Componets/HeadingTextTyping/styles.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.heading {
- &_mouse{
- animation: loopFrames .75s ease-out infinite;
- }
-}
-
-@keyframes loopFrames {
- 0%{
- opacity: 0;
- }
- 50%{
- opacity: 1;
- }
- 100%{
- opacity: 0;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/HeadingTextV2/index.tsx b/src/modules/landing-rollback/Componets/HeadingTextV2/index.tsx
deleted file mode 100644
index bc03a399a..000000000
--- a/src/modules/landing-rollback/Componets/HeadingTextV2/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { PropsWithChildren, useEffect, useRef } from 'react';
-import s from './styles.module.scss';
-import { gsap } from 'gsap';
-import useAnimationStore from '@/stores/useAnimationStore';
-
-interface IProp extends PropsWithChildren {
- className: string;
- headings: string[];
-}
-
-export default function HeadingTextV2({ headings, className, children }: IProp) {
- const { play } = useAnimationStore();
- const refCOntent = useRef(null);
- const list = useRef();
- const refNext = useRef(-1);
- const refLoop = useRef();
- const refTime = useRef();
- const refMask = useRef(null);
-
- useEffect(() => {
- if (!refCOntent.current) return;
- list.current = refCOntent.current.querySelectorAll('.js-el');
- gsap.set(list.current, { yPercent: 100 });
- }, []);
-
-
- const nextSlide = () => {
- const old = refNext.current;
- refNext.current++;
- if (refNext.current >= list.current.length) {
- refNext.current = 0;
- }
-
-
- refMask.current && gsap.to(refMask.current, {width: list.current[refNext.current].scrollWidth, ease: 'power3.out', duration: .6});
- gsap.to(list.current[old], { yPercent: -100, ease: 'power3.out', duration: .6 });
- gsap.fromTo(list.current[refNext.current], { yPercent: 100 }, { yPercent: 0, ease: 'power3.out', duration: .6 });
-
- };
-
- useEffect(() => {
- if (!play) return;
- refTime.current = setTimeout(nextSlide, 500);
- refLoop.current = setInterval(nextSlide, 2000);
- return () => {
- clearInterval(refLoop.current);
- clearTimeout(refTime.current);
- };
- }, [play]);
-
- return (
-
- {children}
- {' '}
-
- {
- headings.map((h, index) => {
- return {h} ;
- })
- }
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/HeadingTextV2/styles.module.scss b/src/modules/landing-rollback/Componets/HeadingTextV2/styles.module.scss
deleted file mode 100644
index 8f56a5dda..000000000
--- a/src/modules/landing-rollback/Componets/HeadingTextV2/styles.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.heading {
-
- &_mask {
- position: relative;
- display: block;
- overflow: hidden;
-
- &_el:not(:first-child) {
- position: absolute;
- top: 0;
- left: 0;
- width: max-content;
- }
-
- &_el {
- display: block;
- white-space: nowrap;
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/Bg/index.tsx b/src/modules/landing-rollback/Componets/Hero/Bg/index.tsx
deleted file mode 100644
index 303053aa5..000000000
--- a/src/modules/landing-rollback/Componets/Hero/Bg/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import s from './styles.module.scss';
-import Image from 'next/image';
-import useAnimationStore from '@/stores/useAnimationStore';
-import { useEffect, useRef } from 'react';
-
-export default function BgHero() {
- const { play } = useAnimationStore();
- const refVideo = useRef(null);
-
- useEffect(() => {
- if (play) refVideo.current?.play();
- }, [play]);
- return
-
-
;
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/Bg/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/Bg/styles.module.scss
deleted file mode 100644
index 16494e56d..000000000
--- a/src/modules/landing-rollback/Componets/Hero/Bg/styles.module.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.bgHero {
- height: 100vh;
- height: 100svh;
- width: 100%;
- background: #509e4e;
-
- img,
- video {
- object-fit: cover;
- width: 100%;
- height: 100%;
- aspect-ratio: 16/9;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/Content/index.tsx b/src/modules/landing-rollback/Componets/Hero/Content/index.tsx
deleted file mode 100644
index 52fc902de..000000000
--- a/src/modules/landing-rollback/Componets/Hero/Content/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import BorderLine from '@/interactive/BorderLine';
-import Lines from '@/interactive/Lines';
-import s from './styles.module.scss';
-
-export default function HeroContent() {
- return (
-
-
-
- BVM is the first modular blockchain metaprotocol that lets anyone
- launch their own Bitcoin L2 blockchain in a few clicks.
-
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/Content/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/Content/styles.module.scss
deleted file mode 100644
index 7f17ec34d..000000000
--- a/src/modules/landing-rollback/Componets/Hero/Content/styles.module.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.heroContent {
- max-width: 480px;
- font-size: 24px;
- line-height: 36px;
- padding-bottom: 28px;
-
- @include is-mobile {
- width: 100%;
- font-size: 16px;
- line-height: 150%;
- }
- @include is-tablet {
- max-width: unset;
- font-size: 20px;
- width: 100%;
- }
-
- &_content {
- color: #fff;
- font-size: 24px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%;
-
- @include is-tablet{
- font-size: 20px;
- }
-
- @include is-mobile {
- font-size: 16px;
- }
-
- }
-
- &_inner{
- padding-bottom: 28px;
- }
-
- &_lists {
- padding-left: 16px;
- display: flex;
- flex-direction: column;
- gap: 8px;
- }
- &_itemSub {
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: normal;
- color: #fff;
-
- &::before {
- margin-left: -4px;
- content: '';
- }
-
- &_hightLight {
- color: rgba(255, 255, 255, 0.7);
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/HeroLabel/index.tsx b/src/modules/landing-rollback/Componets/Hero/HeroLabel/index.tsx
deleted file mode 100644
index ff1124415..000000000
--- a/src/modules/landing-rollback/Componets/Hero/HeroLabel/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import s from './styles.module.scss';
-import ItemHero from '@/modules/landing/Componets/Hero/ItemHero';
-import Image from 'next/image';
-import Fade from '@/interactive/Fade';
-
-const DATA_HERO = [
- {
- icon: '/landing/svg/lego_coin.svg',
- title: 'Bitcoin',
- },
- {
- icon: '/landing/svg/lego_optimism.svg',
- title: 'Optimism',
- },
- {
- icon: '/landing/svg/lego_celestia.svg',
- title: 'Celestia',
- },
- {
- icon: '/landing/svg/lego_polygon.svg',
- title: 'Polygon',
- },
- {
- icon: '/landing/uni-v2.svg',
- title: 'Uniswap',
- },
- {
- icon: '/landing/ic-ordinal.svg',
- title: 'Ordinals',
- },
- {
- icon: '/landing/ic-near.svg',
- title: 'Near',
- },
-];
-
-const DELAY = 1.8;
-
-export default function HeroLabel({ isMobile }: { isMobile?: boolean }) {
- const delay = !isMobile ? DELAY : 0;
- return (
-
-
-
-
-
-
- Powered by the best-of-breed modules
-
-
-
-
- {DATA_HERO.map((item, index) => {
- return ;
- })}
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/HeroLabel/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/HeroLabel/styles.module.scss
deleted file mode 100644
index 39688892d..000000000
--- a/src/modules/landing-rollback/Componets/Hero/HeroLabel/styles.module.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.heroLabel {
-
- padding-top: 48px;
- padding-bottom: 48px;
-
- @include is-pc {
- padding-top: 0;
- padding-bottom: 0;
- }
-
- .inner{
- display: flex;
- gap: 12px;
- @include is-min-table{
- justify-content: space-between;
- align-items: center;
- }
-
- @include is-mobile{
- flex-direction: column;
- }
- }
-
-
- &_content {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 12px;
-
- @include is-mobile {
- flex-direction: column;
- justify-content: center;
- gap: 8px;
- }
-
- @include is-tablet {
- flex-direction: column;
- justify-content: center;
- gap: 8px;
- }
-
- &_text {
- font-size: 20px;
- line-height: 36px;
- font-weight: 400;
- color: #fff;
-
- @include is-mobile {
- color: #000;
- font-size: 16px;
- line-height: 24px;
- }
- @include is-tablet {
- color: #000;
- }
- }
- }
-
- &_listHero {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- gap: 4px;
- @include is-mobile {
- justify-content: center;
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/ItemHero/index.tsx b/src/modules/landing-rollback/Componets/Hero/ItemHero/index.tsx
deleted file mode 100644
index 6bf7d6ed0..000000000
--- a/src/modules/landing-rollback/Componets/Hero/ItemHero/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import s from './styles.module.scss';
-import Image from 'next/image';
-import Fade from '@/interactive/Fade';
-
-type TItemHero = {
- icon: string;
- title: string;
-};
-
-export default function ItemHero({
- data,
- delay,
-}: {
- data: TItemHero;
- delay: number;
-}) {
- return (
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/ItemHero/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/ItemHero/styles.module.scss
deleted file mode 100644
index de87ece0b..000000000
--- a/src/modules/landing-rollback/Componets/Hero/ItemHero/styles.module.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.itemHero {
- position: relative;
-
- &_inner {
-
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #ffffff33;
- height: 80px;
- width: fit-content;
- padding-left: 12px;
- padding-right: 12px;
-
- @include is-min-table{
- width: 90px;
- padding-left: 0px;
- padding-right: 0px;
- aspect-ratio: 1;
- height: 80px;
- }
-
- @include is-mobile {
- background-color: #f6f6f6;
- width: calc(33vw - 30px);
- align-items: center;
- aspect-ratio: 1;
- }
-
- @include is-tablet {
- background-color: #f6f6f6;
- width: calc(33vw - 30px);
- align-items: center;
- aspect-ratio: 1;
- }
- }
-
- &_img {
- height: 40px;
- width: auto;
- }
-
- &_content {
- display: flex;
- flex-direction: column;
- z-index: 2;
- gap: 8px;
-
- &_title {
- font-size: 12px;
- line-height: 16px;
- font-weight: 400;
- text-align: center;
- color: #fff;
-
- @include is-mobile {
- color: #000;
- }
- @include is-tablet {
- color: #000;
- }
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/JoinAllowList/index.tsx b/src/modules/landing-rollback/Componets/Hero/JoinAllowList/index.tsx
deleted file mode 100644
index e14815c39..000000000
--- a/src/modules/landing-rollback/Componets/Hero/JoinAllowList/index.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { Button, Flex } from '@chakra-ui/react';
-import React, { useState } from 'react';
-import s from './styles.module.scss';
-import { useRouter } from 'next/navigation';
-import Fade from '@/interactive/Fade';
-import Chars from '@/interactive/Chars';
-import { getTopLeaderBoards } from '@/services/whitelist';
-import { ILeaderBoardPoint } from '@/interfaces/leader-board-point';
-import Image from 'next/image';
-import { formatCurrency } from '@/utils/format';
-import Countdown from '@/modules/Whitelist/stepAirdrop/Countdown';
-import dayjs from 'dayjs';
-import { PUBLIC_SALE_END, PUBLIC_SALE_START } from '@/modules/Whitelist';
-import { CDN_URL_ICONS } from '@/config';
-import { getPublicSaleSummary } from '@/services/public-sale';
-import { checkIsPublicSale } from '@/modules/Whitelist/utils';
-import cs from 'classnames';
-import HeroLabel from '@/modules/landing/Componets/Hero/HeroLabel';
-
-const DELAY = 2;
-const JoinAllowList = ({isFooter}: {isFooter?: boolean}) => {
- const router = useRouter();
- const [isCreating, setIsCreating] = useState(false);
- const [totalUser, setTotalUser] = useState('');
- const [totalDeposit, setTotalDeposit] = useState('');
- const [listUser, setListUser] = useState([]);
-
- const isPublicSale = React.useMemo(() => checkIsPublicSale(), [])
-
- const getCount = async () => {
- try {
- if (isPublicSale) {
- const response = await getPublicSaleSummary();
- setTotalUser(response.total_user.toString());
- setTotalDeposit(response.total_usdt_value_not_boost.toString())
- } else {
- const response = await getTopLeaderBoards({ page: 1, limit: 20 });
- const topWhiteList = response.data.filter((item, index) => index < 5);
- setTotalUser(response.count);
- setListUser(topWhiteList);
- }
- } catch (e) {
- console.log(e);
- }
- };
-
- React.useEffect(() => {
- getCount();
- }, [isPublicSale]);
-
- const delay = isFooter ? 0 : DELAY;
-
- return (
-
-
-
-
-
-
-
-
- {isPublicSale ? (
- (!!totalUser && Number(totalUser || 0)) ? (
-
- {/*Join {formatCurrency(totalUser, 0, 0)} people backing us building the future of Bitcoin.*/}
- Join the {formatCurrency(totalUser, 0, 0)} early contributors backing us with
- {" "}${formatCurrency(
- totalDeposit || '0',
- 0,
- 0,
- 'BTC',
- true,
- )} to build the future of Bitcoin.
-
- ) : (
-
- Back us building the future of Bitcoin
-
- )
- ) : (
-
- Be the first to know.
-
- Allowlisters get up to 30% extra tokens .
-
- )}
-
-
-
-
-
- {
- if (isPublicSale) return router.push('/public-sale')
- router.push('/allowlist');
- }}
- >
- {isPublicSale ? "Join the BVM public sale" : "Get on the allowlist"}
-
- {!isPublicSale && (
-
-
-
-
-
- {formatCurrency(totalUser, 0,0)} people {isPublicSale ? "made contributions" : "are on the allowlist"}
-
-
- )}
-
-
- {isPublicSale ? 'Ends' : 'Public sale starting'} in
-
-
-
-
-
-
-
-
- {/**/}
-
-
- );
-};
-
-export default JoinAllowList;
diff --git a/src/modules/landing-rollback/Componets/Hero/JoinAllowList/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/JoinAllowList/styles.module.scss
deleted file mode 100644
index 1b8d17421..000000000
--- a/src/modules/landing-rollback/Componets/Hero/JoinAllowList/styles.module.scss
+++ /dev/null
@@ -1,288 +0,0 @@
-.container {
-
- width: 100%;
- background: url('/landing/images/hero-bg-allow.jpg');
- background-repeat: no-repeat;
- background-size: cover;
-
- &:not(.isFooter) {
- padding: 20px 0;
- position: absolute;
- bottom: 0;
- left: 0;
- @include is-min-table {
- padding: 30px 0;
- }
- }
-
- .countDown {
- &_wrapper {
- white-space: nowrap;
- font-size: 14px;
- font-weight: 400;
- margin-top: 20px;
- justify-content: center;
- }
-
- img {
- margin-right: 8px;
- }
-
- &_title {
- color: rgba(255, 255, 255, 0.7);
- }
-
- &_time {
- width: fit-content;
- text-transform: uppercase;
- }
- }
-
- &.isFooter {
- padding: 30px 0;
- }
-
- @include is-min-table {
- padding: 40px 0;
- }
-
- .content {
- display: flex;
- align-items: center;
- flex-direction: column;
- gap: 24px;
-
- @include is-pc {
- justify-content: space-between;
- flex-direction: row;
- }
- }
-
- .titleWrapper {
- display: block;
- width: fit-content;
- }
-
- .title {
-
- font-size: 12px;
- line-height: normal;
- font-weight: 500;
- background: -webkit-linear-gradient(90deg, #00f5a0 0%, #00d9f5 100%);
- background: -moz-linear-gradient(90deg, #00f5a0 0%, #00d9f5 100%);
- background: linear-gradient(90deg, #00f5a0 0%, #00d9f5 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- width: fit-content;
-
- @include is-mobile {
- font-size: 10px;
- }
- }
-
- .desc {
-
- text-align: left;
- font-style: normal;
- font-weight: 400;
- line-height: 130%;
- max-width: 620px;
-
- @include is-mobile {
- font-size: 20px;
- }
-
- @include is-tablet {
- font-size: 24px;
- }
-
- @include is-pc {
- font-size: 32px;
- }
-
- span {
- color: #fa4e0e;
- }
- }
-
- .form {
- width: 100%;
- }
-
- .inputContainer {
- border-radius: 0px;
- background: rgba(255, 255, 255, 0.1);
- border: 1px solid #cecece;
- display: flex;
- padding: 12px;
- align-items: center;
- gap: 12px;
- width: 371px;
- }
-
- .input {
- height: 100%;
- overflow: hidden;
- color: #ffffff;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 140%;
- background-color: transparent;
- width: 100%;
- letter-spacing: 0.01em;
- text-align: center;
-
- &::placeholder {
- color: rgba(255, 255, 255, 0.5);
- }
-
- &::-ms-input-placeholder {
- /* Edge 12-18 */
- color: rgba(255, 255, 255, 0.5);
- }
-
- &:focus {
- outline: none;
- }
- }
-
- .button {
- height: 60px !important;
- border-radius: 0px !important;
- background: #fa4e0e !important;
- color: #fff !important;
- width: 331px !important;
- font-weight: normal !important;
- font-size: 20px;
- line-height: 1.3;
- }
-}
-
-.grid {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- // display: grid;
- // grid-template-columns: 1fr 1fr 1fr;
- gap: 20px;
-
- // @include w-max(768px) {
- // grid-template-columns: 1fr 1fr;
- // }
-
- // @include w-max(468px) {
- // grid-template-columns: 1fr;
- // }
-
- .item {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 100%;
- padding: 28px 0px;
- background-color: #1c1c1c;
- padding: 28px 32px;
- background-color: #1c1c1c;
- min-width: 380px;
- width: fit-content;
-
- @include w-max(768px) {
- min-width: 320px;
- }
- }
-
- .item_title {
- text-align: center;
- font-size: 16px;
- margin-top: 8px;
- }
-
- .item_desc {
- text-align: center;
- font-size: 28px;
- margin-top: 12px;
- font-weight: 800;
- line-height: 30px;
- }
-
- .btn {
- height: 16px;
- opacity: 0.8;
- cursor: pointer;
- }
-}
-
-.whiteList {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 8px;
- margin-top: 20px;
- justify-content: center;
-
- &_users {
- display: flex;
- flex-direction: row;
-
- &_avatar {
- position: relative;
- width: 24px;
- height: 24px;
- border-radius: 999px;
- overflow: hidden;
- background-color: #fff;
- margin-left: -8px;
-
- img {
- width: 100%;
- height: 100%;
- padding: 1px;
- border-radius: 999px;
- position: absolute;
- transform: translate(-50%, -50%);
- top: 50%;
- left: 50%;
- }
- }
- }
-
- &_total {
- white-space: nowrap;
- color: rgba(255, 255, 255, 0.7);
- text-align: center;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: normal;
-
- span {
- color: #fff;
- }
- }
-}
-
-.countDown_wrapper {
- * {
- font-size: 14px !important;
- line-height: 1.4 !important;
- font-weight: 400 !important;
- }
-}
-
-
-.hero_inner__desktop {
- display: none;
- @include is-min-table {
- display: block;
- }
-
- :global {
- .heroLabel_inner {
- border-top: 1px solid #FFFFFF26;
- padding-top: 28px;
- margin-top: 28px;
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/index.tsx b/src/modules/landing-rollback/Componets/Hero/index.tsx
deleted file mode 100644
index eb8146cea..000000000
--- a/src/modules/landing-rollback/Componets/Hero/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import s from './styles.module.scss';
-import Intro from '@/modules/landing/Componets/Intro';
-import BgHero from '@/modules/landing/Componets/Hero/Bg';
-import HeroLabel from '@/modules/landing/Componets/Hero/HeroLabel';
-import JoinAllowList from './JoinAllowList';
-
-export default function Hero() {
- return (
-
- <>
-
-
-
-
- >
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Hero/styles.module.scss b/src/modules/landing-rollback/Componets/Hero/styles.module.scss
deleted file mode 100644
index 7a9fbe63c..000000000
--- a/src/modules/landing-rollback/Componets/Hero/styles.module.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.hero {
- width: 100%;
- position: relative;
-
-
- @include is-pc {
- overflow: hidden;
- height: 100svh;
- }
-
- &_wrap {
- height: 100svh;
- width: 100%;
- position: relative;
- overflow: hidden;
- }
-
- @include is-mobile {
- width: auto;
- }
- @include is-tablet {
- width: 100%;
- }
-
- &_inner {
- position: absolute;
- z-index: 2;
- width: 100%;
- display: none;
-
- @include is-pc {
- bottom: 210px;
- display: block;
- }
- }
-
-}
-
-.hero_wrap__mobile {
- background: white;
- @include is-pc {
- display: none;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Intro/index.tsx b/src/modules/landing-rollback/Componets/Intro/index.tsx
deleted file mode 100644
index 9a6b09fbb..000000000
--- a/src/modules/landing-rollback/Componets/Intro/index.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import s from './styles.module.scss';
-import { useEffect, useRef } from 'react';
-import { gsap } from 'gsap';
-import useAnimationStore from '@/stores/useAnimationStore';
-import { MathMap } from '@/utils/mathUtils';
-import { DotLottiePlayer } from '@dotlottie/react-player';
-import Image from 'next/image';
-
-const FRAMES = 169;
-
-export default function Intro() {
- const refBtn = useRef(null);
- const refWrap = useRef(null);
- const gradientRef = useRef(null);
- const refContent = useRef(null);
- const refThumb = useRef(null);
- const refActions = useRef({ isDown: false, isComplete: false, current: 0, xFrame: 0 });
- const quickTo = useRef();
- const quickFillter = useRef();
- const { setPlay, setPlayed, played } = useAnimationStore();
- const lottieRef = useRef();
- const refFlare = useRef(null);
- const refSky = useRef(null);
-
-
- useEffect(() => {
- played && completed();
- }, [played]);
-
- useEffect(() => {
- if (typeof document !== undefined) {
- document.body.style.overflow = 'hidden';
- }
- quickTo.current = gsap.quickTo(refBtn.current, 'x', {
- duration: 0.2,
- });
-
- quickFillter.current = gsap.quickTo(refThumb.current, '--clipPath', {
- duration: 0.2,
- });
- }, []);
- const completed = () => {
-
- gsap.fromTo(
- refContent.current,
- { pointerEvents: 'none' },
- {
- opacity: 0,
- scale: 1.2,
- delay: 0.4,
- ease: 'power3.inOut',
- onComplete: () => {
- document.body.style.overflow = 'auto';
- setPlayed();
- if (refContent.current) refContent.current.style.display = 'none';
- },
- },
- );
- setTimeout(setPlay, 300);
- };
-
- const playCompleted = () => {
- refActions.current.isComplete = true;
- const tm = { value: refActions.current.xFrame };
- gsap.to(tm, {
- value: FRAMES, ease: 'power3.inOut', duration: .4, onUpdate: () => {
- lottieRef.current?.seek(tm.value);
- },
- onComplete: completed,
- });
- gsap.to(refFlare.current, { '--bg': 1, '--shadown': '500px', ease: 'power3.inOut', duration: .6 });
- gsap.to(refSky.current, { '--bg': 1, duration: 1.2, ease: 'power3.inOut' });
- };
-
- const onMouseUp = () => {
- if (refActions.current.isComplete || !refBtn.current || !refWrap.current)
- return;
- refActions.current.isDown = false;
- const rectBtn = refBtn.current.getBoundingClientRect();
- const rectWrap = refWrap.current.getBoundingClientRect();
-
- if (refActions.current.current > rectWrap.width / 2) {
- const dis = rectWrap.width - rectBtn.width;
- refActions.current.current = 0;
- quickTo.current && quickTo.current(dis);
- // lottieRef.current?.seek(FRAMES);
- playCompleted();
- } else {
- refActions.current.current = 0;
- quickTo.current && quickTo.current(0);
- lottieRef.current?.seek(0);
- gsap.to(gradientRef.current, {
- opacity: 1,
- ease: 'power3.out',
- duration: 0.6,
- });
- }
- };
-
- const onMouseDown = () => {
- if (refActions.current.isComplete) return;
- refActions.current.isDown = true;
- gsap.to(gradientRef.current, {
- opacity: 0,
- ease: 'power3.out',
- duration: 0.6,
- });
- };
-
- const onMouse = (e: any) => {
- if (!refActions.current.isDown || refActions.current.isComplete) return;
- if (!refBtn.current || !refWrap.current) return;
-
- const rectBtn = refBtn.current.getBoundingClientRect();
- const rectWrap = refWrap.current.getBoundingClientRect();
-
- const xx = (e?.touches?.length && e?.touches[0]) ? e?.touches[0]?.clientX : e.clientX;
- refActions.current.current = (xx) - rectWrap.left - rectBtn.width / 2;
- refActions.current.current = Math.max(
- Math.min(refActions.current.current, rectWrap.width - rectBtn.width),
- 0,
- );
-
- const x = MathMap(
- refActions.current.current,
- 0,
- rectWrap.width - rectBtn.width,
- 0,
- FRAMES,
- );
- lottieRef.current?.seek(x);
- quickTo.current && quickTo.current(refActions.current.current);
- refActions.current.xFrame = x;
-
- if (refActions.current.current > rectWrap.width / 2) {
- const dis = rectWrap.width - rectBtn.width;
- refActions.current.current = 0;
- quickTo.current && quickTo.current(dis);
- playCompleted();
- }
- };
-
- return (
-
- {!played && (
-
-
-
Welcome to the future of Bitcoin.
-
- BVM is the first modular Bitcoin L2 metaprotocol on Bitcoin. With a few clicks, anyone can plug and
- play
- the best-of-breed blockchain modules to launch their own Bitcoin L2 blockchain.
-
-
-
-
-
-
-
- HOLD & DRAG TO STEP INSIDE
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Intro/styles.module.scss b/src/modules/landing-rollback/Componets/Intro/styles.module.scss
deleted file mode 100644
index c8876d519..000000000
--- a/src/modules/landing-rollback/Componets/Intro/styles.module.scss
+++ /dev/null
@@ -1,339 +0,0 @@
-.intro {
- height: 100svh;
- width: 100vw;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 9;
- overflow: hidden;
- background: url("/landing/compress/banner-bg.jpg?v=2");
- background-size: cover;
- background-repeat: no-repeat;
-
- &:after {
- content: '';
- display: block;
- background: url("/landing/compress/noise.png");
- background-size: cover;
- background-repeat: no-repeat;
- position: absolute;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- z-index: 99;
- pointer-events: none;
- }
-
- &_inner {
- position: relative;
- z-index: 3;
- height: 100%;
- width: 100%;
-
- &_thumbnail {
- --clipPath: 0%;
- position: absolute;
- top: calc(50% - 3vh);
- left: 50%;
- transform: translate(-50%, -50%);
- @include is-min-table {
- top: 50%;
- }
-
- &_inner {
- display: flex;
- justify-content: center;
- position: relative;
- }
-
- :global {
- .dotlottie-container {
- aspect-ratio: 150/334;
- width: 100px;
-
- @include is-min-table {
- width: 150px;
- }
- }
- }
-
- .clone {
- position: absolute;
- filter: grayscale(100%);
- opacity: .4;
- }
-
- .real {
- position: relative;
- z-index: 2;
- clip-path: inset(calc(100% - var(--clipPath)) 0% 0% 0%);
- }
- }
-
- &_content {
- color: #fff;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 140%;
- text-align: center;
- text-transform: uppercase;
-
- span {
- color: #FA4E0E;
- }
- }
- }
-}
-
-.drag {
- width: 242px;
- display: flex;
- position: relative;
- margin-top: 16px;
- justify-content: space-between;
- font-size: 0;
- line-height: 0;
- padding: 4px;
- margin-left: auto;
- margin-right: auto;
- background: linear-gradient(
- -90deg,
- rgba(225, 225, 225, .07) 0,
- rgba(225, 225, 225, 0) 100%
- );
-
- transform: translateX(-20px);
- @include is-min-table {
- transform: translateX(-90px);
- }
-
- svg,
- img {
- -webkit-user-drag: none;
- user-select: none;
- user-focus: none;
- pointer-events: none;
- }
-
- &_inner {
- position: absolute;
- z-index: 5;
- width: calc(100% - 9px);
- }
-
- &_line {
- position: absolute;
- top: calc(50% - 10px);
- left: calc(50% - 5px);
- transform: translateX(-50%);
- pointer-events: none;
- z-index: 5;
-
- &_inner {
- position: relative;
- }
-
- img {
-
- mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(171, 171, 171, 0) 100%);
- -webkit-mask-position-x: -132px;
- mask-repeat: no-repeat;
- animation: looparrwos 4s ease-out infinite;
- width: 115%;
- height: auto;
- display: block;
- max-width: inherit;
-
- &:nth-child(2) {
- width: 115%;
- height: auto;
- position: absolute;
- top: 0;
- left: 0;
- animation-delay: 2s;
- }
- }
- }
-
- &_gradient {
- position: absolute;
- height: 100%;
- left: 0;
- top: 0;
- width: 100%;
- --bg: 0%;
- z-index: 2;
- pointer-events: none;
- background: linear-gradient(
- 90deg,
- rgba(0, 0, 0, 1) var(--bg),
- rgba(171, 171, 171, 0) 100%
- );
- }
-}
-
-.mood {
- flex: 0 0 auto;
- margin-left: auto;
- position: relative;
- z-index: 3;
-
- &_substract {
- position: relative;
- z-index: 2;
- }
-
- &_door {
- position: absolute;
- top: calc(50% + 40px);
- left: 50%;
- transform: translate(-50%, -50%);
- width: 364px;
- height: auto;
- max-width: none;
- mix-blend-mode: color-dodge;
- }
-}
-
-.grid {
- position: absolute;
- bottom: -30%;
-
- svg {
- width: 500px;
- height: auto;
-
- @include is-min-table {
- width: 720px;
- height: auto;
- }
- }
-}
-
-
-.intro_inner_bottom {
- position: absolute;
- bottom: 90px;
- left: 50%;
- transform: translateX(-50%);
-
- &_cotnent {
- position: absolute;
- color: #FFF;
- text-align: center;
- font-size: 13px;
- font-style: normal;
- font-weight: 400;
- line-height: 140%; /* 19.6px */
- letter-spacing: 0.28px;
- top: -60px;
- right: -45px;
- text-transform: uppercase;
-
- @include is-min-table {
- right: 25px;
- }
- }
-}
-
-.intro_supper_content {
- padding-top: 60px;
- padding-left: 16px;
- padding-right: 16px;
-
- @include is-min-table {
- padding-top: 120px;
- padding-left: 32px;
- padding-right: 32px;
- }
-
- &_bitcoin {
- color: var(--Color-newsystem-White-100, #FFF);
- text-align: center;
- text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
- font-size: 50px;
- font-style: normal;
- font-weight: 400;
- line-height: 100%; /* 50px */
- text-transform: uppercase;
- margin-bottom: 28px;
-
- @include is-tablet {
- font-size: 42px;
- }
-
- @include is-mobile {
- font-size: 34px;
- }
-
- b {
- font-weight: 400;
- color: #FA4E0E;
- }
- }
-
- &_desc {
- color: rgba(#FFF, .7);
- text-align: center;
- font-size: 28px;
- font-style: normal;
- font-weight: 400;
- line-height: 150%;
- max-width: 960px;
- margin-left: auto;
- margin-right: auto;
-
- @include is-tablet {
- font-size: 20px;
- }
-
- @include is-mobile {
- font-size: 16px;
- }
-
- b {
- font-weight: 500;
- color: white;
- }
- }
-}
-
-
-.flare {
-
- --shadown: 0px;
- --bg: 0;
-
- height: 133px;
- width: 88px;
- border: 2px solid rgba(255, 255, 255, var(--bg));
- box-shadow: 0 0 var(--shadown) calc(var(--shadown) / 2) #FFFFFF;
- position: absolute;
- bottom: -43px;
- right: -20px;
- z-index: 10;
- background: rgba(255, 255, 255, var(--bg));
-}
-
-.sky {
- --bg: 0;
- width: 100%;
- height: 100%;
- z-index: 10;
- position: absolute;
- top: 0;
- left: 0;
- pointer-events: none;
- background: rgba(255, 255, 255, var(--bg));
-}
-
-@keyframes looparrwos {
- 0% {
- -webkit-mask-position-x: -132px;
- }
- 100% {
- -webkit-mask-position-x: 132px;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Lego/index.tsx b/src/modules/landing-rollback/Componets/Lego/index.tsx
deleted file mode 100644
index 73bad60fb..000000000
--- a/src/modules/landing-rollback/Componets/Lego/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import s from './styles.module.scss';
-import Chars from '@/interactive/Chars';
-import Fade from '@/interactive/Fade';
-import { Button, Flex } from '@chakra-ui/react';
-import HeadingSection from '@/modules/landing/Componets/HeadingSection';
-import ContentSection from '@/modules/landing/Componets/ContentSection';
-import Lines from '@/interactive/Lines';
-import { useRouter } from 'next/navigation';
-
-export default function Lego() {
- const router = useRouter();
- return (
-
-
-
-
-
- Customize your Bitcoin L2 blockchain with{' '}
- the best-of-breed building blocks.
-
-
-
-
-
- Choose a rollup method, select a data availability layer, and then
- launch to the world — it’s that easy. You can even install default
- dapps like Uniswap, Compound, and DAO. It’s a new way to build
- blockchain.
-
-
-
-
-
- {
- router.push('/blockchains/customize');
- }}
- _hover={{
- bgColor: '#000',
- }}
- >
- {`Launch your Bitcoin L2`}
-
-
-
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Lego/styles.module.scss b/src/modules/landing-rollback/Componets/Lego/styles.module.scss
deleted file mode 100644
index b99c9e7d5..000000000
--- a/src/modules/landing-rollback/Componets/Lego/styles.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.lego {
- width: 100%;
- aspect-ratio: 16 / 9;
- background: url('/landing/bg-home-2.jpg') no-repeat center / cover;
- position: relative;
- height: 100vh;
- max-height: 1070px;
- display: flex;
- align-items: center;
-
- &_content {
- margin-left: auto;
- margin-right: auto;
- max-width: 894px;
- text-align: center;
-
- @include is-tablet {
- max-width: 100%;
- }
-
- &_title {
- color: #fff;
- }
-
- &_description {
- color: #fff;
- align-self: stretch;
- display: flex;
- flex-direction: column;
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/LegoV2/LegoItem/index.tsx b/src/modules/landing-rollback/Componets/LegoV2/LegoItem/index.tsx
deleted file mode 100644
index 1086f3258..000000000
--- a/src/modules/landing-rollback/Componets/LegoV2/LegoItem/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { ReactElement, useEffect, useRef } from 'react';
-import s from './style.module.scss';
-import ImagePlaceholder from '@/components/ImagePlaceholder';
-
-import Image from 'next/image';
-import { gsap } from 'gsap';
-import Fade from '@/interactive/Fade';
-
-interface IProp {
- data: any;
- delay: number;
-}
-
-export default function LegoItem({ data, delay }: IProp): ReactElement {
- const refContent = useRef(null);
-
- useEffect(() => {
- onLeave();
- }, []);
-
- const onHover = () => {
- if (!refContent.current) return;
- const box = refContent.current?.querySelector('.js-box');
- const items = refContent.current?.querySelectorAll('.js-item');
-
- gsap.to(box, { y: 0, opacity: 1, ease: 'power3.out', duration: 0.4 });
- gsap.to(items, {
- y: 0,
- delay: 0.05,
- opacity: 1,
- stagger: 0.05,
- duration: 0.4,
- ease: 'power3.out',
- });
- };
-
- const onLeave = () => {
- if (!refContent.current) return;
- const box = refContent.current?.querySelector('.js-box');
- const items = refContent.current?.querySelectorAll('.js-item');
-
- gsap.to(items, {
- y: 10,
- opacity: 0,
- stagger: 0.05,
- duration: 0.4,
- ease: 'power3.out',
- });
- gsap.to(box, {
- y: 30,
- delay: 0.05,
- opacity: 0,
- ease: 'power3.out',
- duration: 0.4,
- });
- };
- return (
-
-
-
-
-
-
-
-
- {data.icons.map((src: any) => {
- return (
-
-
-
- );
- })}
-
-
-
{data.title}
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/LegoV2/LegoItem/style.module.scss b/src/modules/landing-rollback/Componets/LegoV2/LegoItem/style.module.scss
deleted file mode 100644
index a60fb155b..000000000
--- a/src/modules/landing-rollback/Componets/LegoV2/LegoItem/style.module.scss
+++ /dev/null
@@ -1,322 +0,0 @@
-.legoItem {
- width: 100%;
- background: #f6f6f6;
- position: relative;
- &_inner {
- aspect-ratio: 1;
- transition: background 0.4s var(--easeOutQuart);
-
- &:hover {
- background: #eeeeee;
- }
- }
- &_thumbnail {
- padding: 64px 22px 50px 22px;
-
- @include is-mobile {
- padding: 32px 11px 23px 11px;
- }
- }
- &_title {
- position: absolute;
- bottom: 0;
- color: #000;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 100%;
- text-align: left;
- padding: 16px;
- border-top: 1px solid #e6e6e6;
- text-transform: uppercase;
- width: 100%;
-
- @include is-mobile {
- font-size: 10px;
- padding: 8px;
- }
- }
-
- position: relative;
-
- @include is-mobile {
- &:not(:last-child) {
- &:after {
- content: '';
- display: block;
- width: 100%;
- height: 1px;
- bottom: 0;
- left: 0;
- position: absolute;
- background: linear-gradient(
- 270deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 53.5%,
- rgba(236, 236, 236, 0) 100%
- );
- }
- }
- }
-
- @include is-tablet {
- &:nth-child(3) {
- &:after {
- content: '';
- display: block;
- width: 1px;
- height: 100%;
- bottom: 0;
- right: 0;
- position: absolute;
- background: #ececec;
- }
- }
-
- &:nth-child(1) {
- &:after {
- content: '';
- display: block;
- width: 100%;
- height: 1px;
- bottom: 0;
- left: 0;
- position: absolute;
- background: linear-gradient(
- 90deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
-
- &:before {
- content: '';
- display: block;
- width: 1px;
- height: 100%;
- bottom: 0;
- right: 0;
- position: absolute;
- background: linear-gradient(
- -180deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
- }
-
- &:nth-child(2) {
- &:after {
- content: '';
- display: block;
- width: 100%;
- height: 1px;
- bottom: 0;
- left: 0;
- position: absolute;
- background: linear-gradient(
- 270deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
- }
- &:nth-child(5) {
- &:after {
- content: '';
- display: block;
- width: 100%;
- height: 1px;
- top: 0;
- left: 0;
- position: absolute;
- background: linear-gradient(
- 90deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
-
- &:before {
- content: '';
- display: block;
- width: 1px;
- height: 100%;
- bottom: 0;
- right: 0;
- position: absolute;
- background: linear-gradient(
- 0deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
- }
-
- &:nth-child(6) {
- &:after {
- content: '';
- display: block;
- width: 100%;
- height: 1px;
- top: 0;
- left: 0;
- position: absolute;
- background: linear-gradient(
- 270deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
- }
- }
-
- @include is-pc {
- &:nth-child(2) {
- &:after {
- content: '';
- display: block;
- width: 100%;
- height: 1px;
- bottom: 0;
- left: 0;
- position: absolute;
- background: #ececec;
- }
- }
-
- &:nth-child(1) {
- &:after {
- content: '';
- display: block;
- width: 100%;
- height: 1px;
- bottom: 0;
- left: 0;
- position: absolute;
- background: linear-gradient(
- 90deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
-
- &:before {
- content: '';
- display: block;
- width: 1px;
- height: 100%;
- bottom: 0;
- right: 0;
- position: absolute;
- background: linear-gradient(
- -180deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
- }
-
- &:nth-child(3) {
- &:after {
- content: '';
- display: block;
- width: 100%;
- height: 1px;
- bottom: 0;
- left: 0;
- position: absolute;
- background: linear-gradient(
- 270deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
-
- &:before {
- content: '';
- display: block;
- width: 1px;
- height: 100%;
- bottom: 0;
- left: 0;
- position: absolute;
- background: linear-gradient(
- -180deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
- }
-
- &:nth-child(4) {
- &:before {
- content: '';
- display: block;
- width: 1px;
- height: 100%;
- top: 0;
- right: 0;
- position: absolute;
- background: linear-gradient(
- 0deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
- }
-
- &:nth-child(6) {
- &:before {
- content: '';
- display: block;
- width: 1px;
- height: 100%;
- top: 0;
- left: 0;
- position: absolute;
- background: linear-gradient(
- 0deg,
- rgba(236, 236, 236, 0) 0%,
- #ececec 100%
- );
- }
- }
- }
-}
-
-.boxWrapper {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: fit-content;
-}
-
-.boxs {
- border-radius: 100px;
- border: 1px solid #ececec;
- background: #fff;
- box-shadow: 0px 0px 32px -6px rgba(0, 0, 0, 0.16);
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 10px;
- width: fit-content;
- padding: 10px;
- list-style: none;
-
- li {
-
- width: 40px;
- flex: 0 0 auto;
- height: 40px;
-
- img {
- object-fit: contain;
- aspect-ratio: 1/1;
- width: 100%;
- height: 100%;
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/LegoV2/index.tsx b/src/modules/landing-rollback/Componets/LegoV2/index.tsx
deleted file mode 100644
index 30106e6ad..000000000
--- a/src/modules/landing-rollback/Componets/LegoV2/index.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React from 'react';
-import s from './styles.module.scss';
-import lego1 from '@/public/landing/ls-1.png';
-import lego2 from '@/public/landing/ls-2.png';
-import lego3 from '@/public/landing/ls-3.png';
-import lego4 from '@/public/landing/ls-4.png';
-import lego5 from '@/public/landing/ls-5.png';
-import lego6 from '@/public/landing/ls-6.png';
-
-import HeadingSection from '@/modules/landing/Componets/HeadingSection';
-import ContentSection from '@/modules/landing/Componets/ContentSection';
-import Chars from '@/interactive/Chars';
-import Lines from '@/interactive/Lines';
-import LegoItem from '@/modules/landing/Componets/LegoV2/LegoItem';
-import { Button, Flex } from '@chakra-ui/react';
-import Fade from '@/interactive/Fade';
-import { useRouter } from 'next/navigation';
-import Image from 'next/image';
-
-const DATA_ECOSYSTEM = [
- {
- img: lego1,
- title: 'DATA MODULES',
- icons: [10, 2, 6, 7, 8, 9],
- },
- {
- img: lego2,
- title: 'EXECUTION MODULES',
- icons: [1, 2, 3, 4, 5],
- },
- {
- img: lego3,
- title: 'ROLLUP MODULES',
- icons: [1, 11],
- },
- {
- img: lego4,
- title: 'BRIDGE MODULES',
- icons: [12, 13, 14],
- },
- {
- img: lego5,
- title: 'SETTLEMENT MODULES',
- icons: [10],
- },
- {
- img: lego6,
- title: 'DAPP MODULES',
- icons: [15, 16, 17],
- },
-];
-export default function LegoV2() {
- const router = useRouter();
- return (
-
-
-
-
-
- Customize and launch your modular Bitcoin L2 blockchain with the best-of-breed modules with a few clicks.
-
-
-
-
-
- Choose a rollup module, select a data availability module, and
- then launch to theworld — it’s that easy. You can even install
- dapp modules like Uniswap, Compound, and NFT Marketplace. It’s a
- whole new way to build a Bitcoin L2.
-
-
-
-
- {
- router.push('/blockchains/customize');
- }}
- _hover={{
- bgColor: '#000',
- }}
- >
- {`Launch your Bitcoin L2`}
-
-
-
-
-
-
-
- {DATA_ECOSYSTEM.map((item, index) => {
- return ;
- })}
-
-
-
-
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/LegoV2/styles.module.scss b/src/modules/landing-rollback/Componets/LegoV2/styles.module.scss
deleted file mode 100644
index 43eacad68..000000000
--- a/src/modules/landing-rollback/Componets/LegoV2/styles.module.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.lego {
- padding: 140px 0;
- overflow: hidden;
- background: #ffffff;
-
- @include is-mobile {
- padding-top: 32px;
- padding-bottom: 44px;
- }
-
- &_heading {
- max-width: 989px;
- padding-bottom: 68px;
-
- @include is-mobile {
- padding-bottom: 32px;
- }
-
- &_title {
- color: #000;
- text-align: left !important;
- }
-
- &_description {
- max-width: 850px;
- color: #000;
- text-align: unset !important;
-
- @include is-mobile {
- margin-bottom: 12px;
- }
- }
- }
-
- &_wrapper {
- display: flex;
- flex-direction: row;
- height: 100%;
- justify-content: space-between;
- gap: 16px;
-
- @include is-tablet {
- flex-direction: column-reverse;
- }
-
- @include is-mobile {
- flex-direction: column-reverse;
- gap: 8px;
- }
- }
-
- &_bg {
- background: #44955b;
- max-width: 923px;
- width: 62.5%;
- flex-shrink: 0;
-
- img {
- width: 100%;
- height: 100%;
- }
-
- @include is-tablet {
- width: 100%;
- max-width: unset;
- }
- @include is-mobile {
- width: 100%;
- }
- }
-
- &_content {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- grid-template-rows: repeat(3, 1fr);
- row-gap: 15.5px;
- column-gap: 16px;
- flex: 1;
-
- @include is-mobile {
- grid-template-columns: repeat(1, 1fr);
- }
- @include is-tablet {
- grid-template-columns: repeat(2, 1fr);
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/index.tsx b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/index.tsx
deleted file mode 100644
index 73ad9895e..000000000
--- a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { PropsWithChildren } from 'react';
-import s from './styles.module.scss';
-import cn from 'classnames';
-
-interface IProp extends PropsWithChildren {
- title: string;
- indexActive: boolean;
-}
-
-export default function ScalableContent({
- title,
- children,
- indexActive,
-}: IProp) {
- return (
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/styles.module.scss b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/styles.module.scss
deleted file mode 100644
index 620a47ce1..000000000
--- a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableContnet/styles.module.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.scalableContent {
- flex: 1;
- max-width: 445px;
- position: relative;
- padding-top: 16px;
- opacity: 0.5;
- transition: opacity 0.5s ease-out;
-
- @include is-tablet {
- width: 33.33%;
- padding-left: 20px;
- padding-right: 20px;
- }
-
- &_heading {
- color: #fff;
- text-align: center;
- font-size: 24px;
- font-style: normal;
- font-weight: 500;
- line-height: 110%; /* 26.4px */
- margin-bottom: 40px;
- position: absolute;
- top: -54px;
- width: 100%;
- }
-
- &_content {
- color: #fff;
- text-align: center;
- font-size: 18px;
- font-style: normal;
- font-weight: 400;
- line-height: 26px; /* 144.444% */
- }
-
- &.indexActive {
- opacity: 1;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/index.tsx b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/index.tsx
deleted file mode 100644
index a069f2d8c..000000000
--- a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import Image from 'next/image';
-import s from './styles.module.scss';
-
-export default function ScalableItem({layer}:{layer: number}) {
- return
-
-
;
-}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/styles.module.scss b/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/styles.module.scss
deleted file mode 100644
index 8bfec2e33..000000000
--- a/src/modules/landing-rollback/Componets/ScalableSlide/ScalableItem/styles.module.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.scalableItem {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- clip-path: var(--clipPath);
-
- img {
- object-fit: contain;
- max-width: 100%;
- max-height: calc(100% - 40vh);
-
- @include is-tablet {
- width: 40%;
- }
- }
-
- &__1 {
- background: #1a67e3;
- }
-
- &__2 {
- background: #2aa848;
- }
-
- &__3 {
- background: #dd9910;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/index.tsx b/src/modules/landing-rollback/Componets/ScalableSlide/index.tsx
deleted file mode 100644
index 686f33b83..000000000
--- a/src/modules/landing-rollback/Componets/ScalableSlide/index.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import s from './style.module.scss';
-import ScalableItem from './ScalableItem';
-import { gsap } from 'gsap';
-import ScalableContent from './ScalableContnet';
-import { useEffect, useRef, useState } from 'react';
-import Chars from '@/interactive/Chars';
-import Lines from '@/interactive/Lines';
-import { useIsInViewport } from '@/hooks/useIsInViewport';
-import HeadingSection from '@/modules/landing/Componets/HeadingSection';
-import ContentSection from '@/modules/landing/Componets/ContentSection';
-
-export default function ScalableSlide() {
- const refContent = useRef(null);
-
- const refSlide = useRef({ index: 0 });
- const [indexActive, setIndexActive] = useState(0);
- const refPo = useRef(null);
-
- const inView = useIsInViewport(refContent, { threshold: 0 });
- const refItems = useRef>();
- 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,
- },
- );
- };
-
- const gc = gsap.context(() => {
- refItems.current =
- refContent.current?.querySelectorAll('.js-scalableItem');
- if (!refItems.current || !refItems.current.length) return;
-
- refItems.current?.forEach((item, index) => {
- if (index === 0) return;
- const tin_image = item.querySelector('.js-image');
- gsap.set(tin_image, { scale: 1.2 });
- gsap.set(item, { '--clipPath': 'inset(100% 0% 0% 0%)' });
- });
-
- refTime.current = gsap.timeline({
- paused: true,
- 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.to(refPo.current, {
- 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]);
- setIndexActive(2);
- refSlide.current.index = 2;
- },
- });
-
- refTime.current.to(refPo.current, {
- x: '100%',
- duration: 1,
- ease: 'power3.inOut',
- });
- }, [refContent.current]);
-
- return () => gc.revert();
- }, []);
-
- useEffect(() => {
- if (inView) refTime.current?.resume();
- else refTime.current?.paused();
- }, [inView]);
-
- return (
-
-
-
-
-
- Welcome to the future of 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.
-
-
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/ScalableSlide/style.module.scss b/src/modules/landing-rollback/Componets/ScalableSlide/style.module.scss
deleted file mode 100644
index 036566e93..000000000
--- a/src/modules/landing-rollback/Componets/ScalableSlide/style.module.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.scalable {
- position: relative;
- height: 200vh;
-
- &_wrap {
- height: 100vh;
- width: 100%;
- position: sticky;
- top: 0;
-
- @include is-tablet {
- overflow: hidden;
- width: 100%;
- }
- }
-
- &_top {
- position: absolute;
- top: 6vh;
- z-index: 3;
- left: 0;
- width: 100%;
-
- &_inner {
- max-width: 985px;
- margin-left: auto;
- margin-right: auto;
- }
- }
-
- &_heading {
- color: #fff;
- }
-
- &_content {
- color: #fff;
- }
-
- &_bottom {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 3vw;
- bottom: 60px;
- width: 100%;
- position: absolute;
- z-index: 2;
- left: 0;
- border-top: 1px solid rgba(white, 0.2);
- padding-left: 32px;
- padding-right: 32px;
-
- @include is-tablet {
- flex-wrap: nowrap;
- flex-direction: row;
- gap: unset;
- }
-
- &_po {
- width: 0;
- border-bottom: 1px solid white;
-
- &_wrap {
- overflow: hidden;
- position: absolute;
- top: -1px;
- left: 0;
- width: 100%;
- }
- }
- }
-
- &_inner {
- height: 100vh;
- width: 100%;
- overflow: hidden;
- position: relative;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/index.tsx b/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/index.tsx
deleted file mode 100644
index ca8067b5a..000000000
--- a/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Image, { StaticImageData } from 'next/image';
-import React from 'react';
-import s from './styles.module.scss';
-import HeadingSection from '@/modules/landing/Componets/HeadingSection';
-import ContentSection from '@/modules/landing/Componets/ContentSection';
-
-type TScale = {
- title: string;
- description: string;
- img: StaticImageData;
- bottomContent: string;
- bg: string;
- subContent: string;
-};
-
-export default function ItemScaleableMobile({ data }: { data: TScale }) {
- return (
-
- {data.title && (
-
- {data.title}
- {data.description}
-
- )}
-
-
-
{data.bottomContent}
-
{data.subContent}
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/styles.module.scss b/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/styles.module.scss
deleted file mode 100644
index 150fa86ea..000000000
--- a/src/modules/landing-rollback/Componets/ScaleableMobile/ItemScaleableMobile/styles.module.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.itemScale {
- width: 100%;
- &_top {
- padding: 0 20px;
- padding-top: 32px;
-
- @include is-tablet {
- max-width: 620px;
- margin-left: auto;
- margin-right: auto;
- text-align: center;
- }
-
- &_heading {
- text-align: center;
- color: white;
- }
- &_description {
- text-align: center;
- }
- }
- &_img {
- width: 80vw;
- height: auto;
- padding-top: 24px;
- margin-left: auto;
- margin-right: auto;
-
- @include is-tablet {
- width: 50vw;
- }
- }
- &_bottom {
- padding: 0 20px;
- padding-bottom: 24px;
-
- @include is-tablet {
- max-width: 480px;
- margin-left: auto;
- margin-right: auto;
- }
-
- &_content {
- font-size: 18px;
- font-style: normal;
- font-weight: 400;
- line-height: 110%;
- text-align: center;
- padding-bottom: 12px;
- }
- &_subContent {
- text-align: center;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 20px;
- }
- }
-
- &__1A67E3 {
- background-color: #1a67e3;
- }
- &__2AA848 {
- background-color: #2aa848;
- }
- &__DD9910 {
- background-color: #dd9910;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/ScaleableMobile/index.tsx b/src/modules/landing-rollback/Componets/ScaleableMobile/index.tsx
deleted file mode 100644
index 7a5471e29..000000000
--- a/src/modules/landing-rollback/Componets/ScaleableMobile/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import img1 from '@/public/landing/images/scaleble_mobile_1.png';
-import img2 from '@/public/landing/images/scaleble_mobile_2.png';
-import img3 from '@/public/landing/images/scaleble_mobile_3.png';
-import s from './styles.module.scss';
-import ItemScaleableMobile from './ItemScaleableMobile';
-
-const DATA_MOBILE = [
- {
- title: 'Welcome to the future of Bitcoin.',
- description:
- '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.',
- img: img1,
- bottomContent: 'Unlimited throughput',
- bg: '1A67E3',
- subContent:
- 'Hyperscale Bitcoin with an unlimited number of Bitcoin Virtual Machines as Bitcoin L2 blockchains.',
- },
- {
- title: '',
- description: '',
- img: img2,
- bottomContent: 'Infinite applications',
- bg: '2AA848',
- subContent:
- 'Bitcoin Virtual Machines support Solidity smart contracts on Bitcoin, so you can quickly build all kinds of decentralized applications on Bitcoin.',
- },
- {
- title: '',
- description: '',
- img: img3,
- bottomContent: 'Fast & cheap',
- bg: 'DD9910',
- subContent:
- 'Bitcoin Virtual Machines implement rollups on Bitcoin. Rollups significantly reduce the block time and transaction fees.',
- },
-];
-
-export default function ScaleableMobile() {
- return (
-
- {DATA_MOBILE.map((item, index) => {
- return ;
- })}
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/ScaleableMobile/styles.module.scss b/src/modules/landing-rollback/Componets/ScaleableMobile/styles.module.scss
deleted file mode 100644
index e2f9767a2..000000000
--- a/src/modules/landing-rollback/Componets/ScaleableMobile/styles.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.scalebleMobile {
- display: flex;
- flex-direction: column;
-}
diff --git a/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/index.tsx b/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/index.tsx
deleted file mode 100644
index e5acec1a1..000000000
--- a/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client';
-
-import React from 'react';
-import s from './styles.module.scss';
-import ItemArticle from '../../Article/ItemArticle';
-import { BLOGS } from '../constant';
-
-export default function Section7Mobile() {
- return (
-
-
-
- Oh, and the press loves us too!
-
-
- {BLOGS.map((item, index) => {
- return ;
- })}
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/styles.module.scss b/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/styles.module.scss
deleted file mode 100644
index 35f8b7604..000000000
--- a/src/modules/landing-rollback/Componets/Section_7/Section_7_Mobile/styles.module.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.wrapper {
- background: #fff;
- padding: 40px 0;
-
- &_heading {
- font-weight: 400;
- font-size: 48px;
- line-height: 52.8px;
- color: #000;
- padding-bottom: 60px;
-
- @include is-mobile {
- font-size: 28px;
- font-style: normal;
- font-weight: 400;
- line-height: 140%;
- padding-bottom: 24px;
- }
- span {
- color: #fa4e0e;
- }
- }
- &_lists {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- column-gap: 36px;
- row-gap: 24px;
- @include is-mobile {
- grid-template-columns: 1fr;
- row-gap: 24px;
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Section_7/constant.ts b/src/modules/landing-rollback/Componets/Section_7/constant.ts
deleted file mode 100644
index e59577188..000000000
--- a/src/modules/landing-rollback/Componets/Section_7/constant.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import { CDN_URL } from '@/config';
-
-const CDN_URL_BLOGS = CDN_URL + '/nbc/images/blogs';
-
-export interface IBlog {
- id: string;
- title: string;
- desc: string;
- logo: string;
- imageUrl: string;
- link: string;
- linkTarget: string;
-}
-
-export const LOGOS = [
- {
- id: 'cryptobriefing',
- img: 'landing/images/cryptobriefing.png'
- },
- {
- id: 'blockworks',
- img: 'landing/images/blockworks.png'
- },
- {
- id: 'cointelegraph_brazil',
- img: 'landing/images/cointelegraph_brazil.png'
- },
- {
- id: 'coindesk',
- img: 'landing/images/coindesk.png'
- }
-]
-
-const BLOGS = [
- {
- id: '16',
- title: `Bitcoin developer sees ‘Bitcoin’s L2 era’ as key to mass adoption`,
- desc: `Punk 3700, one of the developers behind Bitcoin Virtual Machine, assesses the potential of layer-two blockchains on top of Bitcoin as an important narrative in crypto's landscape for 2024.`,
- logo: 'cryptobriefing',
- imageUrl: `${CDN_URL_BLOGS}/Bitcoin-constructions-1024x585.webp`,
- link: 'https://cryptobriefing.com/exploring-future-developers-insight-bitcoins-l2-era/',
- linkTarget: '_blank',
- },
- {
- id: '7',
- title: `DeFi on Bitcoin? Bitcoin Virtual Machine Says Yes`,
- desc: `Developers can build decentralized apps on Bitcoin using Solidity smart contracts`,
- logo: 'blockworks',
- imageUrl: `${CDN_URL_BLOGS}/Blockworks.webp`,
- link: 'https://blockworks.co/news/defi-on-bitcoin',
- linkTarget: '_blank',
- },
-
- {
- id: '6',
- title: `Bitcoin faster? Project uses Optimism to generate blocks every 2 seconds`,
- desc: `Blockchain NOS aims to give scalability to the decentralized ecosystem created on Bitcoin, says Punk 3700, one of the developers behind the project`,
- logo: 'cointelegraph_brazil',
- imageUrl: `${CDN_URL_BLOGS}/CoinTelegraph_Brazil_02.jpeg`,
- link: 'https://br.cointelegraph.com/news/bitcoin-becoming-faster-project-uses-optimism-to-generate-blocks-with-2-second-time',
- linkTarget: '_blank',
- },
- {
- id: '2',
- title:
- 'Developers Deploy Uniswap Contracts on Bitcoin as BRC20-Based SHIB, PEPE Gain Popularity',
- desc: 'A group of developers at @TrustlessOnBTC have deployed Uniswap’s smart contracts onto the Bitcoin network to capitalize on the rise of BRC-20 tokens and develop the decentralized finance ecosystem.',
- logo: 'coindesk',
- imageUrl: `${CDN_URL_BLOGS}/Coindesk.png`,
- link: 'https://www.coindesk.com/tech/2023/05/11/developers-deploy-uniswap-contracts-on-bitcoin-as-brc20-based-shib-pepe-gain-popularity/?utm_content=editorial&utm_term=organic&utm_medium=social&utm_source=twitter&utm_campaign=coindesk_main',
- linkTarget: '_blank',
- },
-
- {
- id: '1',
- title: 'What Are BRC-20 Tokens? Explaining the Bitcoin Memecoin Hype',
- desc: `"Memecoins" on Bitcoin is probably not what Satoshi Nakamoto envisioned when he released the Bitcoin whitepaper in 2008, but it just might be the mass adoption Bitcoin deserves.`,
- logo: 'coinmarketcap',
- imageUrl: `${CDN_URL_BLOGS}/CoinMarketCap.png`,
- link: 'https://coinmarketcap.com/alexandria/article/what-are-brc20-tokens',
- linkTarget: '_blank',
- },
- {
- id: '8',
- title: `Trustless Computer Deploys Uniswap v2 Smart Contracts: Huge Milestone For Bitcoin`,
- desc: `The emergence of #Ordinals and #BRC20 tokens has led to a renaissance period for #Bitcoin
- With their deployment of Uniswap v2 smart contracts on #BTC, @TrustlessOnBTC is right at the forefront of this exciting development`,
- logo: 'influencive',
- imageUrl: `${CDN_URL_BLOGS}/Influencive.png`,
- link: 'https://twitter.com/Influencive/status/1657455923692986370',
- linkTarget: '_blank',
- },
- {
- id: '12',
- title: `Bitcoin Transactions Hit Record High as New Token Type Takes Off`,
- desc: `Bitcoin Virtual Machine enables its own form of fungible tokens, called SBRC-20s, punk3700, a pseudonymous core contributor to Bitcoin Virtual Machine, told The Defiant.`,
- logo: 'the_defiant',
- imageUrl: `${CDN_URL_BLOGS}/defiant.png`,
- link: 'https://thedefiant.io/bitcoin-transactions-hit-record-high-as-new-token-type-takes-off',
- linkTarget: '_blank',
- },
- {
- id: '13',
- title: `A New Bitcoin-Based Arcade Game Is Leaving a Mark on Gamers`,
- desc: `A platform that went live last week looks to expand bitcoin usage by attracting players to win-to-earn games that run wholly on the Bitcoin blockchain.`,
- logo: 'coindesk',
- imageUrl: `${CDN_URL_BLOGS}/13.png`,
- link: 'https://www.coindesk.com/tech/2023/08/02/a-new-bitcoin-based-arcade-game-is-leaving-a-mark-on-gamers/?utm_content=editorial&utm_medium=social&utm_term=organic&utm_campaign=coindesk_main&utm_source=twitter',
- linkTarget: '_blank',
- },
- {
- id: '14',
- title: `Bricks to Bitcoins: The New Bitcoin City`,
- desc: `The newly launched Bitcoin City, unveiled just last week, provides a place for game enthusiasts to engage in casual games, board games, and strategic challenges, all of which run on BTC, both on web and mobile devices. Alongside this, the platform showcases NFT auctions and features its very own marketplace.`,
- logo: 'gamestarter',
- imageUrl: `${CDN_URL_BLOGS}/14.png`,
- link: 'https://gamestarter.com/blog/the-new-bitcoin-city',
- linkTarget: '_blank',
- },
- {
- id: '15',
- title: `A New Bitcoin Based Arcade Game Is Making Waves Among Gamers`,
- desc: `New Bitcoin City Platform Elevates Gaming with Payouts and NFTs on the Bitcoin Blockchain.`,
- logo: 'clout_scoop',
- imageUrl: `${CDN_URL_BLOGS}/15.png`,
- link: 'https://cloutscoop.com/2023/08/02/a-new-bitcoin-based-arcade-game-is-making-waves-among-gamers/',
- linkTarget: '_blank',
- },
- {
- id: '9',
- title: `BRC-721: The Token Standard Defying Bitcoin’s 4MB Storage Limit`,
- desc: `Just a few months later, on May 22, members of the Spirit DAO — a coalition of collectors devoted to elevating the Azuki universe — effectively blew Wertheimer’s record out of the water. By minting a 6.9MB Comic Banner on Bitcoin, the DAO stole the crown, solidifying the piece as the largest file size stored on BTC to date.`,
- logo: 'NFTNow',
- imageUrl: `${CDN_URL_BLOGS}/NFTNow.png`,
- link: 'https://nftnow.com/features/brc-721-the-token-standard-defying-bitcoins-4mb-storage-limit/',
- linkTarget: '_blank',
- },
- {
- id: '3',
- title:
- 'Ordinals turned Bitcoin into a worse version of Ethereum: Can we fix it?',
- desc: 'The launch of BRC-20 tokens and Ordinals NFTs on Bitcoin has transformed the No. 1 blockchain overnight into a clunkier version of Ethereum.',
- logo: 'cointelegraph',
- imageUrl: `${CDN_URL_BLOGS}/CoinTelegraph.jpeg`,
- link: 'https://cointelegraph.com/magazine/ordinals-turned-bitcoin-into-a-worse-version-of-ethereum-can-we-fix-it/',
- linkTarget: '_blank',
- },
-
- {
- id: '4',
- title:
- 'The Blocksize Wars Revisited: How Bitcoin’s Civil War Still Resonates Today',
- desc: 'Today’s debates over non-monetary uses of Bitcoin like ordinals and BRC-20 tokens echo the battle between Big and Small Blockers between 2015 and 2017. This article, by Daniel Kuhn, is part of our “CoinDesk Turns 10” series.',
- logo: 'coindesk',
- imageUrl: `${CDN_URL_BLOGS}/Coindesk-02.png`,
- link: 'https://www.coindesk.com/consensus-magazine/2023/05/17/the-blocksize-wars-revisited-how-bitcoins-civil-war-still-resonates-today/',
- linkTarget: '_blank',
- },
- {
- id: '5',
- title: `DeFi is Coming to Bitcoin': Expert Talks Changes to Ordinals`,
- desc: `Punk 3700, as the developer who integrates New Bitcoin City identifies himself, comments on Bitcoin's potential to become an efficient data layer`,
- logo: 'cointelegraph_brazil',
- imageUrl: `${CDN_URL_BLOGS}/CoinTelegraph_Brazil.jpeg`,
- link: 'https://br.cointelegraph.com/news/defi-is-coming-to-bitcoin-says-expert',
- linkTarget: '_blank',
- },
- {
- id: '10',
- title: `Smart Contracts on Bitcoin? Here’s All You Need to Know`,
- desc: `Move over Ethereum, Bitcoin is now the new home for dApps! The first smart contract is born on Bitcoin and its name is $GM – a memecoin with groundbreaking potential. Moreover, the birth of BRC-721 tokens surpasses its precursor BRC-20 and delivers cutting edge abilities to the Bitcoin blockchain.`,
- logo: 'NFTEvening',
- imageUrl: `${CDN_URL_BLOGS}/NFTEvening.webp`,
- link: 'https://nftevening.com/smart-contracts-on-bitcoin-heres-all-you-need-to-know/?swcfpc=1',
- linkTarget: '_blank',
- },
- {
- id: '11',
- title: `Exploring The New Bitcoin City Ecosystem With its Unique DEX`,
- desc: `New Bitcoin DEX allows for seamless token swaps, liquidity pool creation, and decentralized token launches, providing users greater control and security over their digital assets.`,
- logo: 'bsc_news',
- imageUrl: `${CDN_URL_BLOGS}/BSCNews.jpeg`,
- link: 'https://www.bsc.news/post/exploring-the-new-bitcoin-city-ecosystem-with-its-unique-dex',
- linkTarget: '_blank',
- },
-];
-
-export { BLOGS };
diff --git a/src/modules/landing-rollback/Componets/Section_7/index.tsx b/src/modules/landing-rollback/Componets/Section_7/index.tsx
deleted file mode 100644
index e436430ae..000000000
--- a/src/modules/landing-rollback/Componets/Section_7/index.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-'use client';
-
-import {
- Box,
- Button,
- Card,
- CardBody,
- CardFooter,
- Divider,
- HStack,
- Image,
- Stack,
- Text,
- Flex,
- useBreakpointValue,
- VStack,
-} from '@chakra-ui/react';
-
-import { isMobile, isTablet } from 'react-device-detect';
-import s from './styles.module.scss';
-
-const SliderSlick = dynamic(
- () => import('react-slick').then((m) => m.default),
- {
- ssr: false,
- },
-);
-
-import dynamic from 'next/dynamic';
-import { IBlog, BLOGS, LOGOS } from './constant';
-import Chars from '@/interactive/Chars';
-import Fade from '@/interactive/Fade';
-import { useMemo } from 'react';
-
-const Section_7 = () => {
- const numberSlide = isMobile ? 1 : isTablet ? 2 : 4;
-
-
- const renderCard = (item: IBlog) => {
- const getLogo = useMemo((): string => {
- const tmp = LOGOS.filter((itemLogo => {
- return itemLogo.id === item.logo;
- }));
- return tmp.length ? tmp[0].img : '';
- }, [item]);
- return (
- {
- window.open(item.link, '_blank');
- }}
- >
-
-
-
- {
- getLogo &&
-
-
- }
-
-
-
-
- {item.title}
-
-
- {item.desc}
-
-
-
-
-
- );
- };
-
- return (
-
-
-
-
- Oh, and the press loves us too!
-
-
-
-
-
-
- }
- nextArrow={
-
- }
- infinite={true}
- swipe={true}
- speed={1000}
- autoplaySpeed={3000}
- slidesToShow={numberSlide}
- slidesToScroll={numberSlide}
- autoplay={false}
- centerPadding={'45px'}
- >
- {BLOGS.map(renderCard)}
-
-
-
-
-
- );
-};
-
-export default Section_7;
diff --git a/src/modules/landing-rollback/Componets/Section_7/styles.module.scss b/src/modules/landing-rollback/Componets/Section_7/styles.module.scss
deleted file mode 100644
index fffc5446c..000000000
--- a/src/modules/landing-rollback/Componets/Section_7/styles.module.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-
-.sliderContainer {
- max-width: 1600px;
- display: flex;
- flex: 1;
- flex-direction: column;
-
- ::-webkit-scrollbar {
- display: none;
- }
-
- /* the parent */
- .slick-list {
- margin: 0 27px !important;
- }
-
- .slick-next:before {
- content: none;
- }
-
- .slick-prev:before {
- content: none;
- }
-
- :hover {
- cursor: pointer;
- }
-
- .slick-slide {
- border-radius: 16px !important;
- margin: 20px 40px !important;
- overflow: hidden !important;
- margin-right: 30px;
- display: flex !important;;
- }
-
-
- .slick-arrow .slick-next,
- .slick-arrow .slick-prev {
- z-index: 100;
- width: fit-content !important;;
- height: fit-content !important;;
- display: flex !important;;
- justify-content: center !important;;
- align-items: center !important;;
- }
-
- .slick-slider .slick-initialized {
- display: flex !important;;
- }
-
- .slick-next {
- right: 0;
- }
-
- .slick-prev {
- left: 0;
- }
-
- .slick-active .slick-current {
- margin-right: 20px !important;
- margin-left: 20 !important;
- }
-
- .slick-active {
- margin-left: 10px !important;;
- }
-
- .slick-slide .slick-active .slick-current {
- margin-right: 20px !important;
- display: flex !important;;
- }
-}
-
-.item {
- display: flex;
- flex-direction: column;
- align-items: center;
- background-color: #000;
- gap: 20px;
- padding: 20px;
- cursor: pointer;
-}
-
-
-.heading {
- span {
- color: #FA4E0E;
- }
-}
-
-.slide {
-
- padding-top: 48px;
- padding-bottom: 48px;
-
- @include is-tablet {
- padding-top: 80px;
- padding-bottom: 80px;
- }
-
- @include is-pc {
- padding-top: 120px;
- padding-bottom: 120px;
- }
-
- :global {
-
- .slick-arrow {
- top: -80px;
- right: 18px;
- border-radius: 0;
- transition: opacity .4s ease-out;
-
- &:hover {
- opacity: .8;
- }
-
- &.slick-prev {
- right: 80px;
- }
- }
-
- .slick-arrow .slick-next,
- .slick-arrow .slick-prev {
- z-index: 100;
- width: fit-content !important;
- height: fit-content !important;
- display: flex !important;
- justify-content: center !important;
- align-items: center !important;
- }
- }
-}
-
-
-.cardLogo {
- border-bottom: 1px solid #ECECEC;
- padding: 16px 0;
-
- img {
- height: 28px;
- width: auto;
- object-fit: contain;
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Tool/ItemTool/index.tsx b/src/modules/landing-rollback/Componets/Tool/ItemTool/index.tsx
deleted file mode 100644
index 80e271ce6..000000000
--- a/src/modules/landing-rollback/Componets/Tool/ItemTool/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import SvgInset from '@/components/SvgInset';
-import useWindowSize from '@/hooks/useWindowSize';
-import s from './styles.module.scss';
-
-type TItemTool = {
- step: string;
- title: string;
- description: string;
- index: number;
- length: number;
-};
-
-export default function ItemTool({
- data,
- delay,
-}: {
- data: TItemTool;
- delay: number;
-}) {
- const isFrist = data.index === 0;
- const isLast = data.index === data.length;
- const { mobileScreen, tabletScreen } = useWindowSize();
-
- const svgUrl = isFrist
- ? '/landing/svg/frame_tool_fill.svg'
- : '/landing/svg/frame_tool_mid.svg';
-
- return (
-
-
- {!mobileScreen && !tabletScreen &&
}
- {!isLast &&
}
-
{data.step}
-
-
-
-
{data.title}
-
- {data.description}
-
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Tool/ItemTool/styles.module.scss b/src/modules/landing-rollback/Componets/Tool/ItemTool/styles.module.scss
deleted file mode 100644
index e93aa4dd2..000000000
--- a/src/modules/landing-rollback/Componets/Tool/ItemTool/styles.module.scss
+++ /dev/null
@@ -1,124 +0,0 @@
-.itemTool {
- flex: 1;
- border-top: 1px solid #3d3d3d;
- border-bottom: 1px solid #3d3d3d;
- @include is-mobile {
- width: 100%;
- border: 1px solid #3d3d3d;
- }
- @include is-tablet {
- width: 100%;
- }
- &_step {
- padding: 17.5px 0;
- padding-left: 32px;
- font-size: 18px;
- height: 60px;
- color: #fa4e0e;
- font-weight: 500;
- line-height: 25.2px;
- position: relative;
- z-index: 1;
-
- @include is-mobile {
- background-color: #262626;
- padding: 12px 0;
- padding-left: 12px;
- height: 44px;
- }
- @include is-tablet {
- background-color: #262626;
- padding: 12px 0;
- padding-left: 12px;
- height: 60px;
- }
- &_text {
- position: absolute;
- left: 32px;
- z-index: 3;
- font-size: 18px;
- font-style: normal;
- font-weight: 500;
- line-height: 140%; /* 25.2px */
- letter-spacing: 0.18px;
- @include is-mobile {
- left: 16px;
- font-size: 14px;
- font-weight: 500;
- line-height: 140%; /* 19.6px */
- letter-spacing: 0.14px;
- }
- }
- &_stud {
- position: absolute;
- left: calc(100% - 1px);
- width: 8px;
- height: 25px;
- top: 50%;
- transform: translateY(-50%);
- border-top-right-radius: 5px;
- border-bottom-right-radius: 5px;
- background: #262626;
-
- @include is-mobile {
- display: none;
- }
- @include is-tablet {
- display: none;
- }
- }
- svg {
- position: absolute;
- left: 0;
- top: 0;
- z-index: 1;
- width: 100%;
- }
- }
-
- &_content {
- padding: 32px;
-
- @include is-mobile {
- padding: 16px;
- }
- &_inner {
- display: flex;
- flex-direction: column;
- gap: 8px;
-
- &_title {
- font-weight: 500;
- font-size: 24px;
- line-height: 33.6px;
-
- @include is-mobile {
- font-size: 16px;
- line-height: 22.4px;
- }
- }
- &_description {
- font-weight: 400;
- line-height: 25.2px;
- font-size: 18px;
- color: rgba(255, 255, 255, 0.7);
-
- @include is-mobile {
- font-size: 14px;
- line-height: 19.6px;
- width: 70%;
- }
- }
- }
-
- &__midItem {
- border: solid 1px #3d3d3d;
- border-top: none;
- border-bottom: none;
-
- @include is-mobile {
- border: none;
- }
- }
- }
-}
diff --git a/src/modules/landing-rollback/Componets/Tool/index.tsx b/src/modules/landing-rollback/Componets/Tool/index.tsx
deleted file mode 100644
index 4860f0402..000000000
--- a/src/modules/landing-rollback/Componets/Tool/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import s from './styles.module.scss';
-import tool_img from '@/public/landing/images/tool_img.png';
-import Image from 'next/image';
-import ItemTool from './ItemTool';
-import Chars from '@/interactive/Chars';
-import Fade from '@/interactive/Fade';
-import Scale from '@/interactive/Scale';
-import useWindowSize from '@/hooks/useWindowSize';
-
-const DATA_CONTENT = [
- {
- step: 'Step 1',
- title: 'Choose a rollup method',
- description: 'Optimistic rollups or ZK rollups',
- },
- {
- step: 'Step 2',
- title: 'Choose a block time',
- description: '10s, 5s, or 2s — entirely up to you.',
- },
- {
- step: 'Step 3',
- title: 'Choose pre-installed dapps',
- description: 'DEX, DAO, NFT marketplace, and more over time.',
- },
-];
-
-export default function Tool() {
- const { mobileScreen, tabletScreen } = useWindowSize();
- return (
-
-
-
-
- {mobileScreen || tabletScreen ? (
- <>
-
- A no-code tool
-
- for building a full-featured Bitcoin L2 blockchain.
- >
- ) : (
- <>
-
-
- A no-code tool
-
- for
- building a full-featured
- Bitcoin L2 blockchain.
-
- >
- )}
-
- {mobileScreen || tabletScreen ? (
-
- ) : (
-
-
-
-
-
- )}
-
-
-
- {DATA_CONTENT.map((item, index) => {
- return (
-
- );
- })}
-
-
-
-
- );
-}
diff --git a/src/modules/landing-rollback/Componets/Tool/styles.module.scss b/src/modules/landing-rollback/Componets/Tool/styles.module.scss
deleted file mode 100644
index 7fdc5e7a8..000000000
--- a/src/modules/landing-rollback/Componets/Tool/styles.module.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-.tool {
- background: #000;
- padding: 100px 0;
-
- @include is-mobile {
- padding: 32px 0;
- }
- &_heading {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- gap: 24px;
-
- @include is-mobile {
- flex-direction: column-reverse;
- align-items: start;
- }
- @include is-tablet {
- flex-direction: column-reverse;
- align-items: start;
- }
-
- &_text {
- font-weight: 400;
- line-height: 57.6px;
- font-size: 48px;
- display: flex;
- flex-direction: column;
- width: 567px;
-
- @include is-mobile {
- width: 100%;
- font-size: 28px;
- line-height: 39.2px;
- display: inline;
- }
- @include is-tablet {
- display: inline;
- width: 100%;
- text-align: center;
- }
-
- &_hightlight {
- color: #fa4e0e;
- width: max-content;
- }
- }
-
- &_img {
- width: 100%;
-
- @include is-mobile {
- width: 50%;
- }
- @include is-tablet {
- width: 50%;
- margin-left: auto;
- margin-right: auto;
- }
- }
- }
- &_content {
- margin-top: 48px;
- width: 100%;
- flex-direction: row;
- display: flex;
- border: solid 1px #3d3d3d;
- border-top: none;
- border-bottom: none;
- @include is-mobile {
- margin-top: 24px;
- flex-direction: column;
- gap: 24px;
- border: none;
- }
-
- @include is-tablet {
- flex-direction: column;
- gap: 24px;
- border: none;
- }
- }
-}
diff --git a/src/modules/landing-rollback/index.tsx b/src/modules/landing-rollback/index.tsx
deleted file mode 100644
index 9f98e3f3f..000000000
--- a/src/modules/landing-rollback/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import useWindowSize from '@/hooks/useWindowSize';
-import Chain from './Componets/Chain';
-import Hero from './Componets/Hero';
-import ScaleableMobile from './Componets/ScaleableMobile';
-import s from './styles.module.scss';
-import Section_7 from '@/modules/landing/Componets/Section_7';
-import { useEffect } from 'react';
-import ScalableSlide from '@/modules/landing/Componets/ScalableSlide';
-import Section7Mobile from './Componets/Section_7/Section_7_Mobile';
-import BitEth from '@/modules/landing/Componets/BitEth';
-import Ecosystem from './Componets/Ecosystem';
-import LegoV2 from '@/modules/landing/Componets/LegoV2';
-import JoinAllowList from '@/modules/landing/Componets/Hero/JoinAllowList';
-
-export default function Landing() {
- const { mobileScreen, tabletScreen } = useWindowSize();
- useEffect(() => {
- window.scrollTo(0, 0);
- }, []);
- return (
-
-
-
-
-
-
- {mobileScreen || tabletScreen ? : }
- {mobileScreen || tabletScreen ? : }
-
-
- );
-}
diff --git a/src/modules/landing-rollback/styles.module.scss b/src/modules/landing-rollback/styles.module.scss
deleted file mode 100644
index 5455523da..000000000
--- a/src/modules/landing-rollback/styles.module.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.landing {
-}
From cadca07fc5ca59a5498cd8d35ceb8844fc5fe816 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Tue, 12 Nov 2024 10:55:48 +0700
Subject: [PATCH 15/19] update header and homepage
---
src/Providers/ContactUsProvider/index.tsx | 2 +-
src/components/ContactUsModal/index.tsx | 6 +-
src/layouts/HeaderV4/Main/index.tsx | 58 +++++--
src/layouts/HeaderV4/Main/style.module.scss | 5 +-
src/layouts/HeaderV4/menuConfig.ts | 72 +++++----
.../landing/Componets/Hero/Content/index.tsx | 43 ++---
.../Componets/Hero/Content/styles.module.scss | 18 +--
src/modules/landing/Componets/Hero/index.tsx | 2 +-
src/modules/landing/Componets/Intro/index.tsx | 151 +++++++++++-------
.../Componets/Intro/styles.module.scss | 29 ++--
.../landing/Componets/PreLoader/index.tsx | 6 +-
11 files changed, 239 insertions(+), 153 deletions(-)
diff --git a/src/Providers/ContactUsProvider/index.tsx b/src/Providers/ContactUsProvider/index.tsx
index c7f16267b..f3e4a2bf2 100644
--- a/src/Providers/ContactUsProvider/index.tsx
+++ b/src/Providers/ContactUsProvider/index.tsx
@@ -22,7 +22,7 @@ export const ContactUsProvider: React.FC = ({
setParams(params);
setShowContactUsModal(true);
setSubjectDefault(
- params.subjectDefault !== undefined ? params.subjectDefault : 3,
+ params?.subjectDefault !== undefined ? params?.subjectDefault : 3,
);
};
diff --git a/src/components/ContactUsModal/index.tsx b/src/components/ContactUsModal/index.tsx
index f90ce8e9c..8a22f1c54 100644
--- a/src/components/ContactUsModal/index.tsx
+++ b/src/components/ContactUsModal/index.tsx
@@ -407,14 +407,14 @@ const ContactUsModal = ({
{params?.title
? params.title
- : params.changeText
+ : params?.changeText
? 'Finish your setup'
: 'Get a personalized demo'}
{params?.description
? params.description
- : params.changeText
+ : params?.changeText
? 'Your setup requires manual assistance. We’ll reach out to you shortly to help complete it.'
: 'Help us tailor the demo experience to your needs.'}
@@ -570,7 +570,7 @@ const ContactUsModal = ({
borderRadius={'8px'}
fontSize={['18px']}
border="1px solid #E7E7E7"
- disabled={params.disableSelect}
+ disabled={params?.disableSelect}
_hover={{}}
onChange={(e) => {
setSubject(Number(e.target.value));
diff --git a/src/layouts/HeaderV4/Main/index.tsx b/src/layouts/HeaderV4/Main/index.tsx
index 4f1a6e547..73dfc061d 100644
--- a/src/layouts/HeaderV4/Main/index.tsx
+++ b/src/layouts/HeaderV4/Main/index.tsx
@@ -3,7 +3,7 @@ import s from './style.module.scss';
import { Flex, IconButton, useDisclosure } from '@chakra-ui/react';
import useWindowSize from '@/hooks/useWindowSize';
import DrawerMobileMenu from '@/layouts/HeaderV4/components/DrawerMenu';
-import { NAV_ITEMS_LEFT } from '../menuConfig';
+import { NAV_ITEMS_LEFT, NAV_ITEMS_RIGHT } from '../menuConfig';
import { usePathname, useRouter } from 'next/navigation';
import IcMenuMobile from '../components/IcMenuMobile';
import DropDown from '../components/Dropdown';
@@ -39,14 +39,6 @@ TMainHeader): ReactElement => {
>
-
router.push('/')}
- >
-
-
{isDesktop && (
{NAV_ITEMS_LEFT.map((item, index) => {
@@ -92,6 +84,12 @@ TMainHeader): ReactElement => {
)}
+
router.push('/')}
+ >
+
+
{isDesktop ? (
@@ -99,6 +97,48 @@ TMainHeader): ReactElement => {
Get BVM
*/}
{/* */}
+
+ {NAV_ITEMS_RIGHT.map((item, index) => {
+ const isActive = pathname === item.href;
+ const isActiveDark = isActive && color === 'white';
+ const isActiveLight = isActive && color === 'black';
+ return item.subMenu ? (
+
+ ) : item.GroupDropDown ? (
+
+ {item.GroupDropDown()}
+
+ ) : (
+
+
+ {item.label}
+
+
+ );
+ })}
+
diff --git a/src/layouts/HeaderV4/Main/style.module.scss b/src/layouts/HeaderV4/Main/style.module.scss
index ee76ed7d9..11906e4ba 100644
--- a/src/layouts/HeaderV4/Main/style.module.scss
+++ b/src/layouts/HeaderV4/Main/style.module.scss
@@ -69,7 +69,10 @@
align-items: center;
gap: 12px;
cursor: pointer;
- margin-right: 16px;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ // margin-right: 16px;
// width: 98px;
&_text {
diff --git a/src/layouts/HeaderV4/menuConfig.ts b/src/layouts/HeaderV4/menuConfig.ts
index d34ba61d6..18bc56601 100644
--- a/src/layouts/HeaderV4/menuConfig.ts
+++ b/src/layouts/HeaderV4/menuConfig.ts
@@ -90,23 +90,23 @@ export const NAV_ITEMS: Array
= [
];
export const NAV_ITEMS_LEFT: Array = [
{
- label: 'BVM Studio',
- href: '/studio',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: 'Research',
- href: '/research',
+ label: 'Build on Bitcoin',
+ href: '/',
isNewWindow: false,
isHide: false,
},
- {
- label: 'Docs',
- href: 'https://docs.bvm.network/bvm',
- isNewWindow: true,
- isHide: false,
- },
+ // {
+ // label: 'Research',
+ // href: '/research',
+ // isNewWindow: false,
+ // isHide: false,
+ // },
+ // {
+ // label: 'Docs',
+ // href: 'https://docs.bvm.network/bvm',
+ // isNewWindow: true,
+ // isHide: false,
+ // },
// {
// label: 'Products',
@@ -168,21 +168,33 @@ export const NAV_ITEMS_LEFT: Array = [
// isNewWindow: false,
// isHide: false,
// },
+ {
+ label: 'Ecosystem',
+ href: '/explore',
+ isNewWindow: false,
+ isHide: false,
+ },
// {
- // label: 'Ecosystem',
- // href: '/explore',
+ // label: '$BVM',
+ // href: '/bvm',
// isNewWindow: false,
// isHide: false,
// },
+];
+
+export const NAV_ITEMS_RIGHT: Array = [
{
- label: '$BVM',
- href: '/bvm',
+ label: 'Research',
+ href: '/research',
isNewWindow: false,
isHide: false,
},
-];
-
-export const NAV_ITEMS_RIGHT: Array = [
+ {
+ label: 'Docs',
+ href: 'https://docs.bvm.network/bvm',
+ isNewWindow: true,
+ isHide: false,
+ },
{
label: '$BVM',
href: '/bvm',
@@ -190,21 +202,15 @@ export const NAV_ITEMS_RIGHT: Array = [
isHide: false,
},
// {
- // label: 'Research',
- // href: '/research',
+ // label: 'Team',
+ // href: '/team',
// isNewWindow: false,
// isHide: false,
// },
- {
- label: 'Team',
- href: '/team',
- isNewWindow: false,
- isHide: false,
- },
- {
- label: 'Contact us',
- MenuItemEl: ContactUs,
- },
+ // {
+ // label: 'Contact us',
+ // MenuItemEl: ContactUs,
+ // },
];
export const NAV_ITEMS_MOBILE: Array = [
{
diff --git a/src/modules/landing/Componets/Hero/Content/index.tsx b/src/modules/landing/Componets/Hero/Content/index.tsx
index 427bc42ec..c7267a12d 100644
--- a/src/modules/landing/Componets/Hero/Content/index.tsx
+++ b/src/modules/landing/Componets/Hero/Content/index.tsx
@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import ModalVideo from 'react-modal-video';
import { useContactUs } from '@/Providers/ContactUsProvider/hook';
-import {VIDEO_HERO_MAIN} from "@constants/common";
+import { VIDEO_HERO_MAIN } from '@constants/common';
export default function HeroContent() {
const router = useRouter();
@@ -30,7 +30,7 @@ export default function HeroContent() {
router.push('/rollups/customize')}
+ onClick={() => router.push('/studio')}
className={`${s.btn} ${s.btn__red}`}
>
Deploy a Bitcoin L2
@@ -63,27 +63,28 @@ export default function HeroContent() {
+
+
+
-
-
-
+
-
+ {/* */}
diff --git a/src/modules/landing/Componets/Intro/index.tsx b/src/modules/landing/Componets/Intro/index.tsx
index e605e55a7..493d36db7 100644
--- a/src/modules/landing/Componets/Intro/index.tsx
+++ b/src/modules/landing/Componets/Intro/index.tsx
@@ -15,7 +15,12 @@ export default function Intro() {
const gradientRef = useRef(null);
const refContent = useRef(null);
const refThumb = useRef(null);
- const refActions = useRef({ isDown: false, isComplete: false, current: 0, xFrame: 0 });
+ const refActions = useRef({
+ isDown: false,
+ isComplete: false,
+ current: 0,
+ xFrame: 0,
+ });
const quickTo = useRef();
const quickFillter = useRef();
const { setPlay, setPlayed, played } = useAnimationStore();
@@ -23,25 +28,29 @@ export default function Intro() {
const refFlare = useRef(null);
const refSky = useRef(null);
+ const { contextSafe } = useGSAP(
+ () => {
+ played && completed();
+ },
+ { dependencies: [played], scope: refContent },
+ );
- const {contextSafe} = useGSAP(() => {
- played && completed();
- }, {dependencies: [played], scope: refContent});
-
- useGSAP(() => {
- if (typeof document !== undefined) {
- document.body.style.overflow = 'hidden';
- }
- quickTo.current = gsap.quickTo(refBtn.current, 'x', {
- duration: 0.2,
- });
+ useGSAP(
+ () => {
+ if (typeof document !== undefined) {
+ document.body.style.overflow = 'hidden';
+ }
+ quickTo.current = gsap.quickTo(refBtn.current, 'x', {
+ duration: 0.2,
+ });
- quickFillter.current = gsap.quickTo(refThumb.current, '--clipPath', {
- duration: 0.2,
- });
- }, {dependencies: []});
+ quickFillter.current = gsap.quickTo(refThumb.current, '--clipPath', {
+ duration: 0.2,
+ });
+ },
+ { dependencies: [] },
+ );
const completed = contextSafe(() => {
-
gsap.fromTo(
refContent.current,
{ pointerEvents: 'none' },
@@ -65,12 +74,20 @@ export default function Intro() {
refActions.current.isComplete = true;
const tm = { value: refActions.current.xFrame };
gsap.to(tm, {
- value: FRAMES, ease: 'power3.inOut', duration: .4, onUpdate: () => {
+ value: FRAMES,
+ ease: 'power3.inOut',
+ duration: 0.4,
+ onUpdate: () => {
lottieRef.current?.seek(tm.value);
},
onComplete: completed,
});
- gsap.to(refFlare.current, { '--bg': 1, '--shadown': '500px', ease: 'power3.inOut', duration: .6 });
+ gsap.to(refFlare.current, {
+ '--bg': 1,
+ '--shadown': '500px',
+ ease: 'power3.inOut',
+ duration: 0.6,
+ });
gsap.to(refSky.current, { '--bg': 1, duration: 1.2, ease: 'power3.inOut' });
});
@@ -116,8 +133,9 @@ export default function Intro() {
const rectBtn = refBtn.current.getBoundingClientRect();
const rectWrap = refWrap.current.getBoundingClientRect();
- const xx = (e?.touches?.length && e?.touches[0]) ? e?.touches[0]?.clientX : e.clientX;
- refActions.current.current = (xx) - rectWrap.left - rectBtn.width / 2;
+ const xx =
+ e?.touches?.length && e?.touches[0] ? e?.touches[0]?.clientX : e.clientX;
+ refActions.current.current = xx - rectWrap.left - rectBtn.width / 2;
refActions.current.current = Math.max(
Math.min(refActions.current.current, rectWrap.width - rectBtn.width),
0,
@@ -147,11 +165,14 @@ export default function Intro() {
{!played && (
-
Welcome to the future of Bitcoin.
+
+ Welcome to the future of Bitcoin.
+
- BVM is the first modular Bitcoin L2 metaprotocol on Bitcoin. With a few clicks, anyone can plug and
- play
- the best-of-breed blockchain modules to launch their own Bitcoin L2 blockchain.
+ BVM is the first modular Bitcoin L2 metaprotocol on
+ Bitcoin. With a few clicks, anyone can plug and play the
+ best-of-breed blockchain modules to launch their own Bitcoin L2
+ blockchain.
@@ -159,45 +180,45 @@ export default function Intro() {
@@ -209,8 +230,20 @@ export default function Intro() {
diff --git a/src/modules/landing/Componets/Intro/styles.module.scss b/src/modules/landing/Componets/Intro/styles.module.scss
index c8876d519..0618e0847 100644
--- a/src/modules/landing/Componets/Intro/styles.module.scss
+++ b/src/modules/landing/Componets/Intro/styles.module.scss
@@ -4,7 +4,7 @@
position: fixed;
top: 0;
left: 0;
- z-index: 9;
+ z-index: 100;
overflow: hidden;
background: url("/landing/compress/banner-bg.jpg?v=2");
background-size: cover;
@@ -37,6 +37,7 @@
top: calc(50% - 3vh);
left: 50%;
transform: translate(-50%, -50%);
+
@include is-min-table {
top: 50%;
}
@@ -98,13 +99,12 @@
padding: 4px;
margin-left: auto;
margin-right: auto;
- background: linear-gradient(
- -90deg,
- rgba(225, 225, 225, .07) 0,
- rgba(225, 225, 225, 0) 100%
- );
+ background: linear-gradient(-90deg,
+ rgba(225, 225, 225, .07) 0,
+ rgba(225, 225, 225, 0) 100%);
transform: translateX(-20px);
+
@include is-min-table {
transform: translateX(-90px);
}
@@ -166,11 +166,9 @@
--bg: 0%;
z-index: 2;
pointer-events: none;
- background: linear-gradient(
- 90deg,
- rgba(0, 0, 0, 1) var(--bg),
- rgba(171, 171, 171, 0) 100%
- );
+ background: linear-gradient(90deg,
+ rgba(0, 0, 0, 1) var(--bg),
+ rgba(171, 171, 171, 0) 100%);
}
}
@@ -226,7 +224,8 @@
font-size: 13px;
font-style: normal;
font-weight: 400;
- line-height: 140%; /* 19.6px */
+ line-height: 140%;
+ /* 19.6px */
letter-spacing: 0.28px;
top: -60px;
right: -45px;
@@ -256,7 +255,8 @@
font-size: 50px;
font-style: normal;
font-weight: 400;
- line-height: 100%; /* 50px */
+ line-height: 100%;
+ /* 50px */
text-transform: uppercase;
margin-bottom: 28px;
@@ -333,7 +333,8 @@
0% {
-webkit-mask-position-x: -132px;
}
+
100% {
-webkit-mask-position-x: 132px;
}
-}
+}
\ No newline at end of file
diff --git a/src/modules/landing/Componets/PreLoader/index.tsx b/src/modules/landing/Componets/PreLoader/index.tsx
index 39cef5030..39f4a63b2 100644
--- a/src/modules/landing/Componets/PreLoader/index.tsx
+++ b/src/modules/landing/Componets/PreLoader/index.tsx
@@ -11,9 +11,5 @@ export default function PreLoader() {
}
}, []);
- return <>
- {
- isHadLoaded ? :
- }
- >;
+ return <>{false ? : }>;
}
From 48e5a6908e6bc9e1a78bce5e75d70adaad41007a Mon Sep 17 00:00:00 2001
From: Archaon
Date: Tue, 12 Nov 2024 10:58:57 +0700
Subject: [PATCH 16/19] update staking page
---
src/modules/staking/index.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/modules/staking/index.tsx b/src/modules/staking/index.tsx
index a3457ec1d..d96d266ec 100644
--- a/src/modules/staking/index.tsx
+++ b/src/modules/staking/index.tsx
@@ -35,9 +35,9 @@ const StakingUser = () => {
{stakeUser?.isHaveTeam ? : }
-
+ {/* */}
{/* */}
-
+ {/* */}
);
From ef805dcccbd07df4a25729e8ddf5eadd59db4148 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Tue, 12 Nov 2024 11:56:20 +0700
Subject: [PATCH 17/19] update explore wip
---
.../components/DappCard/index.tsx | 80 ++++++++++++++++---
.../components/DappCard/styles.module.scss | 66 ++++++++++-----
src/modules/ExploreModule/data.ts | 4 +-
src/modules/ExploreModule/index.tsx | 6 +-
src/modules/ExploreModule/styles.module.scss | 47 ++++-------
5 files changed, 135 insertions(+), 68 deletions(-)
diff --git a/src/modules/ExploreModule/components/DappCard/index.tsx b/src/modules/ExploreModule/components/DappCard/index.tsx
index 5c217c3e3..9cc231190 100644
--- a/src/modules/ExploreModule/components/DappCard/index.tsx
+++ b/src/modules/ExploreModule/components/DappCard/index.tsx
@@ -4,7 +4,7 @@ import Fade from '@interactive/Fade';
import ImagePlaceholder from '@components/ImagePlaceholder';
import Link from 'next/link';
import cn from 'classnames';
-import { Box } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
export type TDappCardProps = {
id?: string;
@@ -26,6 +26,66 @@ export default function DappCard({
...props
}: TDappCardProps): React.JSX.Element {
const { link } = props;
+
+ if (idx === 0) {
+ return (
+
+
+
+
+
+
+
+ {props.title}
+
+
+
+ {props.tags.map((tag, index) => {
+ if (!tag) return null;
+ return (
+
+ {tag}
+
+ );
+ })}
+
+
+
+
+ );
+ }
+
return (
-
+
{props.title}
{tag}
;
})}
-
+
);
diff --git a/src/modules/ExploreModule/components/DappCard/styles.module.scss b/src/modules/ExploreModule/components/DappCard/styles.module.scss
index ec43b3879..0435d3b2a 100644
--- a/src/modules/ExploreModule/components/DappCard/styles.module.scss
+++ b/src/modules/ExploreModule/components/DappCard/styles.module.scss
@@ -1,18 +1,28 @@
.wrapperDappCard {
width: 100%;
- max-width: 442px;
- border-radius: 32px;
+ // max-width: 442px;
+ // border-radius: 32px;
display: block;
- background: linear-gradient(0deg, #F15A24 0%, #F7931E 40%, #FBB03B 100%);
+ // background: linear-gradient(0deg, #F15A24 0%, #F7931E 40%, #FBB03B 100%);
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: column;
+ position: relative;
&_image {
// max-height: 300px;
width: 100%;
- flex: 1;
+ // height: 100%;
+ // flex: 1;
+
+
+ &:not(.wrapperDappCard_image__first) {
+ img {
+ max-width: 60%;
+
+ }
+ }
&__first {
img {
@@ -24,8 +34,9 @@
:global(.imagePreload) {
- // display: grid;
- // place-items: center;
+
+ display: grid;
+ place-items: center;
img {
border-top-left-radius: 32px;
@@ -37,25 +48,31 @@
}
&_heading {
- color: #FFF;
+ color: #000;
font-family: "SF Pro Display";
font-size: 28px;
font-style: normal;
- font-weight: 600;
- line-height: 110%;
- /* 30.8px */
+ font-weight: 500;
+ line-height: 140%;
+ /* 39.2px */
+ text-transform: uppercase;
+ margin-bottom: 8px;
}
&_decs {
- color: #fff;
- font-size: 16px;
+ color: #000;
+ font-family: "SF Pro Display";
+ font-size: 22px;
+ font-style: normal;
font-weight: 400;
- line-height: calc(27 / 18);
+ line-height: 150%;
+ /* 33px */
+ letter-spacing: 1.1px;
}
}
.wrapperDappCardContent {
- padding: 12px 24px;
+ padding-top: 16px;
display: flex;
flex-direction: column;
gap: 8px;
@@ -64,16 +81,23 @@
.tags {
display: flex;
- gap: 4px;
- padding-bottom: 12px;
+ gap: 8px;
+ padding-top: 24px;
p {
- font-size: 14px;
- color: #fff;
- font-weight: 600;
- background: rgba(255, 255, 255, 0.3);
+ background: rgba(0, 0, 0, 0.05);
+
border-radius: 100px;
- padding: 4px 12px;
+ padding: 8px 20px;
line-height: calc(21 / 14);
+
+
+ color: #000;
+ font-family: "SF Pro Display";
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 150%;
+ /* 24px */
}
}
\ No newline at end of file
diff --git a/src/modules/ExploreModule/data.ts b/src/modules/ExploreModule/data.ts
index 3bca54510..c20192e08 100644
--- a/src/modules/ExploreModule/data.ts
+++ b/src/modules/ExploreModule/data.ts
@@ -156,14 +156,14 @@ export const DAPPS_DATA: Omit[] = [
export const GAMES_DATA: Omit[] = [
{
- image: '/explore/bitcoin-wars2.png',
+ image: `${CDN_URL}/pages/explore/home-bitcoinwar.png`,
title: 'Bitcoin Wars',
description:
'The first fully on-chain game built on a ZK Rollup on the Bitcoin network.',
bgColor: 'linear-gradient(0deg, #F15A24 0%, #F7931E 40%, #FBB03B 100%);',
tags: ['Bitcoin Wars Chain', 'GameFi'],
link: { url: '/bitcoin-wars', target: '_self' },
- homeImage: `${CDN_URL}/pages/landing-v4/home-bitcoinwar-org.png`,
+ homeImage: `${CDN_URL}/pages/explore/home-bitcoinwar.png`,
},
{
image: '/explore/blast.png',
diff --git a/src/modules/ExploreModule/index.tsx b/src/modules/ExploreModule/index.tsx
index 383e1bbda..51676079b 100644
--- a/src/modules/ExploreModule/index.tsx
+++ b/src/modules/ExploreModule/index.tsx
@@ -40,7 +40,7 @@ export default function ExploreModule(): React.JSX.Element {
<>
-
+ {/*
Welcome to the future of Bitcoin!
@@ -48,7 +48,7 @@ export default function ExploreModule(): React.JSX.Element {
Discover how BVM is unlocking Bitcoin's potential far beyond just
being a currency.
-
+ */}
{/* tab */}
-
+
{GAMES_DATA.map((item, idx) => {
return
;
diff --git a/src/modules/ExploreModule/styles.module.scss b/src/modules/ExploreModule/styles.module.scss
index 720573fee..559129ccc 100644
--- a/src/modules/ExploreModule/styles.module.scss
+++ b/src/modules/ExploreModule/styles.module.scss
@@ -13,16 +13,20 @@
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 44px;
- width: fit-content;
+ // width: fit-content;
@include is_min-table {
grid-template-columns: repeat(2, 1fr);
}
- @include is-pc {
- grid-template-columns: repeat(3, 1fr);
+ >div:first-of-type {
+ // grid span 2
+ grid-column: span 2;
+ width: 100%;
}
+
+
}
.wrapperCardChains {
@@ -46,40 +50,19 @@
opacity: 0.7;
}
-.tabWrapper {
- display: flex !important;
- flex-direction: row;
- gap: 120px;
- justify-content: space-between;
-
- @include is-tablet {
- gap: 60px;
- }
-
- @include is-mobile {
- flex-direction: column;
- gap: 30px;
- }
-
- :global {
- .chakra-tabs__tab-panels {
- width: fit-content;
- }
- }
-}
+.tabWrapper {}
.tabList {
- flex-direction: column !important;
- // align-items: center;
+ align-items: center;
+ justify-content: center !important;
+ display: flex;
gap: 10px;
flex: 1;
+ margin-bottom: 40px;
- @include is-mobile {
- flex-direction: row !important;
- }
>button {
- width: fit-content;
+ width: 200px;
padding: 12px 0;
// border-radius: 100px;
background: none;
@@ -98,10 +81,10 @@
line-height: 130%;
&[aria-selected='true'] {
- color: #FA4E0E;
+ color: #000;
opacity: 1;
font-weight: 700;
- border-bottom: 2px solid #FA4E0E;
+ border-bottom: 2px solid #000;
// background: rgba(250, 78, 14, 0.10);
}
From 3073423602b51bfd4d523ac165a23d5d97226635 Mon Sep 17 00:00:00 2001
From: Archaon
Date: Tue, 12 Nov 2024 16:24:32 +0700
Subject: [PATCH 18/19] update new landing page
---
public/landing-v7/home-alpha-1.png | Bin 0 -> 16930 bytes
public/landing-v7/home-bitcoinwar-1.png | Bin 0 -> 1215819 bytes
public/landing-v7/home-eternal-1.png | Bin 0 -> 716488 bytes
public/landing-v7/home-flux-1.png | Bin 0 -> 596750 bytes
public/landing-v7/home-heartbeats-1.png | Bin 0 -> 287766 bytes
public/landing-v7/home-llama-1.png | Bin 0 -> 648401 bytes
public/landing-v7/home-perp-1.png | Bin 0 -> 153739 bytes
public/landing-v7/home-studio-1.png | Bin 0 -> 249103 bytes
public/landing-v7/home-timechain-1.png | Bin 0 -> 44839 bytes
src/app/page.tsx | 4 +-
src/constants/home-content.tsx | 1035 +++++++++--------
src/layouts/HeaderV4/menuConfig.ts | 14 +-
.../components/AppCard/AppCard.module.scss | 15 +-
.../components/AppCard/index.tsx | 36 +-
src/modules/ExploreModule/data.ts | 2 +-
src/modules/ExploreModule/index.tsx | 2 +-
.../landing/Componets/Hero/Content/index.tsx | 17 +-
src/modules/landing/Componets/Intro/index.tsx | 7 +-
.../SectionBlock/SectionBlock.module.scss | 158 +--
.../components/SectionBlock/index.tsx | 371 +++---
.../landingV5/components/BuildItem/index.tsx | 4 +-
.../Item/App/SectionItemApp.module.scss | 51 +-
.../SectionBlock/Item/App/index.tsx | 131 ++-
.../General/SectionItemGeneral.module.scss | 8 +-
.../SectionBlock/SectionBlock.module.scss | 25 +-
.../components/SectionBlock/index.tsx | 16 +-
src/modules/landingV5/index.tsx | 83 +-
src/modules/landingV5/styles.module.scss | 34 +-
src/styles/_global.scss | 7 +
29 files changed, 1063 insertions(+), 957 deletions(-)
create mode 100644 public/landing-v7/home-alpha-1.png
create mode 100644 public/landing-v7/home-bitcoinwar-1.png
create mode 100644 public/landing-v7/home-eternal-1.png
create mode 100644 public/landing-v7/home-flux-1.png
create mode 100644 public/landing-v7/home-heartbeats-1.png
create mode 100644 public/landing-v7/home-llama-1.png
create mode 100644 public/landing-v7/home-perp-1.png
create mode 100644 public/landing-v7/home-studio-1.png
create mode 100644 public/landing-v7/home-timechain-1.png
diff --git a/public/landing-v7/home-alpha-1.png b/public/landing-v7/home-alpha-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2348a6035157f979668d53302f494c62e4339d0
GIT binary patch
literal 16930
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%0A&`rafohUurTkG79t8f@$+aEbDL`a}EOB)nTo!
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