degmods.com/src/pages/home.tsx

277 lines
13 KiB
TypeScript
Raw Normal View History

2024-07-11 13:34:12 +00:00
import { BlogCard } from '../components/BlogCard'
2024-07-11 12:15:03 +00:00
import { GameCard } from '../components/GameCard'
2024-07-11 12:52:48 +00:00
import { ModCard } from '../components/ModCard'
2024-07-11 11:19:12 +00:00
import '../styles/cardLists.css'
import '../styles/SimpleSlider.css'
import '../styles/styles.css'
export const HomePage = () => {
return (
<div className='InnerBodyMain'>
<div className='SliderWrapper'>
<div className='ContainerMain'>
<div className='IBMSecMain'>
<div className='simple-slider IBMSMSlider'>
<div className='swiper-container IBMSMSliderContainer'>
<div className='swiper-wrapper IBMSMSliderContainerWrapper'>
<div className='swiper-slide IBMSMSliderContainerWrapperSlider'>
<div
className='IBMSMSCWSPic'
style={{
background:
'url(https://www.ggrecon.com/media/fd1bxcwr/tifa-s-cowboy-costume-change.png) center / cover no-repeat'
}}
></div>
<div className='IBMSMSCWSInfo'>
<h3 className='IBMSMSCWSInfoHeading'>Game Mod Title</h3>
<p className='IBMSMSCWSInfoText'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. className aptent
taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Curabitur sodales ligula in
libero.
<br />
</p>
<div className='IBMSMSliderContainerWrapperSliderAction'>
<a
className='btn btnMain IBMSMSliderContainerWrapperSliderActionbtn'
role='button'
href='mods-inner.html'
>
Check it out
</a>
</div>
</div>
</div>
<div className='swiper-slide IBMSMSliderContainerWrapperSlider'>
<div
className='IBMSMSCWSPic'
style={{
background:
'url(https://www.kakuchopurei.com/wp-content/uploads/2022/08/Marvels-Spider-Man-PC-Flag-Mod-1.jpg) center / cover no-repeat'
}}
></div>
<div className='IBMSMSCWSInfo'>
<h3 className='IBMSMSCWSInfoHeading'>Game Mod Title</h3>
<p className='IBMSMSCWSInfoText'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. className aptent
taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Curabitur sodales ligula in
libero.
<br />
</p>
<div className='IBMSMSliderContainerWrapperSliderAction'>
<a
className='btn btnMain IBMSMSliderContainerWrapperSliderActionbtn'
role='button'
href='mods-inner.html'
>
Check it out
</a>
</div>
</div>
</div>
<div className='swiper-slide IBMSMSliderContainerWrapperSlider'>
<div
className='IBMSMSCWSPic'
style={{
background:
'url("/assets/img/DEGMods%20Placeholder%20Img.png") center / cover no-repeat'
}}
></div>
<div className='IBMSMSCWSInfo'>
<h3 className='IBMSMSCWSInfoHeading'>Game Mod Title</h3>
<p className='IBMSMSCWSInfoText'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. className aptent
taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Curabitur sodales ligula in
libero.
<br />
</p>
<div className='IBMSMSliderContainerWrapperSliderAction'>
<a
className='btn btnMain IBMSMSliderContainerWrapperSliderActionbtn'
role='button'
href='mods-inner.html'
>
Check it out
</a>
</div>
</div>
</div>
</div>
<div className='swiper-pagination'></div>
<div className='swiper-button-prev'></div>
<div className='swiper-button-next'></div>
</div>
</div>
</div>
</div>
</div>
<div className='ContainerMain'>
<div className='IBMSecMainGroup IBMSecMainGroupAlt'>
<div className='IBMSecMain IBMSMListWrapper'>
<div className='IBMSMTitleMain'>
<h2 className='IBMSMTitleMainHeading'>Cool Games</h2>
</div>
<div className='IBMSMList IBMSMListFeaturedAlt'>
2024-07-11 12:15:03 +00:00
<GameCard backgroundLink='https://m.media-amazon.com/images/M/MV5BZTRiNTgxMjQtNDE3OS00YTg4LTg3NTItY2EyNGUzYjAzZGZmXkEyXkFqcGdeQXVyMTI0MzI0MzE4._V1_FMjpg_UX1000_.jpg' />
<GameCard backgroundLink='https://upload.wikimedia.org/wikipedia/en/0/0c/Witcher_3_cover_art.jpg' />
<GameCard backgroundLink='https://cdn2.steamgriddb.com/file/sgdb-cdn/grid/9153bb77795515274c2be61ccc59c952.jpg' />
<GameCard backgroundLink='https://static.trueachievements.com/boxart/Game_12493.jpg' />
<GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
2024-07-11 11:19:12 +00:00
</div>
<div className='IBMSMAction'>
<a
className='btn btnMain IBMSMActionBtn'
role='button'
href='blog.html'
>
View All
</a>
</div>
</div>
<div className='IBMSecMain IBMSMListWrapper'>
<div className='IBMSMTitleMain'>
<h2 className='IBMSMTitleMainHeading'>Awesome Mods</h2>
</div>
<div className='IBMSMList IBMSMListAlt'>
<ModCard
title='This is a mod title for an awesome game that will make everyone happy! The happiest!'
summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
backgroundLink='https://image.nostr.build/65a11a00bb99c11561735f861c51b498cf9dc07d02beff7303fe7f7ab52f3987.jpg'
2024-08-08 17:28:28 +00:00
handleClick={() => {
alert(
'these are dummy mods. So navigation on these are not implemented yet'
)
}}
/>
<ModCard
title='This is a mod title for an awesome game that will make everyone happy! The happiest!'
summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
backgroundLink='https://web.archive.org/web/20240215093752im_/https://staticdelivery.nexusmods.com/mods/6144/images/headers/13_1707966408.jpg'
2024-08-08 17:28:28 +00:00
handleClick={() => {
alert(
'these are dummy mods. So navigation on these are not implemented yet'
)
}}
/>
<ModCard
title='This is a mod title for an awesome game that will make everyone happy! The happiest!'
summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
backgroundLink='https://steamuserimages-a.akamaihd.net/ugc/2013708095892656347/39A93A2B1EB05E725214373849F8E37FCEB4C2EA/?imw=512&amp;imh=256&amp;ima=fit&amp;impolicy=Letterbox&amp;imcolor=%23000000&amp;letterbox=true'
2024-08-08 17:28:28 +00:00
handleClick={() => {
alert(
'these are dummy mods. So navigation on these are not implemented yet'
)
}}
/>
2024-07-11 11:19:12 +00:00
</div>
<div className='IBMSMAction'>
<a
className='btn btnMain IBMSMActionBtn'
role='button'
href='blog.html'
>
View All
</a>
</div>
</div>
<div className='IBMSecMain IBMSMListWrapper'>
<div className='IBMSMTitleMain'>
<h2 className='IBMSMTitleMainHeading'>Latest Mods</h2>
</div>
<div className='IBMSMList'>
<ModCard
title='This is a mod title for an awesome game that will make everyone happy! The happiest!'
summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
backgroundLink='https://image.nostr.build/65a11a00bb99c11561735f861c51b498cf9dc07d02beff7303fe7f7ab52f3987.jpg'
2024-08-08 17:28:28 +00:00
handleClick={() => {
alert(
'these are dummy mods. So navigation on these are not implemented yet'
)
}}
/>
<ModCard
title='This is a mod title for an awesome game that will make everyone happy! The happiest!'
summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
backgroundLink='https://web.archive.org/web/20240215093752im_/https://staticdelivery.nexusmods.com/mods/6144/images/headers/13_1707966408.jpg'
2024-08-08 17:28:28 +00:00
handleClick={() => {
alert(
'these are dummy mods. So navigation on these are not implemented yet'
)
}}
/>
<ModCard
title='This is a mod title for an awesome game that will make everyone happy! The happiest!'
summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
backgroundLink='https://steamuserimages-a.akamaihd.net/ugc/2013708095892656347/39A93A2B1EB05E725214373849F8E37FCEB4C2EA/?imw=512&amp;imh=256&amp;ima=fit&amp;impolicy=Letterbox&amp;imcolor=%23000000&amp;letterbox=true'
2024-08-08 17:28:28 +00:00
handleClick={() => {
alert(
'these are dummy mods. So navigation on these are not implemented yet'
)
}}
/>
<ModCard
title='This is a mod title for an awesome game that will make everyone happy! The happiest!'
summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png'
2024-08-08 17:28:28 +00:00
handleClick={() => {
alert(
'these are dummy mods. So navigation on these are not implemented yet'
)
}}
/>
2024-07-11 11:19:12 +00:00
</div>
<div className='IBMSMAction'>
<a
className='btn btnMain IBMSMActionBtn'
role='button'
href='blog.html'
>
View All
</a>
</div>
</div>
<div className='IBMSecMain IBMSMListWrapper'>
<div className='IBMSMTitleMain'>
<h2 className='IBMSMTitleMainHeading'>Blog Posts</h2>
</div>
<div className='IBMSMList'>
<BlogCard backgroundLink='https://image.nostr.build/d6af39fb1d47feaf09831ddf9d447ccc435ba10fcbb9b6d6e800390f6bbac851.png' />
<BlogCard backgroundLink='https://nichegamer.com/wp-content/uploads/2023/01/onimai-01-07-2023.jpg' />
<BlogCard backgroundLink='https://pbs.twimg.com/media/GDrRJOOXYAAeysT.jpg:large' />
<BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
</div>
<div className='IBMSMAction'>
<a
className='btn btnMain IBMSMActionBtn'
role='button'
href='blog.html'
>
View All
</a>
</div>
</div>
</div>
</div>
</div>
)
}