Merge pull request #1 from Iapdigital/dev

Dev for main

.eslintrc.json

 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "@rocketseat/eslint-config/next", 
+    "next/core-web-vitals"
+  ]
 }

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

package.json

@@ -9,18 +9,38 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^5.16.4",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-label": "^2.1.0",
+    "@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",
+    "lucide-react": "^0.383.0",
+    "next": "14.2.3",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.3"
+    "react-hook-form": "^7.52.0",
+    "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"
   }
 }

public/images/certificate-outline.svg

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

public/images/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,iVBORw0KGgoAAAANSUhEUgAAAIwAAAAdCAYAAAB4+oTYAAALMUlEQVR4Ae2bebR+1RjH+7OiQUUDCaVBiVIskspqGVJZrFKrEipplghNSKVo1EoDFRElSaaIDEm0TAkpQxNaaWKl5M+v/Tn3+R7P3fe873vee+/7697lt9d61z5n72c/ezjPfuZ3mWV6FkmrS9o2/TZhaHqnb5ue6MYGk7RGNVdei5837INY0gqS1ukD+0TCSDpI0q2aKj+VtIukV0k6UdIhT+TaRs4t6aJYuKuTGSTpUTdE/aKRyGYBIOkt1Txdr5cMQy1pizTojGGwC6FP0h1pvfXjMQthjZ1rkPSkerVQOsCSvlL1nd+JZI6N/6cE80VJ+wdnvTDO+Z+SzpW05hyPdHLDJb2jIgp5NkmHVX2PQWDun69a0lvTPGcMEE9DRdJi4zDzdXZLHI+kX6SPxeMNXoSkTao+Xt/m/vmqKw5zQB+8cTu5pVdJOq6Iz3entZ4GDkn0/7Ds40rjlHR4tNH+3NT+rNAfrpB0jaTTJB0oaYPAtZ2kgyWdLOlySd+WBGc40DhyXfSTXYtueJ6kb0m6NNa4W+B6RhFJb5Z0jKRPBS7mBXejP1a4Vpb0XkkXS7q2rOkySSdJel6Gm/izpOenQ/bj8XniwmX+4Y6of5L75+O5IphquvZ1Fc8l6bq2tfvhdGAl/SW6701jP5GGbBZwe6S2+tHEd3fdkd7vlLRSmuOG1Fc/ouAfUjdW74clXK+W9O+qP7+eYNiJ1yEv8+Q8b5snjttUwzSUXSj+meUWb5ThZ/M8DsFI2jMt5s+SXh8i7IOp3R95JMFIWi19EHSID0l6naR3Sbpa0ofZk6TPRt9rYz6stzeksWcHHNzO5ceS9pa0u6SPSPp1WIRvlPRJuHXCtZOkr3ugpKeGxecL+7ik/QJ+R0ns3WViFmz7PSUtVw7lEc8Y9eMtQDwE66/AdFY5wOdI+lVRjF9Qjxn3vY8OY5zBwr2eLVL7S91YDro3h5HEh3KZxl2N23UR33woOBRiAZEGQbj8HDhJ17tB0qoeW9eFYNaSdKykLwUu8P09jYWzbJPep62tcNmXp75Tavzz/l59JM99XT1Rkb/ruTPVZpGnAg+uetw47xWHGarDVC6ATT2PpFem9Zlg/hRtjyQ49ACXzYJD+f1Iw9V1xY0hmFOC43jsfYyRhE/FZbkaT8BsKgkDgvL7xL2+H21UWFCZKKaJHkkvS7ANR+2aa97aUG7ThH48tp5A0iqS/mWAqJHZ28XmUew+Wo8b570i3j+mG8et8++omA9R4XJzsPsDJP3VjSisAZs5AKLihATD4wsLAa6d2h4sH5ybvbwkiAkFec/AZTCLHpxs33Aj3CHgPp7aUI7hJOgtwMOZOU+IzeXJktYtBPSeyu/FnliHRRLcZ2d0JUlblQvyIyPgsjD3xErRSzZMk+VH2Dqbe1Ow3ttTJ1wFOb4jCwuRhDVBmZNDr+IwgXJG1TjuQq4/MKP3f15TuhrHXTnwj3XAZdm/eexl3w44N50UMNaH3E4Ncf8mGu4POD4ousqgMkzpxVJyaTitpNdI+o8bO+oTmXeihQPtmJgmOIcLLPN75QVlcmsWVNjy00Lx+qaBbFYWE++K2S46DsWcZFDdcJhYB+Y+3ANFEIsJ5XHjxI0OCjg+ztfi5mLeohO8M8Gt5zUX3ejpoZgiUtDt0EU+jSUZuBDNmNJ4v+mDY2HuYvGw5quMK+DfXjhntqxQaPc3TOgvED5Ed0msbcW0tp0TLFwJfYfvwdp+WTjNmTb5DTexumzyofTB/YiIQpOH5fvmLRssmpt6iwGj5jbAtmGb+CNuntiCFxni4ILnp/PaaZFtYWq5OKok/SE2ws3Dk4s8XBaI+Pi8HxXUnPbcPELZyN914lCQs/cF0H6L8lAmsOgQ3T67MycwxZJBGSz2aDuZCmfA44g2DrfoCoahwZ8d/oaVWWVYI5+r5Goj55fMLhbHLKHc7rs4VjtglQS1QltHhzGn8U1A3iJa4BqYcyuCBj+LpEOLLP9ycY1jRbggywmUNa7zAVMubV6sJ1DiIy8uJqL9Enz0+8OLC4Gs731J2jLiMogsPJ91QdlElK3AmHBmLcjoqhVW721p3fMEQuewaUbgansPDQ6CoosWX/tbIJZ7CkF9IaLaTTwn2C1+A+svRxvffNSSsgOLNTw8Dl5Jvw0qf2yccZOCjfMnhLFlPUf2DNd9fd6LdYYTkGh/G2vrM24oTJiSPyjm27MBDD8LesvDNfsI9/RnwiG2VkYcukx2fXv4HRluLs9EYI1U0r3peZ++eBcSwUQ2o7dxeL2HuRBMuDiMe90a96zfCRCGBUSIPMcrmMwchND9xsMmqTyyXqjrxvM7bHyfvuI4zOYo4tFhiFv7jAdmgRHMBj4gPMf1HsLb3KSh1n2j3iPlwehbn9KocSP7g8qz1/amYuW8L+eDjEQy9SHIGRlULu2DYxgMinZCfhOwJZp8Tmrbqh4fiVMQGY65U8MB5lzZRiSFc40oNL+Wa4YR4PbGqYaLIZR8nGnEjEhfnWbtlLSJfYhik28TayScgEjHsXdotBFtBnfON6Lf8+0acDgdmzbvDc+5JKxZ8mhwCn4nfGQ7xBiMEnxm2eONNWvcTYwtIt67RZ4NuUHMT/7N4HhdcJbbwkP5gUhJIKQPt8FzuLcX2qdOekv6js0jOlKbE9IHVw1TdKgjEtImoBkeXDdfnsdI4jCGFRPM6QnoCOOIWJG7jg8C6goBAHN1GpdjVIj6uuDlzaK17ue98YzXIin8Yl3wbnt/XHa/d9V7sdaQHl39tGEAzfxekTnGBvlnAHkedZ7uWGaxJPSbQeVgH+ps6uRKxzoj/QIHIVn0uTQWWXCCbMVxI2HtO4QFyBgTzPoJwY1eW5WewFykGrgQeARfDnY6Yy4TDPB3VW4KLExzGDICXbo4TKsTxkfmUrvAteAaBHjhdoRujgy3B+3mpMB3cRiIAgPCkXXjMv4m28Dn0dQRcyDRqSs6/cA04B4vI/SYW3qg6ASp8lKuDHbsjeW6yQsJ687tF2ak5S8bv4uO1kqSdKOBI8BKnMnlWsYnP9Pfglga3SJl7l0TcJlg/JecVY0sh0kiFdNdXTpMTTA5+w/9jX78YzMi0hWBdyq9Ef+DE3OhIBhEmcv1+dya5/CrdMWOGDR2wLBwmGF6DDibONSMhYxoiBvkjeSaG5JTBhwVfkUCOiejT9lomWByojkBw5wmuQvjk/ca8doVBL0s4DLBNGGVaLdVd7fXU0XiRxJM4NmrcMqfpf35kYS1ljDCmeq+tj3NjRefAuF5Pzm99U7DtnXFtmJ8W81KhAzRY0B8bjt5zwe8xe2Kph4gcFIOljeKiuNwCxGxLkSt8UbDSbmNLi3BgCclLfnwgHswzZH9P3u4PcYSIfffbzK3zgTjnJy7PLbiyJ8PzsWNb/J2O3QYUk/WjjlRwJ8iKYupCxJuUkhdsHLhiIjShhtFNJ/+JgUijAqUdZeWsBucFXUbKNczMtS9mGH1CD2GtIj2EIfhcV9lCaEPrOY+1xHD8tqbRPQhXMlOyppgssluXG22WiiqEJ8LoRCsHDs0G6W7Eu/tXlMSVyaY7Y2sqgcpvXAXF1ItIO7sLzsrnQl6S1ex0pv7rO8Q0sHLT7nHuJq6aNzfjbSErwZbR4EjAXnzuXoGQzRB0bB6bgC5I9xQYlK7T1vIkJegevta2MRLBoGHcjm11anUCrLlyLpzgY0TbZ+hw4Cz+u+Sx7RhkYAhIIspj7c4K9UccvOXknEIJnDm/CHmxWptovsdHIaUERTcTLheKxbZGj6fyNTLOTfAkYnn9BSSz3PeNuY5+G24TOcwRry0XnoCfU7gvxw+EP/OfNUOAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

