push branch dev

cac76b8a · Wellton Quirino · 8a7db5cb · cac76b8a · cac76b8a · cac76b8a
Commit cac76b8a authored Jun 08, 2024 by Wellton Quirino
31 changed files
--- a/.eslintrc.json
+++ b/.eslintrc.json
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "@rocketseat/eslint-config/next", 
+    "next/core-web-vitals"
+  ]
 }
--- a/components.json
+++ b/components.json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,18 +9,27 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.383.0",
+    "next": "14.2.3",
+    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
-    "next": "14.2.3"
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@rocketseat/eslint-config": "^2.2.2",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "typescript": "^5"
  }
 }
--- a/public/images/banner.png
+++ b/public/images/banner.png
--- a/public/images/img-footer.svg
+++ b/public/images/img-footer.svg
+<svg width="140" height="29" viewBox="0 0 140 29" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="140" height="29" fill="url(#pattern0_7855_3014)"/>
+<defs>
+<pattern id="pattern0_7855_3014" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_7855_3014" transform="scale(0.00714286 0.0344828)"/>
+</pattern>
+<image id="image0_7855_3014" width="140" height="29" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
--- a/public/images/logo.png
+++ b/public/images/logo.png
--- a/public/next.svg
+++ b/public/next.svg
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
--- a/public/vercel.svg
+++ b/public/vercel.svg
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
--- a/src/app/(home)/page.tsx
+++ b/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'
+
+export default function Home() {
+  return (
+    <div className="antialiased">
+      <Header />
+      <Banner />
+      <main>
+        Main
+        <ThemeSwitcher />
+      </main>
+      <Footer />
+    </div>
+  )
+}
--- a/src/app/details/components/Button.tsx
+++ b/src/app/details/components/Button.tsx
+export function Button() {
+  return <div>Button</div>
+}
--- a/src/app/details/hooks/use-details.tsx
+++ b/src/app/details/hooks/use-details.tsx
+
+export function useDetails() {
+  return (
+    <div>useDetails</div>
+  )
+}
--- a/src/app/details/page.tsx
+++ b/src/app/details/page.tsx
+export default function Details() {
+  return <div>opa</div>
+}
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/globals.css
+++ b/src/app/globals.css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import { ThemeProvider } from '@/components/providers/theme-provider'
+import '@/styles/globals.css'
+import type { Metadata } from 'next'
+import { Poppins } from 'next/font/google'

-const inter = Inter({ subsets: ["latin"] });
+const poppins = Poppins({ subsets: ['latin'], weight: ['300', '400'] })

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'Seven Pro',
+  description: 'Transforme sua vida através do conhecimento',
+}

 export default function RootLayout({
  children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="pt-BR">
+      <body className={poppins.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
    </html>
-  );
+  )
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Docs{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Learn{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Templates{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Deploy{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  );
-}
--- a/src/app/users/page.tsx
+++ b/src/app/users/page.tsx
+export default function Users() {
+  return <div>Users</div>
+}
--- a/src/components/banner.tsx
+++ b/src/components/banner.tsx
+import Image from 'next/image'
+import React from 'react'
+
+import banner from '../../public/images/banner.png'
+
+export function Banner() {
+  return (
+    <div className="w-full h-[400px]">
+      <div />
+      <Image
+        src={banner}
+        className="absolute right-0"
+        alt="Banner"
+        unoptimized
+      />
+    </div>
+  )
+}
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
+import Image from 'next/image'
+
+import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+import imgFooter from '../../public/images/img-footer.svg'
+import { Button } from './ui/button'
+
+export function Footer() {
+  return (
+    <footer className="px-6 py-10 bg-primary-main">
+      <Image src={imgFooter} alt="Educação Adventista" />
+      <nav className="py-8">
+        <ul>
+          <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>
+  )
+}
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
+import LogoComponent from './logo'
+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" />
+
+      <NavLink />
+    </header>
+  )
+}
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
+import { ComponentProps } from 'react'
+
+function LogoComponent(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width={1801}
+      height={500}
+      viewBox="0 0 1801 500"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M137.83 456.37c-7.29 0-14.63-.24-22.03-.71-7.41-.47-14.7-1.119-21.86-1.939-7.17-.81-14.11-1.821-20.8-2.991-6.69-1.18-12.86-2.47-18.51-3.87v-48.31c7.52.71 15.87 1.3 25.03 1.77 9.16.47 18.51.82 28.03 1.05 9.52.24 18.51.351 26.97.351 8.46 0 15.22-.641 20.97-1.941 5.76-1.29 10.17-3.52 13.23-6.69 3.05-3.18 4.58-7.58 4.58-13.23v-6.69c0-6.35-2.07-11.159-6.17-14.449-4.12-3.29-9.34-4.931-15.69-4.931h-20.45c-26.33 0-46.31-5.76-59.93-17.28-13.63-11.51-20.45-30.899-20.45-58.159V266c0-25.61 7.52-44.59 22.56-56.93 15.04-12.34 36.67-18.509 64.87-18.509 10.35 0 20.33.539 29.97 1.589 9.63 1.06 18.8 2.301 27.49 3.701 8.69 1.42 16.33 2.949 22.91 4.589v47.94c-10.81-.71-22.91-1.409-36.31-2.109-13.39-.71-25.62-1.061-36.66-1.061-7.29 0-13.75.65-19.39 1.94-5.64 1.3-9.99 3.64-13.04 7.05-3.06 3.41-4.58 8.41-4.58 14.99v4.93c0 7.53 2.17 13.04 6.52 16.57 4.34 3.52 10.98 5.29 19.92 5.29h24.32c16.22 0 29.62 2.991 40.2 8.991 10.58 6 18.51 14.22 23.79 24.67 5.29 10.46 7.94 22.269 7.94 35.429v13.04c0 21.63-3.83 38.071-11.47 49.361-7.63 11.28-18.45 18.929-32.43 22.909-13.98 4-30.5 6-49.53 6v-.01zM333.13 456.37c-5.64 0-12.28-.59-19.92-1.76-7.64-1.18-14.99-3.7-22.03-7.58-7.05-3.87-12.93-9.87-17.63-17.98-4.71-8.11-7.05-19.09-7.05-32.97V255.41c0-12.21 1.93-22.44 5.81-30.67 3.87-8.22 8.82-14.63 14.8-19.21 6-4.58 12.75-7.87 20.27-9.87 7.52-2 14.8-2.99 21.86-2.99 18.79 0 35.13.3 49 .88 13.86.58 26.09 1.23 36.66 1.94 10.58.7 20.1 1.411 28.56 2.111v51.469h-95.89c-6.34 0-11.28 1.47-14.8 4.41-3.52 2.94-5.29 7.57-5.29 13.92v28.911l98.71 3.519v47.95l-98.71 3.18v27.49c0 5.17.82 9.23 2.47 12.16 1.64 2.94 3.88 5.11 6.7 6.52 2.82 1.41 5.87 2.11 9.16 2.11h97.65v51.12c-10.34 1.19-21.85 2.24-34.54 3.18-12.69.94-25.56 1.59-38.61 1.94-13.04.35-25.44.64-37.19.88l.01.01zM842.76 456.37c-5.64 0-12.28-.59-19.92-1.76-7.64-1.18-14.99-3.7-22.03-7.58-7.05-3.87-12.93-9.87-17.63-17.98-4.71-8.11-7.05-19.09-7.05-32.97V255.41c0-12.21 1.93-22.44 5.81-30.67 3.87-8.22 8.82-14.63 14.8-19.21 6-4.58 12.75-7.87 20.27-9.87 7.52-2 14.8-2.99 21.86-2.99 18.79 0 35.13.3 49 .88 13.86.58 26.09 1.23 36.66 1.94 10.58.7 20.1 1.411 28.56 2.111v51.469H857.2c-6.34 0-11.28 1.47-14.8 4.41-3.52 2.94-5.29 7.57-5.29 13.92v28.911l98.71 3.519v47.95l-98.71 3.18v27.49c0 5.17.82 9.23 2.47 12.16 1.65 2.93 3.88 5.11 6.7 6.52 2.82 1.41 5.87 2.11 9.16 2.11h97.65v51.12c-10.34 1.19-21.85 2.24-34.54 3.18-12.69.94-25.56 1.59-38.61 1.94-13.04.35-25.44.64-37.19.88l.01.01zM989.061 454.26V192.67h48.309l100.12 158.29V192.67h61v261.59h-48.66l-100.12-157.94v157.94h-60.649z"
+        fill={props.className}
+      />
+      <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"
+      />
+      <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" />
+    </svg>
+  )
+}
+
+export default LogoComponent
--- a/src/components/nav-link.tsx
+++ b/src/components/nav-link.tsx
+import { Menu } from 'lucide-react'
+import Link from 'next/link'
+
+import { Button } from '@/components/ui/button'
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+
+export function NavLink() {
+  return (
+    <div className="flex items-center">
+      <div className="hidden md:block">
+        <nav className="flex items-start px-2 text-sm font-medium">
+          <Button asChild variant="ghost">
+            <Link href="#">Para estudantes</Link>
+          </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>
+      </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>
+              </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>
+      </div>
+    </div>
+  )
+}
--- a/src/components/providers/theme-provider.tsx
+++ b/src/components/providers/theme-provider.tsx
+'use client';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { type ThemeProviderProps } from 'next-themes/dist/types';
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
--- a/src/components/theme-switcher.tsx
+++ b/src/components/theme-switcher.tsx
+'use client'
+
+import useHasMounted from '@/hooks/useHasMounted'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { Button } from './ui/button'
+
+export default function ThemeSwitcher() {
+  const { setTheme, theme } = useTheme()
+  const hasMounted = useHasMounted()
+
+  return (
+    <div>
+      {hasMounted && theme === 'dark' ? (
+        <Button onClick={() => setTheme('light')}>
+          <Moon />
+        </Button>
+      ) : (
+        <Button onClick={() => setTheme('dark')}>
+          <Sun />
+        </Button>
+      )}
+    </div>
+  )
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+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',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary-main text-primary hover:bg-primary-main-hover',
+        secondary:
+          'bg-secondary-main text-secondary-foreground hover:bg-secondary-main-hover',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
+/* eslint-disable prettier/prettier */
+'use client'
+
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger
+}
+
--- a/src/hooks/useHasMounted.tsx
+++ b/src/hooks/useHasMounted.tsx
+import { useEffect, useState } from 'react'
+
+const useHasMounted = () => {
+  const [hasMounted, setHasMounted] = useState(false)
+
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  return hasMounted
+}
+
+export default useHasMounted
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
+@tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 240 10% 3.9%;
+
+      --card: 0 0% 100%;
+      --card-foreground: 240 10% 3.9%;
+
+      --popover: 0 0% 100%;
+      --popover-foreground: 240 10% 3.9%;
+
+      --primary: 0 0% 11%;
+      --primary-foreground: 0 0% 98%;
+
+      --secondary: 240 4.8% 95.9%;
+      --secondary-foreground: 240 5.9% 10%;
+
+      --muted: 240 4.8% 95.9%;
+      --muted-foreground: 240 3.8% 46.1%;
+
+      --accent: 240 4.8% 95.9%;
+      --accent-foreground: 240 5.9% 10%;
+
+      --destructive: #991117;
+      --destructive-foreground: 0 0% 98%;
+
+      --border: 240 5.9% 90%;
+      --input: 240 5.9% 90%;
+      --ring: 240 10% 3.9%;
+
+      --radius: 0.5rem;
+
+      --disabled: #5B5B5B;
+      --primary-main: #26AAA7;
+      --primary-hover: #036D67;
+      --secondary-main: #BA68C8;
+      --secondary-hover: #7B1FA2;
+      --yellow-500: #FFEB3B;
+    }
+
+    .dark {
+      --background: #1C1C1C;
+      --foreground: 0 0% 98%;
+
+      --card: 240 10% 3.9%;
+      --card-foreground: 0 0% 98%;
+
+      --popover: 240 10% 3.9%;
+      --popover-foreground: 0 0% 98%;
+
+      --primary: #F9F9F9;
+      --primary-foreground: 240 5.9% 10%;
+
+      --secondary: #F3F3F3;
+      --secondary-foreground: 0 0% 98%;
+
+      --muted: 240 3.7% 15.9%;
+      --muted-foreground: 240 5% 64.9%;
+
+      --accent: 240 3.7% 15.9%;
+      --accent-foreground: 0 0% 98%;
+
+      --destructive: #991117;
+      --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;
+    }
+  }
+
+  @layer base {
+    * {
+      @apply border-border;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+  }
\ No newline at end of file
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss'

-const config: Config = {
+const config = {
+  darkMode: ['class'],
  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
  ],
+  prefix: '',
  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      colors: {
+        green: {
+          400: '#26AAA7',
+          700: '#007D77',
+          800: '#036D67',
+        },
+        yellow: {
+          500: 'var(--yellow-500)',
+        },
+        'primary-main': {
+          DEFAULT: 'var(--primary-main)',
+          hover: 'var(--primary-hover)',
+        },
+        'secondary-main': {
+          DEFAULT: 'var(--secondary-main)',
+          hover: 'var(--secondary-hover)',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'var(--background)',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'var(--primary)',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'var(--secondary)',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'var(--destructive)',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
-  plugins: [],
-};
-export default config;
+  plugins: [require('tailwindcss-animate')],
+} satisfies Config
+
+export default config