feat: add images and banners

src/app/(home)/page.tsx

@@ -14,6 +14,7 @@ import Link from 'next/link'
 export default function Home() {
   return (
     <>
+      <div className="absolute h-[200px] w-full bg-gradient-to-b from-gray-900 from-5% z-10" />
       <main className="overflow-hidden">
         <Banner />
 
@@ -21,7 +22,7 @@ export default function Home() {
           <NavLinkCategory />
           <div className="flex justify-center items-center w-full md:w-1/2 mx-auto mb-8">
             <TextField
-              label="O que você quer aprender hojeaa?"
+              label="O que você quer aprender hoje?"
               variant="standard"
               type="text"
               className="w-full"

src/app/estudantes/page.tsx

@@ -12,7 +12,7 @@ import { Calendar, Clock4, User } from 'lucide-react'
 export default function Students() {
   return (
     <main>
-      <BannerCategory title="Estudante" />
+      <BannerCategory title="Estudantes" />
       <NavLinkCategory />
       <SearchFilter />
       <div className="grid rounded-none grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid-rows-3 lg:grid-rows-2 gap-4 md:gap-6 p-6">

src/components/banner-category.tsx

+import Image from 'next/image'
+import bannerBusiness from '../../public/images/banners/business_banner_01.jpg'
+import bannerProfessional from '../../public/images/banners/professional_banner.jpg'
+import bannerStudants from '../../public/images/banners/students_banner.jpg'
+
 type BannerProps = {
   title: string
 }
 export function BannerCategory({ title }: BannerProps) {
   return (
-    <div className=" h-[300px] flex items-center justify-end bg-green-900">
-      <div className="container">
-        <h1>{title}</h1>
-      </div>
+    <div className=" h-[300px] flex items-center justify-end">
+      <Image
+        alt="banner"
+        className="w-full h-full object-cover object-left-top"
+        src={
+          title === 'Estudantes'
+            ? bannerStudants
+            : title === 'Profissionais'
+              ? bannerProfessional
+              : bannerBusiness
+        }
+      />
     </div>
   )
 }

src/components/card/card-title.tsx

@@ -4,7 +4,7 @@ type CardTitleProps = {
 
 export function CardTitle({ title }: CardTitleProps) {
   return (
-    <span className="text-center text-lg text-gray-50 lg:text-2xl px-1 pb-8">
+    <span className="text-center text-lg text-gray-50 lg:text-2xl px-1 pb-6">
       {title}
     </span>
   )

src/components/header.tsx

+'use client'
+
 import { ThemeSwitcher } from '@/components/theme-switcher'
 import { Button } from '@/components/ui/button'
 import {
@@ -8,119 +10,121 @@ import {
 } from '@/components/ui/sheet'
 import { Menu } from 'lucide-react'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 import LogoComponent from './logo'
 import { NavLink } from './nav-link'
 
 export function Header() {
+  const pathname = usePathname()
+
   return (
-    <>
-      <div className="absolute h-[200px] w-full bg-gradient-to-b from-gray-900 from-5% z-10" />
-      <header className="w-full md:px-6 py-5 absolute z-50 overflow-hidden">
-        <div className="container mx-auto flex justify-between gap-4">
-          <Link href="/">
-            <LogoComponent width={115} height={32} className="fill-primary" />
-          </Link>
-          <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">
-                <NavLink variant="ghost" href="/estudantes">
-                  Para estudantes
-                </NavLink>
-                <NavLink variant="ghost" href="/profissionais">
-                  Para profissionais
-                </NavLink>
+    <header
+      className={`w-full md:px-6 py-5 overflow-hidden ${pathname === '/' && 'absolute z-50'}`}
+    >
+      <div className="container mx-auto flex justify-between gap-4">
+        <Link href="/">
+          <LogoComponent width={115} height={32} className="#F9F9F9" />
+        </Link>
+        <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">
+              <NavLink variant="ghost" href="/estudantes">
+                Para estudantes
+              </NavLink>
+              <NavLink variant="ghost" href="/profissionais">
+                Para profissionais
+              </NavLink>
 
-                <NavLink variant="ghost" href="/empresas">
-                  Para empresas
-                </NavLink>
-                <NavLink variant="ghost" href="/sobre">
-                  Conheça a SevenPro
-                </NavLink>
-                <NavLink variant="ghost" href="/contato">
-                  Contato
-                </NavLink>
-              </nav>
-            </div>
-            <div className="w-full flex items-center gap-4">
-              <Button
-                asChild
-                variant="secondary"
-                className="uppercase text-sm mx-auto"
-              >
-                <Link href="/inscricao">Inscreva-se</Link>
-              </Button>
-              <ThemeSwitcher />
-              <div className="flex flex-col">
-                <Sheet>
-                  <SheetTrigger asChild>
-                    <Button
+              <NavLink variant="ghost" href="/empresas">
+                Para empresas
+              </NavLink>
+              <NavLink variant="ghost" href="/sobre">
+                Conheça a SevenPro
+              </NavLink>
+              <NavLink variant="ghost" href="/contato">
+                Contato
+              </NavLink>
+            </nav>
+          </div>
+          <div className="w-full flex items-center gap-4">
+            <Button
+              asChild
+              variant="secondary"
+              className="uppercase text-sm mx-auto"
+            >
+              <Link href="/inscricao">Inscreva-se</Link>
+            </Button>
+            <ThemeSwitcher />
+            <div className="flex flex-col">
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="shrink-0 lg:hidden"
+                  >
+                    <Menu className="h-5 w-5 text-white" />
+                  </Button>
+                </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">
+                    <NavLink
+                      className="hover:bg-gray-50/10"
                       variant="ghost"
-                      size="icon"
-                      className="shrink-0 lg:hidden"
+                      href="/estudantes"
                     >
-                      <Menu className="h-5 w-5" />
-                    </Button>
-                  </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">
-                      <NavLink
-                        className="hover:bg-gray-50/10"
-                        variant="ghost"
-                        href="/estudantes"
-                      >
-                        <SheetClose className="uppercase">
-                          Para estudantes
-                        </SheetClose>
-                      </NavLink>
+                      <SheetClose className="uppercase">
+                        Para estudantes
+                      </SheetClose>
+                    </NavLink>
 
-                      <NavLink
-                        className="hover:bg-gray-50/10"
-                        variant="ghost"
-                        href="/profissionais"
-                      >
-                        <SheetClose className="uppercase">
-                          Para profissionais
-                        </SheetClose>
-                      </NavLink>
+                    <NavLink
+                      className="hover:bg-gray-50/10"
+                      variant="ghost"
+                      href="/profissionais"
+                    >
+                      <SheetClose className="uppercase">
+                        Para profissionais
+                      </SheetClose>
+                    </NavLink>
 
-                      <NavLink
-                        className="hover:bg-gray-50/10"
-                        variant="ghost"
-                        href="/empresas"
-                      >
-                        <SheetClose className="uppercase">
-                          Para empresas
-                        </SheetClose>
-                      </NavLink>
+                    <NavLink
+                      className="hover:bg-gray-50/10"
+                      variant="ghost"
+                      href="/empresas"
+                    >
+                      <SheetClose className="uppercase">
+                        Para empresas
+                      </SheetClose>
+                    </NavLink>
 
-                      <NavLink
-                        className="hover:bg-gray-50/10"
-                        variant="ghost"
-                        href="/sobre"
-                      >
-                        <SheetClose className="uppercase">
-                          Conheça a SevenPro
-                        </SheetClose>
-                      </NavLink>
+                    <NavLink
+                      className="hover:bg-gray-50/10"
+                      variant="ghost"
+                      href="/sobre"
+                    >
+                      <SheetClose className="uppercase">
+                        Conheça a SevenPro
+                      </SheetClose>
+                    </NavLink>
 
-                      <NavLink
-                        className="hover:bg-gray-50/10"
-                        variant="ghost"
-                        href="/contato"
-                      >
-                        <SheetClose className="uppercase">Contato</SheetClose>
-                      </NavLink>
-                    </nav>
-                  </SheetContent>
-                </Sheet>
-              </div>
+                    <NavLink
+                      className="hover:bg-gray-50/10"
+                      variant="ghost"
+                      href="/contato"
+                    >
+                      <SheetClose className="uppercase">Contato</SheetClose>
+                    </NavLink>
+                  </nav>
+                </SheetContent>
+              </Sheet>
             </div>
           </div>
         </div>
-      </header>
-    </>
+      </div>
+    </header>
   )
 }

src/components/logo.tsx

@@ -17,7 +17,7 @@ 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={props.className === 'fill-primary' ? '#007D77' : '#F9F9F9'}
+        fill={props.className === '#F9F9F9' ? '#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"
@@ -25,7 +25,7 @@ function LogoComponent(props: ComponentProps<'svg'>) {
       />
       <path
         d="M1750.75 434.04h-405.37v20.22h405.37v-20.22z"
-        fill={props.className === 'fill-primary' ? '#007D77' : '#F9F9F9'}
+        fill={props.className === '#F9F9F9' ? '#007D77' : '#F9F9F9'}
       />
     </svg>
   )

src/utils/courses-array.ts

 import banner from '../../public/images/banner.png'
+import ImageAlphabetCourse from '../../public/images/courses/alphabet.jpg'
+import ImageHumanCourse from '../../public/images/courses/development_human.jpg'
+import ImageEducationCourse from '../../public/images/courses/education.jpg'
+import ImageFamilyCourse from '../../public/images/courses/family.jpg'
+import ImageStudentsCourse from '../../public/images/courses/students.jpg'
 import ImageCoverCourse from '../../public/images/cover-course.png'
 
 type CoursesCardTypes = {
@@ -13,10 +18,10 @@ type CoursesCardTypes = {
 export const CoursesCard: CoursesCardTypes[] = [
   {
     id: '1',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
+    image: ImageHumanCourse,
+    title: 'Família e Desenvolvimento Humano',
+    hours: '90 h / Curso rápido',
+    category: 'educação',
     calender: 'Início imediato',
   },
   {
@@ -29,31 +34,31 @@ export const CoursesCard: CoursesCardTypes[] = [
   },
   {
     id: '3',
-    image: banner,
-    title: 'Gestão em Projetos',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
+    image: ImageAlphabetCourse,
+    title: 'ALFABETIZAÇÃO e LETRAMENTO',
+    hours: '90 h / Curso rápido',
+    category: 'educação',
     calender: 'Início imediato',
   },
   {
     id: '4',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
+    image: ImageEducationCourse,
+    title: 'EDUCAÇÃO ESPECIAL',
+    hours: '90 h / Curso rápido',
+    category: 'educação',
     calender: 'Início imediato',
   },
   {
     id: '5',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
+    image: ImageFamilyCourse,
+    title: 'Família e Comunicação',
+    hours: '90 h / Curso rápido',
+    category: 'comunicação',
     calender: 'Início imediato',
   },
   {
     id: '6',
-    image: ImageCoverCourse,
+    image: banner,
     title: 'Gestão em Saúde',
     hours: '30 h / Curso rápido',
     category: 'estudante',
@@ -61,10 +66,10 @@ export const CoursesCard: CoursesCardTypes[] = [
   },
   {
     id: '7',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
+    image: ImageStudentsCourse,
+    title: 'Fundamentos da Coordenação Pedagógica',
     hours: '30 h / Curso rápido',
-    category: 'estudante',
+    category: 'educação',
     calender: 'Início imediato',
   },
   {