Footer

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { Footer } from "@/components/footer"
 import { HEADER_HEIGHT, Header } from "@/components/header"
 import { Shape } from "@/components/shapes"
 import { ThemeProvider } from "@/components/theme-provider"
@@ -90,6 +91,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
           <div className="flex min-h-screen w-full flex-col items-center justify-start">
             <Header />
             {children}
+            <Footer />
           </div>
         </ThemeProvider>
       </body>

src/app/page.tsx

@@ -1,8 +1,3 @@
-import Image from "next/image"
-import { FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi"
-import discord from "@/assets/icons/discord.svg"
-import telegram from "@/assets/icons/telegram.svg"
-import { CardMultipleIcons } from "@/components/card-multiple-icons"
 import { AboutUs } from "@/components/home/about-us"
 import { Hero } from "@/components/home/hero"
 import { Materials } from "@/components/home/materials"
@@ -13,18 +8,6 @@ export default function Home() {
       <Hero />
       <Materials />
       <AboutUs />
-      <div className="mx-auto w-fit py-12">
-        <CardMultipleIcons
-          icons={[
-            <Image key="telegram" src={telegram} alt="Telegram" />,
-            <FiInstagram key="instagram" />,
-            <FiLinkedin key="linkedin" />,
-            <FiFacebook key="facebook" />,
-            <Image key="discord" src={discord} alt="Discord" />,
-            <FiGithub key="github" />,
-          ]}
-        />
-      </div>
     </main>
   )
 }

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

@@ -0,0 +1,168 @@
+import Image from "next/image"
+import { FaGithub } from "react-icons/fa"
+import { FiChevronDown, FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi"
+import discord from "@/assets/icons/discord.svg"
+import telegram from "@/assets/icons/telegram.svg"
+import { CardMultipleIcons } from "./card-multiple-icons"
+import { CardSplit } from "./card-split"
+import { Button } from "./ui/button"
+import { ButtonWithIcon } from "./ui/buttonWithIcon"
+
+interface FooterLinkProps {
+  href: string
+  children: React.ReactNode
+}
+
+function FooterLink({ href, children }: FooterLinkProps) {
+  return (
+    <a href={href} className="hover:text-gray-800">
+      {children}
+    </a>
+  )
+}
+
+interface FooterAccordionProps {
+  title: string
+  links: { label: string; href: string }[]
+}
+
+function FooterAccordion({ title, links }: FooterAccordionProps) {
+  return (
+    <details className="group text-text-secondary">
+      <summary className="flex cursor-pointer list-none items-center gap-1 [&::-webkit-details-marker]:hidden">
+        {title}
+        <FiChevronDown className="size-4 transition-transform group-open:rotate-180" />
+      </summary>
+      <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}
+          </FooterLink>
+        ))}
+      </div>
+    </details>
+  )
+}
+
+const sitemapSections = [
+  {
+    type: "accordion" as const,
+    title: "Resources",
+    links: [
+      { label: "Materials", href: "/" },
+      { label: "Guides", href: "/" },
+      { label: "Computer recs", href: "/" },
+      { label: "FAQs", href: "/" },
+    ],
+  },
+  { type: "text" as const, label: "Privacy Policy" },
+  {
+    type: "accordion" as const,
+    title: "Community",
+    links: [
+      { label: "Groups", href: "/" },
+      { label: "Projects", href: "/" },
+      { label: "Freshmen", href: "/" },
+      { label: "Associations", href: "/" },
+    ],
+  },
+  { type: "text" as const, label: "Terms & Conditions" },
+  {
+    type: "accordion" as const,
+    title: "About",
+    links: [
+      { label: "About us", href: "/" },
+      { label: "Join us", href: "/" },
+      { label: "Contact us", href: "/" },
+    ],
+  },
+  { type: "text" as const, label: "Cookie policy" },
+]
+
+export function Footer() {
+  //Icone a riga 11 in futuro per mobile
+  return (
+    <footer className="my-8 w-full px-8">
+      <h2 className="typo-headline-medium md:typo-display-large mb-8 text-center max-md:bg-linear-to-b max-md:from-blue-secondary max-md:to-blue-primary max-md:bg-clip-text max-md:text-transparent">
+        Keep in touch!
+      </h2>
+
+      <div className="mx-auto w-fit pb-24">
+        <CardMultipleIcons
+          icons={[
+            <Image key="telegram" src={telegram} alt="Telegram" />,
+            <FiInstagram key="instagram" />,
+            <FiLinkedin key="linkedin" />,
+            <FiFacebook key="facebook" />,
+            <Image key="discord" src={discord} alt="Discord" />,
+            <FiGithub key="github" />,
+          ]}
+        />
+      </div>
+
+      <div className="flex w-full justify-evenly gap-8 max-md:flex-col max-md:items-center">
+        <div className="flex w-full flex-col gap-8 md:order-2 md:max-w-sm">
+          <div id="talkwithus" className="w-full">
+            <h3 className="typo-label-extralarge md:typo-headline-small">Talk with us</h3>
+            <div id="emails" className="typo-body-medium md:typo-body-large">
+              <div id="collabs" className="my-4">
+                <p className="text-gray-600">Per collaborazioni ed eventi</p>
+                <a href="mailto:eventi@polinetwork.org">eventi@polinetwork.org</a>
+              </div>
+              <div id="requests">
+                <p className="text-gray-600">Per domande e richieste</p>
+                <a href="mailto:direttivo@polinetwork.org">direttivo@polinetwork.org</a>
+              </div>
+            </div>
+          </div>
+
+          <div id="interested" className="flex flex-col gap-4 text-center md:text-left">
+            <h3 className="typo-label-extralarge md:typo-headline-small">Sei interessato?</h3>
+            <div>
+              <Button variant="primary" size="lg" className="typo-label-large">
+                Unisciti a noi!
+              </Button>
+            </div>
+          </div>
+
+          <div id="problems" className="flex flex-col gap-4 text-center md:text-left">
+            <h3 className="typo-label-extralarge md:typo-headline-small">Qualche problema? Segnalalo!</h3>
+            <div>
+              <ButtonWithIcon
+                icon={FaGithub}
+                iconPosition="left"
+                variant="tertiary"
+                text="Report a bug"
+              ></ButtonWithIcon>
+            </div>
+          </div>
+        </div>
+
+        <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-text-secondary">
+              {sitemapSections.map((section) =>
+                section.type === "accordion" ? (
+                  <FooterAccordion key={section.title} title={section.title} links={section.links} />
+                ) : (
+                  <p key={section.label}>{section.label}</p>
+                )
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="copyright"
+        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>
+    </footer>
+    //TODO: dropdowns
+  )
+}