feat: add Hero component and remove unused CarouselMock

src/app/associations/page.tsx

@@ -12,6 +12,7 @@ import {
   FiYoutube,
 } from "react-icons/fi"
 import AccordionAssociation from "@/components/accordion-association"
+import { Hero } from "@/components/ui/hero"
 import esnLogo from "../../../public/logos/esn.svg"
 
 const accordionItems = [
@@ -158,19 +159,11 @@ const accordionItems = [
 
 export default function AssociationsPage() {
   return (
-    <main className="w-full">
-      <div className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
-        <div className="flex flex-col items-center gap-6">
-          <h2 className="typo-display-large md:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent md:py-14">
-            Associazioni
-          </h2>
-          <p className="typo-title-large md:typo-headline-small max-w-2xl text-center">
-            Scopri le associazioni studentesche del Politecnico
-          </p>
-        </div>
-        <div className="w-full max-w-300">
-          <AccordionAssociation accordionItems={accordionItems} defaultValue="ESN - Erasmus Student Network" />
-        </div>
+    <main className="mx-auto flex min-h-screen w-full max-w-400 flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
+      <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
+
+      <div className="w-full max-w-300">
+        <AccordionAssociation accordionItems={accordionItems} defaultValue="ESN - Erasmus Student Network" />
       </div>
     </main>
   )

src/components/projects/collection.tsx

@@ -83,7 +83,7 @@ export function Collection() {
       </div>
 
       <div className="hidden flex-col gap-12 sm:flex">
-        <div className="grid grid-cols-2 justify-items-center gap-6 xl:grid-cols-4">
+        <div className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
           {collectionCards.map((card) => (
             <CardCaption key={card.title} {...card} />
           ))}

src/components/projects/community-news.tsx

@@ -1,6 +1,7 @@
 import { FiCrop } from "react-icons/fi"
 import { CardCaption } from "../card-caption"
 import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
+import { Hero } from "../ui/hero"
 
 const communityCards = [
   {
@@ -36,14 +37,7 @@ const communityCards = [
 export function CommunityNews() {
   return (
     <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-48 px-4 py-49">
-      <div className="flex flex-col items-center gap-6">
-        <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent sm:py-14">
-          Projects
-        </h2>
-        <p className="typo-title-large sm:typo-headline-small max-w-xl text-center">
-          Esplora e contribuisci ai progetti degli studenti
-        </p>
-      </div>
+      <Hero title="Projects" description=" Esplora e contribuisci ai progetti degli studenti" />
 
       <div className="mx-auto flex w-full flex-col gap-14 sm:w-fit">
         <div className="flex flex-col items-center gap-2 sm:items-start">

src/components/projects/deprecated.tsx

@@ -47,7 +47,7 @@ export function Deprecated() {
         </div>
 
         <div className="hidden flex-col gap-12 sm:flex">
-          <div className="grid grid-cols-2 justify-items-center gap-6 xl:grid-cols-4">
+          <div className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
             {communityCards.map((card) => (
               <CardCaption key={card.title} {...card} />
             ))}

src/components/ui/hero.tsx

@@ -0,0 +1,10 @@
+export function Hero({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent sm:py-14">
+        {title}
+      </h2>
+      <p className="typo-title-large sm:typo-headline-small max-w-2xl text-center">{description}</p>
+    </div>
+  )
+}