diff --git a/public/landing-v7/home-alpha-1.png b/public/landing-v7/home-alpha-1.png new file mode 100644 index 000000000..f2348a603 Binary files /dev/null and b/public/landing-v7/home-alpha-1.png differ diff --git a/public/landing-v7/home-arcade-1.png b/public/landing-v7/home-arcade-1.png new file mode 100644 index 000000000..3e96d7847 Binary files /dev/null and b/public/landing-v7/home-arcade-1.png differ diff --git a/public/landing-v7/home-bitcoinwar-1.png b/public/landing-v7/home-bitcoinwar-1.png new file mode 100644 index 000000000..29c722479 Binary files /dev/null and b/public/landing-v7/home-bitcoinwar-1.png differ diff --git a/public/landing-v7/home-eternal-1.png b/public/landing-v7/home-eternal-1.png new file mode 100644 index 000000000..08d70bd42 Binary files /dev/null and b/public/landing-v7/home-eternal-1.png differ diff --git a/public/landing-v7/home-flux-1.png b/public/landing-v7/home-flux-1.png new file mode 100644 index 000000000..e8ca2e797 Binary files /dev/null and b/public/landing-v7/home-flux-1.png differ diff --git a/public/landing-v7/home-heartbeats-1.png b/public/landing-v7/home-heartbeats-1.png new file mode 100644 index 000000000..9c3eea815 Binary files /dev/null and b/public/landing-v7/home-heartbeats-1.png differ diff --git a/public/landing-v7/home-heartbeats-2.png b/public/landing-v7/home-heartbeats-2.png new file mode 100644 index 000000000..e6a4e3fa8 Binary files /dev/null and b/public/landing-v7/home-heartbeats-2.png differ diff --git a/public/landing-v7/home-heartbeats-3.png b/public/landing-v7/home-heartbeats-3.png new file mode 100644 index 000000000..064c6c5b8 Binary files /dev/null and b/public/landing-v7/home-heartbeats-3.png differ diff --git a/public/landing-v7/home-llama-1.png b/public/landing-v7/home-llama-1.png new file mode 100644 index 000000000..309ed70a6 Binary files /dev/null and b/public/landing-v7/home-llama-1.png differ diff --git a/public/landing-v7/home-naka-1.png b/public/landing-v7/home-naka-1.png new file mode 100644 index 000000000..66e9ed622 Binary files /dev/null and b/public/landing-v7/home-naka-1.png differ diff --git a/public/landing-v7/home-perp-1.png b/public/landing-v7/home-perp-1.png new file mode 100644 index 000000000..b29a4eb5a Binary files /dev/null and b/public/landing-v7/home-perp-1.png differ diff --git a/public/landing-v7/home-studio-1.png b/public/landing-v7/home-studio-1.png new file mode 100644 index 000000000..b4f62b67d Binary files /dev/null and b/public/landing-v7/home-studio-1.png differ diff --git a/public/landing-v7/home-timechain-1.png b/public/landing-v7/home-timechain-1.png new file mode 100644 index 000000000..7c6e5ad62 Binary files /dev/null and b/public/landing-v7/home-timechain-1.png differ diff --git a/public/landing-v7/home-timechain-2.png b/public/landing-v7/home-timechain-2.png new file mode 100644 index 000000000..4114c536d Binary files /dev/null and b/public/landing-v7/home-timechain-2.png differ 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/app/build-bitcoin/page.tsx b/src/app/build-bitcoin/page.tsx index e7276ff18..2d62f6525 100644 --- a/src/app/build-bitcoin/page.tsx +++ b/src/app/build-bitcoin/page.tsx @@ -1,8 +1,8 @@ import { CDN_URL } from '@/config'; import { APP_NAME } from '@/config/metadata'; import MainLayout from '@/layouts/MainLayout'; -import LandingV3 from '@/modules/landingV3'; import { Metadata } from 'next'; +import Landing from '@/modules/landing'; const THUMBNAIL = `${CDN_URL}/pages/build-bitcoin/build-bitcoin-metadata.png`; @@ -30,16 +30,20 @@ export const metadata: Metadata = { }, }; +// import LandingV3 from '@/modules/landingV3'; + export default function Home() { return ( - + ); } 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/app/page.tsx b/src/app/page.tsx index 771b4a0fc..8103340ae 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,9 +1,7 @@ 'use client'; import MainLayout from '@/layouts/MainLayout'; -import LandingV3 from '@/modules/landingV3'; // import LandingV3 from '@/modules/landingV3'; -import LandingV4Module from '@/modules/landingV4'; import LandingV5 from '@/modules/landingV5'; export default function Home() { @@ -17,8 +15,8 @@ export default function Home() { }} hideFooter > - - {/* */} + {/* */} + ); } 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/constants/common.ts b/src/constants/common.ts index 2389e27d0..f6b57d32f 100644 --- a/src/constants/common.ts +++ b/src/constants/common.ts @@ -2,4 +2,5 @@ export const VIDEOS_CDN = `https://cdn.eternalai.org/videos`; export const VIDEO_BVM_STUDIO_HOW_IT_WORK = 'https://storage.googleapis.com/tc-cdn-prod/pages/landing-v4/BitcoinStudio_Intro_04.mp4'; -export const VIDEO_HERO_MAIN = 'https://storage.googleapis.com/bvm-network/videos/BVM_Full_v2.mp4' +export const VIDEO_HERO_MAIN = + 'https://storage.googleapis.com/tc-cdn-prod/pages/home/BVM_Full_v3.mp4'; diff --git a/src/constants/home-content.tsx b/src/constants/home-content.tsx index 55bdbbd6a..5279be4e1 100644 --- a/src/constants/home-content.tsx +++ b/src/constants/home-content.tsx @@ -3,6 +3,11 @@ import { CDN_URL, CDN_URL_IMAGES_NBC } from '@/config'; import { CHAIN_DATA, DAPPS_DATA } from '@/modules/ExploreModule/data'; import { Research } from '@/modules/Lab/data'; import { BLOGS } from '@/modules/landingV3/Componets/Section_7/constant'; +import { Flex, Text } from '@chakra-ui/react'; + +export const ETERNAL_TITLE = 'Eternals'; + +export const ETERNAL_URL = 'https://eternalai.org/'; export const APPS_SECTION = { id: 'apps', @@ -39,23 +44,14 @@ export const STEP_1_SECTION = { id: 'step-1', tag: '', title: ( -

- Launch your own Bitcoin L2 with BVM Studio. -

