feat: add banners home page and header adjustments

package-lock.json

@@ -24,7 +24,8 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
-        "embla-carousel-react": "^8.1.5",
+        "embla-carousel-autoplay": "^8.1.8",
+        "embla-carousel-react": "^8.1.8",
         "lucide-react": "^0.383.0",
         "next": "14.2.3",
         "next-themes": "^0.3.0",
@@ -4123,28 +4124,36 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/embla-carousel": {
-      "version": "8.1.5",
-      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.5.tgz",
-      "integrity": "sha512-R6xTf7cNdR2UTNM6/yUPZlJFRmZSogMiRjJ5vXHO65II5MoUlrVYUAP0fHQei/py82Vf15lj+WI+QdhnzBxA2g=="
+      "version": "8.1.8",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.8.tgz",
+      "integrity": "sha512-KuHPA8qcAts6YE6ELtt38XYAb26hnKw8Ga0lSXmrhm1oI97t6oACFkqSsy33dfeZQEhaZB6VwWvaWQJRJVgSgA=="
+    },
+    "node_modules/embla-carousel-autoplay": {
+      "version": "8.1.8",
+      "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.1.8.tgz",
+      "integrity": "sha512-H3vVKt4HR2PGeMlCutE3+a8wv7Jq1rg31Fjb8ZDZaiuSnT/1XTwA83KpkJ02BdImVJci9RS0uEBiXBax2kfnMQ==",
+      "peerDependencies": {
+        "embla-carousel": "8.1.8"
+      }
     },
     "node_modules/embla-carousel-react": {
-      "version": "8.1.5",
-      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.1.5.tgz",
-      "integrity": "sha512-xFmfxgJd7mpWDHQ4iyK1Qs+5BTTwu4bkn+mSROKiUH9nKpPHTeilQ+rpeQDCHRrAPeshD67aBk0/p6FxWxXsng==",
+      "version": "8.1.8",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.1.8.tgz",
+      "integrity": "sha512-b8DcmC+j1vqVWSM6rU/GYGyY6Kp9LX8OoikZPBKmV6qL8s94sSPGl6jtDLLUtV8TTIQGMYOlOKUgoMAt/0TwOQ==",
       "dependencies": {
-        "embla-carousel": "8.1.5",
-        "embla-carousel-reactive-utils": "8.1.5"
+        "embla-carousel": "8.1.8",
+        "embla-carousel-reactive-utils": "8.1.8"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
       }
     },
     "node_modules/embla-carousel-reactive-utils": {
-      "version": "8.1.5",
-      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.1.5.tgz",
-      "integrity": "sha512-76uZTrSaEGGta+qpiGkMFlLK0I7N04TdjZ2obrBhyggYIFDWlxk1CriIEmt2lisLNsa1IYXM85kr863JoCMSyg==",
+      "version": "8.1.8",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.1.8.tgz",
+      "integrity": "sha512-bwV/23WD3Ecm0YuQ4I6Syzs3tdVJw0Oj3VCZlEODv1kH8LZ5kNDLgX2Uvx5brvoe2hpifBHPBQ8gYlxNL5kMPA==",
       "peerDependencies": {
-        "embla-carousel": "8.1.5"
+        "embla-carousel": "8.1.8"
       }
     },
     "node_modules/emoji-regex": {

package.json

@@ -25,7 +25,8 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
-    "embla-carousel-react": "^8.1.5",
+    "embla-carousel-autoplay": "^8.1.8",
+    "embla-carousel-react": "^8.1.8",
     "lucide-react": "^0.383.0",
     "next": "14.2.3",
     "next-themes": "^0.3.0",

src/components/banner.tsx

-import Image from 'next/image'
+'use client'
+
+import Autoplay from 'embla-carousel-autoplay'
 import React from 'react'
 
-import banner from '../../public/images/banner.png'
+import { BannersHome } from '@/utils/banners'
+import Image from 'next/image'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from './ui/carousel'
 
 export function Banner() {
+  const plugin = React.useRef(
+    Autoplay({ delay: 5000, stopOnInteraction: true }),
+  )
+
   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>
+      <Carousel
+        plugins={[plugin.current]}
+        className="w-full"
+        // onMouseEnter={plugin.current.stop}
+        onMouseLeave={plugin.current.reset}
+      >
+        <CarouselContent>
+          {BannersHome.map((item) => (
+            <CarouselItem key={item.id}>
               <Image
-            src={banner}
+                src={item.desktop.src}
                 alt="Banner"
-            height={700}
-            className="h-full object-cover min-h-[400px] md:min-h-[700px]"
+                width={item.desktop.width}
+                height={item.desktop.height}
+                // 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>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
     </section>
   )
 }

src/components/header.tsx

@@ -13,7 +13,9 @@ import { NavLink } from './nav-link'
 
 export function Header() {
   return (
-    <header className="w-full md:px-6 py-5">
+    <>
+      <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">
         <div className="container mx-auto flex justify-between gap-4">
           <Link href="/">
             <LogoComponent width={115} height={32} className="fill-primary" />
@@ -119,5 +121,6 @@ export function Header() {
           </div>
         </div>
       </header>
+    </>
   )
 }

src/components/theme-switcher.tsx

@@ -13,11 +13,11 @@ export function ThemeSwitcher() {
     <div>
       {hasMounted && theme === 'dark' ? (
         <Button variant="ghost" onClick={() => setTheme('light')}>
-          <Moon />
+          <Sun />
         </Button>
       ) : (
         <Button variant="ghost" onClick={() => setTheme('dark')}>
-          <Sun />
+          <Moon />
         </Button>
       )}
     </div>

src/components/ui/button.tsx

@@ -18,7 +18,7 @@ const buttonVariants = cva(
           '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',
+        ghost: 'hover:bg-white/10 hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

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 * as React from 'react'
 
-import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -253,10 +253,7 @@ const CarouselNext = React.forwardRef<
 CarouselNext.displayName = 'CarouselNext'
 
 export {
-  type CarouselApi,
   Carousel,
   CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
+  CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi
 }

src/utils/banners.ts

+import BannerDesktop01 from '../../public/images/banners/banner-1-desktop.jpg'
+import BannerDesktop02 from '../../public/images/banners/banner-2-desktop.jpg'
+import BannerDesktop03 from '../../public/images/banners/banner-3-desktop.jpg'
+import BannerDesktop04 from '../../public/images/banners/banner-4-desktop.jpg'
+
+import BannerMobile01 from '../../public/images/banners/banner-1-mobile.jpg'
+import BannerMobile02 from '../../public/images/banners/banner-2-mobile.jpg'
+import BannerMobile03 from '../../public/images/banners/banner-3-mobile.jpg'
+import BannerMobile04 from '../../public/images/banners/banner-4-mobile.jpg'
+
+// type CoursesCardTypes = {
+//   desktop:
+// }
+
+export const BannersHome = [
+  {
+    id: '1',
+    desktop: BannerDesktop01,
+    mobile: BannerMobile01,
+  },
+  {
+    id: '2',
+    desktop: BannerDesktop02,
+    mobile: BannerMobile02,
+  },
+  {
+    id: '3',
+    desktop: BannerDesktop03,
+    mobile: BannerMobile03,
+  },
+  {
+    id: '4',
+    desktop: BannerDesktop04,
+    mobile: BannerMobile04,
+  },
+]