feat: Add associations page

src/app/associations/page.tsx

@@ -16,8 +16,8 @@ import esnLogo from "../../../public/logos/esn.svg"
 
 const accordionItems = [
   {
-    value: "ESN - Erasmus Student Network",
-    name: "ESN - Erasmus Student Network",
+    value: "ESN",
+    name: "ESN",
     logo: esnLogo,
     content:
       "Lorem ipsum dolor sit amet consectetur. Velit integer diam in id proin blandit fames id. Volutpat at vel risus non amet tortor. Potenti sit gravida donec lacinia et posuere faucibus. Elementum libero diam nullam ultricies mauris mauris erat porttitor. At morbi commodo nunc vulputate id odio pellentesque ipsum. Adipiscing at dictumst pulvinar mattis faucibus quisque donec convallis commodo. ",
@@ -84,13 +84,93 @@ const accordionItems = [
       },
     ],
   },
+  {
+    value: "Lista Aperta",
+    name: "Lista Aperta",
+    logo: esnLogo,
+    content:
+      "Lorem ipsum dolor sit amet consectetur. Velit integer diam in id proin blandit fames id. Volutpat at vel risus non amet tortor. Potenti sit gravida donec lacinia et posuere faucibus. Elementum libero diam nullam ultricies mauris mauris erat porttitor. At morbi commodo nunc vulputate id odio pellentesque ipsum. Adipiscing at dictumst pulvinar mattis faucibus quisque donec convallis commodo. ",
+    links: [
+      {
+        key: "Facebook",
+        href: "https://www.google.com",
+        icon: FiFacebook,
+      },
+    ],
+  },
+  {
+    value: "MESA",
+    name: "MESA",
+    logo: esnLogo,
+    content:
+      "Lorem ipsum dolor sit amet consectetur. Velit integer diam in id proin blandit fames id. Volutpat at vel risus non amet tortor. Potenti sit gravida donec lacinia et posuere faucibus. Elementum libero diam nullam ultricies mauris mauris erat porttitor. At morbi commodo nunc vulputate id odio pellentesque ipsum. Adipiscing at dictumst pulvinar mattis faucibus quisque donec convallis commodo. ",
+    links: [
+      {
+        key: "Facebook",
+        href: "https://www.google.com",
+        icon: FiFacebook,
+      },
+    ],
+  },
+  {
+    value: "Polifonia",
+    name: "Polifonia",
+    logo: esnLogo,
+    content:
+      "Lorem ipsum dolor sit amet consectetur. Velit integer diam in id proin blandit fames id. Volutpat at vel risus non amet tortor. Potenti sit gravida donec lacinia et posuere faucibus. Elementum libero diam nullam ultricies mauris mauris erat porttitor. At morbi commodo nunc vulputate id odio pellentesque ipsum. Adipiscing at dictumst pulvinar mattis faucibus quisque donec convallis commodo. ",
+    links: [
+      {
+        key: "Facebook",
+        href: "https://www.google.com",
+        icon: FiFacebook,
+      },
+    ],
+  },
+  {
+    value: "POLI.RADIO",
+    name: "POLI.RADIO",
+    logo: esnLogo,
+    content:
+      "Lorem ipsum dolor sit amet consectetur. Velit integer diam in id proin blandit fames id. Volutpat at vel risus non amet tortor. Potenti sit gravida donec lacinia et posuere faucibus. Elementum libero diam nullam ultricies mauris mauris erat porttitor. At morbi commodo nunc vulputate id odio pellentesque ipsum. Adipiscing at dictumst pulvinar mattis faucibus quisque donec convallis commodo. ",
+    links: [
+      {
+        key: "Facebook",
+        href: "https://www.google.com",
+        icon: FiFacebook,
+      },
+    ],
+  },
+  {
+    value: "Studenti Indipendenti",
+    name: "Studenti Indipendenti",
+    logo: esnLogo,
+    content:
+      "Lorem ipsum dolor sit amet consectetur. Velit integer diam in id proin blandit fames id. Volutpat at vel risus non amet tortor. Potenti sit gravida donec lacinia et posuere faucibus. Elementum libero diam nullam ultricies mauris mauris erat porttitor. At morbi commodo nunc vulputate id odio pellentesque ipsum. Adipiscing at dictumst pulvinar mattis faucibus quisque donec convallis commodo. ",
+    links: [
+      {
+        key: "Facebook",
+        href: "https://www.google.com",
+        icon: FiFacebook,
+      },
+    ],
+  },
 ]
 
 export default function AssociationsPage() {
   return (
     <main className="w-full">
-      <div className="mx-auto w-300 py-12">
-        <AccordionAssociation accordionItems={accordionItems} defaultValue="ESN - Erasmus Student Network" />
+      <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>
       </div>
     </main>
   )

src/components/accordion-association/accordion-trigger.tsx

@@ -13,10 +13,10 @@ export function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "flex w-full items-center justify-between gap-4 text-left",
-          "typo-display-medium outline-none",
-          "transition-all duration-500 data-[state=closed]:p-6 data-[state=open]:px-16",
-          "data-[state=open]:pt-16 data-[state=open]:pb-8",
+          "flex w-full items-center justify-between gap-2 text-left md:gap-4",
+          "typo-title-large md:typo-display-medium outline-none",
+          "p-4 transition-none",
+          "md:p-0 md:transition-all md:duration-500 md:data-[state=closed]:p-6 md:data-[state=open]:px-16 md:data-[state=open]:pt-16 md:data-[state=open]:pb-8",
           "[&[data-state=open]>svg]:rotate-180",
           className
         )}

src/components/accordion-association/index.tsx

@@ -14,18 +14,24 @@ export default function AccordionAssociation({ accordionItems, defaultValue }: A
       {accordionItems.map((item) => (
         <AccordionItem key={item.value} value={item.value}>
           <AccordionTrigger>
-            <div className="flex items-center gap-10">
-              <Image src={item.logo} alt={item.name} width={100} height={100} className="rounded-full" />
+            <div className="flex items-center gap-4 md:gap-10">
+              <Image
+                src={item.logo}
+                alt={item.name}
+                width={80}
+                height={80}
+                className="size-14 rounded-full md:size-20"
+              />
               <span>{item.name}</span>
             </div>
           </AccordionTrigger>
           <AccordionContent>
             {item.content}
             <div className="flex flex-col items-start gap-5 pt-14">
-              <span className="typo-title-large bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent">
+              <span className="typo-body-large md:typo-title-large bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent">
                 Segui l'associazione
               </span>
-              <div className="flex flex-wrap gap-7">
+              <div className="flex flex-wrap gap-4 md:gap-7">
                 {item.links.map((link) => (
                   <a key={link.key} href={link.href} target="_blank" className="group/icon relative">
                     <link.icon className="size-6 transition-opacity duration-200 group-hover/icon:opacity-0" />

src/styles/animation.css

@@ -0,0 +1,29 @@
+@keyframes accordion-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@utility animate-accordion-down {
+  animation: accordion-down 0.2s ease-out;
+}
+
+@utility animate-accordion-up {
+  animation: accordion-up 0.2s ease-out;
+}