- ), - desc: ( - <> - {' '} -

- Bitcoin L2s extend Bitcoin’s capabilities without changing Bitcoin. BVM - offers the broadest range of scaling solutions — including ZK, - Optimistic, and Sovereign rollups. Whether you’re migrating dapps from - Ethereum to Bitcoin or creating something entirely new, BVM Studio - simplifies and accelerates the process, making it cost-effective to - bring your ideas to Bitcoin. -

- + +

AI on Bitcoin.

{' '} + + The world’s first onchain AIs on Bitcoin. + + ), + desc: <>, item: [ // { // title: 'DAPP', @@ -71,29 +67,26 @@ export const STEP_1_SECTION = { // tags: ['Free'], // }, { - title: 'ZK ROLLUP Hybrid', - description: 'Bitcoin L2 with Hybrid DA.', - homeImage: '/landing-v5/home-zk-hybrid-2.png', - bgColor: 'linear-gradient(180deg, #0071BC 0%, #1797D5 40%, #61FFF7 100%)', + title: ETERNAL_TITLE, + description: 'Unstoppable onchain AI agents.', + homeImage: '/landing-v7/home-eternal-1.png', + // bgColor: 'linear-gradient(180deg, #0071BC 0%, #1797D5 40%, #61FFF7 100%)', link: { - url: '/studio?template=1', + url: ETERNAL_URL, target: '_blank', }, // popular: true, - tags: ['$39/day'], + // tags: ['$39/day'], }, { - title: 'ZK RollUp', - description: 'Bitcoin L2 with 100% Bitcoin DA.', - homeImage: '/landing-v5/home-zk-4.png', - - bgColor: - 'linear-gradient(47deg, #FFC32A 0%, #F5E000 31.53%, #53B900 75.82%, #BDF710 107.83%)', + title: 'Decentralized Llama 3.1 405B ', + description: 'Chat for free. Permissionless.', + homeImage: '/landing-v7/home-llama-1.png', link: { - url: '/studio?template=2', + url: 'https://eternalai.org/agi', target: '_blank', }, - tags: ['$149/day'], + // tags: ['$149/day'], }, // { @@ -109,29 +102,28 @@ export const STEP_1_SECTION = { // tags: ['From $499/month'], // }, { - title: 'MEtaProtocol', - description: 'Bitcoin L1 scaling solution.', - homeImage: '/landing-v5/home-metaprotocol-2.png', + title: 'Decentralized FLUX.1 [dev]', + description: 'Image generation for free. Censorship-resistant.', + homeImage: '/landing-v7/home-flux-1.png', - bgColor: 'linear-gradient(0deg, #F15A24 0%, #F7931E 40%, #FBB03B 100%)', link: { - url: '/studio?template=3', + url: 'https://eternalai.org/imagine', target: '_blank', }, - tags: ['$199/day'], + // tags: ['$199/day'], }, { - title: 'Optimistic Rollup Hybrid', - description: 'Bitcoin L2 powered by OP Stack.', - homeImage: '/landing-v5/home-op-4.png', + title: 'Perceptrons', + description: 'The first onchain neural networks.', + homeImage: '/landing-v7/home-perp-1.png', - bgColor: - 'linear-gradient(227deg, #FF8D97 -7.83%, #FF6366 21.47%, #E40004 69.37%, #FFDEDE 118.41%)', + // bgColor: + // 'linear-gradient(227deg, #FF8D97 -7.83%, #FF6366 21.47%, #E40004 69.37%, #FFDEDE 118.41%)', link: { - url: '/studio?template=4', + url: 'https://eternalai.org/perceptrons', target: '_blank', }, - tags: ['$69/day'], + // tags: ['$69/day'], }, // { @@ -167,70 +159,32 @@ export const STEP_2_SECTION = { id: 'step-2', tag: '', title: ( -

- Jumpstart your Bitcoin L2 with ready-made apps. -

+ +

DeFi on Bitcoin.

+ + Make permissionless finance accessible to everyone. + + ), - desc: 'Get up and running instantly with pre-installed apps or easily add new ones from BVM Studio. Simply drag, drop, and enhance engagement, TVL, and more—no coding required.', + // desc: 'Get up and running instantly with pre-installed apps or easily add new ones from BVM Studio. Simply drag, drop, and enhance engagement, TVL, and more—no coding required.', item: [ { - title: 'Token Issuance', - description: 'Issue your own token with drag and drop.', - homeImage: '/landing-v5/home-token-issue-1.png', - bgColor: - 'linear-gradient(138deg, rgba(120, 170, 143, 0.40) 1.72%, rgba(2, 47, 22, 0.32) 101.88%)', + title: 'Rune Dex', + description: 'Buy & sell Bitcoin permisionlessly', + homeImage: '/explore/dapp-runedex2.png', link: { - url: '/studio?dapp=token_generation', + url: 'https://runechain.com/', target: '_blank', }, - tags: [''], }, { - title: 'YOLO', - description: 'Have some fun with your users.', - homeImage: '/landing-v5/home-yolo-1.png', - bgColor: - 'linear-gradient(171deg, rgba(255, 212, 103, 0.40) 4.5%, rgba(106, 57, 0, 0.32) 94.43%)', + title: 'NAKA Dex', + description: 'Trade Bitcoin futures permisionlessly.', + homeImage: '/landing-v7/home-naka-1.png', link: { - url: '/studio?dapp=yologame', + url: 'https://nakachain.xyz/perpetual', target: '_blank', }, - tags: [''], - }, - { - title: 'STAKING', - description: 'Boost TVL & offer community rewards.', - homeImage: '/landing-v5/home-staking.png', - bgColor: 'linear-gradient(#2E2E2E, #2E2E2E)', - link: { - url: '/studio?dapp=staking', - target: '_blank', - }, - tags: [''], - }, - { - title: 'Bridge', - description: 'Bring more assets to your chain & enhance liquidity.', - homeImage: '/landing-v5/home-bridge-1.png', - bgColor: - 'linear-gradient(198deg, rgba(40, 142, 185, 0.40) 7.57%, rgba(0, 57, 75, 0.32) 105.99%)', - link: { - url: '/studio?template=5', - target: '_blank', - }, - tags: [''], - }, - { - title: 'EXPLORER', - description: 'Your block explorer & analytics site.', - homeImage: '/landing-v5/home-explorer-1.png', - bgColor: - 'linear-gradient(138deg, rgba(179, 179, 179, 0.40) 1.72%, rgba(43, 43, 43, 0.32) 101.88%)', - link: { - url: '/studio?template=6', - target: '_blank', - }, - tags: [''], }, ], }; @@ -238,84 +192,152 @@ export const STEP_2_SECTION = { export const GAME_SECTION = { id: 'games', tag: 'Games. ', - title: 'Play incredibly fun games, fully on-chain.', + title: ( + +

Games on Bitcoin.

+ + {' '} + Shape the future of gaming on Bitcoin. + + + ), + // title: 'Play incredibly fun games, fully on-chain.', item: [ { title: 'Bitcoin Wars', description: - 'The first fully on-chain game built on a ZK Rollup on the Bitcoin network.', - homeImage: `${CDN_URL}/pages/landing-v4/home-bitcoinwar-org.png`, + 'The first fully onchain game built on a ZK Rollup on Bitcoin.', + homeImage: `/landing-v7/home-bitcoinwar-1.png`, link: { url: '/bitcoin-wars', target: '_blank', }, - tags: ['Bitcoin Wars'], + // tags: ['Bitcoin Wars'], }, { - title: 'Key Merge (Soon)', - description: - 'Combine matching keys to unlock higher levels. Strategically merge keys to progress and reach the ultimate goal.', - homeImage: `${CDN_URL}/pages/landing-v4/home-keymerge.png`, + title: 'Bitcoin ARCADE (Coming Soon)', + description: 'Endless fun with onchain Bitcoin games.', + homeImage: `/landing-v7/home-arcade-1.png`, link: { url: '', target: '_blank', }, - tags: ['Bitcoin Arcade'], + // tags: ['Bitcoin Arcade'], + }, + ], +}; + +export const TOOLS_SECTION = { + id: 'tools', + tag: 'Tools. ', + title: ( + +

Developer tools on Bitcoin.

+ + {' '} + Unlock Bitcoin's potential beyond currency. + + + ), + // title: 'Play incredibly fun games, fully on-chain.', + item: [ + { + title: 'BVM Studio', + description: 'Customize your blockchain with drag-and-drop', + homeImage: `/landing-v7/home-studio-1.png`, + link: { + url: '/studio', + target: '_blank', + }, + // tags: ['Bitcoin Wars'], }, + { - title: 'Bitcoin 21 (Soon)', - description: - 'A classic card game where the objective is to reach a total of 21. Play smart and calculate your moves to win big!', - homeImage: `${CDN_URL}/pages/landing-v4/home-btc21.png`, + title: 'Heartbeats', + description: 'Insights into Bitcoin chains', + homeImage: `/landing-v7/home-heartbeats-3.png`, link: { - url: '', + url: '/heartbeats', target: '_blank', }, - tags: ['Bitcoin Arcade'], + // tags: ['Bitcoin Arcade'], }, + ], +}; + +export const ART_SECTION = { + id: 'art', + tag: 'Art. ', + title: ( + +

Art on Bitcoin.

