adjustments to the footer component and creation of the hub component

public/images/img-logo-footer.svg

+<svg width="66" height="121" viewBox="0 0 66 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.8657 14.1452L35.8011 60.6147H29.5069L5.44678 7.5332H14.4109L32.654 47.7834L44.884 20.803L44.8938 20.7801H35.9558V27.415H29.3534V14.1452H56.8657Z" fill="white"/>
+<path d="M7.58716 100.901V80.0742H16.5557C17.2474 80.0742 17.9565 80.1538 18.6853 80.3131C19.4141 80.4723 20.0829 80.7953 20.6897 81.2807C21.2975 81.7673 21.7878 82.5026 22.1614 83.4844C22.535 84.4673 22.7213 85.7719 22.7213 87.4007C22.7213 89.0294 22.535 90.3429 22.1614 91.3433C21.7867 92.3447 21.3063 93.0975 20.718 93.6026C20.1298 94.1077 19.4892 94.4502 18.7986 94.6269C18.1069 94.8058 17.4337 94.8942 16.7801 94.8942C16.4435 94.8942 16.0698 94.8757 15.6592 94.8375C15.2474 94.8004 14.8367 94.7535 14.426 94.6968C14.0142 94.6411 13.6362 94.5799 13.2909 94.5145C12.9445 94.4501 12.6602 94.4076 12.4358 94.3891V100.901H7.58716ZM12.4358 90.5436H16.023C16.4533 90.5436 16.804 90.4313 17.0742 90.2066C17.3443 89.9818 17.5459 89.6458 17.6777 89.1963C17.8084 88.7469 17.8738 88.1578 17.8738 87.4279C17.8738 86.7363 17.8041 86.1702 17.6635 85.7305C17.5241 85.2909 17.3225 84.9637 17.0611 84.7477C16.7986 84.5327 16.4631 84.4248 16.0524 84.4248H12.4369V90.5436H12.4358Z" fill="#1C1C1C"/>
+<path d="M25.1877 100.901V80.0742H33.933C34.811 80.0742 35.6193 80.1822 36.3567 80.3971C37.0942 80.612 37.7391 80.9774 38.2903 81.4912C38.8415 82.0061 39.2718 82.7032 39.5801 83.5825C39.8884 84.4629 40.042 85.5756 40.042 86.9229C40.042 87.8392 39.9581 88.6204 39.7892 89.2662C39.6215 89.9109 39.3971 90.4553 39.1171 90.8938C38.8361 91.3335 38.5147 91.6935 38.1509 91.9749C37.787 92.2553 37.408 92.4985 37.0147 92.7047L40.7435 100.901H35.8099L32.6987 93.4902C32.5125 93.4902 32.3011 93.4858 32.068 93.476C31.8338 93.4673 31.6051 93.4618 31.3818 93.4618H30.0364V100.9H25.1877V100.901ZM30.0364 89.6174H33.0637C33.4003 89.6174 33.6987 89.576 33.9613 89.492C34.2227 89.407 34.4471 89.2586 34.6334 89.0436C34.8197 88.8287 34.9602 88.5517 35.0539 88.2157C35.1465 87.8786 35.1944 87.4575 35.1944 86.9524C35.1944 86.4473 35.1476 86.0305 35.0539 85.7033C34.9602 85.3771 34.8197 85.124 34.6334 84.9451C34.4471 84.7683 34.2227 84.6364 33.9613 84.5524C33.6987 84.4673 33.4003 84.4258 33.0637 84.4258H30.0364V89.6185V89.6174Z" fill="#1C1C1C"/>
+<path d="M51.1682 101.068C49.7303 101.068 48.4634 100.927 47.3708 100.647C46.2782 100.365 45.362 99.8526 44.6246 99.1032C43.886 98.3548 43.3358 97.289 42.9709 95.9035C42.6071 94.5192 42.4241 92.7138 42.4241 90.4872C42.4241 88.2607 42.6104 86.4792 42.984 85.0839C43.3576 83.6897 43.9089 82.6185 44.6376 81.8701C45.3664 81.1217 46.2771 80.6024 47.3708 80.3123C48.4634 80.0221 49.7303 79.877 51.1682 79.877C52.6061 79.877 53.9013 80.0221 54.9939 80.3123C56.0866 80.6024 56.9983 81.1217 57.7271 81.8701C58.4558 82.6185 59.0027 83.6897 59.3666 85.0839C59.7304 86.4781 59.9134 88.2792 59.9134 90.4872C59.9134 92.6952 59.7315 94.5202 59.3666 95.9035C59.0027 97.289 58.4515 98.3559 57.7129 99.1032C56.9744 99.8515 56.0637 100.365 54.9798 100.647C53.8959 100.928 52.6246 101.068 51.1682 101.068ZM51.1682 96.7173C51.934 96.7173 52.5702 96.6289 53.0745 96.45C53.5789 96.2733 53.9754 95.9636 54.2652 95.5239C54.555 95.0843 54.7598 94.457 54.8818 93.6432C55.0027 92.8294 55.0637 91.7766 55.0637 90.486C55.0637 89.1955 55.0027 88.0817 54.8818 87.2581C54.7598 86.4344 54.555 85.8028 54.2652 85.3631C53.9754 84.9235 53.5789 84.6247 53.0745 84.4643C52.5702 84.305 51.934 84.2264 51.1682 84.2264C50.4024 84.2264 49.7956 84.3061 49.2902 84.4643C48.7858 84.6236 48.3882 84.9235 48.0985 85.3631C47.8087 85.8028 47.5985 86.4344 47.4677 87.2581C47.337 88.0817 47.2716 89.1573 47.2716 90.486C47.2716 91.8148 47.3315 92.8294 47.4535 93.6432C47.5744 94.4581 47.7793 95.0843 48.0691 95.5239C48.3588 95.9636 48.7553 96.2722 49.2608 96.45C49.7651 96.6289 50.4002 96.7173 51.166 96.7173H51.1682Z" fill="#1C1C1C"/>
+<path d="M59.9135 111.08H7.58716V113.694H59.9135V111.08Z" fill="white"/>
+</svg>

