Card components adjustments to student page responsiveness and completion

package-lock.json

@@ -13,6 +13,7 @@
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.0.2",
+        "axios": "^1.7.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.1.5",
@@ -2305,6 +2306,11 @@
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2329,6 +2335,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -2560,6 +2576,17 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2718,6 +2745,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -3662,6 +3697,25 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -3686,6 +3740,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4685,6 +4752,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5330,6 +5416,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.1.5",

src/app/(home)/page.tsx

 import { Banner } from '@/components/banner'
-import { SignUp } from '../../components/sign-up'
-import { Hub } from '../../components/hub'
-import { Differences } from '@/components/differences'
 import { CourseCategory } from '@/components/course-category'
 import { Courses } from '@/components/courses'
+import { Differences } from '@/components/differences'
+import { SignUp } from '@/components/sign-up'
+import { Hub } from '../../components/hub'
 // import { ThemeSwitcher } from '@/components/theme-switcher'
 
 export default function Home() {
@@ -17,7 +17,7 @@ export default function Home() {
         <CourseCategory />
         <Differences />
         <SignUp />
-        <Hub />
+        <Hub hasHomePage />
       </main>
     </>
   )

src/app/estudantes/page.tsx

 import { BannerCategory } from '@/components/banner-category'
+import { Card } from '@/components/card'
+import { Differences } from '@/components/differences'
+import { Hub } from '@/components/hub'
 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 { 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 (
@@ -8,6 +108,32 @@ export default function Students() {
       <BannerCategory title="Estudante" />
       <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) => (
+          <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">
+                <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>
+          </div>
+        ))}
+      </div>
+      <div className="my-6">
+        <PaginationComponent pageIndex={0} totalCount={105} perPage={10} />
+      </div>
+      <Differences />
+      <SignUp />
+      <Hub />
     </main>
   )
 }

src/components/card/card-content.tsx

+import { ReactNode } from 'react'
+
+type CardContentProps = {
+  description: string
+  children: ReactNode
+}
+
+export default 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>
+    </div>
+  )
+}

src/components/card/card-icon.tsx

+import { ElementType } from 'react'
+
+type CardIconProps = {
+  icon: ElementType
+}
+
+export function CardIcon({ icon: Icon }: CardIconProps) {
+  return <Icon size={16} />
+}

src/components/card/card-image.tsx

+import Image from 'next/image'
+import { ReactNode } from 'react'
+
+type CardImageProps = {
+  children: ReactNode
+  image: string
+  width: string
+  height: string
+}
+
+export default function CardImage({
+  children,
+  image,
+  width,
+  height,
+}: CardImageProps) {
+  return (
+    <div className={`relative w-[${width}px]`}>
+      <Image
+        src={image}
+        width={Number(width)}
+        height={Number(height)}
+        alt="Capa do curso"
+        className={`object-cover rounded-lg w-full h-[${height}px]`}
+      />
+      <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 rounded-b-lg">
+        {children}
+      </div>
+    </div>
+  )
+}

src/components/card/card-root.tsx

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

src/components/card/card-title.tsx

+type CardTitleProps = {
+  title: string
+}
+
+export function CardTitle({ title }: CardTitleProps) {
+  return (
+    <span className="text-center text-lg lg:text-2xl px-1 pb-8">{title}</span>
+  )
+}

src/components/card/index.tsx

+import CardContent from './card-content'
+import { CardIcon } from './card-icon'
+import CardImage from './card-image'
+import { CardRoot } from './card-root'
+import { CardTitle } from './card-title'
+
+export const Card = {
+  Root: CardRoot,
+  Image: CardImage,
+  Title: CardTitle,
+  Content: CardContent,
+  Icon: CardIcon,
+}

src/components/card1.tsx