+ + {' '} + Experience fully onchain generative art on Bitcoin. + + + ), + // title: 'Play incredibly fun games, fully on-chain.', + item: [ { - title: 'Blast (Soon)', - description: - 'Match and blast in this fast-paced puzzle game. Clear the board and create powerful combos to score high!', - homeImage: `${CDN_URL}/pages/landing-v4/home-blast.png`, + title: 'Perceptrons', + description: 'The first on-chain neural networks', + homeImage: `/landing-v7/home-perp-1.png`, link: { - url: '', + url: 'https://eternalai.org/perceptrons', target: '_blank', }, - tags: ['Bitcoin Arcade'], + // tags: ['Bitcoin Wars'], }, + { - title: 'Wombat (Soon)', - description: - 'Deploy your units smartly in lines to face off against your opponent. Strategize carefully to ensure your lineup dominates the battlefield!', - homeImage: `${CDN_URL}/pages/landing-v4/home-wombat.png`, + title: 'Timechain', + description: 'The first long-form gen art collection', + homeImage: `/landing-v7/home-timechain-2.png`, + link: { - url: '', + url: 'https://generative.xyz/generative/1000001', target: '_blank', }, - tags: ['Bitcoin Arcade'], + // tags: ['Bitcoin Arcade'], }, + ], +}; + +export const SOCIALFI_SECTION = { + id: 'socialfi', + tag: 'Socialfi. ', + title: ( + +

SoFi on Bitcoin.

+ + A new way to interact with humans and AIs on Bitcoin. + + + ), + // title: 'Play incredibly fun games, fully on-chain.', + item: [ { - title: 'ZK Battleship Duel (Soon)', - description: `Engage in naval warfare by strategically placing your ships and guessing the locations of your opponent's fleet. Sink all their ships before they sink yours!`, - homeImage: `${CDN_URL}/pages/landing-v4/home-battleship.png`, + title: 'Alpha', + description: 'The first social app on Bitcoin. ', + homeImage: `/landing-v7/home-alpha-1.png`, + link: { - url: '', + url: 'https://alpha.wtf/', target: '_blank', }, - tags: ['Bitcoin Arcade'], }, + { - title: 'Zero-Knowledge Mines (Soon)', - description: - 'Test your logic in this classic puzzle game. Mark all the mines on the board without triggering any of them. One wrong move, and it’s game over!', - homeImage: `${CDN_URL}/pages/landing-v4/home-minesweeper.png`, + title: 'X AI AGENTS', + description: 'Fully on-chain. Fully autonomous.', + homeImage: `/landing-v7/home-eternal-1.png`, + link: { - url: '', + url: ETERNAL_URL, target: '_blank', }, - tags: ['Bitcoin Arcade'], }, ], }; @@ -473,116 +495,115 @@ export const BOB_SECTION = { ], }; -// export const PARTNER_SECTION = { - -// tag: 'Partners. ', -// title: 'Work with the best tech.', -// item: [ -// { -// title: 'BitZK', -// description: -// 'ZK rollups on Bitcoin for virtually any decentralized applications.', -// homeImage: `${CDN_URL}/pages/landing-v4/home-bitzk.png`, -// link: { -// url: '/module/bitzk', -// target: '', -// }, -// }, -// { -// title: 'BitOP', -// description: -// 'Optimistic rollups on Bitcoin for virtually any decentralized applications.', -// homeImage: `${CDN_URL}/pages/landing-v4/home-bitop.png`, -// link: { -// url: '/module/bitop', -// target: '', -// }, -// }, -// { -// title: 'Celestia', -// description: 'A high-throughput DA verifiable with a light node.', -// homeImage: `${CDN_URL}/pages/landing-v4/home-celestia.png`, -// link: { -// url: '/module/bitcoin-celestia', -// target: '', -// }, -// }, -// { -// title: 'Eigen DA', -// description: -// 'A scalable DA solution specialized in serving Ethereum rollups that leverage EigenLayer.', -// homeImage: `${CDN_URL}/pages/landing-v4/home-eigen.png`, -// link: { -// url: '/module/bitcoin-eigen', -// target: '', -// }, -// }, -// { -// title: 'Avail', -// description: 'Low-cost and expandable blobspace', -// homeImage: `${CDN_URL}/pages/landing-v4/home-avail.png`, -// link: { -// url: '/module/bitcoin-avail', -// target: '', -// }, -// }, -// { -// title: 'Near DA', -// description: 'An efficient and robust data availability layer', -// homeImage: `${CDN_URL}/pages/landing-v4/home-near.png`, -// link: { -// url: '/module/bitcoin-near', -// target: '', -// }, -// }, -// { -// title: 'Polygon', -// description: 'The most cost-effective storage solution', -// homeImage: `${CDN_URL}/pages/landing-v4/home-polygon.png`, -// link: { -// url: '/module/bitcoin-polygon', -// target: '', -// }, -// }, -// { -// title: 'Filecoin', -// description: -// 'The largest decentralized data storage marketplace, protocol, & cryptocurrency', -// homeImage: `${CDN_URL}/pages/landing-v4/home-filecoin.png`, -// link: { -// url: '/module/bitcoin-filecoin', -// target: '', -// }, -// }, -// { -// title: 'Ordinals', -// description: 'Roll up to Bitcoin as Ordinal Inscriptions', -// homeImage: `${CDN_URL}/pages/landing-v4/home-ordinals.png`, -// link: { -// url: '/module-detail', -// target: '', -// }, -// }, -// { -// title: 'Bitcoin Taproot', -// description: 'Embed proofs in Taproot transactions', -// homeImage: `${CDN_URL}/pages/landing-v4/home-taproot.png`, -// link: { -// url: '/module-detail', -// target: '', -// }, -// }, -// { -// title: 'Bitcoin Stamps', -// description: `Record data directly on Bitcoin's UTXO, ensuring data permanence and immutability`, -// homeImage: `${CDN_URL}/pages/landing-v4/home-stamps.png`, -// link: { -// url: '/module-detail', -// target: '', -// }, -// }, -// ], -// }; +export const PARTNER_SECTION = { + tag: 'Partners. ', + title: 'Work with the best tech.', + item: [ + { + title: 'BitZK', + description: + 'ZK rollups on Bitcoin for virtually any decentralized applications.', + homeImage: `${CDN_URL}/pages/landing-v4/home-bitzk.png`, + link: { + url: '/module/bitzk', + target: '', + }, + }, + { + title: 'BitOP', + description: + 'Optimistic rollups on Bitcoin for virtually any decentralized applications.', + homeImage: `${CDN_URL}/pages/landing-v4/home-bitop.png`, + link: { + url: '/module/bitop', + target: '', + }, + }, + { + title: 'Celestia', + description: 'A high-throughput DA verifiable with a light node.', + homeImage: `${CDN_URL}/pages/landing-v4/home-celestia.png`, + link: { + url: '/module/bitcoin-celestia', + target: '', + }, + }, + { + title: 'Eigen DA', + description: + 'A scalable DA solution specialized in serving Ethereum rollups that leverage EigenLayer.', + homeImage: `${CDN_URL}/pages/landing-v4/home-eigen.png`, + link: { + url: '/module/bitcoin-eigen', + target: '', + }, + }, + { + title: 'Avail', + description: 'Low-cost and expandable blobspace', + homeImage: `${CDN_URL}/pages/landing-v4/home-avail.png`, + link: { + url: '/module/bitcoin-avail', + target: '', + }, + }, + { + title: 'Near DA', + description: 'An efficient and robust data availability layer', + homeImage: `${CDN_URL}/pages/landing-v4/home-near.png`, + link: { + url: '/module/bitcoin-near', + target: '', + }, + }, + { + title: 'Polygon', + description: 'The most cost-effective storage solution', + homeImage: `${CDN_URL}/pages/landing-v4/home-polygon.png`, + link: { + url: '/module/bitcoin-polygon', + target: '', + }, + }, + { + title: 'Filecoin', + description: + 'The largest decentralized data storage marketplace, protocol, & cryptocurrency', + homeImage: `${CDN_URL}/pages/landing-v4/home-filecoin.png`, + link: { + url: '/module/bitcoin-filecoin', + target: '', + }, + }, + { + title: 'Ordinals', + description: 'Roll up to Bitcoin as Ordinal Inscriptions', + homeImage: `${CDN_URL}/pages/landing-v4/home-ordinals.png`, + link: { + url: '/module-detail', + target: '', + }, + }, + { + title: 'Bitcoin Taproot', + description: 'Embed proofs in Taproot transactions', + homeImage: `${CDN_URL}/pages/landing-v4/home-taproot.png`, + link: { + url: '/module-detail', + target: '', + }, + }, + { + title: 'Bitcoin Stamps', + description: `Record data directly on Bitcoin's UTXO, ensuring data permanence and immutability`, + homeImage: `${CDN_URL}/pages/landing-v4/home-stamps.png`, + link: { + url: '/module-detail', + target: '', + }, + }, + ], +}; export const OPENSOURCE_SECTION = { id: 'opensource', 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..40fe1972c 100644 --- a/src/layouts/HeaderV4/menuConfig.ts +++ b/src/layouts/HeaderV4/menuConfig.ts @@ -89,24 +89,18 @@ export const NAV_ITEMS: Array = [ // }, ]; export const NAV_ITEMS_LEFT: Array = [ - { - label: 'BVM Studio', - href: '/studio', - isNewWindow: false, - isHide: false, - }, - { - label: 'Research', - href: '/research', - 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,43 +162,55 @@ export const NAV_ITEMS_LEFT: Array = [ // isNewWindow: false, // isHide: false, // }, - // { - // label: 'Ecosystem', - // href: '/explore', - // isNewWindow: false, - // isHide: false, - // }, { - label: '$BVM', - href: '/bvm', + label: 'Experience Bitcoin', + href: '/', isNewWindow: false, isHide: false, }, -]; - -export const NAV_ITEMS_RIGHT: Array = [ { - label: '$BVM', - href: '/bvm', + label: 'Build on Bitcoin', + href: '/build-bitcoin', isNewWindow: false, isHide: false, }, // { - // label: 'Research', - // href: '/research', + // label: '$BVM', + // href: '/bvm', // isNewWindow: false, // isHide: false, // }, +]; + +export const NAV_ITEMS_RIGHT: Array = [ { - label: 'Team', - href: '/team', + label: 'Research', + href: '/research', isNewWindow: false, isHide: false, }, { - label: 'Contact us', - MenuItemEl: ContactUs, + label: 'Docs', + href: 'https://docs.bvm.network/bvm', + isNewWindow: true, + isHide: false, + }, + { + label: '$BVM', + href: '/bvm', + isNewWindow: false, + isHide: false, }, + // { + // label: 'Team', + // href: '/team', + // isNewWindow: false, + // isHide: false, + // }, + // { + // label: 'Contact us', + // MenuItemEl: ContactUs, + // }, ]; export const NAV_ITEMS_MOBILE: Array = [ { diff --git a/src/modules/ExploreModule/components/AppCard/AppCard.module.scss b/src/modules/ExploreModule/components/AppCard/AppCard.module.scss index d861103fc..9463a799a 100644 --- a/src/modules/ExploreModule/components/AppCard/AppCard.module.scss +++ b/src/modules/ExploreModule/components/AppCard/AppCard.module.scss @@ -17,9 +17,12 @@ transition: all .4s ease-in-out; - .thumbnail { - // transform: scale(1.1); - } + + } + + &.firstItem { + grid-column: span 2; + width: 100%; } @@ -79,9 +82,9 @@ } .thumbnail { - display: flex; - align-self: flex-end; - transition: all 0.3s ease; + // display: flex; + // align-self: flex-end; + // transition: all 0.3s ease; // img { // width: 100%; diff --git a/src/modules/ExploreModule/components/AppCard/index.tsx b/src/modules/ExploreModule/components/AppCard/index.tsx index 2658accd7..06cc27455 100644 --- a/src/modules/ExploreModule/components/AppCard/index.tsx +++ b/src/modules/ExploreModule/components/AppCard/index.tsx @@ -2,12 +2,46 @@ import React from 'react'; import Link from 'next/link'; import cn from 'classnames'; import s from './AppCard.module.scss'; +import { Box } from '@chakra-ui/react'; type Props = { item: any; + idx: number; }; -const AppCard = ({ item }: Props) => { +const AppCard = ({ item, idx }: Props) => { + if (idx === 0) { + return ( + + + {item.title} + + +