public/images/img-logo-footer.svg

+<svg width="66" height="121" viewBox="0 0 66 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.8657 14.1452L35.8011 60.6147H29.5069L5.44678 7.5332H14.4109L32.654 47.7834L44.884 20.803L44.8938 20.7801H35.9558V27.415H29.3534V14.1452H56.8657Z" fill="white"/>
+<path d="M7.58716 100.901V80.0742H16.5557C17.2474 80.0742 17.9565 80.1538 18.6853 80.3131C19.4141 80.4723 20.0829 80.7953 20.6897 81.2807C21.2975 81.7673 21.7878 82.5026 22.1614 83.4844C22.535 84.4673 22.7213 85.7719 22.7213 87.4007C22.7213 89.0294 22.535 90.3429 22.1614 91.3433C21.7867 92.3447 21.3063 93.0975 20.718 93.6026C20.1298 94.1077 19.4892 94.4502 18.7986 94.6269C18.1069 94.8058 17.4337 94.8942 16.7801 94.8942C16.4435 94.8942 16.0698 94.8757 15.6592 94.8375C15.2474 94.8004 14.8367 94.7535 14.426 94.6968C14.0142 94.6411 13.6362 94.5799 13.2909 94.5145C12.9445 94.4501 12.6602 94.4076 12.4358 94.3891V100.901H7.58716ZM12.4358 90.5436H16.023C16.4533 90.5436 16.804 90.4313 17.0742 90.2066C17.3443 89.9818 17.5459 89.6458 17.6777 89.1963C17.8084 88.7469 17.8738 88.1578 17.8738 87.4279C17.8738 86.7363 17.8041 86.1702 17.6635 85.7305C17.5241 85.2909 17.3225 84.9637 17.0611 84.7477C16.7986 84.5327 16.4631 84.4248 16.0524 84.4248H12.4369V90.5436H12.4358Z" fill="#1C1C1C"/>
+<path d="M25.1877 100.901V80.0742H33.933C34.811 80.0742 35.6193 80.1822 36.3567 80.3971C37.0942 80.612 37.7391 80.9774 38.2903 81.4912C38.8415 82.0061 39.2718 82.7032 39.5801 83.5825C39.8884 84.4629 40.042 85.5756 40.042 86.9229C40.042 87.8392 39.9581 88.6204 39.7892 89.2662C39.6215 89.9109 39.3971 90.4553 39.1171 90.8938C38.8361 91.3335 38.5147 91.6935 38.1509 91.9749C37.787 92.2553 37.408 92.4985 37.0147 92.7047L40.7435 100.901H35.8099L32.6987 93.4902C32.5125 93.4902 32.3011 93.4858 32.068 93.476C31.8338 93.4673 31.6051 93.4618 31.3818 93.4618H30.0364V100.9H25.1877V100.901ZM30.0364 89.6174H33.0637C33.4003 89.6174 33.6987 89.576 33.9613 89.492C34.2227 89.407 34.4471 89.2586 34.6334 89.0436C34.8197 88.8287 34.9602 88.5517 35.0539 88.2157C35.1465 87.8786 35.1944 87.4575 35.1944 86.9524C35.1944 86.4473 35.1476 86.0305 35.0539 85.7033C34.9602 85.3771 34.8197 85.124 34.6334 84.9451C34.4471 84.7683 34.2227 84.6364 33.9613 84.5524C33.6987 84.4673 33.4003 84.4258 33.0637 84.4258H30.0364V89.6185V89.6174Z" fill="#1C1C1C"/>
+<path d="M51.1682 101.068C49.7303 101.068 48.4634 100.927 47.3708 100.647C46.2782 100.365 45.362 99.8526 44.6246 99.1032C43.886 98.3548 43.3358 97.289 42.9709 95.9035C42.6071 94.5192 42.4241 92.7138 42.4241 90.4872C42.4241 88.2607 42.6104 86.4792 42.984 85.0839C43.3576 83.6897 43.9089 82.6185 44.6376 81.8701C45.3664 81.1217 46.2771 80.6024 47.3708 80.3123C48.4634 80.0221 49.7303 79.877 51.1682 79.877C52.6061 79.877 53.9013 80.0221 54.9939 80.3123C56.0866 80.6024 56.9983 81.1217 57.7271 81.8701C58.4558 82.6185 59.0027 83.6897 59.3666 85.0839C59.7304 86.4781 59.9134 88.2792 59.9134 90.4872C59.9134 92.6952 59.7315 94.5202 59.3666 95.9035C59.0027 97.289 58.4515 98.3559 57.7129 99.1032C56.9744 99.8515 56.0637 100.365 54.9798 100.647C53.8959 100.928 52.6246 101.068 51.1682 101.068ZM51.1682 96.7173C51.934 96.7173 52.5702 96.6289 53.0745 96.45C53.5789 96.2733 53.9754 95.9636 54.2652 95.5239C54.555 95.0843 54.7598 94.457 54.8818 93.6432C55.0027 92.8294 55.0637 91.7766 55.0637 90.486C55.0637 89.1955 55.0027 88.0817 54.8818 87.2581C54.7598 86.4344 54.555 85.8028 54.2652 85.3631C53.9754 84.9235 53.5789 84.6247 53.0745 84.4643C52.5702 84.305 51.934 84.2264 51.1682 84.2264C50.4024 84.2264 49.7956 84.3061 49.2902 84.4643C48.7858 84.6236 48.3882 84.9235 48.0985 85.3631C47.8087 85.8028 47.5985 86.4344 47.4677 87.2581C47.337 88.0817 47.2716 89.1573 47.2716 90.486C47.2716 91.8148 47.3315 92.8294 47.4535 93.6432C47.5744 94.4581 47.7793 95.0843 48.0691 95.5239C48.3588 95.9636 48.7553 96.2722 49.2608 96.45C49.7651 96.6289 50.4002 96.7173 51.166 96.7173H51.1682Z" fill="#1C1C1C"/>
+<path d="M59.9135 111.08H7.58716V113.694H59.9135V111.08Z" fill="white"/>
+</svg>

