Feature/events section

app/page.tsx

@@ -1,13 +1,15 @@
 import { ValuesSection } from "@/sections/purpose";
 import { HeroSection } from "@/sections/hero";
 import { PartenersSection } from "@/sections/partners";
+import { EventsSection } from "@/sections/events";
 
 export default function Home() {
   return (
     <main className="h-full flex flex-col gap-12 justify-center py-5 items-center">
       <HeroSection />
       <PartenersSection />
       <ValuesSection />
+      <EventsSection />
     </main>
   );
 }

components/ui/carousel.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
+import { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -216,9 +216,9 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeft className="h-4 w-4" />
+      <ChevronLeft className="h-4 w-4" />
       <span className="">
-        <ArrowLeft className="h-4 w-4" />
+        <ChevronLeft className="h-4 w-4" />
       </span>
     </Button>
   );
@@ -247,9 +247,9 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRight className="h-4 w-4" />
+      <ChevronRight className="h-4 w-4" />
       <span className="">
-        <ArrowRight className="h-4 w-4" />
+        <ChevronRight className="h-4 w-4" />
       </span>
     </Button>
   );

sections/events/data.ts

@@ -0,0 +1,38 @@
+export type Event = {
+  id: number;
+  title: string;
+  imageUrl: string;
+  type: string;
+  status: string;
+};
+
+export const events: Event[] = [
+  {
+    id: 1,
+    title: "Linguagens de Programação em Português - Design Líquido",
+    imageUrl: "/events/image 11.png",
+    type: "Presencial",
+    status: "Upcoming",
+  },
+  {
+    id: 2,
+    title: "Linguagens de Programação em Português - Design Líquido",
+    imageUrl: "/events/image 12.png",
+    type: "Virtual",
+    status: "",
+  },
+  {
+    id: 3,
+    title: "Hacktoberfest - Aprenda a Contribuir em Projectos Open-Source",
+    imageUrl: "/events/image 13.png",
+    type: "Virtual",
+    status: "",
+  },
+  {
+    id: 4,
+    title: "Hacktoberfest - Aprenda a Contribuir em Projectos Open-Source",
+    imageUrl: "/events/image 13.png",
+    type: "Virtual",
+    status: "",
+  },
+];

sections/events/event-carousel.tsx

@@ -0,0 +1,80 @@
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import Image from "next/image";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils"; 
+import { events } from "./data"; 
+
+export function EventCarousel() {
+  return (
+    <Carousel className="w-full lg:max-w-6xl md:max-w-3xl mt-14">
+      <CarouselContent className="-ml-1 flex flex-col md:flex-row">
+        {events.map((event) => {
+          const isPresencial = event.type === "Presencial";
+
+          return (
+            <CarouselItem key={event.id} className="pl-1 md:basis-1/2 lg:basis-1/3">
+              <div className="p-1">
+                <Card className="p-2 relative border border-gray-500 bg-card-foreground text-mf-white rounded-sm overflow-hidden md:w-[346px] h-[458px]">
+                  <div className="relative h-3/5 w-full mb-6">
+                    <Image
+                      src={event.imageUrl}
+                      alt={event.title}
+                      layout="fill"
+                      objectFit="cover"
+                      className="rounded-lg"
+                    />
+                    {event.status && (
+                      <Badge
+                        variant="outline"
+                        className="absolute top-2 left-2 font-bold border-mf-orange text-mf-orange rounded-[8px] text-xs px-4 py-1"
+                      >
+                        {event.status}
+                      </Badge>
+                    )}
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        "absolute -bottom-12 left-2 font-bold rounded-[8px] text-xs px-4 py-1",
+                        isPresencial ? "border-mf-purple text-mf-purple" : "border-mf-secondProposal text-mf-secondProposal"
+                      )}
+                    >
+                      {event.type}
+                    </Badge>
+                  </div>
+                  <CardContent className="p-4 flex flex-col h-2/5 mt-12">
+                    <h4 className="text-base text-start font-semibold">{event.title}</h4>
+                    <Button
+                      variant="outline"
+                      className={cn(
+                        "mt-4 flex items-center text-sm uppercase font-bold justify-center px-9 py-2 rounded-[8px] transition-colors duration-200",
+                        isPresencial
+                          ? "text-mf-purple hover:bg-mf-purple hover:text-mf-background border-mf-purple"
+                          : "text-mf-secondProposal hover:bg-mf-secondProposal hover:text-mf-background"
+                      )}
+                    >
+                      Ver Detalhes
+                      <ChevronRight />
+                    </Button>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          );
+        })}
+      </CarouselContent>
+      <div className="md:block hidden">
+        <CarouselPrevious />
+        <CarouselNext />
+      </div>
+    </Carousel>
+  );
+}

sections/events/index.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { EventCarousel } from "./event-carousel"; 
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+
+export function EventsSection() {
+  return (
+    <section className="flex flex-col w-full items-center px-8">
+      <h2 className="text-sm text-mf-secondProposal uppercase">Eventos Recentes</h2>
+      <h3 className="text-2xl text-mf-white text-center font-semibold mt-4">
+        Junte-se a nós e participe dos eventos que estão a moldar <br />
+        o <span className="font-bold bg-gradient-to-r from-[#1FCFF1] to-[#FF5FCC] bg-clip-text text-transparent ">futuro do desenvolvimento frontend</span> em Moçambique
+      </h3>
+
+
+      <EventCarousel />
+
+      <div className="mt-12 w-56">
+          <Link
+            target="_blank"
+            href={""}
+            className="w-full truncate text-clip  flex items-center justify-center font-semibold uppercase text-center rounded-lg px-5 py-3 bg-mf-secondProposal hover:bg-mf-secondProposalHover text-sm text-mf-least group"
+          >
+            Ver todos eventos
+            <ArrowUpRight className="max-[400px]:hidden ml-2 group-hover:-translate-y-1 group-hover:translate-x-1 duration-300" />
+          </Link>
+        </div>
+    </section>
+  );
+}