refactor: add dark-theme in components

app/components/About.tsx

@@ -10,11 +10,11 @@ export default function About() {
           className='mb-4 md:mr-8'
         />
         <div className='flex flex-col'>
-          <h2 className='mb-4 font-spline text-2xl font-bold text-gray-700 md:mb-2 md:text-4xl'>
+          <h2 className='mb-4 text-2xl font-bold font-spline md:mb-2 md:text-4xl'>
             Afinal, o que é a{' '}
             <span className='text-purple-500'>He4rt Developers?</span>
           </h2>
-          <p className='mb-9 font-dm text-lg font-medium text-gray-750'>
+          <p className='text-lg font-medium mb-9 font-dm'>
             Temos como filosofia o ensino, tecnologia e as pessoas.{' '}
             <span className='text-purple-500'>
               Acreditamos que quando alinhados conseguimos mudar o mundo
@@ -25,11 +25,11 @@ export default function About() {
               Ajude a moldar nossa comunidade: faça parte dela.
             </span>
           </p>
-          <h3 className='mb-2 font-spline text-xl font-bold text-gray-700 md:text-2xl'>
+          <h3 className='mb-2 text-xl font-bold font-spline md:text-2xl'>
             Como posso me juntar a{' '}
             <span className='text-purple-500'>He4rt?</span>
           </h3>
-          <p className='font-dm text-lg font-medium text-gray-750'>
+          <p className='text-lg font-medium font-dm'>
             Faça parte do nosso{' '}
             <a
               href='https://discord.gg/he4rt'

app/components/FindAtHe4rtSection.tsx

@@ -42,11 +42,11 @@ export default function FindAtHe4rt() {
     <>
       <Container>
         <div className='mb-10'>
-          <h2 className='text-2xl font-bold text-gray-700 md:text-4xl'>
+          <h2 className='text-2xl font-bold md:text-4xl'>
             O que eu encontrarei na{' '}
             <span className='text-purple-500'>He4rt?</span>
           </h2>
-          <p className='mt-3 max-w-5xl font-dm text-[#737272]'>
+          <p className='max-w-5xl mt-3 font-dm'>
             Nós temos os recursos para levar qualquer ideia para frente, nenhum
             sonho é louco demais para nós. Descubra como desenvolver projetos
             que revolucionam a maneira de aprender.
@@ -65,7 +65,7 @@ export default function FindAtHe4rt() {
               alt='discord-print'
             />
             <div className='px-3 text-[#f3f3f3]'>
-              <h3 className='font-spline font-semibold'>
+              <h3 className='font-semibold font-spline'>
                 Venha participar do nosso Discord
               </h3>
               <p className='mt-3 mb-5 max-w-[584px] font-dm'>

app/components/He4rt.tsx

@@ -18,7 +18,7 @@ export default function He4rt({
         id='init'
       >
         <div className='flex w-full flex-col lg:w-1/2 lg:max-w-[544px]'>
-          <h1 className='font-spline text-2xl font-bold text-[#424141] md:text-4xl'>
+          <h1 className='text-2xl font-bold font-spline md:text-4xl'>
             Feito pela{' '}
             <span className='text-purple-500 dark:text-purple-700'>
               comunidade{' '}
@@ -28,7 +28,7 @@ export default function He4rt({
               comunidade
             </span>
           </h1>
-          <p className='mt-4 w-full text-base text-gray-750 md:text-xl'>
+          <p className='w-full mt-4 text-base md:text-xl'>
             Aqui é o lugar aonde mentes extraordinárias se encontram com o
             objetivo de alcançar milhares de pessoas com o poder da tecnologia.{' '}
             <span className='font-semibold text-purple-500 dark:text-purple-700'>
@@ -41,13 +41,13 @@ export default function He4rt({
               href='https://discord.com/invite/5kwDQuv'
               target='_blank'
             >
-              <button className='rounded-lg border-2 border-purple-500 bg-transparent px-4 py-2 font-bold text-purple-500 transition-all hover:bg-purple-500 hover:text-white dark:border-purple-700 dark:text-purple-700 dark:hover:bg-purple-700 dark:hover:text-gray-998'>
+              <button className='px-4 py-2 font-bold text-purple-500 transition-all bg-transparent border-2 border-purple-500 rounded-lg hover:bg-purple-500 hover:text-white dark:border-purple-700 dark:text-purple-700 dark:hover:bg-purple-700 dark:hover:text-gray-998'>
                 Seja um membro
               </button>
             </a>
           </div>
         </div>
-        <div className='flex w-full flex-col lg:w-1/2'>
+        <div className='flex flex-col w-full lg:w-1/2'>
           <Projects contributors={contributors} />
         </div>
       </header>

app/components/He4rtSkills.tsx

@@ -10,15 +10,12 @@ export default function He4rtSkills({ title, description }: SkillsProps) {
     <div className='max-w-xl lg:max-w-sm'>
       <div className='flex items-center gap-3'>
         <SlGraduation
-          className='rounded-full bg-purple-500/10 p-3'
-          color='#782BF1'
+          className='p-3 rounded-full bg-purple-500/10 text-purple-500/80 dark:text-purple-500/100'
           size={40}
         />
-        <h3 className='font-spline text-xl font-semibold text-[#424141]'>
-          {title}
-        </h3>
+        <h3 className='text-xl font-semibold font-spline'>{title}</h3>
       </div>
-      <p className='mt-3 font-dm text-gray-750'>{description}</p>
+      <p className='mt-3 font-dm '>{description}</p>
     </div>
   );
 }

app/components/OurPartners.tsx

@@ -4,11 +4,11 @@ import Container from '~/components/Container';
 export default function OurPartners() {
   return (
     <Container>
-      <div className='mx-auto mb-11 max-w-6xl text-center' id='partners'>
-        <h2 className='mb-2 font-spline text-4xl font-bold text-gray-700'>
+      <div className='max-w-6xl mx-auto text-center mb-11' id='partners'>
+        <h2 className='mb-2 text-4xl font-bold font-spline'>
           Nossos parceiros
         </h2>
-        <p className='text-gray-750'>
+        <p>
           Com o esforço de nossos parceiros estamos na missão de fazer o
           impossível. Juntos criamos soluções que mudará a maneira de aprender,
           garantindo oportunidade para todos. Faça parte dessa história, seja um

app/components/PartnerCard.tsx

@@ -1,24 +1,22 @@
 export default function PartnerCard() {
   return (
     <>
-      <div className='flex gap-4 bg-white p-12 shadow-xl'>
+      <div className='flex gap-4 p-12 shadow-xl'>
         <img
-          className='h-10 w-10'
+          className='w-10 h-10'
           alt='partnerpicture'
           src='/images/partner-picture.png'
         />
         <div>
           <div className='flex flex-col items-center justify-between md:flex-row'>
-            <h3 className='font-spline text-xl font-bold text-gray-950'>
-              Sinergicon
-            </h3>
-            <span className='text-gray-650'>Contadora</span>
+            <h3 className='text-xl font-bold font-spline'>Sinergicon</h3>
+            <span className='dark:text-white/80'>Contadora</span>
           </div>
-          <p className='mt-2 mb-4 font-dm font-normal text-gray-650'>
+          <p className='mt-2 mb-4 font-normal font-dm dark:text-white/80'>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
             viverra lorem eget luctus iaculis.
           </p>
-          <button className='w-full rounded-lg bg-purple-500 py-2 text-white'>
+          <button className='w-full py-2 text-white bg-purple-500 rounded-lg'>
             Entrar em contato
           </button>
         </div>

app/components/SectionRecords.tsx

@@ -1,17 +1,17 @@
 export default function SectionRecords() {
   return (
     <section
-      className='container mx-auto flex flex-col gap-8 py-20 px-10'
+      className='container flex flex-col gap-8 px-10 py-20 mx-auto'
       id='records'
     >
       <div className='flex flex-col items-start justify-between gap-6 md:gap-8 lg:flex-row'>
-        <div className='flex flex-1 flex-col gap-4'>
-          <h2 className='text-2xl font-bold text-gray-900 md:text-4xl'>
+        <div className='flex flex-col flex-1 gap-4'>
+          <h2 className='text-2xl font-bold md:text-4xl'>
             O acesso a <span className='text-purple-600'>educação</span> não é
             questão de sorte.
           </h2>
 
-          <p className='text-base font-normal text-gray-500 md:text-lg'>
+          <p className='text-base font-normal md:text-lg'>
             Acreditamos que todos têm o direito de aprender e se desenvolver,
             independentemente de sua origem ou situação financeira. Por isso,
             lutamos para garantir que todos tenham acesso à educação acessível e
@@ -22,23 +22,23 @@ export default function SectionRecords() {
         </div>
 
         <div className='grid w-full grid-cols-1 gap-2 text-center text-white sm:grid-cols-2 lg:w-fit lg:gap-4'>
-          <div className='flex h-36 w-full flex-col items-center justify-center gap-2 rounded-lg bg-purple-500 lg:w-56'>
+          <div className='flex flex-col items-center justify-center w-full gap-2 bg-purple-500 rounded-lg h-36 lg:w-56'>
             <h3 className='text-[36px] font-bold leading-[43px]'>+13</h3>
             <p className='text-base font-medium text-gray-50'>Palestras</p>
           </div>
-          <div className='flex h-36 w-full flex-col items-center justify-center gap-2 rounded-lg bg-purple-500 lg:w-56'>
+          <div className='flex flex-col items-center justify-center w-full gap-2 bg-purple-500 rounded-lg h-36 lg:w-56'>
             <h3 className='text-[36px] font-bold leading-[43px]'>+70,980</h3>
             <p className='text-base font-medium text-gray-50'>
               Espectadores Únicos
             </p>
           </div>
-          <div className='flex h-36 w-full flex-col items-center justify-center gap-2 rounded-lg bg-purple-500 lg:w-56'>
+          <div className='flex flex-col items-center justify-center w-full gap-2 bg-purple-500 rounded-lg h-36 lg:w-56'>
             <h3 className='text-[36px] font-bold leading-[43px]'>+4,677</h3>
             <p className='text-base font-medium text-gray-50'>
               Espectadores Simutâneos
             </p>
           </div>
-          <div className='flex h-36 w-full flex-col items-center justify-center gap-2 rounded-lg bg-purple-500 lg:w-56'>
+          <div className='flex flex-col items-center justify-center w-full gap-2 bg-purple-500 rounded-lg h-36 lg:w-56'>
             <h3 className='text-[36px] font-bold leading-[43px]'>+70,980</h3>
             <p className='text-base font-medium text-gray-50'>
               Espectadores ùnicos
@@ -47,12 +47,15 @@ export default function SectionRecords() {
         </div>
       </div>
 
-      <div className='flex flex-1 flex-col gap-4'>
-        <h2 className='text-2xl font-bold text-gray-900 md:text-4xl'>
-          Limites foram feitos para serem quebrados
+      <div className='flex flex-col flex-1 gap-4'>
+        <h2 className='text-2xl font-bold md:text-4xl'>
+          Limites foram feitos para serem{' '}
+          <span className='text-2xl font-bold text-purple-600 md:text-4xl'>
+            quebrados
+          </span>
         </h2>
 
-        <p className='text-base font-normal text-gray-500 md:text-lg'>
+        <p className='text-base font-normal md:text-lg'>
           A inovação é liderada por pessoas que sabem o que fazem, sejam elas
           profissionais jovens em início de carreira ou especialistas com anos
           de experiência. Na He4rt, o ensino não depende só de indivíduos

app/components/Staff.tsx

@@ -18,10 +18,10 @@ const UserCard = ({ avatar, username, occupation, twitter }: UserCardProps) => (
     />
     <div className='flex justify-between'>
       <div>
-        <p className='font-spline text-xl font-bold text-gray-950'>
-          {username}
-        </p>
-        <span className='font-dm text-base text-gray-650'>{occupation}</span>
+        <p className='text-xl font-bold font-spline'>{username}</p>
+        <span className='text-base font-dm text-gray-650 dark:text-white/80'>
+          {occupation}
+        </span>
       </div>
       <a
         href={twitter}
@@ -39,13 +39,13 @@ export default function Staff() {
   return (
     <Container>
       <h3
-        className='mb-2 text-2xl font-bold text-gray-700 md:text-center md:text-4xl'
+        className='mb-2 text-2xl font-bold md:text-center md:text-4xl'
         id='staff'
       >
         Com grandes <span className='text-purple-500'>poderes</span> vem grandes{' '}
         <span className='text-purple-500'>responsabilidades</span>
       </h3>
-      <p className='mx-auto mb-12	max-w-4xl text-lg font-normal text-gray-750 md:text-center md:text-xl'>
+      <p className='max-w-4xl mx-auto mb-12 text-lg font-normal md:text-center md:text-xl'>
         O impossível é nosso ponto de partida favorito. Conheça como a
         autencidade de cada membro da administração fez possível uma comunidade
         extraordinária. Somos movidos não pelo fácil, mas pelo surpreendente