+import { Calendar, Clock4, User } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+
+type CardDetailsTypes = {
+  details: {
+    id: string
+    image: { src: string; width: number; height: number }
+    title: string
+    hours: string
+    category: string
+    calender: string
+  }
+  imageWidth: number
+  imageHeight: number
+}
+
+export function Card({ details, imageWidth, imageHeight }: CardDetailsTypes) {
+  return (
+    <div
+      className={`bg-green-50 md:w-[${imageWidth.toString()}px] pl-0 rounded-lg`}
+    >
+      <Link className="lowercase " href={`${details.category}/${details.id}`}>
+        <div className="relative">
+          <Image
+            src={details.image.src}
+            width={imageWidth}
+            height={imageHeight}
+            alt="Capa do curso"
+            className={`object-cover rounded-lg w-full h-[274px] md:h-[${imageHeight.toString()}px] `}
+          />
+          <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 rounded-b-lg">
+            <span className="text-center text-lg lg:text-2xl px-1 pb-8">
+              {details.title}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 p-2">
+          <Clock4 size={16} />
+          <span className="text-xs lg:text-sm">{details.hours}</span>
+        </div>
+        <div className="flex items-center gap-2 p-2">
+          <User size={16} />
+          <span className="text-xs lg:text-sm capitalize">
+            {details.category}
+          </span>
+        </div>
+        <div className="flex items-center gap-2 p-2">
+          <Calendar size={16} />
+          <span className="text-xs lg:text-sm capitalize">
+            {details.calender}
+          </span>
+        </div>
+      </Link>
+    </div>
+  )
+}

src/components/courses.tsx

 import Link from 'next/link'
-import Image from 'next/image'
 
+import { Calendar, Clock4, Search, User } from 'lucide-react'
 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'
 import banner from '../../public/images/banner.png'
