chore: maintenance

components/ErrorPage.tsx

@@ -12,7 +12,7 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
 
   return (
     <>
-      <h1 className='my-6 font-semibold text-4xl'>
+      <h1 className='my-6 text-4xl font-semibold'>
         {t('errors:error')}{' '}
         <span
           className='text-yellow dark:text-yellow-dark'
@@ -24,7 +24,7 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
       <p className='text-center text-lg'>
         {message}{' '}
         <Link href='/'>
-          <a className='text-yellow dark:text-yellow-dark hover:underline'>
+          <a className='text-yellow hover:underline dark:text-yellow-dark'>
             {t('errors:return-to-home-page')}
           </a>
         </Link>

components/Footer.tsx

@@ -15,10 +15,10 @@ export const Footer: React.FC<FooterProps> = (props) => {
   }, [version])
 
   return (
-    <footer className='bg-white flex flex-col items-center justify-center py-6 text-lg border-t-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
+    <footer className='flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black'>
       <p>
         <Link href='/'>
-          <a className='hover:underline text-yellow dark:text-yellow-dark'>
+          <a className='text-yellow hover:underline dark:text-yellow-dark'>
             Divlo
           </a>
         </Link>{' '}
@@ -27,7 +27,7 @@ export const Footer: React.FC<FooterProps> = (props) => {
       <p className='mt-1'>
         Version{' '}
         <a
-          className='hover:underline text-yellow dark:text-yellow-dark'
+          className='text-yellow hover:underline dark:text-yellow-dark'
           href={versionLink}
           target='_blank'
           rel='noopener noreferrer'

components/Head.tsx

@@ -3,7 +3,7 @@ import NextHead from 'next/head'
 interface HeadProps {
   title?: string
   image?: string
-  description?: string
+  description: string
   url?: string
 }
 
@@ -11,7 +11,7 @@ export const Head: React.FC<HeadProps> = (props) => {
   const {
     title = 'Divlo',
     image = '/images/icons/icon-96x96.png',
-    description = "I'm Divlo, I'm 18 years old, I'm from France - Developer Full Stack Junior • Passionate about High-Tech",
+    description,
     url = 'https://divlo.fr/'
   } = props
 

components/Header/Language/index.tsx

@@ -3,9 +3,10 @@ import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
 import classNames from 'classnames'
 
+import i18n from 'i18n.json'
+
 import { Arrow } from './Arrow'
 import { LanguageFlag } from './LanguageFlag'
-import i18n from 'i18n.json'
 
 export const Language: React.FC = () => {
   const { lang: currentLanguage } = useTranslation()
@@ -33,10 +34,10 @@ export const Language: React.FC = () => {
   }
 
   return (
-    <div className='flex flex-col justify-center items-center cursor-pointer'>
+    <div className='flex cursor-pointer flex-col items-center justify-center'>
       <div
         data-cy='language-click'
-        className='flex items-center mr-5'
+        className='mr-5 flex items-center'
         onClick={handleHiddenMenu}
       >
         <LanguageFlag language={currentLanguage} />
@@ -46,7 +47,7 @@ export const Language: React.FC = () => {
       <ul
         data-cy='languages-list'
         className={classNames(
-          'flex flex-col justify-center items-center absolute p-0 top-14 z-10 w-24 mt-3 mr-4 rounded-lg list-none shadow-light dark:shadow-dark bg-white dark:bg-black',
+          'absolute top-14 z-10 mt-3 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-light dark:bg-black dark:shadow-dark',
           { hidden: hiddenMenu }
         )}
       >
@@ -57,7 +58,7 @@ export const Language: React.FC = () => {
           return (
             <li
               key={index}
-              className='flex items-center justify-center w-full h-12 hover:bg-[#4f545c] hover:bg-opacity-20 pl-2'
+              className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
               onClick={async () => await handleLanguage(language)}
             >
               <LanguageFlag language={language} />

components/Header/SwitchTheme.tsx

@@ -24,13 +24,13 @@ export const SwitchTheme: React.FC = () => {
         data-cy='switch-theme-click'
         onClick={handleClick}
       >
-        <div className='toggle-theme-button relative cursor-pointer bg-transparent inline-block'>
+        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
           <div className='toggle-track'>
             <div
               data-cy='switch-theme-dark'
               className='toggle-track-check absolute'
             >
-              <span className='toggle_Dark flex justify-center items-center relative'>
+              <span className='toggle_Dark relative flex items-center justify-center'>
                 🌜
               </span>
             </div>
@@ -38,7 +38,7 @@ export const SwitchTheme: React.FC = () => {
               data-cy='switch-theme-light'
               className='toggle-track-x absolute'
             >
-              <span className='toggle_Light flex justify-center items-center relative'>
+              <span className='toggle_Light relative flex items-center justify-center'>
                 🌞
               </span>
             </div>

components/Header/__test__/Header.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import { Header } from '..'
 
 describe('<Header />', () => {
-  it('should render', async () => {
+  it('should render', () => {
     const { getByText } = render(<Header />)
     expect(getByText('Divlo')).toBeInTheDocument()
   })

components/Header/index.tsx

@@ -12,7 +12,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
   const { showLanguage = false } = props
 
   return (
-    <header className='bg-white sticky top-0 z-50 flex w-full justify-between px-6 py-2 border-b-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
+    <header className='sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
       <Link href='/'>
         <a>
           <div className='flex items-center justify-center'>
@@ -22,18 +22,18 @@ export const Header: React.FC<HeaderProps> = (props) => {
               src='/images/divlo_icon_small.png'
               alt='Divlo'
             />
-            <strong className='ml-1 font-headline font-semibold hidden xs:block text-yellow dark:text-yellow-dark'>
+            <strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
               Divlo
             </strong>
           </div>
         </a>
       </Link>
       <div className='flex justify-between'>
-        <div className='flex flex-col justify-center items-center px-6'>
+        <div className='flex flex-col items-center justify-center px-6'>
           <Link href='/blog'>
             <a
               data-cy='header-blog-link'
-              className='text-yellow dark:text-yellow-dark hover:underline'
+              className='text-yellow hover:underline dark:text-yellow-dark'
             >
               Blog
             </a>

components/Interests/InterestParagraph.tsx

@@ -10,8 +10,8 @@ export const InterestParagraph: React.FC<InterestParagraphProps> = (props) => {
 
   return (
     <>
-      <p className='text-center my-6 text-gray dark:text-gray-dark'>
-        <strong className='text-yellow font-semibold text-lg dark:text-yellow-dark'>
+      <p className='my-6 text-center text-gray dark:text-gray-dark'>
+        <strong className='text-lg font-semibold text-yellow dark:text-yellow-dark'>
           {title}
         </strong>
         <br />

components/Interests/InterestsList/InterestItem.tsx

@@ -10,9 +10,9 @@ export const InterestItem: React.FC<InterestItemProps> = (props) => {
   const { fontAwesomeIcon, title } = props
 
   return (
-    <li className='interest-item my-2 mx-2 w-8 h-8' title={title}>
+    <li className='interest-item my-2 mx-2 h-8 w-8' title={title}>
       <FontAwesomeIcon
-        className='text-yellow cursor-pointer h-full w-full block dark:text-yellow-dark'
+        className='block h-full w-full cursor-pointer text-yellow dark:text-yellow-dark'
         icon={fontAwesomeIcon}
       />
     </li>

components/Interests/InterestsList/index.tsx

@@ -5,8 +5,8 @@ import { InterestItem } from './InterestItem'
 
 export const InterestsList: React.FC = () => {
   return (
-    <div className='flex justify-center my-4'>
-      <ul className='flex justify-around p-0 m-0 list-none w-96'>
+    <div className='my-4 flex justify-center'>
+      <ul className='m-0 flex w-96 list-none justify-around p-0'>
         <InterestItem
           title='Developer Full Stack Junior'
           fontAwesomeIcon={faCode}

components/OpenSource/Repository.tsx

@@ -11,10 +11,10 @@ export const Repository: React.FC<RepositoryProps> = (props) => {
   const { name, description, href } = props
 
   return (
-    <ShadowContainer className='cursor-pointer relative p-6 !mb-4 max-h-32 transition-transform duration-200 ease-in-out hover:-translate-y-2'>
+    <ShadowContainer className='relative !mb-4 max-h-32 cursor-pointer p-6 transition-transform duration-200 ease-in-out hover:-translate-y-2'>
       <a href={href} target='_blank' rel='noopener noreferrer'>
         <div className='flex'>
-          <GitHubIcon className='h-6 mr-2' />
+          <GitHubIcon className='mr-2 h-6' />
           <span className='text-yellow dark:text-yellow-dark'>{name}</span>
         </div>
         <p className='my-4'>{description}</p>

components/OpenSource/index.tsx

@@ -6,42 +6,30 @@ export const OpenSource: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <>
-      <div className='max-w-full mt-0 flex flex-col items-center'>
-        <p className='text-center'>{t('home:open-source.description')}</p>
-        <div className='grid grid-cols-1 md:w-10/12 md:grid-cols-2 gap-6 my-6'>
-          <Repository
-            name='nodejs/node'
-            description='Node.js JavaScript runtime ✨️🐢🚀✨️'
-            href='https://github.com/nodejs/node/commits?author=Divlo'
-          />
-          <Repository
-            name='standard/standard'
-            description='🌟 JavaScript Style Guide, with linter & automatic code fixer'
-            href='https://github.com/standard/standard/commits?author=Divlo'
-          />
-          <Repository
-            name='nrwl/nx'
-            description='Smart, Extensible Build Framework'
-            href='https://github.com/nrwl/nx/commits?author=Divlo'
-          />
-          <Repository
-            name='vercel/styled-jsx'
-            description='Full CSS support for JSX without compromises'
-            href='https://github.com/vercel/styled-jsx/commits?author=Divlo'
-          />
-        </div>
+    <div className='mt-0 flex max-w-full flex-col items-center'>
+      <p className='text-center'>{t('home:open-source.description')}</p>
+      <div className='my-6 grid grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2'>
+        <Repository
+          name='nodejs/node'
+          description='Node.js JavaScript runtime 🐢🚀'
+          href='https://github.com/nodejs/node/commits?author=Divlo'
+        />
+        <Repository
+          name='standard/standard'
+          description='🌟 JavaScript Style Guide, with linter & automatic code fixer'
+          href='https://github.com/standard/standard/commits?author=Divlo'
+        />
+        <Repository
+          name='nrwl/nx'
+          description='Smart, Extensible Build Framework'
+          href='https://github.com/nrwl/nx/commits?author=Divlo'
+        />
+        <Repository
+          name='vercel/next.js'
+          description='The React Framework for Production'
+          href='https://github.com/vercel/next.js/commits?author=Divlo'
+        />
       </div>
-
-      <style jsx global>{`
-        .animation-custom {
-          position: relative;
-          transition: all 0.3s ease 0s;
-        }
-        .animation-custom:hover {
-          transform: translateY(-7px);
-        }
-      `}</style>
-    </>
+    </div>
   )
 }

components/Portfolio/PortfolioItem.tsx

@@ -1,6 +1,7 @@
-import { ShadowContainer } from 'components/design/ShadowContainer'
 import Image from 'next/image'
 
+import { ShadowContainer } from 'components/design/ShadowContainer'
+
 export interface PortfolioItemProps {
   title: string
   description: string
@@ -12,7 +13,7 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
   const { title, description, link, image } = props
 
   return (
-    <ShadowContainer className='cursor-pointer relative items-center sm:ml-10'>
+    <ShadowContainer className='relative cursor-pointer items-center sm:ml-10'>
       <a
         className='group inline-flex justify-center'
         target='_blank'
@@ -29,8 +30,8 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
             alt={title}
           />
         </div>
-        <div className='opacity-0 transition-opacity duration-500 h-auto absolute text-center overflow-hidden bottom-0 group-hover:opacity-100'>
-          <h3 className='text-yellow text-xl font-semibold my-6 dark:text-yellow-dark'>
+        <div className='absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100'>
+          <h3 className='my-6 text-xl font-semibold text-yellow dark:text-yellow-dark'>
             {title}
           </h3>
           <p className='my-6'>{description}</p>

components/Portfolio/index.tsx

@@ -14,7 +14,7 @@ export const Portfolio: React.FC = () => {
   )
 
   return (
-    <div className='flex flex-wrap justify-center px-3 w-full'>
+    <div className='flex w-full flex-wrap justify-center px-3'>
       {items.map((item, index) => {
         return <PortfolioItem key={index} {...item} />
       })}

components/Profile/ProfileDescriptionBottom.tsx

@@ -2,7 +2,7 @@ import Translation from 'next-translate/Trans'
 
 export const ProfileDescriptionBottom: React.FC = () => {
   return (
-    <p className='mt-8 mb-8 font-normal text-base text-gray dark:text-gray-dark'>
+    <p className='mt-8 mb-8 text-base font-normal text-gray dark:text-gray-dark'>
       <Translation
         i18nKey='home:about.description-bottom'
         components={[<br key='break' />]}

components/Profile/ProfileInfo.tsx

@@ -4,14 +4,14 @@ export const ProfileInformation: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='pb-2 mb-6 border-b-2 font-headline border-gray-600 dark:border-gray-400'>
-      <h1 className='text-4xl mb-2'>
+    <div className='mb-6 border-b-2 border-gray-600 pb-2 font-headline dark:border-gray-400'>
+      <h1 className='mb-2 text-4xl'>
         {t('home:about.i-am')}{' '}
         <strong className='font-semibold text-yellow dark:text-yellow-dark'>
           Divlo
         </strong>
       </h1>
-      <h2 className='text-base mb-3'>{t('home:about.description')}</h2>
+      <h2 className='mb-3 text-base'>{t('home:about.description')}</h2>
     </div>
   )
 }

components/Profile/ProfileList/ProfileItem.tsx

@@ -8,72 +8,22 @@ export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
   const { title, value, link } = props
 
   return (
-    <>
-      <li className='profile-list__item'>
-        <strong className='profile-list__item-title text-black dark:text-white'>
-          {title}
-        </strong>
-        <span className='profile-list__item-info text-gray dark:text-gray-dark'>
-          {link != null ? (
-            <a
-              className='text-gray dark:text-gray-dark hover:underline'
-              href={link}
-            >
-              {value}
-            </a>
-          ) : (
-            value
-          )}
-        </span>
-      </li>
-
-      <style jsx>
-        {`
-          .profile-list__item {
-            margin-bottom: 13px;
-          }
-          .profile-list__item::after,
-          .profile-list__item::before {
-            content: ' ';
-            display: table;
-          }
-          .profile-list__item::after {
-            clear: both;
-          }
-          .profile-list__item-title {
-            display: block;
-            width: 120px;
-            float: left;
-            font-size: 12px;
-            font-weight: 700;
-            line-height: 20px;
-            text-transform: uppercase;
-          }
-          .profile-list__item-info {
-            display: block;
-            margin-left: 125px;
-            font-size: 15px;
-            font-weight: 400;
-            line-height: 20px;
-          }
-
-          @media (max-width: 576px) {
-            .profile-list__item-title {
-              margin-bottom: 3px;
-            }
-            .profile-list__item-info {
-              margin-left: 0;
-              margin-bottom: 15px;
-            }
-            .profile-list__item-info,
-            .profile-list__item-title {
-              width: 100%;
-              float: none;
-              line-height: 1.2;
-            }
-          }
-        `}
-      </style>
-    </>
+    <li className='mb-3 before:table after:clear-both after:table'>
+      <strong className='float-left block w-28 text-xs font-bold uppercase text-black dark:text-white'>
+        {title}
+      </strong>
+      <span className='profile-list__item-info ml-0 mb-4 block text-sm font-normal text-gray dark:text-gray-dark sm:mb-0 sm:ml-32'>
+        {link != null ? (
+          <a
+            className='text-gray hover:underline dark:text-gray-dark'
+            href={link}
+          >
+            {value}
+          </a>
+        ) : (
+          value
+        )}
+      </span>
+    </li>
   )
 }

components/Profile/ProfileList/index.tsx

@@ -6,7 +6,7 @@ export const ProfileList: React.FC = () => {
   const { t } = useTranslation('home')
 
   return (
-    <ul className='m-0 p-0 list-none'>
+    <ul className='m-0 list-none p-0'>
       <ProfileItem title={t('home:about.birth-date')} value='31/03/2003' />
       <ProfileItem title={t('home:about.nationality')} value='Alsace, France' />
       <ProfileItem

components/Profile/ProfileLogo.tsx

@@ -4,8 +4,8 @@ import DivloLogo from 'public/images/divlo_logo.png'
 
 export const ProfileLogo: React.FC = () => {
   return (
-    <div className='px-2 py-6 max-w-[370px] max-h-[370px]'>
-      <Image src={DivloLogo} alt='Divlo' priority />
+    <div className='max-h-[370px] max-w-[370px] px-2 py-6'>
+      <Image src={DivloLogo} alt='Divlo' />
     </div>
   )
 }

components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx

@@ -8,7 +8,7 @@ export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
       xmlns='http://www.w3.org/2000/svg'
       viewBox='0 0 24 24'
       className={classNames(
-        'dark:text-white text-black w-8 h-8 fill-current',
+        'h-8 w-8 fill-current text-black dark:text-white',
         className
       )}
       {...rest}

components/Profile/SocialMediaList/SocialMediaItem.tsx

@@ -7,7 +7,7 @@ export const SocialMediaItem: React.FC<SocialMediaItemProps> = (props) => {
   const { link, ariaLabel, children } = props
 
   return (
-    <li className='inline-block mx-4 my-1'>
+    <li className='mx-4 my-1 inline-block'>
       <a
         href={link}
         aria-label={ariaLabel}

components/Profile/SocialMediaList/index.tsx

@@ -9,7 +9,7 @@ import { NPMIcon } from './SocialMediaIcons/NPMIcon'
 
 export const SocialMediaList: React.FC = () => {
   return (
-    <ul className='social-media-list m-0 mt-2 py-4 list-none text-center'>
+    <ul className='social-media-list m-0 mt-2 list-none py-4 text-center'>
       <SocialMediaItem link='https://github.com/Divlo' ariaLabel='GitHub'>
         <GitHubIcon />
       </SocialMediaItem>

components/Profile/index.tsx

@@ -5,7 +5,7 @@ import { ProfileLogo } from './ProfileLogo'
 
 export const Profile: React.FC = () => {
   return (
-    <div className='flex flex-col justify-center items-center px-10 pt-2 md:pt-10 md:flex-row'>
+    <div className='flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10'>
       <ProfileLogo />
       <div>
         <ProfileInformation />

components/Skills/SkillsSection.tsx

@@ -10,15 +10,15 @@ export const SkillsSection: React.FC<SkillsSectionProps> = (props) => {
 
   return (
     <ShadowContainer>
-      <div className='w-full px-4 mx-auto'>
+      <div className='mx-auto w-full px-4'>
         <div className='flex flex-wrap px-4 py-6'>
           <div className='flex-1'>
-            <div className='mb-8 border-b border-gray-600 dark:border-opacity-10 dark:border-white'>
-              <h3 className='text-yellow font-semibold text-xl my-3 dark:text-yellow-dark'>
+            <div className='mb-8 border-b border-gray-600 dark:border-white dark:border-opacity-10'>
+              <h3 className='my-3 text-xl font-semibold text-yellow dark:text-yellow-dark'>
                 {title}
               </h3>
             </div>
-            <div className='flex justify-around flex-wrap'>{children}</div>
+            <div className='flex flex-wrap justify-around'>{children}</div>
           </div>
         </div>
       </div>

components/__test__/ErrorPage.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import { ErrorPage } from '../ErrorPage'
 
 describe('<ErrorPage />', () => {
-  it('should render the message and statusCode', async () => {
+  it('should render the message and statusCode', () => {
     const messageContent = 'message content'
     const statusCode = 404
     const { getByText } = render(

components/__test__/Footer.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import { Footer } from '../Footer'
 
 describe('<Footer />', () => {
-  it('should render with appropriate link tag version', async () => {
+  it('should render with appropriate link tag version', () => {
     const version = '1.0.0'
     const { getByText } = render(<Footer version={version} />)
     const versionLink = getByText(version) as HTMLAnchorElement

components/design/RevealFade.tsx

@@ -10,7 +10,8 @@ export const RevealFade: React.FC = (props) => {
       (entries, observer) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            entry.target.classList.add('reveal-visible')
+            entry.target.className =
+              'opacity-100 visible translate-y-0 transition-all duration-700 ease-in-out'
             observer.unobserve(entry.target)
           }
         })
@@ -25,26 +26,8 @@ export const RevealFade: React.FC = (props) => {
   }, [])
 
   return (
-    <>
-      <div ref={htmlElement} className='reveal'>
-        {children}
-      </div>
-
-      <style jsx>
-        {`
-          .reveal {
-            opacity: 0;
-            visibility: hidden;
-            transform: translateY(-30px);
-          }
-          .reveal-visible {
-            opacity: 1;
-            visibility: visible;
-            transform: translateY(0);
-            transition: all 500ms ease-out 100ms;
-          }
-        `}
-      </style>
-    </>
+    <div ref={htmlElement} className='invisible -translate-y-7 opacity-0'>
+      {children}
+    </div>
   )
 }

components/design/Section/SectionHeading.tsx

@@ -4,7 +4,7 @@ export const SectionHeading: React.FC<SectionHeadingProps> = (props) => {
   const { children, ...rest } = props
 
   return (
-    <h2 {...rest} className='text-4xl font-semibold text-center mt-1 mb-3'>
+    <h2 {...rest} className='mt-1 mb-3 text-center text-4xl font-semibold'>
       {children}
     </h2>
   )

components/design/Section/index.tsx

@@ -20,11 +20,11 @@ export const Section: React.FC<SectionProps> = (props) => {
 
   if (isMain) {
     return (
-      <div className='px-3 w-full'>
+      <div className='w-full px-3'>
         <ShadowContainer style={{ marginTop: 50 }}>
           <section {...rest}>
             {heading != null && <SectionHeading>{heading}</SectionHeading>}
-            <div className='px-3 w-full'>{children}</div>
+            <div className='w-full px-3'>{children}</div>
           </section>
         </ShadowContainer>
       </div>
@@ -35,7 +35,7 @@ export const Section: React.FC<SectionProps> = (props) => {
     return (
       <section {...rest}>
         {heading != null && <SectionHeading>{heading}</SectionHeading>}
-        <div className='px-3 w-full'>{children}</div>
+        <div className='w-full px-3'>{children}</div>
       </section>
     )
   }
@@ -52,9 +52,9 @@ export const Section: React.FC<SectionProps> = (props) => {
           {description}
         </p>
       )}
-      <div className='px-3 w-full'>
+      <div className='w-full px-3'>
         <ShadowContainer>
-          <div className='px-16 py-4 leading-8 w-full'>{children}</div>
+          <div className='w-full px-16 py-4 leading-8'>{children}</div>
         </ShadowContainer>
       </div>
     </section>

components/design/ShadowContainer.tsx

@@ -9,7 +9,7 @@ export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
     <>
       <div
         className={classNames(
-          'shadow-container h-full max-w-full break-words',
+          'shadow-container mb-12 h-full max-w-full break-words',
           className
         )}
         {...rest}
@@ -23,7 +23,6 @@ export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
             box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
             border: 1px solid black;
             border-radius: 1rem;
-            margin-bottom: 50px;
           }
         `}
       </style>