responsiveness

Author: Diubii

src/components/card-split/index.tsx

@@ -11,11 +11,11 @@ export function CardSplit({ textPrimary, textSecondary, textSecondarySmall, clas
   return (
     <Glass
       className={cn(
-        "inline-flex max-w-full overflow-hidden rounded-rectangles border-white/50 bg-background-blur p-0 text-card-foreground",
+        "inline-flex w-67 overflow-hidden rounded-rectangles border-white/50 bg-background-blur p-0 text-card-foreground md:w-full md:max-w-full",
         className
       )}
     >
-      <div className="flex flex-col gap-10 px-10 py-5 sm:grid sm:grid-cols-[auto_auto] sm:items-center">
+      <div className="flex w-full items-center justify-center gap-10 px-6 py-5 md:px-10">
         {textPrimary ? <CardSplitPrimaryContent text={textPrimary} /> : null}
 
         {hasSecondaryContent && (

src/components/card-split/primary-content.tsx

@@ -1,6 +1,6 @@
 export function CardSplitPrimaryContent({ text }: { text: string }) {
   return (
-    <p className="typo-display-medium bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text font-normal text-transparent">
+    <p className="typo-headline-small md:typo-display-medium bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text font-normal text-transparent">
       {text}
     </p>
   )

src/components/card-split/secondary-content.tsx

@@ -13,8 +13,10 @@ export function CardSplitSecondaryContent({
 }: CardSplitSecondaryContentProps) {
   return (
     <div className={cn("flex flex-col gap-1", hasPrimaryContent ? "sm:min-w-fit" : "")}>
-      {textSecondary && <p className="typo-headline-small text-text-primary">{textSecondary}</p>}
-      {textSecondarySmall && <p className="typo-body-medium text-text-primary">{textSecondarySmall}</p>}
+      {textSecondary && <p className="typo-label-large md:typo-headline-small text-text-primary">{textSecondary}</p>}
+      {textSecondarySmall && (
+        <p className="typo-body-small md:typo-body-medium text-text-primary">{textSecondarySmall}</p>
+      )}
     </div>
   )
 }

src/components/footer.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image"
-import { FaChevronDown, FaGithub } from "react-icons/fa"
+import { FaGithub } from "react-icons/fa"
+import { FiChevronDown } from "react-icons/fi"
 import { FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi"
 import discord from "@/assets/icons/discord.svg"
 import telegram from "@/assets/icons/telegram.svg"
@@ -28,12 +29,12 @@ interface FooterAccordionProps {
 
 function FooterAccordion({ title, links }: FooterAccordionProps) {
   return (
-    <details className="group">
-      <summary className="flex cursor-pointer list-none items-center gap-2 [&::-webkit-details-marker]:hidden">
+    <details className="group text-text-secondary">
+      <summary className="flex cursor-pointer list-none items-center gap-1 [&::-webkit-details-marker]:hidden">
         {title}
-        <FaChevronDown className="h-4 w-4 transition-transform group-open:rotate-180" />
+        <FiChevronDown className="size-4 transition-transform group-open:rotate-180" />
       </summary>
-      <div className="mt-2 flex flex-col gap-2 pl-2 text-gray-500 text-sm">
+      <div className="mt-2 flex flex-col gap-2 pl-2 text-sm">
         {links.map((link) => (
           <FooterLink key={link.label} href={link.href}>
             {link.label}
@@ -66,7 +67,7 @@ const sitemapSections = [
       { label: "Associations", href: "/" },
     ],
   },
-  { type: "text" as const, label: "Terms & conditions" },
+  { type: "text" as const, label: "Terms & Conditions" },
   {
     type: "accordion" as const,
     title: "About",
@@ -138,12 +139,12 @@ export function Footer() {
           </div>
         </div>
 
-        <div className="flex flex-col gap-8 max-md:w-full md:max-w-md md:justify-self-end">
+        <div className="flex flex-col gap-8 max-md:w-full max-md:items-center md:max-w-md md:justify-self-end">
           <CardSplit textPrimary="5x1000" textSecondary="Sostienici!" textSecondarySmall="CF: 97927490157" />
 
           <div id="sitemap" className="flex w-full flex-col gap-4">
             <h3 className="typo-label-extralarge md:typo-headline-small">Visita il sito</h3>
-            <div className="typo-body-large grid grid-cols-2 items-start gap-x-4 gap-y-4 text-gray-600">
+            <div className="typo-body-large grid grid-cols-2 items-start gap-x-4 gap-y-4 text-text-secondary">
               {sitemapSections.map((section) =>
                 section.type === "accordion" ? (
                   <FooterAccordion key={section.title} title={section.title} links={section.links} />
@@ -158,7 +159,7 @@ export function Footer() {
 
       <div
         id="copyright"
-        className="typo-body-small md:typo-body-large mt-36 mb-12 ml-36 text-center text-text-secondary md:text-left"
+        className="typo-body-small md:typo-body-large mt-36 text-center text-text-secondary max-md:w-full md:mb-12 md:ml-36 md:text-left"
       >
         PoliNetwork 2016-2026 © All rights reserved
       </div>