{item.title}

+

{item.description}

+
+ {item.tags.map((tag: string, index: number) => { + if (!tag) return null; + return ( +

+ {index === 0 && } + {tag} +

+ ); + })} +
+ + + ); + } + 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..dd213cfcf 100644 --- a/src/modules/ExploreModule/data.ts +++ b/src/modules/ExploreModule/data.ts @@ -43,7 +43,7 @@ export const DAPPS_DATA: Omit[] = [ // }, { id: 'eternalAI', - image: '/explore/dapp-eai3.png', + image: `${CDN_URL}/pages/explore/eternal-banner.png`, title: 'Eternal AI', bgColor: 'linear-gradient(0deg, #0071BC 0%, #1797D5 40%, #61FFF7 100%)', description: 'Decentralized AI in your pocket.', @@ -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..7935fb0d2 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 */} {DAPPS_DATA.map((item, idx) => { // return ; - return ; + return ; })}
- +
{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); } diff --git a/src/modules/landing/Componets/Hero/Content/index.tsx b/src/modules/landing/Componets/Hero/Content/index.tsx index 427bc42ec..59c0106f3 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(); @@ -18,41 +18,38 @@ export default function HeroContent() {
-

Bitcoin L2 as a Service

+

Bitcoin, upgraded.
- Powerful infrastructure and tools to build and scale your own - Bitcoin L2 with ease. + Join us on the mission to reinvent Bitcoin beyond just a currency + — the next internet with AI, Gaming, DeFi, Social, and more on + Bitcoin.
- + {/*
Questions?{' '}
+ */} + +
- - - +
- + {/* */}
diff --git a/src/modules/landing/Componets/Intro/index.tsx b/src/modules/landing/Componets/Intro/index.tsx index e605e55a7..204d388b5 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,13 @@ 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. + Ethereum’s heyday is over. Bitcoin is the new home for + decentralized applications. Enter a whole new world where finance, + gaming, social networks, and AI coverge on the biggest blockchain.

@@ -159,45 +179,45 @@ export default function Intro() {
- + - +
@@ -209,8 +229,20 @@ export default function Intro() {
- fame-arrows - fame-arrows + fame-arrows + fame-arrows
- drag + drag
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..aedce1689 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 <>{true ? : }; } diff --git a/src/modules/landing/index.tsx b/src/modules/landing/index.tsx index 38c137947..1a863bc19 100644 --- a/src/modules/landing/index.tsx +++ b/src/modules/landing/index.tsx @@ -1,3 +1,4 @@ +'use client'; import useWindowSize from '@/hooks/useWindowSize'; import Chain from './Componets/Chain'; import ScaleableMobile from './Componets/ScaleableMobile'; diff --git a/src/modules/landingV4/components/SectionBlock/Item/App/index.tsx b/src/modules/landingV4/components/SectionBlock/Item/App/index.tsx index 892e4f0ef..4a37a126b 100644 --- a/src/modules/landingV4/components/SectionBlock/Item/App/index.tsx +++ b/src/modules/landingV4/components/SectionBlock/Item/App/index.tsx @@ -1,80 +1,80 @@ -import React from 'react'; -import { BlockCardItem } from '../..'; -import s from './SectionItemApp.module.scss'; -import Link from 'next/link'; -import cn from 'classnames'; +// import React from 'react'; +// import { BlockCardItem } from '../..'; +// import s from './SectionItemApp.module.scss'; +// import Link from 'next/link'; +// import cn from 'classnames'; -type Props = { - item: BlockCardItem; -}; +// type Props = { +// item: BlockCardItem; +// }; -const SectionItemApp = ({ item }: Props) => { - const appDescription = { - runedex: 'Buy Bitcoin permisionlessly.', - heartbeats: 'Insights into Bitcoin rollups.', - nakaFuture: 'Trade futures on Bitcoin.', - alpha: 'The first social app on Bitcoin. ', - eternalAI: 'The truly open AI for everyone.', - neuron: 'Power decentralized networks & earn', - capsule: 'Preserve the Internet’s history.', - }; +// const SectionItemApp = ({ item }: Props) => { +// const appDescription = { +// runedex: 'Buy Bitcoin permisionlessly.', +// heartbeats: 'Insights into Bitcoin rollups.', +// nakaFuture: 'Trade futures on Bitcoin.', +// alpha: 'The first social app on Bitcoin. ', +// eternalAI: 'The truly open AI for everyone.', +// neuron: 'Power decentralized networks & earn', +// capsule: 'Preserve the Internet’s history.', +// }; - const appThumbnail = { - runedex: '/landing-v4/home-runedex-2.png', - heartbeats: '/landing-v4/home-heartbeat-3.png', - nakaFuture: ' /landing-v4/home-naka-1.png', - alpha: '/landing-v4/home-alpha.png', - eternalAI: '/landing-v4/home-eai-2.png', - neuron: '/landing-v4/home-neuron.png', - capsule: '/landing-v4/home-capsule-1.png', - }; +// const appThumbnail = { +// runedex: '/landing-v4/home-runedex-2.png', +// heartbeats: '/landing-v4/home-heartbeat-3.png', +// nakaFuture: ' /landing-v4/home-naka-1.png', +// alpha: '/landing-v4/home-alpha.png', +// eternalAI: '/landing-v4/home-eai-2.png', +// neuron: '/landing-v4/home-neuron.png', +// capsule: '/landing-v4/home-capsule-1.png', +// }; - const appBgColor = { - runedex: - 'linear-gradient(227deg, #FFC32A -7.83%, #F5E000 23.69%, #53B900 67.99%, #BDF710 100%)', - heartbeats: - ' linear-gradient(227deg, #FF8D97 -7.83%, #FF6366 21.47%, #E40004 69.37%, #FFDEDE 118.41%)', - nakaFuture: - 'linear-gradient(227deg, #FD8DFF -7.83%, #FF63B7 21.47%, #E400CD 69.37%, #FADEFF 118.41%)', - alpha: - 'linear-gradient(227deg, #AE71FF -7.83%, #9456FF 23.69%, #6610E6 67.99%, #ED68FB 100%)', - eternalAI: 'linear-gradient(0deg, #0071BC 0%, #1797D5 40%, #49D0C9 100%)', - neuron: ' linear-gradient(0deg, #F15A24 0%, #F7931E 40%, #FBB03B 100%)', - capsule: - 'linear-gradient(227deg, #00D4BA -7.83%, #00D97E 21.47%, #47C445 69.37%, #339898 118.41%)', - }; +// const appBgColor = { +// runedex: +// 'linear-gradient(227deg, #FFC32A -7.83%, #F5E000 23.69%, #53B900 67.99%, #BDF710 100%)', +// heartbeats: +// ' linear-gradient(227deg, #FF8D97 -7.83%, #FF6366 21.47%, #E40004 69.37%, #FFDEDE 118.41%)', +// nakaFuture: +// 'linear-gradient(227deg, #FD8DFF -7.83%, #FF63B7 21.47%, #E400CD 69.37%, #FADEFF 118.41%)', +// alpha: +// 'linear-gradient(227deg, #AE71FF -7.83%, #9456FF 23.69%, #6610E6 67.99%, #ED68FB 100%)', +// eternalAI: 'linear-gradient(0deg, #0071BC 0%, #1797D5 40%, #49D0C9 100%)', +// neuron: ' linear-gradient(0deg, #F15A24 0%, #F7931E 40%, #FBB03B 100%)', +// capsule: +// 'linear-gradient(227deg, #00D4BA -7.83%, #00D97E 21.47%, #47C445 69.37%, #339898 118.41%)', +// }; - return ( - -
-

{item.title}

-

- {appDescription[item.id as keyof typeof appDescription]} -

-
- {item.tags.map((tag, index) => { - if (!tag) return null; - return

{tag}

; - })} -
-
-
- {item.title} -
- - ); -}; +// return ( +// +//
+//

