diff --git a/src/modules/landing/Componets/Chain/ItemChain/SectionBottom/index.tsx b/src/modules/landing/Componets/Chain/ItemChain/SectionBottom/index.tsx index 5d90b96c7..825339b01 100644 --- a/src/modules/landing/Componets/Chain/ItemChain/SectionBottom/index.tsx +++ b/src/modules/landing/Componets/Chain/ItemChain/SectionBottom/index.tsx @@ -8,6 +8,7 @@ import Lines from '@/interactive/Lines'; type TSectionBottom = { title: string; + desc: string; link?: string; data?: { left: string; @@ -46,6 +47,9 @@ export default function SectionBottom({ > {data.title} + +

{data.desc}

+

{!data?.link && !isLaunch && 'Coming soon'} diff --git a/src/modules/landing/Componets/Chain/ItemChain/SectionBottom/styles.module.scss b/src/modules/landing/Componets/Chain/ItemChain/SectionBottom/styles.module.scss index e70f6f0ff..32a430701 100644 --- a/src/modules/landing/Componets/Chain/ItemChain/SectionBottom/styles.module.scss +++ b/src/modules/landing/Componets/Chain/ItemChain/SectionBottom/styles.module.scss @@ -5,6 +5,7 @@ gap: 20px; min-height: 142px; justify-content: center; + height: 100%; &_title { //display: flex; @@ -20,11 +21,13 @@ &_isLaunch { text-align: center; padding: 0; + @include is-pc { padding: 0 40px; padding-bottom: 24px; } } + &_isYourChain { text-align: left; padding: 0; @@ -43,8 +46,9 @@ &_sub { line-height: 25.2px; - font-size: 18px; + font-size: 14px; color: rgba(255, 255, 255, 0.7); + margin-top: 4px; @include is-tablet { font-size: 16px; @@ -56,14 +60,17 @@ } } } + &_yourChain_desc { color: #000000b2; font-weight: 400; font-size: 14px; } + &__isYourChain { gap: 12px; } + &_listInfo { display: flex; flex-direction: column; @@ -84,6 +91,7 @@ line-height: 1.4; color: rgba(255, 255, 255, 0.7); white-space: nowrap; + @include is-tablet { font-size: 12px; } @@ -136,13 +144,16 @@ &__7D8AA7 { background: #7d8aa7; } + &__FFFFFF { background: #fff; } + &__B74D4D { background: #b74d4d; } + &__A459A6 { background: #a459a6; } -} +} \ No newline at end of file diff --git a/src/modules/landing/Componets/Chain/ItemChain/index.tsx b/src/modules/landing/Componets/Chain/ItemChain/index.tsx index f0d929720..9b77b137f 100644 --- a/src/modules/landing/Componets/Chain/ItemChain/index.tsx +++ b/src/modules/landing/Componets/Chain/ItemChain/index.tsx @@ -11,6 +11,7 @@ type TItemChain = { title: string; stud: number; link?: string; + desc: string; data?: | { left: string; diff --git a/src/modules/landing/Componets/Chain/ItemChain/styles.module.scss b/src/modules/landing/Componets/Chain/ItemChain/styles.module.scss index fb65414d4..fdf5d8d8a 100644 --- a/src/modules/landing/Componets/Chain/ItemChain/styles.module.scss +++ b/src/modules/landing/Componets/Chain/ItemChain/styles.module.scss @@ -2,6 +2,9 @@ flex: 1; flex-shrink: 0; cursor: pointer; + max-width: 450px; + min-width: 300px; + flex: 1; &_inner { display: flex; @@ -9,6 +12,7 @@ padding: 5px 6px; background-color: #fff; height: 100%; + align-self: stretch; } @include is-mobile { @@ -44,13 +48,16 @@ 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; } @@ -58,4 +65,4 @@ @include is-mobile { grid-column-start: 1; } -} +} \ No newline at end of file diff --git a/src/modules/landing/Componets/Chain/index.tsx b/src/modules/landing/Componets/Chain/index.tsx index 791d553d1..684111a79 100644 --- a/src/modules/landing/Componets/Chain/index.tsx +++ b/src/modules/landing/Componets/Chain/index.tsx @@ -22,21 +22,58 @@ import ContentSection from '../ContentSection'; import Lines from '@/interactive/Lines'; 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 Ordinals', + // 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_1, - title: 'Alpha Chain', - subTitle: '', + img: chain_4, + title: 'Eternal AI', + desc: 'A Bitcoin Layer 2 powering unstoppable AI.', stud: 1, - link: 'https://alpha.wtf', + link: 'https://eternalai.org/', data: [ { left: 'Currency', - right: 'BVM', + right: 'EAI', icon: '/landing/svg/lego_icon_flat.svg', }, { left: 'Use Case', - right: 'SocialFi', + right: 'Crypto x AI', icon: '/landing/svg/lego_icon_rect.svg', }, { @@ -51,17 +88,17 @@ const DATA_CHAINS = [ }, { left: 'Data Availability', - right: 'Polygon', + right: 'NearDA', icon: '/landing/svg/lego_icon_cube.svg', }, ], - - bgTop: '35CCA6', - bgBottom: '007659', + bgTop: 'FF9999', + bgBottom: 'B74D4D', }, { img: chain_2, title: 'Naka Chain', + desc: 'A Bitcoin Layer 2 optimized for DeFi with extremely low gas fees.', stud: 2, link: 'https://nakachain.xyz/', data: [ @@ -97,12 +134,13 @@ const DATA_CHAINS = [ { img: chain_3, title: 'Arcade Chain', + desc: 'A Bitcoin Layer 2 tailored for gaming with 2-second block times.', stud: 3, link: 'https://bitcoinarcade.xyz/', data: [ { left: 'Currency', - right: 'GAME', + right: 'BVM', icon: '/landing/svg/lego_icon_flat.svg', }, { @@ -112,7 +150,7 @@ const DATA_CHAINS = [ }, { left: 'Rollups', - right: 'Optimistic, Sovereign', + right: 'ZK, Sovereign', icon: '/landing/svg/lego_icon_rollup.svg', }, { @@ -122,48 +160,14 @@ const DATA_CHAINS = [ }, { left: 'Data Availability', - right: 'EigenDA', + right: 'Polygon', icon: '/landing/svg/lego_icon_cube.svg', }, ], bgTop: '4DBDE0', bgBottom: '0074BB', }, - { - img: chain_4, - title: 'Eternal AI', - stud: 1, - link: 'https://eternalai.org/', - data: [ - { - left: 'Currency', - right: 'AI', - icon: '/landing/svg/lego_icon_flat.svg', - }, - { - left: 'Use Case', - right: 'Crypto x AI', - icon: '/landing/svg/lego_icon_rect.svg', - }, - { - left: 'Rollups', - right: 'Optimistic, Sovereign', - icon: '/landing/svg/lego_icon_rollup.svg', - }, - { - left: 'Data Validity', - right: 'Bitcoin Ordinals', - icon: '/landing/svg/lego_icon_cube.svg', - }, - { - left: 'Data Availability', - right: 'NearDA', - icon: '/landing/svg/lego_icon_cube.svg', - }, - ], - bgTop: 'FF9999', - bgBottom: 'B74D4D', - }, + // { // img: chain_5, // title: 'Swamps', diff --git a/src/modules/landing/Componets/Chain/styles.module.scss b/src/modules/landing/Componets/Chain/styles.module.scss index b9014e869..9a57f1fe6 100644 --- a/src/modules/landing/Componets/Chain/styles.module.scss +++ b/src/modules/landing/Componets/Chain/styles.module.scss @@ -1,29 +1,30 @@ .listChains { - display: grid; - gap: 36px; + display: flex; + gap: 2%; overflow: hidden; justify-content: center; + flex-wrap: wrap; - @include is-mobile { - width: 100%; - padding: 0 20px; - gap: 8px; - // grid-template-columns: repeat(1, 1fr); - } + // @include is-mobile { + // width: 100%; + // padding: 0 20px; + // gap: 8px; + // // grid-template-columns: repeat(1, 1fr); + // } - @include is-tablet { - gap: 0; - grid-template-columns: repeat(1, 1fr); - } + // @include is-tablet { + // gap: 0; + // grid-template-columns: repeat(1, 1fr); + // } - @include is-pc { - gap: 10px; - grid-template-columns: repeat(2, 1fr); - } + // @include is-pc { + // gap: 10px; + // grid-template-columns: repeat(2, 1fr); + // } - @include is-pc-wide { - grid-template-columns: repeat(4, 1fr); - } + // @include is-pc-wide { + // grid-template-columns: repeat(4, 1fr); + // } } .chain {