degmods.com/src/pages/home.tsx

import { BlogCard } from '../components/BlogCard'
import { GameCard } from '../components/GameCard'
import { ModCard } from '../components/ModCard'
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("/assets/img/DEGMods%20Placeholder%20Img.png") center / cover no-repeat'
                      }}
                    ></div>
                    <div className='IBMSMSCWSInfo'>
                      <h3 className='IBMSMSCWSInfoHeading'>Placeholder</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'>Placeholder</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'>Placeholder</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 (WIP)</h2>
            </div>
            <div className='IBMSMList IBMSMListFeaturedAlt'>
              <GameCard backgroundLink='assets/img/DEGMods%20Placeholder%20Img.png' />
              <GameCard backgroundLink='assets/img/DEGMods%20Placeholder%20Img.png' />
              <GameCard backgroundLink='assets/img/DEGMods%20Placeholder%20Img.png' />
              <GameCard backgroundLink='assets/img/DEGMods%20Placeholder%20Img.png' />
              <GameCard 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 className='IBMSecMain IBMSMListWrapper'>
            <div className='IBMSMTitleMain'>
              <h2 className='IBMSMTitleMainHeading'>Awesome Mods (WIP)</h2>
            </div>
            <div className='IBMSMList IBMSMListAlt'>
              <ModCard
                title='Placeholder'
                summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
                backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png'
                handleClick={() => {
                  alert(
                    'these are dummy mods. So navigation on these are not implemented yet'
                  )
                }}
              />
              <ModCard
                title='Placeholder'
                summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
                backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png'
                handleClick={() => {
                  alert(
                    'these are dummy mods. So navigation on these are not implemented yet'
                  )
                }}
              />
              <ModCard
                title='Placeholder'
                summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
                backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png'
                handleClick={() => {
                  alert(
                    'these are dummy mods. So navigation on these are not implemented yet'
                  )
                }}
              />
            </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 (WIP)</h2>
            </div>
            <div className='IBMSMList'>
              <ModCard
                title='Placeholder'
                summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
                backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png'
                handleClick={() => {
                  alert(
                    'these are dummy mods. So navigation on these are not implemented yet'
                  )
                }}
              />
              <ModCard
                title='Placeholder'
                summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
                backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png'
                handleClick={() => {
                  alert(
                    'these are dummy mods. So navigation on these are not implemented yet'
                  )
                }}
              />
              <ModCard
                title='Placeholder'
                summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
                backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png'
                handleClick={() => {
                  alert(
                    'these are dummy mods. So navigation on these are not implemented yet'
                  )
                }}
              />
              <ModCard
                title='Placeholder'
                summary='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
                backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png'
                handleClick={() => {
                  alert(
                    'these are dummy mods. So navigation on these are not implemented yet'
                  )
                }}
              />
            </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 (WIP)</h2>
            </div>
            <div className='IBMSMList'>
              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
              <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>
  )
}