{item.title}

+//

+// {appDescription[item.id as keyof typeof appDescription]} +//

+//
+// {item.tags.map((tag, index) => { +// if (!tag) return null; +// return

{tag}

; +// })} +//
+//
+//
+// {item.title} +//
+// +// ); +// }; -export default SectionItemApp; +// export default SectionItemApp; diff --git a/src/modules/landingV4/components/SectionBlock/Item/General/index.tsx b/src/modules/landingV4/components/SectionBlock/Item/General/index.tsx index e4a09c495..f5dd1d9f6 100644 --- a/src/modules/landingV4/components/SectionBlock/Item/General/index.tsx +++ b/src/modules/landingV4/components/SectionBlock/Item/General/index.tsx @@ -1,132 +1,132 @@ -import Link from 'next/link'; -import React from 'react'; -import cn from 'classnames'; -import s from './SectionItemGeneral.module.scss'; -import { BlockCardItem, BlockChainItem } from '../..'; -import { Box, Flex, Image as ChakraImage } from '@chakra-ui/react'; -import Image from 'next/image'; -import { LOGOS } from '@/modules/landingV3/Componets/Section_7/constant'; -import { TChainCard } from '@/modules/ExploreModule/components/ChainCard'; +// import Link from 'next/link'; +// import React from 'react'; +// import cn from 'classnames'; +// import s from './SectionItemGeneral.module.scss'; +// import { BlockCardItem, BlockChainItem } from '../..'; +// import { Box, Flex, Image as ChakraImage } from '@chakra-ui/react'; +// import Image from 'next/image'; +// import { LOGOS } from '@/modules/landingV3/Componets/Section_7/constant'; +// import { TChainCard } from '@/modules/ExploreModule/components/ChainCard'; -type Props = { - id: string; - item: BlockCardItem | BlockChainItem; -}; +// type Props = { +// id: string; +// item: BlockCardItem | BlockChainItem; +// }; -const SectionItemGeneral = ({ id, item }: Props) => { - const getLogo = (logo: string) => { - const tmp = LOGOS.filter((itemLogo) => { - return itemLogo.id === logo; - }); - return tmp.length ? tmp[0].blackLogo : ''; - }; +// const SectionItemGeneral = ({ id, item }: Props) => { +// const getLogo = (logo: string) => { +// const tmp = LOGOS.filter((itemLogo) => { +// return itemLogo.id === logo; +// }); +// return tmp.length ? tmp[0].blackLogo : ''; +// }; - const renderNewsLogo = (logo: string, logoUrl?: string) => { - if (logoUrl) { - return ( -
- -
- ); - } +// const renderNewsLogo = (logo: string, logoUrl?: string) => { +// if (logoUrl) { +// return ( +//
+// +//
+// ); +// } - if (getLogo(logo)) { - return ( -
- -
- ); - } +// if (getLogo(logo)) { +// return ( +//
+// +//
+// ); +// } - return ; - }; +// return ; +// }; - return ( - - {id === 'news' && - renderNewsLogo( - (item as BlockCardItem).logo, - (item as BlockCardItem).logoUrl, - )} - - {item.title} - - -
- {!!item.tags && - item.tags.map((tag, index) => { - if (!tag) return null; +// return ( +// +// {id === 'news' && +// renderNewsLogo( +// (item as BlockCardItem).logo, +// (item as BlockCardItem).logoUrl, +// )} +// +// {item.title} +// +// +//
+// {!!item.tags && +// item.tags.map((tag, index) => { +// if (!tag) return null; - return ( -
- {index === 0 && (id === 'apps' || id === 'games') && ( - - )} - {tag} -
- ); - })} -
- -

{item.title}

- {!!(item as BlockChainItem).social && - (item as BlockChainItem).social.map((social, index) => ( - - {'icon'} - - ))} - -

- - - ); -}; +// return ( +//
+// {index === 0 && (id === 'apps' || id === 'games') && ( +// +// )} +// {tag} +//
+// ); +// })} +//
+// +//

