Merge pull request #5 from Iapdigital/dev

feat: home screen adjustments

package-lock.json

@@ -33,6 +33,7 @@
         "react-day-picker": "^8.10.1",
         "react-dom": "^18",
         "react-hook-form": "^7.52.2",
+        "react-input-mask": "^2.0.4",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.23.8"
@@ -42,6 +43,7 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@types/react-input-mask": "^3.0.5",
         "eslint": "^8.57.0",
         "eslint-config-next": "14.2.3",
         "postcss": "^8",
@@ -3048,6 +3050,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-input-mask": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.5.tgz",
+      "integrity": "sha512-vQ1x6ykwjDrDrJZq1zw5/uQ+nqGHUV6bWscsVZJ/qsNwNXWxZm7KRBHLJ5k6TQt3MHjhpoYHzPH6FwjVSZODHA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.10",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -6878,6 +6889,19 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-input-mask": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
+      "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0",
+        "react-dom": ">=0.14.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7892,6 +7916,14 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -34,6 +34,7 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",
     "react-hook-form": "^7.52.2",
+    "react-input-mask": "^2.0.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
@@ -43,6 +44,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-input-mask": "^3.0.5",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",

src/app/(home)/page.tsx

@@ -3,10 +3,11 @@ import { Banner } from '@/components/banner'
 import { CarouselComponent } from '@/components/corousel-component'
 import { CourseCategory } from '@/components/course-category'
 import { Differences } from '@/components/differences'
+import { StyledInputs } from '@/components/mui/styled-inputs'
 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 { TextField } from '@mui/material'
 import { Search } from 'lucide-react'
 import Link from 'next/link'
 
