diff --git a/src/config/index.ts b/src/config/index.ts index 23c06fbb1..3fc9cdfbf 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -12,5 +12,6 @@ export const isDevelop: boolean = APP_ENV === 'develop'; export const isLocal: boolean = APP_ENV === 'local'; export const CDN_URL_ICONS: string = CDN_URL + '/nbc/icons/bvm-icons'; +export const CDN_APP_ICON_URL: string = CDN_URL + '/l2aas/icons'; export { MetadataConfig, ViewportConfig }; diff --git a/src/modules/home/Section_4/index.tsx b/src/modules/home/Section_4/index.tsx index 899f34587..6d0c81e51 100644 --- a/src/modules/home/Section_4/index.tsx +++ b/src/modules/home/Section_4/index.tsx @@ -3,9 +3,11 @@ import { Box, Center, + Divider, Flex, HStack, Image, + StackDivider, Text, VStack, } from '@chakra-ui/react'; @@ -37,46 +39,55 @@ const CONTENTS = [ const Section_4 = () => { const renderContent = (item: IContent, index: number) => { return ( - + + + {`0${index + 1}.`} + - {index + 1} + {item.title} - - - {item.title} - - - {item.description} - - - + + {item.description} + + ); }; return ( - + - - - - - A no-code tool for building a full-featured Bitcoin L2 blockchain. + + + A no-code tool + {' '} + for building a full-featured Bitcoin L2 blockchain. + } > {CONTENTS.map(renderContent)} + + + ); diff --git a/src/modules/home/Section_5/index.tsx b/src/modules/home/Section_5/index.tsx new file mode 100644 index 000000000..fdf00bb9e --- /dev/null +++ b/src/modules/home/Section_5/index.tsx @@ -0,0 +1,84 @@ +'use client'; + +import { + Box, + Flex, + HStack, + Image, + List, + ListIcon, + ListItem, + Text, + UnorderedList, +} from '@chakra-ui/react'; + +const News = { + content: [ + 'Earn sequencer fees', + 'Have dedicated throughput', + 'Offer low transaction fees to your users', + 'Complete control over gas fee, gas block limit, and withdrawal periods', + 'And more', + ], +}; + +const Section_5 = () => { + 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. + + + + + {News.content.map((item) => ( + + + {item || ''} + + ))} + + + + + + + ); +}; + +export default Section_5; diff --git a/src/modules/home/Section_6/index.tsx b/src/modules/home/Section_6/index.tsx new file mode 100644 index 000000000..f0a095dc5 --- /dev/null +++ b/src/modules/home/Section_6/index.tsx @@ -0,0 +1,119 @@ +'use client'; + +import { CDN_APP_ICON_URL } from '@/config'; +import { + Box, + Flex, + HStack, + Image, + ListItem, + Text, + UnorderedList, +} from '@chakra-ui/react'; + +interface IContent { + title: string; + icon: string; + description: string; +} + +const CONTENTS: Array = [ + { + title: 'Unlimited throughput', + description: + 'Hyperscale Bitcoin with an unlimited number of Bitcoin Virtual Machines as Bitcoin L2 blockchains.', + icon: 'reinvention_13.png', + }, + { + title: 'Infinite applications', + description: + 'Bitcoin Virtual Machines support Solidity smart contracts on Bitcoin, so you can quickly build all kinds of decentralized applications on Bitcoin.', + icon: 'reinvention_14.png', + }, + { + title: 'Fast & cheap', + description: + 'Bitcoin Virtual Machines implement rollups on Bitcoin. Rollups significantly reduce the block time and transaction fees.', + icon: 'reinvention_15.png', + }, +]; + +const Section_6 = () => { + const renderItem = (item: IContent) => { + return ( + + + + + {item.title} + + + + {item.description} + + + ); + }; + + return ( + + + + + Scalable infrastructure for Bitcoin + + + + If Ethereum is the world’s computer, Bitcoin is the world’s + supercomputer. With Bitcoin Virtual Machine, anyone can launch their + own Bitcoin L2 blockchain. + + + + {CONTENTS.map(renderItem)} + + + + + ); +}; + +export default Section_6; diff --git a/src/modules/home/Section_7/constant.ts b/src/modules/home/Section_7/constant.ts new file mode 100644 index 000000000..ad2df958e --- /dev/null +++ b/src/modules/home/Section_7/constant.ts @@ -0,0 +1,157 @@ +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; +} + +const BLOGS = [ + { + 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: '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: '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: '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: '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: '8', + title: `BITCOIN VIRTUAL MACHINE 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: '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', + }, + { + 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', + }, +]; + +export { BLOGS }; diff --git a/src/modules/home/Section_7/index.tsx b/src/modules/home/Section_7/index.tsx new file mode 100644 index 000000000..46c6ad214 --- /dev/null +++ b/src/modules/home/Section_7/index.tsx @@ -0,0 +1,134 @@ +'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 } from './constant'; + +const Section_7 = () => { + const numberSlide = isMobile ? 1 : isTablet ? 2 : 3; + const renderCard = (item: IBlog) => { + return ( + { + window.open(item.link, '_blank'); + }} + > + + + thumb image + + + + {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/home/Section_7/styles.module.scss b/src/modules/home/Section_7/styles.module.scss new file mode 100644 index 000000000..26917d178 --- /dev/null +++ b/src/modules/home/Section_7/styles.module.scss @@ -0,0 +1,81 @@ + +.sliderContainer { + max-width: 1600px; + display: flex; + flex:1; + flex-direction: column; + background-color: #000 !important; + + ::-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; +} \ No newline at end of file diff --git a/src/modules/home/index.tsx b/src/modules/home/index.tsx index b7b6d9d80..8b6da39e4 100644 --- a/src/modules/home/index.tsx +++ b/src/modules/home/index.tsx @@ -5,8 +5,10 @@ import s from './styles.module.scss'; import Section1 from './Section_1'; import Section2 from './Section_2'; import Section3 from './Section_3'; - import Section4 from './Section_4'; +import Section5 from './Section_5'; +import Section6 from './Section_6'; +import Section7 from './Section_7'; const HomeModule = () => { return ( @@ -14,7 +16,10 @@ const HomeModule = () => { {/* */} - {/* */} + + + + ); };