{item.title}

+// {!!(item as BlockChainItem).social && +// (item as BlockChainItem).social.map((social, index) => ( +// +// {'icon'} +// +// ))} +// +//

+// +// +// ); +// }; -export default SectionItemGeneral; +// export default SectionItemGeneral; diff --git a/src/modules/landingV4/components/SectionBlock/SectionBlock.module.scss b/src/modules/landingV4/components/SectionBlock/SectionBlock.module.scss index fc9648838..a169dccca 100644 --- a/src/modules/landingV4/components/SectionBlock/SectionBlock.module.scss +++ b/src/modules/landingV4/components/SectionBlock/SectionBlock.module.scss @@ -1,112 +1,112 @@ -.wrapper { - padding-top: 80px; - // padding-bottom: 80px; - background-color: #fff; - position: relative; +// .wrapper { +// padding-top: 80px; +// // padding-bottom: 80px; +// background-color: #fff; +// position: relative; - @include is-mobile { - padding-top: 60px; - padding-bottom: 60px; - } +// @include is-mobile { +// padding-top: 60px; +// padding-bottom: 60px; +// } - .heading { - color: #000; - font-family: "JetBrains Mono"; - font-size: 32px; - font-style: normal; - font-weight: 500; - line-height: 110%; - /* 35.2px */ - margin-bottom: 40px; +// .heading { +// color: #000; +// font-family: "JetBrains Mono"; +// font-size: 32px; +// font-style: normal; +// font-weight: 500; +// line-height: 110%; +// /* 35.2px */ +// margin-bottom: 40px; - .tag { - color: #FA4E0E; - } +// .tag { +// color: #FA4E0E; +// } - @include is-mobile { - font-size: 28px; - margin-bottom: 40px; - } - } +// @include is-mobile { +// font-size: 28px; +// margin-bottom: 40px; +// } +// } - .scroll_wrapper { - scroll-snap-type: x mandatory; - scroll-padding: 50%; - overflow-x: auto; - overflow-y: hidden; +// .scroll_wrapper { +// scroll-snap-type: x mandatory; +// scroll-padding: 50%; +// overflow-x: auto; +// overflow-y: hidden; - & { - -ms-overflow-style: none; - scrollbar-width: none; - } +// & { +// -ms-overflow-style: none; +// scrollbar-width: none; +// } - &::-webkit-scrollbar { - display: none; - } +// &::-webkit-scrollbar { +// display: none; +// } - .control_btn { - border-radius: 50%; - position: absolute; - cursor: pointer; - height: 48px; - width: 48px; - display: grid; - place-items: center; - background: rgba(207, 207, 207, 0.80); +// .control_btn { +// border-radius: 50%; +// position: absolute; +// cursor: pointer; +// height: 48px; +// width: 48px; +// display: grid; +// place-items: center; +// background: rgba(207, 207, 207, 0.80); - &:hover { - opacity: 0.75; - } - } +// &:hover { +// opacity: 0.75; +// } +// } - .prev_btn { - transform: rotate(180deg); - left: 20px; - } +// .prev_btn { +// transform: rotate(180deg); +// left: 20px; +// } - .next_btn { - right: 20px; +// .next_btn { +// right: 20px; - } +// } - @include not-pc { +// @include not-pc { - .prev_btn, - .next_btn { - display: none; - } +// .prev_btn, +// .next_btn { +// display: none; +// } - } +// } - } +// } - .items_wrapper { - display: flex; - align-items: flex-start; - gap: 24px; +// .items_wrapper { +// display: flex; +// align-items: flex-start; +// gap: 24px; - width: fit-content; - margin-right: 30px; +// width: fit-content; +// margin-right: 30px; - &.items_wrapper__apps { +// &.items_wrapper__apps { - gap: 44px; +// gap: 44px; - @include is-mobile { - gap: 24px; +// @include is-mobile { +// gap: 24px; - } +// } - } +// } - } -} \ No newline at end of file +// } +// } \ No newline at end of file diff --git a/src/modules/landingV4/components/SectionBlock/index.tsx b/src/modules/landingV4/components/SectionBlock/index.tsx index 002ad51f0..73dd9917a 100644 --- a/src/modules/landingV4/components/SectionBlock/index.tsx +++ b/src/modules/landingV4/components/SectionBlock/index.tsx @@ -1,182 +1,189 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { SectionBlockProps } from '../../interface'; -import s from './SectionBlock.module.scss'; -import { Box, Flex, Image as ChakraImage } from '@chakra-ui/react'; -import Image from 'next/image'; -import { TDappCardProps } from '@/modules/ExploreModule/components/DappCard'; -import { useRouter } from 'next/navigation'; -import { TChainCard } from '@/modules/ExploreModule/components/ChainCard'; -import { LOGOS } from '@/modules/landingV3/Componets/Section_7/constant'; -import IcChain from '@/public/landing-v4/ic-chain.svg'; -import cn from 'classnames'; -import Link from 'next/link'; -import SectionItemGeneral from './Item/General'; -import SectionItemApp from './Item/App'; - -export type BlockCardItem = Omit & { - logo: string; - logoUrl?: string; - id?: string; -}; - -export type BlockChainItem = Omit & { - id?: string; -}; - -const SectionBlock = (props: any) => { - const { tag, title, item } = props; - - const scrollWrapperRef = React.useRef(null); - const itemsWrapperRef = React.useRef(null); - - const [showControls, setShowControls] = useState({ - prev: false, - next: true, - }); - - const handleChangeDirection = useCallback( - (direction: 'next' | 'prev') => { - if (!scrollWrapperRef.current || !itemsWrapperRef.current) return; - - if (direction === 'prev') { - scrollWrapperRef.current.scrollTo({ - left: scrollWrapperRef.current.scrollLeft - 800, - behavior: 'smooth', - }); - - // check first item of itemsWrapperRef is fully visible - } - - if (direction === 'next') { - scrollWrapperRef.current.scrollTo({ - left: scrollWrapperRef.current.scrollLeft + 800, - behavior: 'smooth', - }); - } - }, - [ - scrollWrapperRef.current, - itemsWrapperRef.current, - showControls.prev, - showControls.next, - ], - ); - - useEffect(() => { - if (scrollWrapperRef.current && itemsWrapperRef.current) { - const scrollWrapper = scrollWrapperRef.current; - const itemsWrapper = itemsWrapperRef.current; - - if (itemsWrapper.offsetWidth > scrollWrapper.offsetWidth) { - setShowControls({ - prev: false, - next: true, - }); - } else { - setShowControls({ - prev: false, - next: false, - }); - } - } - }, [scrollWrapperRef.current, itemsWrapperRef.current]); - - useEffect(() => { - // check `${props.id}-0` is fully visible - const observer = new IntersectionObserver( - ([entry]) => { - setShowControls((prev) => ({ - ...prev, - prev: !entry.isIntersecting, - })); - }, - { root: scrollWrapperRef.current, threshold: 1 }, - ); - - if (itemsWrapperRef.current) { - observer.observe(itemsWrapperRef.current.children[0]); - } - }, []); - - useEffect(() => { - // check `${props.id}-${item.length - 1}` is fully visible - const observer = new IntersectionObserver( - ([entry]) => { - setShowControls((prev) => ({ - ...prev, - next: !entry.isIntersecting, - })); - }, - { root: scrollWrapperRef.current, threshold: 1 }, - ); - - if (itemsWrapperRef.current) { - observer.observe( - itemsWrapperRef.current.children[item.length - 1] as HTMLElement, - ); - } - }, []); - - return ( - -
-

- {tag} - {title} -