src/app/(home)/page.tsx

 import { Banner } from '@/components/banner'
 import { Footer } from '@/components/footer'
 import { Header } from '@/components/header'
-import ThemeSwitcher from '@/components/theme-switcher'
+import { Hub } from '@/components/hub'
+// import { ThemeSwitcher } from '@/components/theme-switcher'
 
 export default function Home() {
   return (
-    <div className="antialiased">
+    <>
       <Header />
-      <Banner />
-      <main>
-        Main
-        <ThemeSwitcher />
+      <main className="max-w-7xl mx-auto">
+        <Banner />
+
+        {/* <ThemeSwitcher /> */}
+        <Hub />
       </main>
       <Footer />
-    </div>
+    </>
   )
 }

src/app/layout.tsx

@@ -17,7 +17,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="pt-BR">
-      <body className={poppins.className}>
+      <body className={`antialiased ${poppins.className}`}>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"

src/components/banner.tsx

@@ -5,10 +5,14 @@ import banner from '../../public/images/banner.png'
 
 export function Banner() {
   return (
-    <div className="w-full h-[400px] relative bg-green-900">
-      <div className="absolute right-0">
-        <div className="absolute h-[400px] w-full md:w-[400px] bg-gradient-to-r from-green-900 md:from-10% z-20" />
-        <h1 className="absolute z-20 font-bold text-2xl bottom-24 left-7 max-w-44 text-primary">
+    <div className="h-[400px] flex items-center justify-end bg-gray-900">
+      {/* <h1 className="font-thin text-4xl bottom-36 left-96 max-w-72 text-primary">
+        Transforme sua vida através do conhecimento
+      </h1> */}
+      <div className="relative right-0">
+        <div className="absolute h-[400px] w-[400px] bg-gradient-to-r from-gray-900 md:from-30% z-20" />
+        <div className="absolute h-[400px] w-[200px] md:w-[500px] bg-gradient-to-r from-green-700 md:from-10% z-10" />
+        <h1 className="absolute z-20 font-thin text-4xl bottom-24 left-7 max-w-80 text-primary">
           Transforme sua vida através do conhecimento
         </h1>
         <Image
@@ -17,7 +21,8 @@ export function Banner() {
           className="h-[400px] object-cover"
           unoptimized
         />
-        <div className="absolute right-0 top-0 h-[400px] w-[200px] md:w-[600px] bg-gradient-to-l from-green-900 md:from-30% z-20" />
+        <div className="absolute right-0 top-0 h-[400px] w-[200px] md:w-[500px] bg-gradient-to-l from-green-700 md:from-10% z-10" />
+        <div className="absolute right-0 top-0 h-[400px] w-[200px] md:w-[600px] bg-gradient-to-l from-gray-900 md:from-20% z-20" />
       </div>
     </div>
   )

src/components/footer.tsx

@@ -3,47 +3,73 @@ import Image from 'next/image'
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import imgFooter from '../../public/images/img-footer.svg'
+import imgLogoFooter from '../../public/images/img-logo-footer.svg'
 import { Button } from './ui/button'
+import LogoComponent from './logo'
 
 export function Footer() {
   return (
-    <footer className="px-6 py-10 bg-primary-main md:flex gap-3 flex-row-reverse justify-between items-center">
-      <Image src={imgFooter} alt="Educação Adventista" />
-      <nav className="py-8">
-        <ul className="flex flex-col gap-4">
-          <li>
-            <Button asChild variant="link" className="p-0">
-              <Link href="#">
-                Cursos rápidos <ChevronRight className="text-yellow-500 ml-3" />
-              </Link>
-            </Button>
-          </li>
-          <li>
-            <Button asChild variant="link" className="p-0">
-              <Link href="#">
-                Cursos de aprofundamento
-                <ChevronRight className="text-yellow-500 ml-3" />
-              </Link>
-            </Button>
-          </li>
-          <li>
-            <Button asChild variant="link" className="p-0">
-              <Link href="#" className="flex items-center">
-                Cursos corporativos
-                <ChevronRight className="text-yellow-500 ml-3" />
-              </Link>
-            </Button>
-          </li>
-        </ul>
-      </nav>
-      <ul>
-        <li>Plataforma de Cursos Livres</li>
-        <li>HUB - Indústria Criativa</li>
-        <li>Centro de Ensino Superior Adventista no Sul do Brasil</li>
-        <li>CNPJ 76.726.884/0003-90 | Vale do Ivaí - Ivatuba, PR</li>
-        <li>CEP: 87130-000 | Caixa Postal - 28</li>
-        <li>Fone: (44) 3236-8000</li>
-      </ul>
+    <footer className="px-6 py-10 bg-green-700">
+      <div className="max-w-7xl mx-auto flex gap-3 justify-center md:justify-between items-center">
+        <div className="md:flex items-center justify-center gap-2 md:gap-6">
+          <Image src={imgLogoFooter} alt="PRO" className="hidden md:flex" />
+          <LogoComponent
+            width={200}
+            height={80}
+            className="fill-gray-900 flex md:hidden"
+          />
+          <ul className="text-center md:text-start">
+            <li>Plataforma de Cursos Livres</li>
+            <li>HUB - Indústria Criativa</li>
+            <li className="hidden md:flex">
+              Centro de Ensino Superior Adventista no Sul do Brasil
+            </li>
+            <li className="flex">
+              CNPJ 76.726.884/0003-90
+              <span className="hidden lg:flex">
+                &nbsp;| Vale do Ivaí - Ivatuba, PR
+              </span>
+            </li>
+            <li className="hidden md:flex">
+              CEP: 87130-000 | Caixa Postal - 28
+            </li>
+            <li className="hidden md:flex">Fone: (44) 3236-8000</li>
+          </ul>
+        </div>
+        <nav className="py-8 hidden md:flex">
+          <ul className="flex flex-col gap-4">
+            <li>
+              <Button asChild variant="link" className="p-0">
+                <Link href="#">
+                  Cursos rápidos{' '}
+                  <ChevronRight className="text-yellow-100 ml-3" />
+                </Link>
+              </Button>
+            </li>
+            <li>
+              <Button asChild variant="link" className="p-0">
+                <Link href="#">
+                  Cursos de aprofundamento
+                  <ChevronRight className="text-yellow-100 ml-3" />
+                </Link>
+              </Button>
+            </li>
+            <li>
+              <Button asChild variant="link" className="p-0">
+                <Link href="#" className="flex items-center">
+                  Cursos corporativos
+                  <ChevronRight className="text-yellow-100 ml-3" />
+                </Link>
+              </Button>
+            </li>
+          </ul>
+        </nav>
+        <Image
+          src={imgFooter}
+          alt="Educação Adventista"
+          className="hidden md:flex"
+        />
+      </div>
     </footer>
   )
 }

src/components/header.tsx

@@ -3,10 +3,12 @@ import { NavLink } from './nav-link'
 
 export function Header() {
   return (
-    <header className="flex justify-between w-full px-6 py-4">
-      <LogoComponent width={115} height={32} className="fill-primary" />
+    <header className="w-full px-6 py-5">
+      <div className="max-w-7xl mx-auto flex justify-between ">
+        <LogoComponent width={115} height={32} className="fill-primary" />
 
-      <NavLink />
+        <NavLink />
+      </div>
     </header>
   )
 }

src/components/hub.tsx

+import Image from 'next/image'
+import globo from '../../public/images/globo.svg'
+import { Button } from './ui/button'
+import { Calendar, Clock4, DollarSign, UserRound } from 'lucide-react'
+
+export function Hub() {
+  return (
+    <section className="flex justify-around p-20">
+      <div className="flex flex-col items-center justify-center w-72 md:w-6/12 gap-10">
+        <Image src={globo} alt="Imagem demonstrativa de um Globo" />
+        <p className="text-center text-2xl font-thin text-green-400 w-full md:max-w-96">
+          Somos um <b className="text-md">hub</b> de inovação, tecnologia e
+          negócios
+        </p>
+        <p className="hidden md:block text-center max-w-96">
+          Nós, na <b>Indústria Criativa</b>, oferecemos serviços educacionais e
+          assessoria profissional a instituições públicas e privadas. Nossa meta
+          é conectar pessoas, empresas e instituições por meio do conhecimento
+          técnico-científico aplicado aos negócios.
+        </p>
+        <Button
+          variant="outline"
+          className="uppercase rounded-sm bg-green-400/10 text-sm text-green-400 font-thin hover:bg-green-400/5 hover:text-green-400"
+        >
+          Saiba mais
+        </Button>
+      </div>
+      <div className="hidden md:flex items-center justify-center w-6/12">
+        <ul className="flex flex-col gap-8">
+          <li className="flex items-center gap-4">
+            <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
+              <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
+                <Clock4 size={35} />
+              </div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <span className="font-thin">Duração:</span>
+              <span className="text-xl">30 Hrs/Curso Rápido</span>
+            </div>
+          </li>
+          <li className="flex items-center gap-4">
+            <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
+              <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
+                <UserRound size={35} />
+              </div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <span className="font-thin">Indicado para:</span>
+              <span className="text-xl">Estudantes</span>
+            </div>
+          </li>
+          <li className="flex items-center gap-4">
+            <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
+              <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
+                <Calendar size={35} />
+              </div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <span className="font-thin">Início:</span>
+              <span className="text-xl">Imediato</span>
+            </div>
+          </li>
+          <li className="flex items-center gap-4">
+            <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
+              <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
+                <DollarSign size={35} />
+              </div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <span className="font-thin">Investimento:</span>
+              <span className="text-xl">R$200,00</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </section>
+  )
+}

src/components/logo.tsx

 import { ComponentProps } from 'react'
 
 function LogoComponent(props: ComponentProps<'svg'>) {
+  console.log('prossspp', props.className)
   return (
     <svg
       width={1801}
@@ -16,13 +17,16 @@ function LogoComponent(props: ComponentProps<'svg'>) {
       />
       <path
         d="M803.68 94.78L640.5 454.26h-48.76L405.35 43.64h69.44L616.12 355l94.75-208.71.07-.18H641.7v51.33h-51.15V94.78h213.13z"
-        fill="#007D77"
+        fill={props.className === 'fill-primary' ? '#007D77' : '#F9F9F9'}
       />
       <path
         d="M1345.38 355.29V194.181h69.48c5.36 0 10.85.619 16.5 1.849s10.82 3.731 15.52 7.491c4.71 3.77 8.5 9.45 11.4 17.04 2.89 7.6 4.34 17.7 4.34 30.29s-1.45 22.76-4.34 30.5c-2.9 7.75-6.63 13.569-11.18 17.479-4.56 3.91-9.52 6.55-14.87 7.92-5.36 1.38-10.57 2.07-15.64 2.07-2.6 0-5.5-.14-8.68-.44-3.19-.29-6.37-.65-9.55-1.09-3.19-.43-6.12-.9-8.79-1.41-2.68-.5-4.89-.83-6.63-.97v50.37h-37.56v.01zm37.56-80.109h27.79c3.33 0 6.05-.871 8.14-2.611 2.1-1.74 3.66-4.34 4.67-7.81 1.01-3.48 1.52-8.04 1.52-13.68 0-5.35-.54-9.73-1.63-13.13-1.08-3.4-2.64-5.929-4.67-7.599s-4.64-2.5-7.82-2.5h-28.01v47.339l.01-.009zM1481.73 355.29V194.181h67.75c6.8 0 13.06.83 18.78 2.5 5.72 1.67 10.71 4.489 14.98 8.469 4.27 3.98 7.6 9.37 9.99 16.17 2.39 6.81 3.58 15.42 3.58 25.84 0 7.09-.65 13.13-1.95 18.13-1.3 4.99-3.04 9.19-5.21 12.59-2.17 3.4-4.67 6.19-7.49 8.36a61.023 61.023 0 01-8.8 5.651l28.88 63.399h-38.22l-24.1-57.319c-1.45 0-3.08-.041-4.88-.111-1.81-.07-3.58-.11-5.32-.11h-10.42v57.54h-37.57zm37.56-87.28h23.45c2.6 0 4.92-.32 6.95-.97 2.03-.66 3.76-1.81 5.21-3.47 1.45-1.67 2.53-3.8 3.26-6.41.72-2.6 1.09-5.859 1.09-9.769s-.37-7.131-1.09-9.661c-.73-2.53-1.81-4.48-3.26-5.86-1.45-1.37-3.18-2.39-5.21-3.04-2.03-.66-4.35-.979-6.95-.979h-23.45v40.17-.011zM1683 356.601c-11.14 0-20.95-1.091-29.42-3.261-8.47-2.17-15.56-6.15-21.28-11.94-5.72-5.79-9.99-14.04-12.81-24.75-2.82-10.71-4.23-24.68-4.23-41.9s1.44-31.01 4.34-41.8c2.89-10.78 7.16-19.07 12.81-24.86 5.65-5.79 12.7-9.8 21.17-12.05 8.47-2.24 18.28-3.37 29.42-3.37s21.17 1.12 29.64 3.37c8.47 2.24 15.52 6.26 21.17 12.05 5.65 5.79 9.88 14.08 12.7 24.86 2.82 10.79 4.23 24.72 4.23 41.8s-1.41 31.2-4.23 41.9c-2.82 10.72-7.09 18.97-12.81 24.75-5.72 5.79-12.78 9.77-21.17 11.94-8.4 2.17-18.24 3.261-29.53 3.261zm0-33.651c5.93 0 10.86-.69 14.77-2.07 3.9-1.37 6.98-3.759 9.22-7.159s3.83-8.251 4.78-14.551c.94-6.29 1.41-14.44 1.41-24.42 0-9.98-.47-18.6-1.41-24.97-.94-6.37-2.53-11.26-4.78-14.66-2.24-3.4-5.32-5.72-9.22-6.95-3.91-1.23-8.83-1.84-14.77-1.84-5.94 0-10.64.61-14.54 1.84-3.91 1.23-6.99 3.55-9.23 6.95-2.24 3.4-3.87 8.29-4.88 14.66-1.02 6.37-1.52 14.69-1.52 24.97s.47 18.13 1.41 24.42c.94 6.3 2.53 11.151 4.77 14.551 2.24 3.4 5.32 5.789 9.23 7.159 3.91 1.38 8.83 2.07 14.76 2.07z"
         fill={props.className}
       />
-      <path d="M1750.75 434.04h-405.37v20.22h405.37v-20.22z" fill="#007D77" />
+      <path
+        d="M1750.75 434.04h-405.37v20.22h405.37v-20.22z"
+        fill={props.className === 'fill-primary' ? '#007D77' : '#F9F9F9'}
+      />
     </svg>
   )
 }

src/components/nav-link.tsx

@@ -6,8 +6,8 @@ import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
 
 export function NavLink() {
   return (
-    <div className="flex items-center">
-      <div className="hidden md:block">
+    <div className="flex items-center flex-1 lg:flex-none">
+      <div className="hidden lg:block">
         <nav className="flex items-start px-2 text-sm font-medium">
           <Button asChild variant="ghost">
             <Link href="#">Para estudantes</Link>
@@ -19,51 +19,54 @@ export function NavLink() {
             <Link href="#">Para empresas</Link>
           </Button>
           <Button asChild variant="ghost">
-            <Link href="#">Conheça a sevenpro</Link>
+            <Link href="#">Conheça a SevenPro</Link>
           </Button>
           <Button asChild variant="ghost">
             <Link href="#">Contato</Link>
           </Button>
         </nav>
       </div>
-      <Button asChild className="uppercase mx-9 text-sm ">
-        <Link href="#">Inscreva-se</Link>
-      </Button>
-      <div className="flex flex-col">
-        <Sheet>
-          <SheetTrigger asChild>
-            <Button
-              variant="outline"
-              size="icon"
-              className="shrink-0 md:hidden"
-            >
-              <Menu className="h-5 w-5" />
-              <span className="sr-only">Toggle navigation menu</span>
-            </Button>
-          </SheetTrigger>
-          <SheetContent
-            side="right"
-            className="flex flex-col bg-primary-main text-white"
-          >
-            <nav className="flex flex-col items-end gap-2 mt-4 text-lg font-light uppercase">
-              <Button asChild variant="ghost">
-                <Link href="#">Para estudantes</Link>
+      <div className="w-full flex items-center">
+        <Button
+          asChild
+          variant="secondary"
+          className="uppercase text-sm mx-auto"
+        >
+          <Link href="#">Inscreva-se</Link>
+        </Button>
+        <div className="flex flex-col">
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                className="shrink-0 lg:hidden"
+              >
+                <Menu className="h-5 w-5" />
+                <span className="sr-only">Toggle navigation menu</span>
               </Button>
-              <Button asChild variant="ghost">
-                <Link href="#">Para profissionais</Link>
-              </Button>
-              <Button asChild variant="ghost">
-                <Link href="#">Para empresas</Link>
-              </Button>
-              <Button asChild variant="ghost">
-                <Link href="#">Conheça a sevenpro</Link>
-              </Button>
-              <Button asChild variant="ghost">
-                <Link href="#">Contato</Link>
-              </Button>
-            </nav>
-          </SheetContent>
-        </Sheet>
+            </SheetTrigger>
+            <SheetContent side="right" className="flex flex-col bg-green-700">
+              <nav className="flex flex-col items-end gap-2 mt-4 text-lg font-light uppercase">
+                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
+                  <Link href="#">Para estudantes</Link>
+                </Button>
+                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
+                  <Link href="#">Para profissionais</Link>
+                </Button>
+                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
+                  <Link href="#">Para empresas</Link>
+                </Button>
+                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
+                  <Link href="#">Conheça a SevenPro</Link>
+                </Button>
+                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
+                  <Link href="#">Contato</Link>
+                </Button>
+              </nav>
+            </SheetContent>
+          </Sheet>
+        </div>
       </div>
     </div>
   )

src/components/theme-switcher.tsx

@@ -5,7 +5,7 @@ import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { Button } from './ui/button'
 
-export default function ThemeSwitcher() {
+export function ThemeSwitcher() {
   const { setTheme, theme } = useTheme()
   const hasMounted = useHasMounted()
 

src/components/ui/button.tsx

@@ -5,13 +5,13 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-2xl ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary-main text-primary hover:bg-primary-main-hover',
+        default: 'bg-green-700 text-primary hover:bg-green-700/90',
         secondary:
-          'bg-secondary-main text-secondary-foreground hover:bg-secondary-main-hover',
+          'bg-purple-100 text-secondary-foreground hover:bg-purple-100/90',
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
@@ -20,7 +20,7 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-10 px-4 py-2',
+        default: 'h-10 px-5 py-2',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',

src/styles/globals.css

@@ -5,15 +5,15 @@
   @layer base {
     :root {
       --background: 0 0% 100%;
-      --foreground: 240 10% 3.9%;
+      --foreground: 0, 0%, 11%;
 
       --card: 0 0% 100%;
-      --card-foreground: 240 10% 3.9%;
+      --card-foreground: 0, 0%, 11%;
 
       --popover: 0 0% 100%;
-      --popover-foreground: 240 10% 3.9%;
+      --popover-foreground: 0, 0%, 11%;
 
-      --primary: 0 0% 11%;
+      --primary: 240 5.9% 10%;
       --primary-foreground: 0 0% 98%;
 
       --secondary: 240 4.8% 95.9%;
@@ -25,37 +25,30 @@
       --accent: 240 4.8% 95.9%;
       --accent-foreground: 240 5.9% 10%;
 
-      --destructive: #991117;
+      --destructive: 0 84.2% 60.2%;
       --destructive-foreground: 0 0% 98%;
 
       --border: 240 5.9% 90%;
       --input: 240 5.9% 90%;
-      --ring: 240 10% 3.9%;
+      --ring: 0, 0%, 11%;
 
       --radius: 0.5rem;
-
-      --disabled: #5B5B5B;
-      --primary-main: #26AAA7;
-      --primary-hover: #036D67;
-      --secondary-main: #BA68C8;
-      --secondary-hover: #7B1FA2;
-      --yellow-500: #FFEB3B;
     }
 
     .dark {
-      --background: #1C1C1C;
+      --background: 0, 0%, 11%;
       --foreground: 0 0% 98%;
 
-      --card: 240 10% 3.9%;
+      --card: 0, 0%, 11%;
       --card-foreground: 0 0% 98%;
 
-      --popover: 240 10% 3.9%;
+      --popover: 0, 0%, 11%;
       --popover-foreground: 0 0% 98%;
 
-      --primary: #F9F9F9;
+      --primary: 0 0% 98%;
       --primary-foreground: 240 5.9% 10%;
 
-      --secondary: #F3F3F3;
+      --secondary: 240 3.7% 15.9%;
       --secondary-foreground: 0 0% 98%;
 
       --muted: 240 3.7% 15.9%;
@@ -64,19 +57,12 @@
       --accent: 240 3.7% 15.9%;
       --accent-foreground: 0 0% 98%;
 
-      --destructive: #991117;
+      --destructive: 0 62.8% 30.6%;
       --destructive-foreground: 0 0% 98%;
 
       --border: 240 3.7% 15.9%;
       --input: 240 3.7% 15.9%;
       --ring: 240 4.9% 83.9%;
-
-      --disabled: #5B5B5B;
-      --primary-main: #007D77;
-      --primary-hover: #036D67;
-      --secondary-main: #9C27B0;
-      --secondary-hover: #7B1FA2;
-      --yellow-500: #FFEB3B;
     }
   }
 

tailwind.config.ts

@@ -20,37 +20,49 @@ const config = {
     extend: {
       colors: {
         green: {
+          50: '#6CB876',
+          100: '#397A41',
           400: '#26AAA7',
           700: '#007D77',
           800: '#036D67',
           900: '#045149',
         },
         yellow: {
-          500: 'var(--yellow-500)',
+          100: '#FFEB3B',
         },
-        'primary-main': {
-          DEFAULT: 'var(--primary-main)',
-          hover: 'var(--primary-hover)',
+        purple: {
+          100: '#9C27B0',
+          200: '#7B1FA2',
         },
-        'secondary-main': {
-          DEFAULT: 'var(--secondary-main)',
-          hover: 'var(--secondary-hover)',
+        gray: {
+          50: '#F9F9F9',
+          100: '#3C3C3C',
+          900: '#1C1C1C',
+        },
+        red: {
+          100: '#991117',
+        },
+        orange: {
+          100: '#EF6C00',
+        },
+        blue: {
+          100: '#0277BD',
         },
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
-        background: 'var(--background)',
+        background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: 'var(--primary)',
+          DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: 'var(--secondary)',
+          DEFAULT: 'hsl(var(--secondary))',
           foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: 'var(--destructive)',
+          DEFAULT: 'hsl(var(--destructive))',
           foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {