nav-link adjustments

src/app/curso/[id]/page.tsx

+export default function Course({ params }: { params: { id: string } }) {
+  return <div>My Post: {params.id}</div>
+}

src/app/empresas/page.tsx

@@ -6,101 +6,8 @@ import { NavLinkCategory } from '@/components/nav-link-category'
 import { PaginationComponent } from '@/components/pagination-component'
 import SearchFilter from '@/components/search-filter'
 import { SignUp } from '@/components/sign-up'
+import { CoursesCard } from '@/utils/courses-array'
 import { Calendar, Clock4, User } from 'lucide-react'
-import banner from '../../../public/images/banner.png'
-import ImageCoverCourse from '../../../public/images/cover-course.png'
-
-type CoursesCardTypes = {
-  id: string
-  image: { src: string; width: number; height: number }
-  title: string
-  hours: string
-  category: string
-  calender: string
-}
-
-const coursesCard: CoursesCardTypes[] = [
-  {
-    id: '1',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '2',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '3',
-    image: banner,
-    title: 'Gestão em Projetos',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '4',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '5',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '6',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '7',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '8',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '9',
-    image: banner,
-    title: 'Gestão em Projetos',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '10',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-]
 
 export default function Companies() {
   return (
@@ -109,7 +16,7 @@ export default function Companies() {
       <NavLinkCategory />
       <SearchFilter />
       <div className="grid 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">
-        {coursesCard.map((course) => (
+        {CoursesCard.map((course) => (
           <div className="flex justify-center" key={course.id}>
             <Card.Root link={`${course.category}/${course.id}`}>
               <Card.Image image={course.image.src} width="273" height="365">

src/app/estudantes/page.tsx

@@ -6,101 +6,8 @@ import { NavLinkCategory } from '@/components/nav-link-category'
 import { PaginationComponent } from '@/components/pagination-component'
 import SearchFilter from '@/components/search-filter'
 import { SignUp } from '@/components/sign-up'
+import { CoursesCard } from '@/utils/courses-array'
 import { Calendar, Clock4, User } from 'lucide-react'
-import banner from '../../../public/images/banner.png'
-import ImageCoverCourse from '../../../public/images/cover-course.png'
-
-type CoursesCardTypes = {
-  id: string
-  image: { src: string; width: number; height: number }
-  title: string
-  hours: string
-  category: string
-  calender: string
-}
-
-const coursesCard: CoursesCardTypes[] = [
-  {
-    id: '1',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '2',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '3',
-    image: banner,
-    title: 'Gestão em Projetos',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '4',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '5',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '6',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '7',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '8',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '9',
-    image: banner,
-    title: 'Gestão em Projetos',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '10',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-]
 
 export default function Students() {
   return (
@@ -109,7 +16,7 @@ export default function Students() {
       <NavLinkCategory />
       <SearchFilter />
       <div className="grid 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">
-        {coursesCard.map((course) => (
+        {CoursesCard.map((course) => (
           <div className="flex justify-center" key={course.id}>
             <Card.Root link={`${course.category}/${course.id}`}>
               <Card.Image image={course.image.src} width="273" height="365">

src/app/profissionais/page.tsx

@@ -6,101 +6,8 @@ import { NavLinkCategory } from '@/components/nav-link-category'
 import { PaginationComponent } from '@/components/pagination-component'
 import SearchFilter from '@/components/search-filter'
 import { SignUp } from '@/components/sign-up'
+import { CoursesCard } from '@/utils/courses-array'
 import { Calendar, Clock4, User } from 'lucide-react'
-import banner from '../../../public/images/banner.png'
-import ImageCoverCourse from '../../../public/images/cover-course.png'
-
-type CoursesCardTypes = {
-  id: string
-  image: { src: string; width: number; height: number }
-  title: string
-  hours: string
-  category: string
-  calender: string
-}
-
-const coursesCard: CoursesCardTypes[] = [
-  {
-    id: '1',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '2',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '3',
-    image: banner,
-    title: 'Gestão em Projetos',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '4',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '5',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '6',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '7',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '8',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '9',
-    image: banner,
-    title: 'Gestão em Projetos',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '10',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'estudante',
-    calender: 'Início imediato',
-  },
-]
 
 export default function Professionals() {
   return (
@@ -109,7 +16,7 @@ export default function Professionals() {
       <NavLinkCategory />
       <SearchFilter />
       <div className="grid 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">
-        {coursesCard.map((course) => (
+        {CoursesCard.map((course) => (
           <div className="flex justify-center" key={course.id}>
             <Card.Root link={`${course.category}/${course.id}`}>
               <Card.Image image={course.image.src} width="273" height="365">

src/components/card/card-content.tsx

@@ -9,7 +9,7 @@ export function CardContent({ description, children }: CardContentProps) {
   return (
     <div className="flex items-center gap-2 p-2">
       {children}
-      <span className="text-xs lg:text-sm">{description}</span>
+      <span className="text-xs lg:text-sm capitalize">{description}</span>
     </div>
   )
 }

src/components/card/card-root.tsx

@@ -8,7 +8,7 @@ type CardRootProps = {
 
 export function CardRoot({ children, link }: CardRootProps) {
   return (
-    <Link className="lowercase " href={link}>
+    <Link className="lowercase" href={link}>
       <div className={`bg-green-50 pl-0 rounded-lg max-w-[273px]`}>
         {children}
       </div>

src/components/courses.tsx

@@ -4,8 +4,7 @@ import { Calendar, Clock4, Search, User } from 'lucide-react'
 import { Button } from './ui/button'
 import { Input } from './ui/input'
 
-import banner from '../../public/images/banner.png'
-import ImageCoverCourse from '../../public/images/cover-course.png'
+import { CoursesCard } from '@/utils/courses-array'
 import { Card } from './card'
 import { NavLinkCategory } from './nav-link-category'
 import {
@@ -16,66 +15,6 @@ import {
   CarouselPrevious,
 } from './ui/carousel'
 
-type CoursesCardTypes = {
-  id: string
-  image: { src: string; width: number; height: number }
-  title: string
-  hours: string
-  category: string
-  calender: string
-}
-
-const coursesCard: CoursesCardTypes[] = [
-  {
-    id: '1',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '2',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '3',
-    image: banner,
-    title: 'Gestão em Projetos',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '4',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '5',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-  {
-    id: '6',
-    image: ImageCoverCourse,
-    title: 'Gestão em Saúde',
-    hours: '30 h / Curso rápido',
-    category: 'Estudante',
-    calender: 'Início imediato',
-  },
-]
-
 export function Courses() {
   return (
     <section>
@@ -87,7 +26,7 @@ export function Courses() {
         </div>
         <Carousel>
           <CarouselContent>
-            {coursesCard.map((course) => (
+            {CoursesCard.map((course) => (
               <CarouselItem
                 key={course.id}
                 className="sm:basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5 flex justify-center"

src/components/header.tsx

+import { Menu } from 'lucide-react'
 import Link from 'next/link'
 import LogoComponent from './logo'
+
+import { Button } from '@/components/ui/button'
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
 import { NavLink } from './nav-link'
 
 export function Header() {
@@ -9,7 +13,93 @@ export function Header() {
         <Link href="/">
           <LogoComponent width={115} height={32} className="fill-primary" />
         </Link>
-        <NavLink />
+        <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="#">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" />
+                  </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"
+                    >
+                      Para estudantes
+                    </NavLink>
+
+                    <NavLink
+                      className="hover:bg-gray-50/10"
+                      variant="ghost"
+                      href="/profissionais"
+                    >
+                      Para profissionais
+                    </NavLink>
+                    <NavLink
+                      className="hover:bg-gray-50/10"
+                      variant="ghost"
+                      href="/empresas"
+                    >
+                      Para empresas
+                    </NavLink>
+                    <NavLink
+                      className="hover:bg-gray-50/10"
+                      variant="ghost"
+                      href="/sobre"
+                    >
+                      Conheça a SevenPro
+                    </NavLink>
+                    <NavLink
+                      className="hover:bg-gray-50/10"
+                      variant="ghost"
+                      href="/contato"
+                    >
+                      Contato
+                    </NavLink>
+                  </nav>
+                </SheetContent>
+              </Sheet>
+            </div>
+          </div>
+        </div>
       </div>
     </header>
   )

src/components/nav-link.tsx

-import { Menu } from 'lucide-react'
-import Link from 'next/link'
+'use client'
 
-import { Button } from '@/components/ui/button'
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import Link, { LinkProps } from 'next/link'
+
+import { usePathname } from 'next/navigation'
+import { Button } from './ui/button'
+
+interface NavLinkProps extends LinkProps {
+  variant:
+    | 'default'
+    | 'secondary'
+    | 'third'
+    | 'destructive'
+    | 'outline'
+    | 'ghost'
+    | 'link'
+    | null
+    | undefined
+  children: React.ReactNode
+  className?: React.HTMLProps<HTMLElement>['className']
+}
+
+export function NavLink(props: NavLinkProps) {
+  const pathname = usePathname()
 
-export function NavLink() {
   return (
-    <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="/estudantes">Para estudantes</Link>
-          </Button>
-          <Button asChild variant="ghost">
-            <Link href="/profissionais">Para profissionais</Link>
-          </Button>
-          <Button asChild variant="ghost">
-            <Link href="/empresas">Para empresas</Link>
-          </Button>
-          <Button asChild variant="ghost">
-            <Link href="/sobre">Conheça a SevenPro</Link>
-          </Button>
-          <Button asChild variant="ghost">
-            <Link href="/contato">Contato</Link>
-          </Button>
-        </nav>
-      </div>
-      <div className="w-full flex items-center gap-4">
-        <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" />
-              </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">
-                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
-                  <Link href="/estudantes">Para estudantes</Link>
-                </Button>
-                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
-                  <Link href="/profissionais">Para profissionais</Link>
-                </Button>
-                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
-                  <Link href="/empresas">Para empresas</Link>
-                </Button>
-                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
-                  <Link href="/sobre">Conheça a SevenPro</Link>
-                </Button>
-                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
-                  <Link href="/contato">Contato</Link>
-                </Button>
-              </nav>
-            </SheetContent>
-          </Sheet>
-        </div>
-      </div>
-    </div>
+    <Button
+      data-current={pathname === props.href}
+      className={`data-[current=true]:font-semibold ${props.className}`}
+      variant={props.variant}
+      asChild
+    >
+      <Link href={props.href}>{props.children}</Link>
+    </Button>
   )
 }

src/utils/courses-array.ts

+import banner from '../../public/images/banner.png'
+import ImageCoverCourse from '../../public/images/cover-course.png'
+
+type CoursesCardTypes = {
+  id: string
+  image: { src: string; width: number; height: number }
+  title: string
+  hours: string
+  category: string
+  calender: string
+}
+
+export const CoursesCard: CoursesCardTypes[] = [
+  {
+    id: '1',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '2',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '3',
+    image: banner,
+    title: 'Gestão em Projetos',
+    hours: '30 h / Curso rápido',
+    category: 'estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '4',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '5',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '6',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '7',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '8',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '9',
+    image: banner,
+    title: 'Gestão em Projetos',
+    hours: '30 h / Curso rápido',
+    category: 'estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '10',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'estudante',
+    calender: 'Início imediato',
+  },
+]