@@ -19,7 +20,13 @@ export default function Home() {
         <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?" />
+            <TextField
+              label="O que você quer aprender hojeaa?"
+              variant="standard"
+              type="text"
+              className="w-full"
+              sx={StyledInputs({ color: '#fafafa' })}
+            />
             <Search size={24} />
           </div>
           <CarouselComponent />

src/components/banner.tsx

@@ -14,17 +14,20 @@ import {
 } from './ui/carousel'
 
 export function Banner() {
-  const plugin = React.useRef(
+  const pluginDesktop = React.useRef(
+    Autoplay({ delay: 5000, stopOnInteraction: true }),
+  )
+  const pluginMobile = React.useRef(
     Autoplay({ delay: 5000, stopOnInteraction: true }),
   )
 
   return (
     <section>
       <Carousel
-        plugins={[plugin.current]}
-        className="w-full"
-        // onMouseEnter={plugin.current.stop}
-        onMouseLeave={plugin.current.reset}
+        plugins={[pluginDesktop.current]}
+        className="w-full hidden xs:flex"
+        // onMouseEnter={pluginDesktop.current.stop}
+        onMouseLeave={pluginDesktop.current.reset}
       >
         <CarouselContent>
           {BannersHome.map((item) => (
@@ -34,7 +37,30 @@ export function Banner() {
                 alt="Banner"
                 width={item.desktop.width}
                 height={item.desktop.height}
-                // className="h-full object-cover min-h-[400px] md:min-h-[700px]"
+                className="min-h-[400px] w-screen object-cover object-left"
+                unoptimized
+              />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+
+      <Carousel
+        plugins={[pluginMobile.current]}
+        className="w-full flex xs:hidden"
+        // onMouseEnter={pluginMobile.current.stop}
+        onMouseLeave={pluginMobile.current.reset}
+      >
+        <CarouselContent>
+          {BannersHome.map((item) => (
+            <CarouselItem key={item.id}>
+              <Image
+                src={item.mobile.src}
+                alt="Banner"
+                width={item.mobile.width}
+                height={item.mobile.height}
                 unoptimized
               />
             </CarouselItem>

src/components/card/card-root.tsx

@@ -8,8 +8,11 @@ type CardRootProps = {
 
 export function CardRoot({ children, link }: CardRootProps) {
   return (
-    <Link className="lowercase" href={link}>
-      <div className={`bg-green-50 pl-0 rounded-lg max-w-[273px]`}>
+    <Link
+      className="lowercase transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow"
+      href={link}
+    >
+      <div className={`border border-gray-100 pl-0 rounded-lg max-w-[273px] `}>
         {children}
       </div>
     </Link>

src/components/card/card-title.tsx

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

src/components/corousel-component.tsx

@@ -20,7 +20,7 @@ export function CarouselComponent() {
               key={course.id}
               className="sm:basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5 flex justify-center"
             >
-              <Card.Root link={`${course.id}`}>
+              <Card.Root link={`curso/${course.id}`}>
                 <Card.Image image={course.image.src} width="240" height="320">
                   <Card.Title title={course.title} />
                 </Card.Image>

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'
+import ImageCorporate from '../../public/images/corporate.png'
+import ImageDeepen from '../../public/images/deepen.png'
+import ImageFast from '../../public/images/fast.png'
 
 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">
+        <ul className="flex justify-center items-center gap-4 text-gray-50">
+          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-700/50 rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
+            <Link href="#" className="flex flex-col gap-4 p-2">
               <Image
                 src={ImageFast}
                 alt="Rápido"
-                className="rounded-t-lg object-cover"
+                className="rounded-lg object-cover"
               />
               <h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
                 Rápido
@@ -25,12 +25,12 @@ export function CourseCategory() {
               </p>
             </Link>
           </li>
-          <li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
-            <Link href="#" className="flex flex-col gap-4">
+          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-700/50  rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
+            <Link href="#" className="flex flex-col gap-4 p-2">
               <Image
                 src={ImageDeepen}
                 alt="Aprofundamento"
-                className="rounded-t-lg object-cover"
+                className="rounded-lg object-cover"
               />
               <h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
                 Aprofundamento
@@ -40,12 +40,12 @@ export function CourseCategory() {
               </p>
             </Link>
           </li>
-          <li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
-            <Link href="#" className="flex flex-col gap-4">
+          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-700/50  rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
+            <Link href="#" className="flex flex-col gap-4 p-2">
               <Image
                 src={ImageCorporate}
                 alt="Corporativos"
-                className="rounded-t-lg object-cover"
+                className="rounded-lg object-cover"
               />
               <h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
                 Corporativos

src/components/course-details.tsx

@@ -5,7 +5,7 @@ export function CourseDetails() {
     <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">
+          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] dark:bg-gray-900 bg-gray-50">
             <Clock4 size={35} />
           </div>
         </div>
@@ -16,7 +16,7 @@ export function CourseDetails() {
       </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">
+          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] dark:bg-gray-900 bg-gray-50">
             <UserRound size={35} />
           </div>
         </div>
@@ -27,7 +27,7 @@ export function CourseDetails() {
       </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">
+          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] dark:bg-gray-900 bg-gray-50">
             <Calendar size={35} />
           </div>
         </div>
@@ -38,7 +38,7 @@ export function CourseDetails() {
       </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">
+          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] dark:bg-gray-900 bg-gray-50">
             <DollarSign size={35} />
           </div>
         </div>

src/components/differences.tsx

@@ -7,26 +7,26 @@ 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">
+      <div className="container pt-10 pb-20 flex flex-col gap-16">
         <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">
+            <span className="text-foreground 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">
+            <span className="text-foreground 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">
+            <span className="text-foreground md:font-extrabold text-xl md:text-3xl">
               Certificados
             </span>
           </li>

src/components/footer.tsx

@@ -18,7 +18,7 @@ export function Footer() {
             height={80}
             className="fill-gray-900 flex md:hidden"
           />
-          <ul className="text-center md:text-start">
+          <ul className="text-center text-gray-50 md:text-start">
             <li>Plataforma de Cursos Livres</li>
             <li>HUB - Indústria Criativa</li>
             <li className="hidden md:flex">
@@ -39,7 +39,11 @@ export function Footer() {
         <nav className="py-8 hidden md:flex">
           <ul className="flex flex-col gap-4">
             <li>
-              <Button asChild variant="link" className="uppercase p-0">
+              <Button
+                asChild
+                variant="link"
+                className="uppercase p-0 text-gray-50"
+              >
                 <Link href="#">
                   Cursos rápidos{' '}
                   <ChevronRight className="text-yellow-100 ml-3" />
@@ -47,7 +51,11 @@ export function Footer() {
               </Button>
             </li>
             <li>
-              <Button asChild variant="link" className="uppercase p-0">
+              <Button
+                asChild
+                variant="link"
+                className="uppercase p-0 text-gray-50"
+              >
                 <Link href="#">
                   Cursos de aprofundamento
                   <ChevronRight className="text-yellow-100 ml-3" />
@@ -55,7 +63,11 @@ export function Footer() {
               </Button>
             </li>
             <li>
-              <Button asChild variant="link" className="uppercase p-0">
+              <Button
+                asChild
+                variant="link"
+                className="uppercase p-0 text-gray-50"
+              >
                 <Link href="#" className="flex items-center">
                   Cursos corporativos
                   <ChevronRight className="text-yellow-100 ml-3" />
@@ -63,7 +75,11 @@ export function Footer() {
               </Button>
             </li>
             <li>
-              <Button asChild variant="link" className="uppercase p-0">
+              <Button
+                asChild
+                variant="link"
+                className="uppercase p-0 text-gray-50"
+              >
                 <Link href="/login" className="flex items-center">
                   Área Administrativa
                   <ChevronRight className="text-yellow-100 ml-3" />

src/components/header.tsx

@@ -15,7 +15,7 @@ export function Header() {
   return (
     <>
       <div className="absolute h-[200px] w-full bg-gradient-to-b from-gray-900 from-5% z-10" />
-      <header className="w-full md:px-6 py-5 absolute z-50">
+      <header className="w-full md:px-6 py-5 absolute z-50 overflow-hidden">
         <div className="container mx-auto flex justify-between gap-4">
           <Link href="/">
             <LogoComponent width={115} height={32} className="fill-primary" />
@@ -54,7 +54,7 @@ export function Header() {
                 <Sheet>
                   <SheetTrigger asChild>
                     <Button
-                      variant="outline"
+                      variant="ghost"
                       size="icon"
                       className="shrink-0 lg:hidden"
                     >

src/components/nav-link.tsx

@@ -26,7 +26,7 @@ export function NavLink(props: NavLinkProps) {
   return (
     <Button
       data-current={pathname === props.href}
-      className={`data-[current=true]:font-semibold ${props.className}`}
+      className={`data-[current=true]:font-semibold text-gray-50 ${props.className}`}
       variant={props.variant}
       asChild
     >

src/components/search-filter.tsx

+import { TextField } from '@mui/material'
 import { Search } from 'lucide-react'
-import { Input } from './ui/input'
+import { StyledInputs } from './mui/styled-inputs'
 import { Label } from './ui/label'
 import {
   Select,
@@ -14,7 +15,13 @@ 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?" />
+        <TextField
+          label="O que você quer aprender hoje?"
+          variant="standard"
+          type="text"
+          className="w-full"
+          sx={StyledInputs({ color: '#fafafa' })}
+        />
         <Search size={24} className="-ml-6" />
       </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 { TextField } from '@mui/material'
+import Image from 'next/image'
 import { SubmitHandler, useForm } from 'react-hook-form'
+import signUpImage from '../../public/images/sign-up.png'
+import { StyledInputs } from './mui/styled-inputs'
 
 type FormSignUpTypes = {
   name: string
@@ -18,14 +17,14 @@ type FormSignUpTypes = {
 }
 
 export function SignUp() {
-  const { register, handleSubmit } = useForm<FormSignUpTypes>()
+  const { 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">
+        <p className="max-w-[268px] my-6 md:max-w-[420px] text-xl text-gray-50 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
@@ -40,61 +39,36 @@ export function SignUp() {
           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>
+          <TextField
+            label="Nome"
+            variant="standard"
+            type="text"
+            sx={StyledInputs({ color: '#fafafa' })}
+          />
+          <TextField
+            label="Whatsapp"
+            variant="standard"
+            type="number"
+            sx={StyledInputs({ color: '#fafafa' })}
+          />
+          <TextField
+            label="Área de interesse"
+            variant="standard"
+            type="text"
+            sx={StyledInputs({ color: '#fafafa' })}
+          />
+          <TextField
+            label="E-mail"
+            variant="standard"
+            type="text"
+            sx={StyledInputs({ color: '#fafafa' })}
+          />
+          <TextField
+            label="Curso desejado"
+            variant="standard"
+            type="text"
+            sx={StyledInputs({ color: '#fafafa' })}
+          />
           <Button
             type="submit"
             variant="secondary"

src/components/theme-switcher.tsx

@@ -10,13 +10,21 @@ export function ThemeSwitcher() {
   const hasMounted = useHasMounted()
 
   return (
-    <div>
+    <div className="hidden sm:block">
       {hasMounted && theme === 'dark' ? (
-        <Button variant="ghost" onClick={() => setTheme('light')}>
+        <Button
+          variant="ghost"
+          className="p-2 text-gray-50"
+          onClick={() => setTheme('light')}
+        >
           <Sun />
         </Button>
       ) : (
-        <Button variant="ghost" onClick={() => setTheme('dark')}>
+        <Button
+          variant="ghost"
+          className="p-2 text-gray-50"
+          onClick={() => setTheme('dark')}
+        >
           <Moon />
         </Button>
       )}

src/components/ui/button.tsx

@@ -9,16 +9,19 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-green-700 text-primary hover:bg-green-800',
+        default:
+          'bg-gradient-to-r from-green-700 to-green-700/50 text-gray-50 hover:opacity-75',
+        // 'bg-green-700 text-primary hover:bg-green-800',
         secondary:
-          'bg-purple-100 text-secondary-foreground hover:bg-purple-200',
+          'text-gray-50 bg-gradient-to-r from-purple-100 to-purple-200 hover:bg-purple-200 hover:opacity-75',
+        // '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-white/10 hover:text-accent-foreground',
+        ghost: 'hover:bg-white/10 hover:text-gray-50',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

tailwind.config.ts

@@ -18,6 +18,9 @@ const config = {
       },
     },
     extend: {
+      screens: {
+        xs: '390px',
+      },
       colors: {
         green: {
           50: '#6CB876',