-
-
- {item.map((item: BlockCardItem | BlockChainItem, index: number) => { - if (props.id === 'apps') { - return ( - - ); - } - - return ( - - ); - })} -
- - {!!showControls.prev && ( - handleChangeDirection('prev')} - > - - - )} - - {!!showControls.next && ( - handleChangeDirection('next')} - > - - - )} -
-
- - ); -}; - -export default SectionBlock; +// import React, { useCallback, useEffect, useMemo, useState } from 'react'; +// import { SectionBlockProps } from '../../interface'; +// import s from './SectionBlock.module.scss'; +// import { Box, Flex, Image as ChakraImage } from '@chakra-ui/react'; +// import Image from 'next/image'; +// import { TDappCardProps } from '@/modules/ExploreModule/components/DappCard'; +// import { useRouter } from 'next/navigation'; +// import { TChainCard } from '@/modules/ExploreModule/components/ChainCard'; +// import { LOGOS } from '@/modules/landingV3/Componets/Section_7/constant'; +// import IcChain from '@/public/landing-v4/ic-chain.svg'; +// import cn from 'classnames'; +// import Link from 'next/link'; +// import SectionItemGeneral from './Item/General'; +// import SectionItemApp from './Item/App'; + +// export type BlockCardItem = Omit & { +// logo: string; +// logoUrl?: string; +// id?: string; +// }; + +// export type BlockChainItem = Omit & { +// id?: string; +// }; + +// const SectionBlock = (props: any) => { +// const { tag, title, item } = props; + +// const scrollWrapperRef = React.useRef(null); +// const itemsWrapperRef = React.useRef(null); + +// const [showControls, setShowControls] = useState({ +// prev: false, +// next: true, +// }); + +// const handleChangeDirection = useCallback( +// (direction: 'next' | 'prev') => { +// if (!scrollWrapperRef.current || !itemsWrapperRef.current) return; + +// if (direction === 'prev') { +// scrollWrapperRef.current.scrollTo({ +// left: scrollWrapperRef.current.scrollLeft - 800, +// behavior: 'smooth', +// }); + +// // check first item of itemsWrapperRef is fully visible +// } + +// if (direction === 'next') { +// scrollWrapperRef.current.scrollTo({ +// left: scrollWrapperRef.current.scrollLeft + 800, +// behavior: 'smooth', +// }); +// } +// }, +// [ +// scrollWrapperRef.current, +// itemsWrapperRef.current, +// showControls.prev, +// showControls.next, +// ], +// ); + +// useEffect(() => { +// if (scrollWrapperRef.current && itemsWrapperRef.current) { +// const scrollWrapper = scrollWrapperRef.current; +// const itemsWrapper = itemsWrapperRef.current; + +// if (itemsWrapper.offsetWidth > scrollWrapper.offsetWidth) { +// setShowControls({ +// prev: false, +// next: true, +// }); +// } else { +// setShowControls({ +// prev: false, +// next: false, +// }); +// } +// } +// }, [scrollWrapperRef.current, itemsWrapperRef.current]); + +// useEffect(() => { +// // check `${props.id}-0` is fully visible +// const observer = new IntersectionObserver( +// ([entry]) => { +// setShowControls((prev) => ({ +// ...prev, +// prev: !entry.isIntersecting, +// })); +// }, +// { root: scrollWrapperRef.current, threshold: 1 }, +// ); + +// if (itemsWrapperRef.current) { +// observer.observe(itemsWrapperRef.current.children[0]); +// } +// }, []); + +// useEffect(() => { +// // check `${props.id}-${item.length - 1}` is fully visible +// const observer = new IntersectionObserver( +// ([entry]) => { +// setShowControls((prev) => ({ +// ...prev, +// next: !entry.isIntersecting, +// })); +// }, +// { root: scrollWrapperRef.current, threshold: 1 }, +// ); + +// if (itemsWrapperRef.current) { +// observer.observe( +// itemsWrapperRef.current.children[item.length - 1] as HTMLElement, +// ); +// } +// }, []); + +// return ( +// +//
+//

+// {tag} +// {title} +//

+//
+//
+// {item.map((item: BlockCardItem | BlockChainItem, index: number) => { +// if (props.id === 'games') { +// ; +// } + +// // if (props.id === 'apps') { +// return ( +// +// ); +// // } + +// // return ( +// // +// // ); +// })} +//
+ +// {!!showControls.prev && ( +// handleChangeDirection('prev')} +// > +// +// +// )} + +// {!!showControls.next && ( +// handleChangeDirection('next')} +// > +// +// +// )} +//
+//
+// +// ); +// }; + +// export default SectionBlock; diff --git a/src/modules/landingV4/index.tsx b/src/modules/landingV4/index.tsx index 82de41646..51f9bba79 100644 --- a/src/modules/landingV4/index.tsx +++ b/src/modules/landingV4/index.tsx @@ -1,38 +1,38 @@ -import React from 'react'; -import s from './styles.module.scss'; -import HeroVideo from './components/HeroVideo'; -import { - APPS_SECTION, - BOB_SECTION, - ROLLUPS_SECTION, - RESEARCH_SECTION, - OPENSOURCE_SECTION, - NEWS_SECTION, - GAME_SECTION, -} from './content'; -import SectionBlock from './components/SectionBlock'; +// import React from 'react'; +// import s from './styles.module.scss'; +// import HeroVideo from './components/HeroVideo'; +// import { +// APPS_SECTION, +// BOB_SECTION, +// ROLLUPS_SECTION, +// RESEARCH_SECTION, +// OPENSOURCE_SECTION, +// NEWS_SECTION, +// GAME_SECTION, +// } from './content'; +// import SectionBlock from './components/SectionBlock'; -type Props = {}; +// type Props = {}; -const LandingV4Module = (props: Props) => { - return ( -
- - +// const LandingV4Module = (props: Props) => { +// return ( +//
+// +// - - +// +// - - {/* */} - +// +// {/* */} +// - - +// +// - {/* */} -
- ); -}; +// {/* */} +//
+// ); +// }; -export default LandingV4Module; +// export default LandingV4Module; diff --git a/src/modules/landingV5/components/BuildItem/index.tsx b/src/modules/landingV5/components/BuildItem/index.tsx index ba9e57232..45e22785b 100644 --- a/src/modules/landingV5/components/BuildItem/index.tsx +++ b/src/modules/landingV5/components/BuildItem/index.tsx @@ -31,7 +31,7 @@ const BuildItem = ({ return ( - - + */} { - if (!!item.popular) { - return ( - -
Most popular
- -
-

{item.title}

