feat: create course details page with responsivity, alteration in the courses...

feat: create course details page with responsivity, alteration in the courses component for carousel component

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",

src/app/(home)/page.tsx

 import { About } from '@/components/about'
 import { Banner } from '@/components/banner'
+import { CarouselComponent } from '@/components/corousel-component'
 import { CourseCategory } from '@/components/course-category'
-import { Courses } from '@/components/courses'
 import { Differences } from '@/components/differences'
+import { NavLinkCategory } from '@/components/nav-link-category'
 import { SignUp } from '@/components/sign-up'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Search } from 'lucide-react'
 import Link from 'next/link'
 
 // import { ThemeSwitcher } from '@/components/theme-switcher'
@@ -16,7 +19,21 @@ export default function Home() {
         <Banner />
 
         {/* <ThemeSwitcher /> */}
-        <Courses />
+        <div className="container flex flex-col">
+          <NavLinkCategory />
+          <div className="flex justify-center items-center w-full md:w-1/2 mx-auto mb-8">
+            <Input placeholder="O que você quer aprender hoje?" />
+            <Search size={24} />
+          </div>
+          <CarouselComponent />
+          <Button
+            variant="secondary"
+            className="uppercase mx-auto my-8"
+            asChild
+          >
+            <Link href="#">Ver todos os cursos</Link>
+          </Button>
+        </div>
         <CourseCategory />
         <Differences />
         <SignUp />

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

+import Image from 'next/image'
+
+import { BannerCategory } from '@/components/banner-category'
+import { CarouselComponent } from '@/components/corousel-component'
+import { CourseDetails } from '@/components/course-details'
+import { Differences } from '@/components/differences'
+import { SignUp } from '@/components/sign-up'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import imageCapa from '../../../../public/images/banner.png'
+
+export default function CoursePage({
+  params,
+}: {
+  params: { courseId: string }
+}) {
+  return (
+    <>
+      <BannerCategory title={params.courseId} />
+      <div className="flex flex-col md:flex-row px-6 pt-20 gap-6">
+        <div className="flex flex-col gap-7">
+          <h1 className="block md:hidden text-green-400 text-3xl font-thin">
+            História Contemporânea dos Estados Unidos
+          </h1>
+          <Image
+            src={imageCapa}
+            className="min-w-[348px] h-[464px] object-cover rounded-lg"
+            alt="Imagem de capa do curso"
+          />
+          <Button variant="secondary" className="uppercase hidden md:block">
+            Quero este curso
+          </Button>
+        </div>
+        <div className="flex flex-col gap-6">
+          <h1 className="hidden md:block text-green-400 text-4xl font-extrabold">
+            História Contemporânea dos Estados Unidos
+          </h1>
+          <div className="flex flex-col-reverse lg:flex-row gap-6 w-full">
+            <div className="flex flex-col lg:w-1/2">
+              <h3 className="font-bold">O que você vai aprender</h3>
+              <p>
+                Este curso levará você por uma jornada desde os tumultuados anos
+                de 1970 até os dias atuais, explorando os impactos decisivos dos
+                governos de Bush, Obama, Trump e Biden. Descubra os
+                momentos-chave que moldaram a história contemporânea dos Estados
+                Unidos, desde a resiliência diante de crises até as mudanças
+                geopolíticas e sociais. Vamos desvendar os bastidores dos
+                eventos que marcaram época, proporcionando uma compreensão
+                profunda e contextualizada da evolução norte-americana.
+                Prepare-se para uma experiência de aprendizado envolvente e
+                reveladora, onde o passado ilumina o presente, moldando o
+                futuro.
+              </p>
+              <h3 className="font-bold mt-6">Com quem você vai aprender</h3>
+              <p>Professor João Silva</p>
+            </div>
+            <div className="lg:w-1/2">
+              <CourseDetails />
+            </div>
+          </div>
+          <Button variant="secondary" className="uppercase block md:hidden">
+            Quero este curso
+          </Button>
+          <span className="font-bold mt-4 block md:hidden">Saiba mais:</span>
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Módulos</AccordionTrigger>
+              <AccordionContent>
+                Yes. It adheres to the WAI-ARIA design pattern.
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      </div>
+      <div className="my-10 px-6">
+        <Separator orientation="horizontal" />
+      </div>
+      <div>
+        <h2 className="text-center text-green-400 font-thin text-2xl">
+          Cursos relacionados
+        </h2>
+        <div className="px-14 mt-10 mb-20">
+          <CarouselComponent />
+        </div>
+      </div>
+      <SignUp />
+      <Differences />
+    </>
+  )
+}

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

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

src/components/corousel-component.tsx

+import { Calendar, Clock4, User } from 'lucide-react'
+
+import { CoursesCard } from '@/utils/courses-array'
+import { Card } from './card'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from './ui/carousel'
+
+export function CarouselComponent() {
+  return (
+    <section>
+      <Carousel>
+        <CarouselContent>
+          {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"
+            >
+              <Card.Root link={`curso/${course.id}`}>
+                <Card.Image image={course.image.src} width="240" height="320">
+                  <Card.Title title={course.title} />
+                </Card.Image>
+                <Card.Content description={course.hours}>
+                  <Card.Icon icon={Clock4} />
+                </Card.Content>
+                <Card.Content description={course.category}>
+                  <Card.Icon icon={User} />
+                </Card.Content>
+                <Card.Content description={course.calender}>
+                  <Card.Icon icon={Calendar} />
+                </Card.Content>
+              </Card.Root>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </section>
+  )
+}

src/components/course-details.tsx

@@ -2,53 +2,51 @@ import { Calendar, Clock4, DollarSign, UserRound } from 'lucide-react'
 
 export function CourseDetails() {
   return (
-    <div className="hidden md:flex items-center justify-center w-6/12">
-      <ul className="flex flex-col gap-8">
-        <li className="flex items-center gap-4">
-          <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
-            <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
-              <Clock4 size={35} />
-            </div>
-          </div>
-          <div className="flex flex-col gap-2">
-            <span className="font-thin">Duração:</span>
-            <span className="text-xl">30 Hrs/Curso Rápido</span>
-          </div>
-        </li>
-        <li className="flex items-center gap-4">
-          <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
-            <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
-              <UserRound size={35} />
-            </div>
-          </div>
-          <div className="flex flex-col gap-2">
-            <span className="font-thin">Indicado para:</span>
-            <span className="text-xl">Estudantes</span>
-          </div>
-        </li>
-        <li className="flex items-center gap-4">
-          <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
-            <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
-              <Calendar size={35} />
-            </div>
-          </div>
-          <div className="flex flex-col gap-2">
-            <span className="font-thin">Início:</span>
-            <span className="text-xl">Imediato</span>
-          </div>
-        </li>
-        <li className="flex items-center gap-4">
-          <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
-            <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
-              <DollarSign size={35} />
-            </div>
-          </div>
-          <div className="flex flex-col gap-2">
-            <span className="font-thin">Investimento:</span>
-            <span className="text-xl">R$200,00</span>
-          </div>
-        </li>
-      </ul>
-    </div>
+    <ul className="flex flex-col gap-8">
+      <li className="flex items-center gap-4">
+        <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
+          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
+            <Clock4 size={35} />
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <span className="font-thin">Duração:</span>
+          <span className="text-xl">30 Hrs/Curso Rápido</span>
+        </div>
+      </li>
+      <li className="flex items-center gap-4">
+        <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
+          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
+            <UserRound size={35} />
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <span className="font-thin">Indicado para:</span>
+          <span className="text-xl">Estudantes</span>
+        </div>
+      </li>
+      <li className="flex items-center gap-4">
+        <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
+          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
+            <Calendar size={35} />
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <span className="font-thin">Início:</span>
+          <span className="text-xl">Imediato</span>
+        </div>
+      </li>
+      <li className="flex items-center gap-4">
+        <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
+          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
+            <DollarSign size={35} />
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <span className="font-thin">Investimento:</span>
+          <span className="text-xl">R$200,00</span>
+        </div>
+      </li>
+    </ul>
   )
 }

src/components/courses.tsx

-import Link from 'next/link'
-
-import { Calendar, Clock4, Search, User } from 'lucide-react'
-import { Button } from './ui/button'
-import { Input } from './ui/input'
-
-import { CoursesCard } from '@/utils/courses-array'
-import { Card } from './card'
-import { NavLinkCategory } from './nav-link-category'
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from './ui/carousel'
-
-export function Courses() {
-  return (
-    <section>
-      <div className="container flex flex-col">
-        <NavLinkCategory />
-        <div className="flex justify-center items-center w-full md:w-1/2 mx-auto mb-8">
-          <Input placeholder="O que você quer aprender hoje?" />
-          <Search size={24} />
-        </div>
-        <Carousel>
-          <CarouselContent>
-            {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"
-              >
-                <Card.Root link={`${course.category}/${course.id}`}>
-                  <Card.Image image={course.image.src} width="240" height="320">
-                    <Card.Title title={course.title} />
-                  </Card.Image>
-                  <Card.Content description={course.hours}>
-                    <Card.Icon icon={Clock4} />
-                  </Card.Content>
-                  <Card.Content description={course.category}>
-                    <Card.Icon icon={User} />
-                  </Card.Content>
-                  <Card.Content description={course.calender}>
-                    <Card.Icon icon={Calendar} />
-                  </Card.Content>
-                </Card.Root>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-        <Button variant="secondary" className="uppercase mx-auto my-8" asChild>
-          <Link href="#">Ver todos os cursos</Link>
-        </Button>
-      </div>
-    </section>
-  )
-}

src/components/footer.tsx

@@ -4,8 +4,8 @@ import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import imgFooter from '../../public/images/img-footer.svg'
 import imgLogoFooter from '../../public/images/img-logo-footer.svg'
-import { Button } from './ui/button'
 import LogoComponent from './logo'
+import { Button } from './ui/button'
 
 export function Footer() {
   return (

src/components/header.tsx

@@ -40,7 +40,7 @@ export function Header() {
               variant="secondary"
               className="uppercase text-sm mx-auto"
             >
-              <Link href="#">Inscreva-se</Link>
+              <Link href="/inscricao">Inscreva-se</Link>
             </Button>
             <div className="flex flex-col">
               <Sheet>

src/components/ui/accordion.tsx

+'use client'
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between bg-gray-100 p-2 rounded-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-4', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

src/components/ui/separator.tsx

-"use client"
+'use client'
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
   (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[2px] w-full' : 'h-full w-[2px]',
+        className,
       )}
       {...props}
     />
-  )
+  ),
 )
 Separator.displayName = SeparatorPrimitive.Root.displayName