public/images/school-online.svg

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

public/images/table-clock.svg

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

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

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

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 { 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'
+
+export default function Home() {
+  return (
+    <>
+      <main className="overflow-hidden">
+        <Banner />
+
+        {/* <ThemeSwitcher /> */}
+        <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 />
+        <About.Root>
+          <About.Globo>
+            <p className="hidden 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 conhecimento técnico-científico aplicado aos negócios.
+            </p>
+            <Button className="uppercase">
+              <Link href="/sobre">Saiba mais</Link>
+            </Button>
+          </About.Globo>
+          <About.Companies className="hidden md:flex" />
+        </About.Root>
+      </main>
+    </>
+  )
+}

src/app/admin/page.tsx

+import { Card } from '@/components/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { CoursesCard } from '@/utils/courses-array'
+import { Pencil, Search } from 'lucide-react'
+import Link from 'next/link'
+
+const areas = [
+  {
+    title: 'Educação',
+  },
+  {
+    title: 'Negócios',
+  },
+  {
+    title: 'Comunicação',
+  },
+  {
+    title: 'Saúde',
+  },
+  {
+    title: 'Tecnologia',
+  },
+  {
+    title: 'Teologia',
+  },
+]
+
+const banners = [
+  {
+    title: 'Banner Home',
+  },
+  {
+    title: 'CTAs',
+  },
+]
+
+export default function Admin() {
+  return (
+    <section className="container">
+      <h1 className="text-green-400 text-2xl">Bem vindo, João da Silva,</h1>
+      <div className="flex h-auto mb-20">
+        <aside className="mt-10 w-[348px]">
+          <h2 className="text-purple-50 text-2xl">Áreas</h2>
+          <Button className="uppercase mt-6">+ Adicionar novo</Button>
+          <nav className="my-6">
+            <ul className="space-y-4">
+              {areas.map((area) => (
+                <li key={area.title} className="border-b border-green-400">
+                  <Link
+                    href="#"
+                    className="flex justify-between py-2 hover:bg-green-400/10"
+                  >
+                    <span>{area.title}</span>
+                    <Pencil className="text-green-400" />
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+
+          <h2 className="text-purple-50 text-2xl mt-10">Banners</h2>
+          <nav className="my-6">
+            <ul className="space-y-4">
+              {banners.map((banner) => (
+                <li
+                  key={banner.title}
+                  className="flex justify-between border-b border-green-400 py-2"
+                >
+                  <Link href="#">{banner.title}</Link>
+                  <Pencil className="text-green-400" />
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </aside>
+
+        <div className="flex-1 ml-4 pl-6 border-l border-gray-50">
+          <h2 className="text-purple-50 text-2xl">Cursos</h2>
+          <Button className="uppercase mt-6">+ Adicionar novo</Button>
+          <div className="flex items-center flex-1 my-6">
+            <Input className="pr-8" placeholder="Pesquisar" />
+            <Search size={24} className="-ml-6" />
+          </div>
+          <div className="flex flex-wrap justify-around gap-4">
+            {CoursesCard.map((course) => (
+              <Link key={course.id} className="lowercase" href="#">
+                <div className={`bg-gray-100 pb-4 rounded-lg max-w-[163px]`}>
+                  <Card.Image image={course.image.src} width="240" height="320">
+                    <Card.Title title={course.title} />
+                  </Card.Image>
+                  <Button
+                    variant="secondary"
+                    className="flex gap-4 mt-4 mx-auto"
+                  >
+                    <Pencil />
+                    <span className="uppercase">Editar</span>
+                  </Button>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/app/contato/page.tsx

+import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Clock4, Mail, Smartphone } from 'lucide-react'
+
+export default function Contact() {
+  return (
+    <main className="container flex flex-col justify-center items-center py-20">
+      <h1 className="text-center font-normal md:font-extrabold text-green-800 text-2xl md:text-4xl">
+        Fale com a SevenPro
+      </h1>
+      <div className="flex flex-col md:flex-row justify-between w-full mt-10 gap-10 md:gap-4">
+        <div className="w-full md:w-1/2">
+          <h2 className="text-green-800 text-xl md:text-2xl">
+            Atendimento aos alunos e parceiros
+          </h2>
+          <ul className="flex flex-col gap-4 mt-6">
+            <li className="flex items-center gap-4">
+              <Clock4 className="text-green-800" />
+              <span>De XXh à XXh</span>
+            </li>
+            <li className="flex items-center gap-4">
+              <Smartphone className="text-green-800" />
+              <span>Telefones: (XX) XXXX-XXXX</span>
+            </li>
+            <li className="flex items-center gap-4">
+              <Mail className="text-green-800" />
+              <span>E-mail: sevenpro@sevenpro.com.br</span>
+            </li>
+          </ul>
+        </div>
+        <div className="w-full md:w-1/2">
+          <h2 className="text-green-800 text-xl md:text-2xl">
+            Envie uma mensagem
+          </h2>
+          <form action="" className="mt-6 flex flex-col gap-6">
+            <label htmlFor="name" className="relative w-full">
+              <input
+                id="name"
+                type="text"
+                className="px-4 py-2 text-lg outline-none w-full border border-gray-50 rounded-sm hover:border-1 duration-200 peer focus:border-green-800 bg-inherit"
+              />
+              <span className="absolute left-0 top-2 px-1 text-lg bg-gray-900 tracking-wide peer-focus:text-green-800 pointer-events-none duration-200 peer-focus:text-sm peer-focus:-translate-y-5 ml-2 peer-valid:text-sm peer-valid:-translate-y-5">
+                Nome completo
+              </span>
+            </label>
+            <label htmlFor="mensage" className="relative w-full">
+              <textarea
+                id="mensage"
+                className="px-4 py-2 text-lg h-36 outline-none w-full border border-gray-50 rounded-sm hover:border-1 duration-200 peer focus:border-green-800 bg-inherit"
+              />
+              <span className="absolute left-0 top-2 px-1 text-lg bg-gray-900 tracking-wide peer-focus:text-green-800 pointer-events-none duration-200 peer-focus:text-sm peer-focus:-translate-y-5 ml-2 peer-valid:text-sm peer-valid:-translate-y-5">
+                Mensagem
+              </span>
+            </label>
+            <Select>
+              <SelectTrigger className="border-x border-y rounded-sm focus-visible:border-green-800">
+                <SelectValue placeholder="Assunto" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value="recent">Mais recentes</SelectItem>
+                  <SelectItem value="fast">Cursos rápidos</SelectItem>
+                  <SelectItem value="students">Estudantes</SelectItem>
+                  <SelectItem value="immediate">Início imediato</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <div className="flex">
+              <Button type="submit" className="w-auto">
+                Enviar
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </main>
+  )
+}

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/empresas/page.tsx

+import { About } from '@/components/about'
+import { BannerCategory } from '@/components/banner-category'
+import { Card } from '@/components/card'
+import { Differences } from '@/components/differences'
+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'
+
+export default function Companies() {
+  return (
+    <main>
+      <BannerCategory title="Empresas" />
+      <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 />
+      <About.Root>
+        <About.Globo>
+          <p className="hidden 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
+            conhecimento técnico-científico aplicado aos negócios.
+          </p>
+        </About.Globo>
+        <About.Companies />
+      </About.Root>
+    </main>
+  )
+}

src/app/estudantes/page.tsx

+import { About } from '@/components/about'
+import { BannerCategory } from '@/components/banner-category'
+import { Card } from '@/components/card'
+import { Differences } from '@/components/differences'
+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'
+
+export default function Students() {
+  return (
+    <main>
+      <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 />
+      <About.Root>
+        <About.Globo>
+          <p className="hidden 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
+            conhecimento técnico-científico aplicado aos negócios.
+          </p>
+        </About.Globo>
+        <About.Companies />
+      </About.Root>
+    </main>
+  )
+}

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;
-  }
-}

src/app/inscricao/page.tsx

+import { SignUp } from '@/components/sign-up'
+
+export default function Inscricao() {
+  return (
+    <main>
+      <SignUp />
+    </main>
+  )
+}

src/app/layout.tsx

-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import { Footer } from '@/components/footer'
+import { Header } from '@/components/header'
+import { ThemeProvider } from '@/components/providers/theme-provider'
+import '@/styles/globals.css'
+import { StyledEngineProvider } from '@mui/material'
+import type { Metadata } from 'next'
+import { Poppins } from 'next/font/google'
 
-const inter = Inter({ subsets: ["latin"] });
+const poppins = Poppins({ subsets: ['latin'], weight: ['300', '400', '800'] })
 
 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={`antialiased ${poppins.className}`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <StyledEngineProvider injectFirst>
+            <Header />
+            {children}
+            <Footer />
+          </StyledEngineProvider>
+        </ThemeProvider>
+      </body>
     </html>
-  );
+  )
 }

src/app/login/page.tsx

+import { InputMui } from '@/components/mui/inputs'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import Image from 'next/image'
+import Link from 'next/link'
+import globo from '../../../public/images/globo.svg'
+
+export default function Login() {
+  return (
+    <main>
+      <section className=" container flex flex-col justify-center items-center space-y-10 h-[723px]">
+        <Image
+          src={globo}
+          width={77}
+          height={77}
+          alt="Imagem demonstrativa de um globo"
+        />
+        <h1 className="text-green-400 text-2xl">Área administrativa</h1>
+        <h2 className="text-gray-50">
+          Acesso exclusivo para usuários cadastrados.
+        </h2>
+        <form
+          // onSubmit={handleSubmit(onSubmit)}
+          className="w-full md:w-[600px] flex flex-col gap-8 order-4"
+        >
+          <div className="flex flex-col space-y-6">
+            <div className="flex flex-col space-y-4">
+              <InputMui label="E-mail" variant="outlined" type="email" />
+              <InputMui label="Senha" variant="outlined" type="password" />
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="remember" />
+              <label
+                htmlFor="remember"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Lembrar-me
+              </label>
+            </div>
+            <Button className="rounded-sm">Entrar</Button>
+            <Button
+              variant={'link'}
+              asChild
+              className="text-green-400 uppercase"
+            >
+              <Link href="#">Recuperar senha</Link>
+            </Button>
+          </div>
+        </form>
+      </section>
+    </main>
+  )
+}

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>
-  );
-}

src/app/profissionais/page.tsx

+import { About } from '@/components/about'
+import { BannerCategory } from '@/components/banner-category'
+import { Card } from '@/components/card'
+import { Differences } from '@/components/differences'
+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'
+
+export default function Professionals() {
+  return (
+    <main>
+      <BannerCategory title="Profissionais" />
+      <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 />
+      <About.Root>
+        <About.Globo>
+          <p className="hidden 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
+            conhecimento técnico-científico aplicado aos negócios.
+          </p>
+        </About.Globo>
+        <About.Companies />
+      </About.Root>
+    </main>
+  )
+}

src/app/sobre/page.tsx

+import { About } from '@/components/about'
+import { SignUp } from '@/components/sign-up'
+
+export default function AboutPage() {
+  return (
+    <main>
+      <About.Root>
+        <About.Globo>
+          <p>
+            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
+            conhecimento técnico-científico aplicado aos negócios.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur. Dignissim at ac lacus at eu
+            iaculis. Iaculis id ut interdum elit ac imperdiet feugiat proin
+            ornare. Lorem ipsum dolor sit amet consectetur.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur. Dignissim at ac lacus at eu
+            iaculis. Iaculis id ut interdum elit ac imperdiet feugiat proin
+            ornare. Lorem ipsum dolor sit amet consectetur.
+          </p>
+        </About.Globo>
+        <About.Companies className="hidden" />
+      </About.Root>
+      <SignUp />
+    </main>
+  )
+}

src/components/about/about-component.tsx

+import Image from 'next/image'
+
+import Link from 'next/link'
+import globo from '../../public/images/globo.svg'
+import imgFooter from '../../public/images/img-footer.svg'
+import { Button } from '../ui/button'
+
+export function AboutComponent() {
+  return (
+    <section className="flex flex-col py-20">
+      <div className="container flex justify-center md:justify-around">
+        <div className="flex flex-col items-center justify-center max-w-[1152px] gap-10">
+          <Image src={globo} alt="Imagem demonstrativa de um globo" />
+          <p className="text-center text-2xl font-thin text-green-400 w-full">
+            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">
+            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
+            conhecimento técnico-científico aplicado aos negócios.
+          </p>
+          <Button className="uppercase">
+            <Link href="/sobre">Saiba mais</Link>
+          </Button>
+        </div>
+      </div>
+
+      <div className="container flex-col md:flex justify-center items-center gap-6 mt-10">
+        <h5 className="text-green-400 text-xl flex justify-center my-4">
+          Empresas Parceiras
+        </h5>
+        <div className="flex flex-wrap justify-center gap-6">
+          <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/about/about-globo.tsx

+import Image from 'next/image'
+import { ReactNode } from 'react'
+import globo from '../../../public/images/globo.svg'
+
+type AboutGloboProps = {
+  children: ReactNode
+}
+
+export function AboutGlobo({ children }: AboutGloboProps) {
+  return (
+    <div className="container flex justify-center md:justify-around">
+      <div className="flex flex-col items-center justify-center max-w-[1152px] gap-10">
+        <Image src={globo} alt="Imagem demonstrativa de um globo" />
+        <p className="text-center text-2xl font-thin text-green-400 w-full">
+          Somos um <b className="text-3xl font-bold">hub</b> de inovação,
+          tecnologia e negócios
+        </p>
+        {children}
+      </div>
+    </div>
+  )
+}

src/components/about/about-partner-companies.tsx

+import { cn } from '@/lib/utils'
+import { cva } from 'class-variance-authority'
+import Image from 'next/image'
+import imgFooter from '../../../public/images/img-footer.svg'
+
+type AboutPatnerCompaniesProps = {
+  className?: React.HTMLProps<HTMLElement>['className']
+}
+
+const containerVariants = cva(
+  'container flex-col justify-center items-center gap-6 mt-10',
+)
+
+export function AboutPatnerCompanies({ className }: AboutPatnerCompaniesProps) {
+  return (
+    <div className={cn(containerVariants(), className)}>
+      <h5 className="text-green-400 text-xl flex justify-center my-4">
+        Empresas Parceiras
+      </h5>
+      <div className="flex flex-wrap justify-center gap-6">
+        <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>
+  )
+}

src/components/about/about-root.tsx

+import { ReactNode } from 'react'
+
+type AboutRootProps = {
+  children: ReactNode
+}
+
+export function AboutRoot({ children }: AboutRootProps) {
+  return <section className="flex flex-col py-20">{children}</section>
+}

src/components/about/index.ts

+import { AboutGlobo } from './about-globo'
+import { AboutPatnerCompanies } from './about-partner-companies'
+import { AboutRoot } from './about-root'
+
+export const About = {
+  Root: AboutRoot,
+  Globo: AboutGlobo,
+  Companies: AboutPatnerCompanies,
+}

src/components/banner-category.tsx

+type BannerProps = {
+  title: string
+}
+export function BannerCategory({ title }: BannerProps) {
+  return (
+    <div className=" h-[300px] flex items-center justify-end bg-green-900">
+      <div className="container">
+        <h1>{title}</h1>
+      </div>
+    </div>
+  )
+}

src/components/banner.tsx

+import Image from 'next/image'
+import React from 'react'
+
+import banner from '../../public/images/banner.png'
+
+export function Banner() {
+  return (
+    <section>
+      <div className="container h-[400px] md:h-[700px] flex items-center justify-end bg-gray-900">
+        <div className="relative right-0">
+          <div className="absolute h-full w-[400px] bg-gradient-to-r from-gray-900 md:from-30% z-20" />
+          <div className="absolute h-full w-[200px] md:w-[500px] bg-gradient-to-r from-green-700 md:from-10% z-10" />
+          <h1 className="absolute z-20 font-thin text-lg md:text-4xl bottom-24 left-7 max-w-60 md:max-w-72 text-primary border-b-4 border-green-700 pb-4">
+            Transforme sua vida através do conhecimento
+          </h1>
+          <Image
+            src={banner}
+            alt="Banner"
+            height={700}
+            className="h-full object-cover min-h-[400px] md:min-h-[700px]"
+            unoptimized
+          />
+          <div className="absolute right-0 top-0 h-full w-[200px] md:w-[500px] bg-gradient-to-l from-green-700 md:from-10% z-10" />
+          <div className="block absolute right-0 top-0 h-full w-[200px] md:w-[600px] bg-gradient-to-l from-gray-900 md:from-20% z-20" />
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/card/card-content.tsx

+import { ReactNode } from 'react'
+
+type CardContentProps = {
+  description: string
+  children: ReactNode
+}
+
+export function CardContent({ description, children }: CardContentProps) {
+  return (
+    <div className="flex items-center gap-2 p-2">
+      {children}
+      <span className="text-xs lg:text-sm capitalize">{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 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 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 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.ts

+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/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-category.tsx

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

src/components/course-details.tsx

+import { Calendar, Clock4, DollarSign, UserRound } from 'lucide-react'
+
+export function CourseDetails() {
+  return (
+    <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/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'
+
+export function Differences() {
+  return (
+    <section className="flex">
+      <div className="container py-20 flex flex-col gap-20">
+        <h2 className="hidden md:flex justify-center text-3xl">
+          Conheça os nossos diferenciais:
+        </h2>
+        <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 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 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 md:font-extrabold text-xl md:text-3xl">
+              Certificados
+            </span>
+          </li>
+        </ul>
+      </div>
+    </section>
+  )
+}

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 imgLogoFooter from '../../public/images/img-logo-footer.svg'
+import LogoComponent from './logo'
+import { Button } from './ui/button'
+
+export function Footer() {
+  return (
+    <footer className="px-6 py-10 bg-green-700">
+      <div className="container mx-auto flex gap-3 justify-center md:justify-between items-center">
+        <div className="md:flex items-center justify-center gap-2 md:gap-6">
+          <Image src={imgLogoFooter} alt="PRO" className="hidden md:flex" />
+          <LogoComponent
+            width={200}
+            height={80}
+            className="fill-gray-900 flex md:hidden"
+          />
+          <ul className="text-center md:text-start">
+            <li>Plataforma de Cursos Livres</li>
+            <li>HUB - Indústria Criativa</li>
+            <li className="hidden md:flex">
+              Centro de Ensino Superior Adventista no Sul do Brasil
+            </li>
+            <li className="flex">
+              CNPJ 76.726.884/0003-90
+              <span className="hidden lg:flex">
+                &nbsp;| Vale do Ivaí - Ivatuba, PR
+              </span>
+            </li>
+            <li className="hidden md:flex">
+              CEP: 87130-000 | Caixa Postal - 28
+            </li>
+            <li className="hidden md:flex">Fone: (44) 3236-8000</li>
+          </ul>
+        </div>
+        <nav className="py-8 hidden md:flex">
+          <ul className="flex flex-col gap-4">
+            <li>
+              <Button asChild variant="link" className="uppercase p-0">
+                <Link href="#">
+                  Cursos rápidos{' '}
+                  <ChevronRight className="text-yellow-100 ml-3" />
+                </Link>
+              </Button>
+            </li>
+            <li>
+              <Button asChild variant="link" className="uppercase p-0">
+                <Link href="#">
+                  Cursos de aprofundamento
+                  <ChevronRight className="text-yellow-100 ml-3" />
+                </Link>
+              </Button>
+            </li>
+            <li>
+              <Button asChild variant="link" className="uppercase p-0">
+                <Link href="#" className="flex items-center">
+                  Cursos corporativos
+                  <ChevronRight className="text-yellow-100 ml-3" />
+                </Link>
+              </Button>
+            </li>
+            <li>
+              <Button asChild variant="link" className="uppercase p-0">
+                <Link href="/login" className="flex items-center">
+                  Área Administrativa
+                  <ChevronRight className="text-yellow-100 ml-3" />
+                </Link>
+              </Button>
+            </li>
+          </ul>
+        </nav>
+        <Image
+          src={imgFooter}
+          alt="Educação Adventista"
+          className="hidden md:flex"
+        />
+      </div>
+    </footer>
+  )
+}

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() {
+  return (
+    <header className="w-full md:px-6 py-5">
+      <div className="container mx-auto flex justify-between gap-4">
+        <Link href="/">
+          <LogoComponent width={115} height={32} className="fill-primary" />
+        </Link>
+        <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="/inscricao">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/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"
+      style={{ minWidth: '115px' }}
+      {...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={props.className === 'fill-primary' ? '#007D77' : '#F9F9F9'}
+      />
+      <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={props.className === 'fill-primary' ? '#007D77' : '#F9F9F9'}
+      />
+    </svg>
+  )
+}
+
+export default LogoComponent

src/components/mui/inputs.tsx

+import { TextField } from '@mui/material'
+
+type InputMuiProps = {
+  label: string
+  variant: 'standard' | 'filled' | 'outlined'
+  type: string
+}
+
+export function InputMui({ label, variant, type }: InputMuiProps) {
+  return (
+    <TextField
+      label={label}
+      variant={variant}
+      type={type}
+      sx={{
+        '& .MuiOutlinedInput-root': {
+          '& fieldset': {
+            borderColor: 'white', // Inicialmente transparente
+          },
+          '&:hover fieldset': {
+            borderColor: 'white', // Mantém transparente ao passar o mouse
+          },
+          '&.Mui-focused fieldset': {
+            borderColor: 'white', // Mantém transparente ao focar
+          },
+        },
+        '& label.Mui-focused': {
+          color: '#B7B7B7',
+        },
+        '& label': {
+          color: 'white',
+        },
+        '& input': {
+          color: 'white',
+        },
+      }}
+    />
+  )
+}

src/components/nav-link-category.tsx

+import Link from 'next/link'
+import { Button } from './ui/button'
+
+export function NavLinkCategory() {
+  return (
+    <div className="container my-10">
+      <ul className="flex flex-wrap justify-center items-center gap-8">
+        <li>
+          <Button asChild className="uppercase">
+            <Link href="#">Tecnologia</Link>
+          </Button>
+        </li>
+        <li>
+          <Button asChild className="uppercase">
+            <Link href="#">Negócios</Link>
+          </Button>
+        </li>
+        <li>
+          <Button asChild className="uppercase">
+            <Link href="#">Saúde</Link>
+          </Button>
+        </li>
+        <li>
+          <Button asChild className="uppercase">
+            <Link href="#">Educação</Link>
+          </Button>
+        </li>
+        <li>
+          <Button asChild className="uppercase">
+            <Link href="#">Comunicação</Link>
+          </Button>
+        </li>
+        <li>
+          <Button asChild className="uppercase">
+            <Link href="#">Teologia</Link>
+          </Button>
+        </li>
+      </ul>
+    </div>
+  )
+}

src/components/nav-link.tsx

+'use client'
+
+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()
+
+  return (
+    <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/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
+
+  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'
+
+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>
+}

src/components/search-filter.tsx

+import { Search } from 'lucide-react'
+import { Input } from './ui/input'
+import { Label } from './ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select'
+
+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" placeholder="O que você quer aprender hoje?" />
+        <Search size={24} className="-ml-6" />
+      </div>
+      <div>
+        <Label>Filtrados por</Label>
+        <Select defaultValue="recent">
+          <SelectTrigger className="flex items-center max-w-[712px] flex-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="recent">Mais recentes</SelectItem>
+              <SelectItem value="fast">Cursos rápidos</SelectItem>
+              <SelectItem value="students">Estudantes</SelectItem>
+              <SelectItem value="immediate">Início imediato</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}

src/components/sign-up.tsx

+'use client'
+
+import Image from 'next/image'
+
+import signUpImage from '../../public/images/sign-up.png'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { SubmitHandler, useForm } from 'react-hook-form'
+
+type FormSignUpTypes = {
+  name: string
+  email: string
+  whatsapp: string
+  interest: string
+  course: string
+}
+
+export function SignUp() {
+  const { register, handleSubmit } = useForm<FormSignUpTypes>()
+
+  const onSubmit: SubmitHandler<FormSignUpTypes> = (data) => console.log(data)
+
+  return (
+    <section className="w-full bg-gradient-to-r from-green-700 to-green-50 pb-6 md:py-6 md:pb-0">
+      <div className="container overflow-hidden relative h-auto flex flex-col md:flex-row gap-2 justify-between items-center ">
+        <p className="max-w-[268px] my-6 md:max-w-[420px] text-xl md:text-2xl lg:text-3xl text-center order-3 md:order-1">
+          Inscreva-se e receba novidades sobre cursos ou areas de interesse
+        </p>
+        <Image
+          src={signUpImage}
+          height={450}
+          width={331}
+          alt="Imagem demonstrativa de uma pessoa se cadastrando na plataforma"
+          className="mt-auto md:min-h-[550px] object-cover order-1 md:order-2"
+        />
+        <Separator className="h-2 w-screen order-2 md:hidden -mt-3 bg-yellow-100" />
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="w-full md:w-[600px] flex flex-col gap-8 order-4"
+        >
+          <div>
+            <Label htmlFor="name" className="text-gray-300 text-xs">
+              Nome
+            </Label>
+            <Input
+              type="text"
+              id="name"
+              placeholder="Digite aqui"
+              {...register('name')}
+            />
+          </div>
+          <div>
+            <Label htmlFor="email" className="text-gray-300 text-xs">
+              E-mail
+            </Label>
+            <Input
+              type="email"
+              id="email"
+              placeholder="Digite aqui"
+              {...register('email')}
+            />
+          </div>
+          <div>
+            <Label htmlFor="whatsapp" className="text-gray-300 text-xs">
+              Whatsapp
+            </Label>
+            <Input
+              type="number"
+              id="whatsapp"
+              placeholder="Digite aqui"
+              {...register('whatsapp')}
+            />
+          </div>
+          <div>
+            <Label htmlFor="interest" className="text-gray-300 text-xs">
+              Área de interesse
+            </Label>
+            <Input
+              type="text"
+              id="interest"
+              placeholder="Digite aqui"
+              {...register('interest')}
+            />
+          </div>
+          <div>
+            <Label htmlFor="course" className="text-gray-300 text-xs">
+              Curso desejado
+            </Label>
+            <Input
+              type="text"
+              id="course"
+              placeholder="Digite aqui"
+              {...register('course')}
+            />
+          </div>
+          <Button
+            type="submit"
+            variant="secondary"
+            className="uppercase max-w-32 mx-auto md:mb-6"
+          >
+            Inscrever
+          </Button>
+        </form>
+      </div>
+    </section>
+  )
+}

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 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>
+  )
+}

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/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-2xl 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-green-700 text-primary hover:bg-green-800',
+        secondary:
+          'bg-purple-100 text-secondary-foreground hover:bg-purple-200',
+        third:
+          'rounded-sm bg-green-400/10 text-sm text-green-400 font-thin hover:bg-green-400/5 hover:text-green-400',
+        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-5 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 }

src/components/ui/carousel.tsx

+'use client'
+
+import * as React from 'react'
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = 'horizontal',
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins,
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext],
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on('reInit', onSelect)
+      api.on('select', onSelect)
+
+      return () => {
+        api?.off('select', onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn('relative', className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  },
+)
+Carousel.displayName = 'Carousel'
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = 'CarouselContent'
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = 'CarouselItem'
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute h-8 w-8 rounded-full border-none text-green-400',
+        orientation === 'horizontal'
+          ? '-left-8 top-1/2 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = 'CarouselPrevious'
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute h-8 w-8 rounded-full border-none text-green-400',
+        orientation === 'horizontal'
+          ? '-right-8 top-1/2 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = 'CarouselNext'
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

src/components/ui/checkbox.tsx

+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/components/ui/input.tsx

+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full border border-t-0 border-x-0 border-gray-300 px-2 py-2 text-md text-white ile:border-0 bg-transparent file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 focus-visible:outline-none focus-visible:border-b-white focus-visible:border-b-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Input.displayName = 'Input'
+
+export { Input }

src/components/ui/label.tsx

+'use client'
+
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

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/components/ui/select.tsx

+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between border border-t-0 border-x-0 border-gray-300 px-2 py-2 text-md text-white ile:border-0 bg-transparent file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 focus-visible:outline-none focus-visible:border-b-white focus-visible:border-b-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

src/components/ui/separator.tsx

+'use client'
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
+
+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,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[2px] w-full' : 'h-full w-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

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
+}
+

src/hooks/useHasMounted.tsx

+import { useEffect, useState } from 'react'
+
+const useHasMounted = () => {
+  const [hasMounted, setHasMounted] = useState(false)
+
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  return hasMounted
+}
+
+export default useHasMounted

src/lib/axios.ts

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

src/lib/utils.ts

+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/styles/globals.css

+@tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 0, 0%, 11%;
+
+      --card: 0 0% 100%;
+      --card-foreground: 0, 0%, 11%;
+
+      --popover: 0 0% 100%;
+      --popover-foreground: 0, 0%, 11%;
+
+      --primary: 240 5.9% 10%;
+      --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: 0 84.2% 60.2%;
+      --destructive-foreground: 0 0% 98%;
+
+      --border: 240 5.9% 90%;
+      --input: 240 5.9% 90%;
+      --ring: 0, 0%, 11%;
+
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: 0, 0%, 11%;
+      --foreground: 0 0% 98%;
+
+      --card: 0, 0%, 11%;
+      --card-foreground: 0 0% 98%;
+
+      --popover: 0, 0%, 11%;
+      --popover-foreground: 0 0% 98%;
+
+      --primary: 0 0% 98%;
+      --primary-foreground: 240 5.9% 10%;
+
+      --secondary: 240 3.7% 15.9%;
+      --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: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+
+      --border: 240 3.7% 15.9%;
+      --input: 240 3.7% 15.9%;
+      --ring: 240 4.9% 83.9%;
+    }
+  }
+
+  @layer base {
+    * {
+      @apply border-border;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+  }
\ No newline at end of file

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',
+  },
+]

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: {
+          50: '#6CB876',
+          100: '#397A41',
+          400: '#26AAA7',
+          600: '#008D88',
+          700: '#007D77',
+          800: '#036D67',
+          900: '#045149',
+        },
+        yellow: {
+          100: '#FFEB3B',
+        },
+        purple: {
+          50: '#BA68C8',
+          100: '#9C27B0',
+          200: '#7B1FA2',
+        },
+        gray: {
+          50: '#F9F9F9',
+          100: '#3C3C3C',
+          300: '#DADADA',
+          400: '#B7B7B7',
+          900: '#1C1C1C',
+        },
+        red: {
+          100: '#991117',
+        },
+        orange: {
+          100: '#EF6C00',
+        },
+        blue: {
+          100: '#0277BD',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(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