+import ImageCoverCourse from '../../public/images/cover-course.png'
+import { Card } from './card'
 import { NavLinkCategory } from './nav-link-category'
 import {
   Carousel,
@@ -24,7 +24,7 @@ type CoursesCardTypes = {
   category: string
   calender: string
 }
-console.log(ImageCoverCourse)
+
 const coursesCard: CoursesCardTypes[] = [
   {
     id: '1',
@@ -45,7 +45,7 @@ const coursesCard: CoursesCardTypes[] = [
   {
     id: '3',
     image: banner,
-    title: 'Gestão em Saúde',
+    title: 'Gestão em Projetos',
     hours: '30 h / Curso rápido',
     category: 'Estudante',
     calender: 'Início imediato',
@@ -85,39 +85,27 @@ export function Courses() {
           <Input placeholder="O que você quer aprender hoje?" />
           <Search size={24} />
         </div>
-        <Carousel className="w-full flex justify-center">
-          <CarouselContent className="flex gap-2">
+        <Carousel>
+          <CarouselContent>
             {coursesCard.map((course) => (
               <CarouselItem
                 key={course.id}
-                className="basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5 bg-green-50 max-w-[240px] pl-0 rounded-lg ml-4"
+                className="sm:basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5 flex justify-center"
               >
-                <Link href="#">
-                  <div className="relative">
-                    <Image
-                      src={course.image.src}
-                      width={240}
-                      height={320}
-                      alt="Capa do curso"
-                      className="object-cover rounded-lg w-[240px] h-[320px]"
-                    />
-                    <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">{course.title}</span>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-2 p-2">
-                    <Clock4 size={16} />
-                    <span className="text-sm">{course.hours}</span>
-                  </div>
-                  <div className="flex items-center gap-2 p-2">
-                    <User size={16} />
-                    <span className="text-sm">{course.category}</span>
-                  </div>
-                  <div className="flex items-center gap-2 p-2">
-                    <Calendar size={16} />
-                    <span className="text-sm">{course.calender}</span>
-                  </div>
-                </Link>
+                <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>

src/components/differences.tsx

 import Image from 'next/image'
 
+import certificateOutline from '../../public/images/certificate-outline.svg'
 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 Differences() {
   return (
-    <section className="hidden md:flex">
+    <section className="flex">
       <div className="container py-20 flex flex-col gap-20">
-        <h2 className="text-center text-3xl">
+        <h2 className="hidden md:flex justify-center text-3xl">
           Conheça os nossos diferenciais:
         </h2>
-        <ul className="flex h-full justify-around items-center gap-2">
+        <ul className="flex flex-col md:flex-row h-full justify-around items-center gap-8 md:gap-4">
           <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">
+            <span className="text-gray-50 md:font-extrabold text-xl md: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">
+            <span className="text-gray-50 md:font-extrabold text-xl md: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">
+            <span className="text-gray-50 md:font-extrabold text-xl md:text-3xl">
               Certificados
             </span>
           </li>

src/components/hub.tsx

 import Image from 'next/image'
+
 import globo from '../../public/images/globo.svg'
-import { Button } from './ui/button'
 import imgFooter from '../../public/images/img-footer.svg'
+import { Button } from './ui/button'
 
-export function Hub() {
+export function Hub({ hasHomePage = false }) {
   return (
     <section className="flex flex-col py-20">
       <div className="container flex justify-center md:justify-around">
@@ -13,7 +14,9 @@ export function Hub() {
             Somos um <b className="text-3xl font-bold">hub</b> de inovação,
             tecnologia e negócios
           </p>
-          <p className="hidden md:block text-center">
+          <p
+            className={`${hasHomePage ? 'hidden' : 'block'} md:block text-center`}
+          >
             Nós, na <b>Indústria Criativa</b>, oferecemos serviços educacionais
             e assessoria profissional a instituições públicas e privadas. Nossa
             meta é conectar pessoas, empresas e instituições por meio do
@@ -23,39 +26,17 @@ export function Hub() {
         </div>
       </div>
 
-      <div className="container hidden md:flex flex-col justify-center items-center gap-6 mt-10">
+      <div
+        className={`${hasHomePage ? 'hidden' : 'flex'} container flex-col md:flex justify-center items-center gap-6 mt-10`}
+      >
         <h5 className="text-green-400 text-xl">Empresas Parceiras</h5>
         <div className="flex flex-wrap justify-center gap-6">
-          <Image
-            src={imgFooter}
-            alt="Educação Adventista"
-            className="hidden md:flex"
-          />
-          <Image
-            src={imgFooter}
-            alt="Educação Adventista"
-            className="hidden md:flex"
-          />
-          <Image
-            src={imgFooter}
-            alt="Educação Adventista"
-            className="hidden md:flex"
-          />
-          <Image
-            src={imgFooter}
-            alt="Educação Adventista"
-            className="hidden md:flex"
-          />
-          <Image
-            src={imgFooter}
-            alt="Educação Adventista"
-            className="hidden md:flex"
-          />
-          <Image
-            src={imgFooter}
-            alt="Educação Adventista"
-            className="hidden md:flex"
-          />
+          <Image src={imgFooter} alt="Educação Adventista" />
+          <Image src={imgFooter} alt="Educação Adventista" />
+          <Image src={imgFooter} alt="Educação Adventista" />
+          <Image src={imgFooter} alt="Educação Adventista" />
+          <Image src={imgFooter} alt="Educação Adventista" />
+          <Image src={imgFooter} alt="Educação Adventista" />
         </div>
       </div>
     </section>

src/components/pagination-component.tsx

+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination'
+
+interface PaginationProps {
+  pageIndex: number
+  totalCount: number
+  perPage: number
+}
+
+export function PaginationComponent({
+  pageIndex,
+  perPage,
+  totalCount,
+}: PaginationProps) {
+  const pages = Math.ceil(totalCount / perPage) || 1
+  console.log('🚀 ~ pages:', pages)
+  console.log('🚀 ~ pageIndex:', pageIndex)
+
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">2</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}

src/components/providers/theme-provider.tsx

-'use client';
+'use client'
 
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import { type ThemeProviderProps } from 'next-themes/dist/types';
+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>;
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }

src/components/search-filter.tsx

 import { Search } from 'lucide-react'
 import { Input } from './ui/input'
+import { Label } from './ui/label'
 import {
   Select,
   SelectContent,
@@ -8,13 +9,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from './ui/select'
-import { Label } from './ui/label'
 
 export default function SearchFilter() {
   return (
     <div className="container grid md:grid-cols-2 gap-8 items-end mb-8">
       <div className="flex items-center max-w-[712px] flex-1">
-        <Input className="pr-8" />
+        <Input className="pr-8" placeholder="O que você quer aprender hoje?" />
         <Search size={24} className="-ml-6" />
       </div>
       <div>

src/components/ui/pagination.tsx

+/* eslint-disable prettier/prettier */
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
+import * as React from 'react'
+
+import { ButtonProps, buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    {...props}
+  />
+)
+Pagination.displayName = 'Pagination'
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
+))
+PaginationItem.displayName = 'PaginationItem'
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = 'PaginationLink'
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn('gap-1 pl-2.5', className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span className="sr-only">Anterior</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn('gap-1 pr-2.5', className)}
+    {...props}
+  >
+    <span className="sr-only">Próximo</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = 'PaginationNext'
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+}
+

src/lib/axios.ts

+import axios from 'axios'
+
+export const api = axios.create({
+  baseURL: '/api',
+})