feat create home page components

public/images/certificate-outline.svg

+<svg width="72" height="65" viewBox="0 0 72 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.8888 64.6133L47 61.0578L54.111 64.6133V39.7245H39.8888M54.111 21.9466V14.8354L47 18.3911L39.8888 14.8354V21.9466L32.7776 25.5021L39.8888 29.0578V36.1688L47 32.6133L54.111 36.1688V29.0578L61.2222 25.5021M64.7776 0.613281H7.8888C6.00282 0.613281 4.19409 1.36248 2.8605 2.69607C1.52691 4.02966 0.77771 5.83841 0.77771 7.7244V43.2799C0.77771 45.1658 1.52691 46.9746 2.8605 48.3083C4.19409 49.6419 6.00282 50.3911 7.8888 50.3911H32.7776V43.2799H7.8888V7.7244H64.7776V43.2799H61.2222V50.3911H64.7776C66.6637 50.3911 68.4723 49.6419 69.806 48.3083C71.1396 46.9746 71.8888 45.1658 71.8888 43.2799V7.7244C71.8888 5.83841 71.1396 4.02966 69.806 2.69607C68.4723 1.36248 66.6637 0.613281 64.7776 0.613281ZM32.7776 18.3911H11.4444V11.2799H32.7776M25.6667 29.0578H11.4444V21.9466H25.6667M32.7776 39.7245H11.4444V32.6133H32.7776V39.7245Z" fill="#6CB876"/>
+</svg>

public/images/school-online.svg

+<svg width="79" height="65" viewBox="0 0 79 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M71.6665 0.613281H7.66654C5.78055 0.613281 3.97182 1.36248 2.63824 2.69607C1.30462 4.02966 0.55542 5.83841 0.55542 7.7244V18.3911H7.66654V7.7244H71.6665V57.5021H46.7777V64.6133H71.6665C73.5526 64.6133 75.3612 63.8641 76.6948 62.5304C78.0285 61.1968 78.7777 59.3882 78.7777 57.5021V7.7244C78.7777 5.83841 78.0285 4.02966 76.6948 2.69607C75.3612 1.36248 73.5526 0.613281 71.6665 0.613281ZM0.55542 53.9466V64.6133H11.2221C11.2221 61.7844 10.0983 59.0713 8.09791 57.0708C6.0975 55.0703 3.38441 53.9466 0.55542 53.9466ZM0.55542 39.7245V46.8354C2.89004 46.8354 5.2018 47.2952 7.35868 48.1888C9.51559 49.0821 11.4754 50.3916 13.1262 52.0425C14.777 53.6933 16.0865 55.653 16.9799 57.81C17.8734 59.967 18.3332 62.2786 18.3332 64.6133H25.4444C25.4444 58.0124 22.8222 51.6819 18.1545 47.0141C13.487 42.3466 7.15637 39.7245 0.55542 39.7245ZM0.55542 25.5021V32.6133C4.75772 32.6133 8.91889 33.441 12.8013 35.0492C16.6837 36.6574 20.2114 39.0145 23.1828 41.9858C26.1543 44.9574 28.5115 48.485 30.1197 52.3675C31.7278 56.2499 32.5553 60.411 32.5553 64.6133H39.6665C39.6665 42.9954 22.1376 25.5021 0.55542 25.5021ZM36.111 29.3777V36.4889L48.5553 43.2799L60.9998 36.4889V29.3777L48.5553 36.1688L36.111 29.3777ZM48.5553 11.2799L28.9998 21.9466L48.5553 32.6133L68.111 21.9466L48.5553 11.2799Z" fill="#6CB876"/>
+</svg>

public/images/table-clock.svg

+<svg width="68" height="65" viewBox="0 0 68 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.7998 41.6372L54.6079 46.1493L52.2078 50.3092L41.9998 44.4213V32.6132H46.7998V41.6372ZM57.9999 23.8453V7.01328C57.9999 5.31589 57.3256 3.68802 56.1253 2.48779C54.925 1.28756 53.2973 0.613281 51.5998 0.613281H6.79988C3.2799 0.613281 0.399902 3.49328 0.399902 7.01328V45.4133C0.399902 47.1106 1.07418 48.7385 2.27441 49.9388C3.47464 51.1388 5.10251 51.8131 6.79988 51.8131H24.9759C28.5919 59.3652 36.2718 64.6133 45.1999 64.6133C57.5838 64.6133 67.5998 54.5973 67.5998 42.2132C67.5998 34.5972 63.7919 27.9093 57.9999 23.8453ZM51.5998 13.4132V20.7412C49.5839 20.1652 47.4399 19.8133 45.1999 19.8133C40.4 19.8133 36.0158 21.3172 32.3998 23.8453V13.4132H51.5998ZM6.79988 13.4132H26V26.2133H6.79988V13.4132ZM6.79988 45.4133V32.6132H24.9759C23.5498 35.613 22.8066 38.8917 22.7998 42.2132C22.7998 43.3013 22.8959 44.3572 23.0559 45.4133H6.79988ZM45.1999 58.2132C36.368 58.2132 29.1999 51.0452 29.1999 42.2132C29.1999 33.3812 36.368 26.2133 45.1999 26.2133C54.0319 26.2133 61.1998 33.3812 61.1998 42.2132C61.1998 51.0452 54.0319 58.2132 45.1999 58.2132Z" fill="#6CB876"/>
+</svg>

