-
@@ -46,7 +42,7 @@ function LanguageSelection () {
>
- 
+ 
{seasonNameAlbum || 'Number One Fan'}
diff --git a/src/sections/Alpha/AlphaCards.jsx b/src/sections/Alpha/AlphaCards.jsx
index 0152576e..04114196 100644
--- a/src/sections/Alpha/AlphaCards.jsx
+++ b/src/sections/Alpha/AlphaCards.jsx
@@ -11,13 +11,6 @@ import { fetchDataAlpha } from '../../services/alpha'
import { checkApproved } from '../../services/dai'
import CustomImage from '../../components/customImage'
-import vida0 from './images/vida0.png'
-import vida1 from './images/vida1.png'
-import vida2 from './images/vida2.png'
-import vida3 from './images/vida3.png'
-import vida4 from './images/vida4.png'
-import vida5 from './images/vida5.png'
-
import {useTranslation} from 'next-i18next'
import { useWeb3Context, walletAddress } from '../../hooks'
import { useLayoutContext } from '../../hooks'
@@ -25,12 +18,12 @@ import { useLayoutContext } from '../../hooks'
import { checkInputAddress } from '../../utils/addresses'
const vidas = [
- vida0.src,
- vida1.src,
- vida2.src,
- vida3.src,
- vida4.src,
- vida5.src
+ '/images/alpha/vida0.png',
+ '/images/alpha/vida1.png',
+ '/images/alpha/vida2.png',
+ '/images/alpha/vida3.png',
+ '/images/alpha/vida4.png',
+ '/images/alpha/vida5.png'
]
let swiper //eslint-disable-line
@@ -46,7 +39,7 @@ const AlphaCards = ({ alphaMidButton }) => {
const [cards, setCards] = useState([])
const [noCardsError, setNoCardsError] = useState('')
const [cardIndex, setCardIndex] = useState(0)
- const [vida, setVida] = useState(vida0.src)
+ const [vida, setVida] = useState('/images/alpha/vida0.png')
const [seasonNames, setSeasonNames] = useState(null)
const [seasonName, setSeasonName] = useState('')
const [packPrices, setPackPrices] = useState(null)
@@ -539,7 +532,7 @@ const AlphaCards = ({ alphaMidButton }) => {
{seasonNames && seasonNames.length > 0 &&
<>
+
{seasonNameAlbum || 'Number One Fan'}
diff --git a/src/sections/Alpha/AlphaCards.jsx b/src/sections/Alpha/AlphaCards.jsx
index 0152576e..04114196 100644
--- a/src/sections/Alpha/AlphaCards.jsx
+++ b/src/sections/Alpha/AlphaCards.jsx
@@ -11,13 +11,6 @@ import { fetchDataAlpha } from '../../services/alpha'
import { checkApproved } from '../../services/dai'
import CustomImage from '../../components/customImage'
-import vida0 from './images/vida0.png'
-import vida1 from './images/vida1.png'
-import vida2 from './images/vida2.png'
-import vida3 from './images/vida3.png'
-import vida4 from './images/vida4.png'
-import vida5 from './images/vida5.png'
-
import {useTranslation} from 'next-i18next'
import { useWeb3Context, walletAddress } from '../../hooks'
import { useLayoutContext } from '../../hooks'
@@ -25,12 +18,12 @@ import { useLayoutContext } from '../../hooks'
import { checkInputAddress } from '../../utils/addresses'
const vidas = [
- vida0.src,
- vida1.src,
- vida2.src,
- vida3.src,
- vida4.src,
- vida5.src
+ '/images/alpha/vida0.png',
+ '/images/alpha/vida1.png',
+ '/images/alpha/vida2.png',
+ '/images/alpha/vida3.png',
+ '/images/alpha/vida4.png',
+ '/images/alpha/vida5.png'
]
let swiper //eslint-disable-line
@@ -46,7 +39,7 @@ const AlphaCards = ({ alphaMidButton }) => {
const [cards, setCards] = useState([])
const [noCardsError, setNoCardsError] = useState('')
const [cardIndex, setCardIndex] = useState(0)
- const [vida, setVida] = useState(vida0.src)
+ const [vida, setVida] = useState('/images/alpha/vida0.png')
const [seasonNames, setSeasonNames] = useState(null)
const [seasonName, setSeasonName] = useState('')
const [packPrices, setPackPrices] = useState(null)
@@ -539,7 +532,7 @@ const AlphaCards = ({ alphaMidButton }) => {
{seasonNames && seasonNames.length > 0 &&
<>
-
+
{seasonName}
- }
+ )
+ }
+
+ return (
+ <>
+
+
{seasonName}
{packIsOpen && {
openPackage={openPackage}
/>}
- {!mobile && inventory &&
- setInventory(false)} className='gammaAlbums'
+ {!mobile &&
+
setInventory(!inventory)}
+ className= {inventory ? 'gammaAlbums' : 'gammaAlbums2'}
/>
}
- {!mobile && !inventory &&
-
setInventory(false)} className='gammaAlbums2' />
- }
-
{gammaCardsContract && inventory && !cardInfo &&
diff --git a/src/sections/Hero/Friends.json b/src/sections/Hero/Friends.json
index 827c5e7e..454a5cf1 100644
--- a/src/sections/Hero/Friends.json
+++ b/src/sections/Hero/Friends.json
@@ -2,41 +2,41 @@
{
"id": 1,
"caption": "Kenpa505",
- "icon": "/book/kenpa505.png"
+ "icon": "/images/book/kenpa505.png"
},
{
"id": 2,
"caption": "Criptomaniakos",
- "icon": "/book/criptomaniakos.png"
+ "icon": "/images/book/criptomaniakos.png"
},
{
"id": 3,
"caption": "Yo Gamer",
- "icon": "/book/yo_gamer.png"
+ "icon": "/images/book/yo_gamer.png"
},
{
"id": 4,
"caption": "Crypto Brothers",
- "icon": "/book/crypto_brothers.png"
+ "icon": "/images/book/crypto_brothers.png"
},
{
"id": 5,
"caption": "Dorrego",
- "icon": "/book/dorrego.png"
+ "icon": "/images/book/dorrego.png"
},
{
"id": 6,
"caption": "Nico NFT",
- "icon": "/book/niconft.png"
+ "icon": "/images/book/niconft.png"
},
{
"id": 7,
"caption": "Valiant",
- "icon": "/book/valiant.png"
+ "icon": "/images/book/valiant.png"
},
{
"id": 8,
"caption": "Aca Esta Javi",
- "icon": "/book/acaestajavi.png"
+ "icon": "/images/book/acaestajavi.png"
}
]
\ No newline at end of file
diff --git a/src/sections/Hero/Hero.jsx b/src/sections/Hero/Hero.jsx
index e6a68792..09ee5dd0 100644
--- a/src/sections/Hero/Hero.jsx
+++ b/src/sections/Hero/Hero.jsx
@@ -1,28 +1,15 @@
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import Image from 'next/image'
+import Link from 'next/link'
+import HTMLFlipBook from 'react-pageflip'
+
import { Swiper, SwiperSlide } from 'swiper/react'
+import { EffectCards, Autoplay, Pagination } from 'swiper'
import 'swiper/css'
import 'swiper/css/effect-cards'
-import { EffectCards, Autoplay, Pagination } from 'swiper'
import 'swiper/css/bundle'
-import Link from 'next/link'
-import HTMLFlipBook from 'react-pageflip'
-import Noficon from './images/logo-nof.gif'
-import Bookflip from './images/book_flip.gif'
-import Bookmenu from './images/book-menu-1.png'
-import Gold from './images/oro.png'
-import Plate from './images/plata.png'
-import Bronce from './images/bronce.png'
-import N from './images/n.png'
-import O from './images/o.png'
-import F from './images/f.png'
-import Season from './images/temporada.png'
-import Albumfirst from './images/album3.png'
-import Albumsecond from './images/album6.png'
-import Albumthird from './images/album12.png'
-import Tech from './images/p4tech.png'
import Profiles from './Profiles.json'
import Friends from './Friends.json'
@@ -40,7 +27,7 @@ const Hero = React.forwardRef((_, book) => {
{
@@ -88,7 +75,7 @@ const Hero = React.forwardRef((_, book) => {
@@ -103,7 +90,7 @@ const Hero = React.forwardRef((_, book) => {
{t ? t('our goal') : ''}
@@ -256,7 +243,7 @@ const Hero = React.forwardRef((_, book) => {
diff --git a/src/sections/Hero/Profiles.json b/src/sections/Hero/Profiles.json
index 3bd9c763..0fe15f02 100644
--- a/src/sections/Hero/Profiles.json
+++ b/src/sections/Hero/Profiles.json
@@ -3,54 +3,54 @@
"id": 1,
"caption": "V. Barry",
"position": "CEO",
- "icon": "/book/Barry.png"
+ "icon": "/images/book/Barry.png"
},
{
"id": 2,
"caption": "M. H. Pefaur",
"position": "CTO",
- "icon": "/book/Pefaur.png"
+ "icon": "/images/book/Pefaur.png"
},
{
"id": 3,
"caption": "J. Padra",
"position": "Mathematician",
- "icon": "/book/Padra.png"
+ "icon": "/images/book/Padra.png"
},
{
"id": 4,
"caption": "T. Freire Knight",
"position": "Blockchain Dev.",
- "icon": "/book/Freire.png"
+ "icon": "/images/book/Freire.png"
},
{
"id": 5,
"caption": "G. Fernandez",
"position": "CM & PRM",
- "icon": "/book/Fernandez.png"
+ "icon": "/images/book/Fernandez.png"
},
{
"id": 6,
"caption": "G. Gonzalez",
"position": "CM",
- "icon": "/book/Gonzalez.png"
+ "icon": "/images/book/Gonzalez.png"
},
{
"id": 7,
"caption": "Mila Craz",
"position": "Concept Artist",
- "icon": "/book/Craz.png"
+ "icon": "/images/book/Craz.png"
},
{
"id": 8,
"caption": "J. Pérez",
"position": "Web3 Developer",
- "icon": "/book/Perez.png"
+ "icon": "/images/book/Perez.png"
},
{
"id": 9,
"caption": "N. Huircapan",
"position": "Web3 Developer",
- "icon": "/book/Huircapan.png"
+ "icon": "/images/book/Huircapan.png"
}
]
\ No newline at end of file
diff --git a/src/components/Footer/_footer.scss b/src/styles/_footer.scss
similarity index 88%
rename from src/components/Footer/_footer.scss
rename to src/styles/_footer.scss
index 2959453b..7636591b 100644
--- a/src/components/Footer/_footer.scss
+++ b/src/styles/_footer.scss
@@ -2,7 +2,7 @@
display: flex;
justify-content: space-around;
align-items: center;
- background-image: url(./images/botonera.png);
+ background-image: url(/images/footer/botonera.png);
background-repeat: no-repeat;
background-size: cover;
height: 12.5vh;
@@ -19,7 +19,7 @@
&__insert {
width: 200px;
height: 80px;
- background-image: url(./images/insert-coin.png);
+ background-image: url(/images/footer/insert-coin.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
@@ -64,7 +64,7 @@
&__bluebtn {
width: 120px;
height: 90px;
- background-image: url(./images/blue.png);
+ background-image: url(/images/footer/blue.png);
cursor: pointer;
position: relative;
transition:
@@ -74,7 +74,7 @@
background-repeat: no-repeat;
background-position: center;
&:hover {
- background-image: url(./images/blue-hover.png);
+ background-image: url(/images/footer/blue-hover.png);
position: relative;
background-size: 100% 100%;
background-repeat: no-repeat;
@@ -96,7 +96,7 @@
&__redbtn {
width: 120px;
height: 90px;
- background-image: url(./images/red.png);
+ background-image: url(/images/footer/red.png);
cursor: pointer;
position: relative;
transition:
@@ -106,7 +106,7 @@
background-repeat: no-repeat;
background-position: center;
&:hover {
- background-image: url(./images/red-hover.png);
+ background-image: url(/images/footer/red-hover.png);
position: relative;
background-size: 100% 100%;
background-repeat: no-repeat;
@@ -128,7 +128,7 @@
&__greenbtn {
width: 120px;
height: 90px;
- background-image: url(./images/green.png);
+ background-image: url(/images/footer/green.png);
cursor: pointer;
position: relative;
transition:
@@ -138,7 +138,7 @@
background-repeat: no-repeat;
background-position: center;
&:hover {
- background-image: url(./images/green-hover.png);
+ background-image: url(/images/footer/green-hover.png);
position: relative;
background-size: 100% 100%;
background-repeat: no-repeat;
@@ -160,7 +160,7 @@
&__yellowbtn {
width: 120px;
height: 90px;
- background-image: url(./images/yellow.png);
+ background-image: url(/images/footer/yellow.png);
cursor: pointer;
position: relative;
transition:
@@ -170,7 +170,7 @@
background-repeat: no-repeat;
background-position: center;
&:hover {
- background-image: url(./images/yellow-hover.png);
+ background-image: url(/images/footer/yellow-hover.png);
position: relative;
background-size: 100% 100%;
background-repeat: no-repeat;
@@ -201,7 +201,7 @@
justify-content: center;
width: 218px;
height: 236px;
- background-image: url(./images/handle-green.png);
+ background-image: url(/images/footer/handle-green.png);
cursor: pointer;
position: relative;
transition:
@@ -213,7 +213,7 @@
margin-bottom: 200px;
margin-right: 20px;
&:hover {
- background-image: url(./images/handle-green-hover.png);
+ background-image: url(/images/footer/handle-green-hover.png);
position: relative;
width: 218px;
height: 236px;
@@ -246,7 +246,7 @@
justify-content: center;
width: 218px;
height: 236px;
- background-image: url(./images/handle-red.png);
+ background-image: url(/images/footer/handle-red.png);
cursor: pointer;
position: relative;
transition:
@@ -258,7 +258,7 @@
margin-bottom: 200px;
margin-left: 20px;
&:hover {
- background-image: url(./images/handle-red-hover.png);
+ background-image: url(/images/footer/handle-red-hover.png);
position: relative;
width: 218px;
height: 236px;
diff --git a/src/sections/Hero/_hero.scss b/src/styles/_hero.scss
similarity index 96%
rename from src/sections/Hero/_hero.scss
rename to src/styles/_hero.scss
index 04c0baf4..0c16fbb0 100644
--- a/src/sections/Hero/_hero.scss
+++ b/src/styles/_hero.scss
@@ -15,8 +15,8 @@ $groundHeight: 40px;
.alpha,
.gamma_main {
height: 87.5vh;
- background-image: url('./images/NofCaballero.gif'), url('./images/front1.png'),
- url('./images/Country0.png'), url('./images/background0.png');
+ background-image: url('/images/hero/NofCaballero.gif'), url('/images/hero/front1.png'),
+ url('/images/hero/Country0.png'), url('/images/hero/background0.png');
background-color: #000;
background-repeat: no-repeat, repeat-x, repeat-x, repeat-x;
background-position:
@@ -96,7 +96,7 @@ $groundHeight: 40px;
display: flex;
justify-content: center;
align-items: center;
- background-image: url('./images/book.png');
+ background-image: url('/images/hero/book.png');
position: absolute;
background-size: 100% 100%;
top: 45%;
@@ -107,7 +107,7 @@ $groundHeight: 40px;
margin-top: 50px;
width: 316px !important;
height: 412px !important;
- background-image: url('./images/libreta.png');
+ background-image: url('/images/hero/libreta.png');
}
@include tablet {
@@ -161,10 +161,10 @@ $groundHeight: 40px;
left: 0% !important;
}
// left: 0% !important;
- background-image: url('./images/page-1.png');
+ background-image: url('/images/hero/page-1.png');
background-size: 100% 100%;
@include mobile {
- background-image: url('./images/page-2.png');
+ background-image: url('/images/hero/page-2.png');
width: 200px;
padding-top: 10%;
width: 95% !important;
@@ -561,10 +561,10 @@ $groundHeight: 40px;
right: 0% !important;
height: 100% !important;
width: 50% !important;
- background-image: url('./images/page-2.png');
+ background-image: url('/images/hero/page-2.png');
background-size: 100% 100%;
@include mobile {
- background-image: url('./images/page-2.png');
+ background-image: url('/images/hero/page-2.png');
width: 200px;
padding-top: 10%;
margin-left: 3%;
@@ -626,43 +626,43 @@ $groundHeight: 40px;
}
.swiper-slide:nth-child(1n) {
- background-image: url(./images/nof-0.png);
+ background-image: url(/images/hero/nof-0.png);
}
.swiper-slide:nth-child(2n) {
- background-image: url(./images/nof-1.png);
+ background-image: url(/images/hero/nof-1.png);
}
.swiper-slide:nth-child(3n) {
- background-image: url(./images/nof-2.png);
+ background-image: url(/images/hero/nof-2.png);
}
.swiper-slide:nth-child(4n) {
- background-image: url(./images/nof-3.png);
+ background-image: url(/images/hero/nof-3.png);
}
.swiper-slide:nth-child(5n) {
- background-image: url(./images/nof-4.png);
+ background-image: url(/images/hero/nof-4.png);
}
.swiper-slide:nth-child(6n) {
- background-image: url(./images/nof-5.png);
+ background-image: url(/images/hero/nof-5.png);
}
.swiper-slide:nth-child(7n) {
- background-image: url(./images/nof-6.png);
+ background-image: url(/images/hero/nof-6.png);
}
.swiper-slide:nth-child(8n) {
- background-image: url(./images/nof-7.png);
+ background-image: url(/images/hero/nof-7.png);
}
.swiper-slide:nth-child(9n) {
- background-image: url(./images/nof-8.png);
+ background-image: url(/images/hero/nof-8.png);
}
.swiper-slide:nth-child(10n) {
- background-image: url(./images/nof-9.png);
+ background-image: url(/images/hero/nof-9.png);
}
.pagination {
display: flex;
diff --git a/src/components/Navbar/_navbar.scss b/src/styles/_navbar.scss
similarity index 98%
rename from src/components/Navbar/_navbar.scss
rename to src/styles/_navbar.scss
index 156ae274..ca72ccd0 100644
--- a/src/components/Navbar/_navbar.scss
+++ b/src/styles/_navbar.scss
@@ -339,19 +339,18 @@ header {
gap: 0;
}
&__audio {
- width: auto;
- height: 78px;
+ // width: auto;
+ // height: 78px;
cursor: pointer;
background-size: 100% 100%;
img {
position: relative;
- width: 100%;
- height: 100%;
}
&:hover {
transform: scale(1.1);
transition: 0.2s;
}
+ /*
@include mobile {
width: 80px;
height: 60px;
@@ -363,7 +362,7 @@ header {
@include large-desktop {
width: 60px;
height: 50px;
- }
+ }*/
}
}
}
diff --git a/src/styles/alpha.scss b/src/styles/alpha.scss
index 0cf6233d..0d862075 100644
--- a/src/styles/alpha.scss
+++ b/src/styles/alpha.scss
@@ -91,7 +91,7 @@
}
.alpha_rules_text_content {
- background-image: url('/rules.png');
+ background-image: url('/images/common/rules.png');
background-size: cover;
background-repeat: no-repeat;
height: 780px;
diff --git a/src/styles/gamma.scss b/src/styles/gamma.scss
index f10fedb4..ee791193 100644
--- a/src/styles/gamma.scss
+++ b/src/styles/gamma.scss
@@ -6,7 +6,7 @@
width: 18%;
height: 40%;
background-color: black;
- background: url('/gamma/SobreGamma.png');
+ background: url('/images/gamma/SobreGamma.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
@@ -23,7 +23,7 @@
}
.gamma_rules_text_content {
- background-image: url('/rules.png');
+ background-image: url('/images/common/rules.png');
background-size: cover;
background-repeat: no-repeat;
height: 780px;
@@ -69,7 +69,7 @@
width: 17%;
height: 35%;
background-color: black;
- background: url('/gamma/SobreGamma.png');
+ background: url('/images/gamma/SobreGamma.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
@@ -174,30 +174,30 @@
}
}
-.gammaAlbums {
+.gammaAlbumsCommon {
+ cursor: pointer;
position: absolute;
bottom: 40%;
left: 7%;
width: auto;
- height: 25%;
- background-size: 100% 100%;
- background-repeat: no-repeat;
+ aspect-ratio: 0.9;
min-height: 25%;
transition: all 0.2s ease-in;
+ background-repeat: no-repeat;
&:hover {
transform: scale(1.05);
}
}
+
+.gammaAlbums {
+ @extend .gammaAlbumsCommon;
+ background: url('/images/gamma/albums.png');
+ background-size: 100% 100%;
+}
.gammaAlbums2 {
- position: absolute;
- bottom: 40%;
- left: 7%;
- width: auto;
- aspect-ratio: 0.9;
- background: url('/gamma/AlbumGamma2.png');
+ @extend .gammaAlbumsCommon;
+ background: url('/images/gamma/AlbumGamma2.png');
background-size: 100% 100%;
- background-repeat: no-repeat;
- min-height: 30%;
}
.closebutton {
@@ -265,7 +265,7 @@
}
transition: 0.8s;
- background: url('/gamma/BordeGamma.png');
+ background: url('/images/gamma/BordeGamma.png');
background-size: cover !important;
background-repeat: no-repeat;
display: flex;
@@ -343,7 +343,7 @@
color: darkblue;
}
transition: 0.8s;
- background: url('/gamma/BordeGamma.png');
+ background: url('/images/gamma/BordeGamma.png');
background-size: cover !important;
background-repeat: no-repeat;
display: flex;
@@ -406,7 +406,7 @@
bottom: 10px;
z-index: -1;
background-color: black;
- background: url('/gamma/BordeGamma.png');
+ background: url('/images/gamma/BordeGamma.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
@@ -724,12 +724,12 @@
filter: drop-shadow(2px 4px 6px white);
}
&:nth-of-type(odd) {
- background: url('/gamma/BordeGamma.png');
+ background: url('/images/gamma/BordeGamma.png');
background-size: cover !important;
background-repeat: no-repeat;
}
&:nth-of-type(even) {
- background: url('/gamma/BordeGamma.png');
+ background: url('/images/gamma/BordeGamma.png');
background-size: cover !important;
background-repeat: no-repeat;
}
@@ -751,7 +751,7 @@
.cardnof {
width: 50%;
height: 10%;
- background: url('../components/Navbar/images/logo-1.png');
+ background: url('/images/navbar/logo-1.png');
background-size: 100% 100%;
background-position: center;
img {
@@ -769,7 +769,7 @@
.option {
padding: 10px 20px;
- background: url('/marco.png');
+ background: url('/images/common/marco.png');
background-size: 100% 100%;
background-position: center;
transition: all ease-in 0.1s;
@@ -787,7 +787,7 @@
}
.cardinfoimg {
width: 60%;
- background: url('/gamma/BordeGamma.png');
+ background: url('/images/gamma/BordeGamma.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 50%;
@@ -806,7 +806,7 @@
height: 200px;
}
.cardcontainer {
- background: url('/gamma/BordeGamma.png') !important;
+ background: url('/images/gamma/BordeGamma.png') !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d4c492a7..e58756df 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,9 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech&family=Share+Tech+Mono&display=swap');
@import './_media-queries.scss';
@import './variables';
-@import '../components/Navbar/_navbar.scss';
-@import '../components/Footer/_footer.scss';
-@import '../sections/Hero/_hero.scss';
+@import './_navbar.scss';
+@import './_footer.scss';
+@import './_hero.scss';
html,
body {
@@ -45,8 +45,6 @@ a {
box-sizing: border-box;
}
-// alpha starts
-
@media (max-width: 576px) {
html,
body {
-
-
-
-
-
-
-
{t ? t('sustainable game') : ''} @@ -123,7 +110,7 @@ const Hero = React.forwardRef((_, book) => {
-
{t ? t('gold') : ''}
@@ -131,7 +118,7 @@ const Hero = React.forwardRef((_, book) => {
-
{t ? t('silver') : ''}
@@ -139,7 +126,7 @@ const Hero = React.forwardRef((_, book) => {
-
{t ? t('bronze') : ''}
@@ -171,7 +158,7 @@ const Hero = React.forwardRef((_, book) => {
-
@@ -184,7 +171,7 @@ const Hero = React.forwardRef((_, book) => {
-
-
@@ -337,7 +324,7 @@ const Hero = React.forwardRef((_, book) => {
-