- - {item.description} - -
- {item.tags.map((tag, index) => { - if (!tag) return null; - return

{tag}

; - })} -
-
-
- {item.title} -
- - - ); - } +const SectionItemApp = ({ item, sectionId, idx }: Props) => { + // if (!!item.popular) { + // return ( + // + //
Most popular
+ // + //
+ //

{item.title}

+ // + // {item.description} + // + //
+ // {item.tags.map((tag, index) => { + // if (!tag) return null; + // return

{tag}

; + // })} + //
+ //
+ //
+ // {item.title} + //
+ // + // + // ); + // } + // const gameUnavailable = useMemo(() => { + // return sectionId === 'games' && idx !== 0; + // }, [sectionId, idx]); return ( { { ['pointer-none']: !item.link?.url, }, - { [s.popular]: item.popular }, + { [s.eternal]: item.link?.url === ETERNAL_URL }, )} href={item.link?.url} target="_blank" - style={{ - backgroundImage: item.bgColor, - }} + // style={{ + // backgroundImage: item.bgColor, + // }} >

{item.title}

{item.description} -
- {item.tags.map((tag, index) => { - if (!tag) return null; - return

{tag}

; - })} -
+ {!!item.tags && ( +
+ {item.tags.map((tag, index) => { + if (!tag) return null; + return

{tag}

; + })} +
+ )}
-
+
{item.title}
diff --git a/src/modules/landingV5/components/SectionBlock/Item/General/SectionItemGeneral.module.scss b/src/modules/landingV5/components/SectionBlock/Item/General/SectionItemGeneral.module.scss index b50f64a77..8c2890bb7 100644 --- a/src/modules/landingV5/components/SectionBlock/Item/General/SectionItemGeneral.module.scss +++ b/src/modules/landingV5/components/SectionBlock/Item/General/SectionItemGeneral.module.scss @@ -42,12 +42,12 @@ line-height: 140%; /* 25.2px */ letter-spacing: 0.9px; - color: #fff; + color: #000; } .date { - color: #FFF; + color: #000; text-align: right; font-family: "JetBrains Mono"; font-size: 14px; @@ -71,7 +71,7 @@ letter-spacing: 0.8px; opacity: 0.7; white-space: pre-line; - color: #FFF; + color: #000; opacity: 0.7; @@ -107,7 +107,7 @@ .social_link { border-radius: 100px; - background: #FFF; + background: #000; box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.08); width: 28px; height: 28px; diff --git a/src/modules/landingV5/components/SectionBlock/SectionBlock.module.scss b/src/modules/landingV5/components/SectionBlock/SectionBlock.module.scss index 4b27ef74c..5eaa41243 100644 --- a/src/modules/landingV5/components/SectionBlock/SectionBlock.module.scss +++ b/src/modules/landingV5/components/SectionBlock/SectionBlock.module.scss @@ -38,18 +38,14 @@ $text-max-width: 85ch; p { // max-width: 37ch; - color: #FFF; - - - span { - color: #FFF; - } + color: #2E2E2E; + letter-spacing: -1.8px; } } .desc { - color: rgba($color: #fff, $alpha: 0.6); + color: rgba($color: #000, $alpha: 0.6); font-family: "SF Pro Display"; font-size: 18px; font-style: normal; @@ -83,6 +79,7 @@ $text-max-width: 85ch; } .scroll_wrapper { + // margin-left: -8px; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding: 50%; @@ -119,7 +116,7 @@ $text-max-width: 85ch; } .next_btn { - right: 140px; + right: 60px; } @@ -141,6 +138,8 @@ $text-max-width: 85ch; display: flex; align-items: flex-start; gap: 24px; + margin-top: 2px; + margin-left: 4px; width: fit-content; user-select: none; @@ -160,6 +159,19 @@ $text-max-width: 85ch; } + &.items_wrapper__games { + display: grid; + grid-template-rows: 225px 225px; + grid-template-columns: repeat(4, 1fr); + gap: 32px; + + >a:first-of-type { + grid-row: span 2; + + + } + } + a:last-child { margin-right: 150px; } diff --git a/src/modules/landingV5/components/SectionBlock/index.tsx b/src/modules/landingV5/components/SectionBlock/index.tsx index 5ee1e5e3b..398fd63d8 100644 --- a/src/modules/landingV5/components/SectionBlock/index.tsx +++ b/src/modules/landingV5/components/SectionBlock/index.tsx @@ -61,8 +61,9 @@ const SectionBlock = (props: any) => { ); const isCardLayout = useMemo(() => { + return true; // check if props.id is within the list of card layout - return ['apps', 'step-1', 'step-2'].includes(props.id); + return !['games'].includes(props.id); }, [props.id]); useEffect(() => { @@ -125,7 +126,11 @@ const SectionBlock = (props: any) => { return (
- + {!!tag && {tag}} {!!title && {title}} @@ -134,12 +139,20 @@ const SectionBlock = (props: any) => {
+ + {item.map((item: BlockCardItem | BlockChainItem, index: number) => { if (isCardLayout) { return ( @@ -147,6 +160,7 @@ const SectionBlock = (props: any) => { key={`${props.id}-${index}`} item={item as BlockCardItem} sectionId={props.id} + idx={index} /> ); } diff --git a/src/modules/landingV5/index.tsx b/src/modules/landingV5/index.tsx index 42f213265..a4de70f82 100644 --- a/src/modules/landingV5/index.tsx +++ b/src/modules/landingV5/index.tsx @@ -1,21 +1,17 @@ -import { Box, Flex, Text, Image as ChakraImage } from '@chakra-ui/react'; -import BuildItem from './components/BuildItem'; -import s from './styles.module.scss'; -import Link from 'next/link'; +import { Box } from '@chakra-ui/react'; import cn from 'classnames'; +import BuildItem from './components/BuildItem'; import SectionBlock from './components/SectionBlock'; +import s from './styles.module.scss'; -import Image from 'next/image'; import { STEP_1_SECTION, - NEWS_SECTION, - APPS_SECTION, - OPENSOURCE_SECTION, - RESEARCH_SECTION, - TECH_STACKS, STEP_2_SECTION, + GAME_SECTION, + TOOLS_SECTION, + ART_SECTION, + SOCIALFI_SECTION, } from '@/constants/home-content'; -import { motion } from 'framer-motion'; import { useContactUs } from '@/Providers/ContactUsProvider/hook'; type Props = {}; @@ -27,20 +23,25 @@ const LandingV5 = (props: Props) => {
- Development infrastructure for Bitcoin + Experience Bitcoin like never before.
-
+ {/*
Bitcoin Virtual Machine (BVM) is Bitcoin’s most comprehensive development platform, offering builders over 30 products and services for building on Bitcoin. From scaling technologies @@ -50,58 +51,36 @@ const LandingV5 = (props: Props) => { possible on Bitcoin. {/*

Let’s build. */} -
+ {/*
*/} - -
-
- -
- -

Need development help?

- - Talk to a BVM dev -
- -
- - -
- -
- -
- -

Experience Bitcoin apps

- - Visit Bitcoin App Store -
- -
- - - + + Ethereum’s heyday is over. Powered by BVM, Bitcoin is the new + home for decentralized applications. Enter a whole new world + where finance, gaming, social networks, and AI coverge on the + biggest blockchain.{' '} - + - + + + + + + + - + + + + + + + + {/*
Launch your own{' '} @@ -208,7 +187,7 @@ const LandingV5 = (props: Props) => {
- + */}
diff --git a/src/modules/landingV5/styles.module.scss b/src/modules/landingV5/styles.module.scss index 41f1cc0f6..a80723321 100644 --- a/src/modules/landingV5/styles.module.scss +++ b/src/modules/landingV5/styles.module.scss @@ -1,5 +1,5 @@ .landing { - background: #000; + background: #fff; overflow: hidden; padding-bottom: 150px; @@ -8,33 +8,32 @@ align-items: flex-start; justify-content: space-between; gap: 10%; - margin-bottom: 80px; - margin-left: 0; + margin-bottom: 120px; + // margin-left: 0; .introduction_title { - color: #FFF; + color: #000; font-family: "JetBrains Mono"; font-size: 48px; font-style: normal; font-weight: 700; line-height: normal; - max-width: 28ch; + letter-spacing: -1.8px; + max-width: 13ch; } .introduction_desc { - color: rgba(255, 255, 255, 0.60); + color: rgba(0, 0, 0, 0.60); font-family: "SF Pro Display"; - font-size: 20px; + font-size: 18px; font-style: normal; - font-weight: 500; - line-height: 180%; - max-width: 80ch; - - /* 36px */ - letter-spacing: 0.6px; - margin-top: 24px; + font-weight: 400; + line-height: 140%; + /* 33.6px */ + letter-spacing: 0.72px; + max-width: 50ch; } .introduction_links { @@ -45,7 +44,7 @@ display: flex; align-items: center; gap: 12px; - color: #FFF; + color: #000; font-family: "SF Pro Display"; font-size: 16px; font-style: normal; @@ -155,7 +154,7 @@ .tag { - color: #fff; + color: #000; font-family: "JetBrains Mono"; font-size: 36px; font-style: normal; @@ -166,7 +165,7 @@ } .title { - color: #FFF; + color: #000; font-family: "JetBrains Mono"; font-size: 36px; font-style: normal; @@ -178,7 +177,7 @@ .desc { - color: rgba($color: #fff, $alpha: 0.6); + color: rgba($color: #000, $alpha: 0.6); font-family: "SF Pro Display"; font-size: 18px; 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 ? : } - + {/* */} {/* */} - + {/* */} ); diff --git a/src/styles/_global.scss b/src/styles/_global.scss index 17470996e..d31a04a0d 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -215,3 +215,10 @@ input[type='number'] { .react-flow__edge-custom { pointer-events: none !important; } + +.gradient_text { + background: linear-gradient(90deg, #FBAF3A 0%, #FF6265 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} \ No newline at end of file