src/app/(home)/page.tsx

@@ -3,16 +3,22 @@ import { Footer } from '@/components/footer'
 import { Header } from '@/components/header'
 import { SignUp } from '../../components/sign-up'
 import { Hub } from '../../components/hub'
+import { Benefits } from '@/components/benefits'
+import { CourseCategory } from '@/components/course-category'
+import { Courses } from '@/components/courses'
 // import { ThemeSwitcher } from '@/components/theme-switcher'
 
 export default function Home() {
   return (
     <>
       <Header />
-      <main className="">
+      <main className="overflow-hidden">
         <Banner />
 
         {/* <ThemeSwitcher /> */}
+        <Courses />
+        <CourseCategory />
+        <Benefits />
         <SignUp />
         <Hub />
       </main>

src/app/layout.tsx

@@ -3,7 +3,7 @@ import '@/styles/globals.css'
 import type { Metadata } from 'next'
 import { Poppins } from 'next/font/google'
 
-const poppins = Poppins({ subsets: ['latin'], weight: ['300', '400'] })
+const poppins = Poppins({ subsets: ['latin'], weight: ['300', '400', '800'] })
 
 export const metadata: Metadata = {
   title: 'Seven Pro',

src/components/banner.tsx

@@ -9,7 +9,7 @@ export function Banner() {
       <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">
+        <h1 className="absolute z-20 font-thin text-lg md:text-4xl bottom-24 left-7 max-w-60 md:max-w-72 text-primary border-b-4 border-green-700 pb-4">
           Transforme sua vida através do conhecimento
         </h1>
         <Image
@@ -19,7 +19,7 @@ export function Banner() {
           unoptimized
         />
         <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 className="block 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/benefits.tsx

+import Image from 'next/image'
+
+import schoolOnline from '../../public/images/school-online.svg'
+import tableClock from '../../public/images/table-clock.svg'
+import certificateOutline from '../../public/images/certificate-outline.svg'
+
+export function Benefits() {
+  return (
+    <section className="hidden md:flex">
+      <div className="container h-80">
+        <ul className="flex h-full justify-around items-center gap-2">
+          <li className="flex flex-col items-center gap-4">
+            <Image width={72} src={schoolOnline} alt="100% online" />
+            <span className="text-gray-50 font-extrabold text-3xl">
+              100% online
+            </span>
+          </li>
+          <li className="flex flex-col items-center gap-4">
+            <Image width={72} src={tableClock} alt="Prazos flexíveis" />
+            <span className="text-gray-50 font-extrabold text-3xl">
+              Prazos flexíveis
+            </span>
+          </li>
+          <li className="flex flex-col items-center gap-4">
+            <Image width={72} src={certificateOutline} alt="Certificados" />
+            <span className="text-gray-50 font-extrabold text-3xl">
+              Certificados
+            </span>
+          </li>
+        </ul>
+      </div>
+    </section>
+  )
+}

src/components/course-category.tsx

+import Image from 'next/image'
+
+import ImageFast from '../../public/images/fast.png'
+import ImageDeepen from '../../public/images/deepen.png'
+import ImageCorporate from '../../public/images/corporate.png'
+
+export function CourseCategory() {
+  return (
+    <section className="hidden md:block">
+      <div className="container h-auto flex justify-center items-center my-20">
+        <ul className="flex justify-center items-center gap-4">
+          <li className="max-w-[420px] bg-green-600 rounded-lg flex flex-col justify-between pb-4 gap-4 items-center">
+            <Image
+              src={ImageFast}
+              alt="Rápido"
+              className="rounded-t-lg object-cover"
+            />
+            <h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
+              Rápido
+            </h4>
+            <p className="text-center text-sm lg:text-base">
+              Encontre o curso ideal para sua rotina etc
+            </p>
+          </li>
+          <li className="max-w-[420px] bg-green-600 rounded-lg flex flex-col justify-between pb-4 gap-4 items-center">
+            <Image
+              src={ImageDeepen}
+              alt="Aprofundamento"
+              className="rounded-t-lg object-cover"
+            />
+            <h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
+              Aprofundamento
+            </h4>
+            <p className="text-center text-sm lg:text-base">
+              Encontre o curso ideal para sua rotina etc
+            </p>
+          </li>
+          <li className="max-w-[420px] bg-green-600 rounded-lg flex flex-col justify-between pb-4 gap-4 items-center">
+            <Image
+              src={ImageCorporate}
+              alt="Corporativos"
+              className="rounded-t-lg object-cover"
+            />
+            <h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
+              Corporativos
+            </h4>
+            <p className="text-center text-sm lg:text-base">
+              Encontre o curso ideal para sua rotina etc
+            </p>
+          </li>
+        </ul>
+      </div>
+    </section>
+  )
+}

src/components/courses.tsx

+import Link from 'next/link'
+import Image from 'next/image'
+
+import { Button } from './ui/button'
+import { Input } from './ui/input'
+import { Calendar, Clock4, Search, User } from 'lucide-react'
+
+import ImageCoverCourse from '../../public/images/cover-course.png'
+
+export function Courses() {
+  return (
+    <section className="py-10">
+      <div className="container flex flex-col">
+        <ul className="flex flex-wrap justify-center items-center gap-8">
+          <li>
+            <Button asChild className="uppercase">
+              <Link href="#">Tecnologia</Link>
+            </Button>
+          </li>
+          <li>
+            <Button asChild className="uppercase">
+              <Link href="#">Negócios</Link>
+            </Button>
+          </li>
+          <li>
+            <Button asChild className="uppercase">
+              <Link href="#">Saúde</Link>
+            </Button>
+          </li>
+          <li>
+            <Button asChild className="uppercase">
+              <Link href="#">Educação</Link>
+            </Button>
+          </li>
+          <li>
+            <Button asChild className="uppercase">
+              <Link href="#">Comunicação</Link>
+            </Button>
+          </li>
+          <li>
+            <Button asChild className="uppercase">
+              <Link href="#">Teologia</Link>
+            </Button>
+          </li>
+        </ul>
+        <div className="flex justify-center items-center w-1/2 mx-auto my-8">
+          <Input placeholder="O que você quer aprender hoje?" />
+          <Search />
+        </div>
+        <ul className="w-full flex justify-start xl:justify-center gap-6 overflow-x-auto">
+          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
+            <Link href="#">
+              <div className="relative">
+                <Image
+                  src={ImageCoverCourse}
+                  alt="Capa do curso"
+                  className="object-cover rounded-lg w-full h-auto"
+                />
+                <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
+                  <span className="pb-8 text-2xl">Gestão em Saúde</span>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <Clock4 size={16} />
+                <span className="text-sm">30 h / Curso rápido</span>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <User size={16} />
+                <span className="text-sm">Estudante</span>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <Calendar size={16} />
+                <span className="text-sm">Início imediato</span>
+              </div>
+            </Link>
+          </li>
+          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
+            <Link href="#">
+              <div className="relative">
+                <Image
+                  src={ImageCoverCourse}
+                  alt="Capa do curso"
+                  className="object-cover rounded-lg w-full h-auto"
+                />
+                <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
+                  <span className="pb-8 text-2xl">Gestão em Saúde</span>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <Clock4 size={16} />
+                <span className="text-sm">30 h / Curso rápido</span>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <User size={16} />
+                <span className="text-sm">Estudante</span>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <Calendar size={16} />
+                <span className="text-sm">Início imediato</span>
+              </div>
+            </Link>
+          </li>
+          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
+            <Link href="#">
+              <div className="relative">
+                <Image
+                  src={ImageCoverCourse}
+                  alt="Capa do curso"
+                  className="object-cover rounded-lg w-full h-auto"
+                />
+                <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
+                  <span className="pb-8 text-2xl">Gestão em Saúde</span>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <Clock4 size={16} />
+                <span className="text-sm">30 h / Curso rápido</span>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <User size={16} />
+                <span className="text-sm">Estudante</span>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <Calendar size={16} />
+                <span className="text-sm">Início imediato</span>
+              </div>
+            </Link>
+          </li>
+          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
+            <Link href="#">
+              <div className="relative">
+                <Image
+                  src={ImageCoverCourse}
+                  alt="Capa do curso"
+                  className="object-cover rounded-lg w-full h-auto"
+                />
+                <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
+                  <span className="pb-8 text-2xl">Gestão em Saúde</span>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <Clock4 size={16} />
+                <span className="text-sm">30 h / Curso rápido</span>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <User size={16} />
+                <span className="text-sm">Estudante</span>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <Calendar size={16} />
+                <span className="text-sm">Início imediato</span>
+              </div>
+            </Link>
+          </li>
+          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
+            <Link href="#">
+              <div className="relative">
+                <Image
+                  src={ImageCoverCourse}
+                  alt="Capa do curso"
+                  className="object-cover rounded-lg w-full h-auto"
+                />
+                <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
+                  <span className="pb-8 text-2xl">Gestão em Saúde</span>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <Clock4 size={16} />
+                <span className="text-sm">30 h / Curso rápido</span>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <User size={16} />
+                <span className="text-sm">Estudante</span>
+              </div>
+              <div className="flex items-center gap-2 p-2">
+                <Calendar size={16} />
+                <span className="text-sm">Início imediato</span>
+              </div>
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </section>
+  )
+}

src/components/header.tsx

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

src/components/nav-link.tsx

@@ -26,7 +26,7 @@ export function NavLink() {
           </Button>
         </nav>
       </div>
-      <div className="w-full flex items-center">
+      <div className="w-full flex items-center gap-4">
         <Button
           asChild
           variant="secondary"

tailwind.config.ts

@@ -23,6 +23,7 @@ const config = {
           50: '#6CB876',
           100: '#397A41',
           400: '#26AAA7',
+          600: '#008D88',
           700: '#007D77',
           800: '#036D67',
           900: '#045149',