Footer

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { Footer } from "@/components/footer"
 import { Header } from "@/components/header/header"
 import { Shape } from "@/components/shapes"
 import { ThemeProvider } from "@/components/theme-provider"
@@ -83,6 +84,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,15 +1,7 @@
-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 { DropdownButton } from "@/components/button-dropdown"
-import { CardMultipleIcons } from "@/components/card-multiple-icons"
-import { CardSplit } from "@/components/card-split"
 import { AboutUs } from "@/components/home/about-us"
 import { Hero } from "@/components/home/hero"
 import { Materials } from "@/components/home/materials"
 import { Projects } from "@/components/home/projects"
-import { CallToAction } from "@/components/ui/call-to-action"
 
 export default function Home() {
   return (
@@ -18,27 +10,6 @@ export default function Home() {
       <Materials />
       <Projects />
       <AboutUs />
-      <CallToAction title="Scopri di più su di noi" href="/about" icon={FiGithub} />
-      <div className="mx-auto flex w-fit flex-col items-center gap-4 py-12">
-        <DropdownButton
-          placeholder="Select language"
-          options={[
-            { label: "Italian", value: "it" },
-            { label: "English", value: "en" },
-          ]}
-        />
-        <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" />,
-          ]}
-        />
-        <CardSplit textPrimary="5x1000" textSecondary="Sostienici!" textSecondarySmall="CF: 97927490157" />
-      </div>
     </main>
   )
 }

src/components/button-icon.tsx

@@ -1,21 +1,25 @@
+import type { ReactNode } from "react"
 import type { IconType } from "react-icons"
-import { Button } from "./ui/button"
+import { Button, type ButtonSizes } from "./ui/button"
 
 export function ButtonIcon({
   variant = "primary",
   icon: Icon,
-  text,
+  children,
   iconPosition = "left",
+  size,
 }: {
   variant?: "primary" | "tertiary" | "tertiaryBlur"
   icon: IconType
-  text: string
+  children: ReactNode
   iconPosition?: "left" | "right"
+  size: ButtonSizes
+  className?: string
 }) {
   return (
-    <Button variant={variant} size="lg">
+    <Button variant={variant} size={size}>
       {iconPosition === "left" && <Icon />}
-      {text}
+      {children}
       {iconPosition === "right" && <Icon />}
     </Button>
   )

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,171 @@
+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 { ButtonIcon } from "./button-icon"
+import { CardMultipleIcons } from "./card-multiple-icons"
+import { CardSplit } from "./card-split"
+import { Button } from "./ui/button"
+
+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", href: "/" },
+  {
+    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", href: "/" },
+  {
+    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", href: "/" },
+]
+
+export function Footer() {
+  return (
+    <footer className="my-8 w-full px-8">
+      <h2 className="typo-headline-medium md:typo-display-large 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 mt-6 mb-18 flex w-fit flex-col items-center gap-4">
+        <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-between gap-8 max-md:flex-col max-md:items-center max-md:gap-24 md:mx-auto md:max-w-7xl md:px-8">
+        <div className="flex w-full flex-col gap-8 max-md:gap-16 md:order-2 md:max-w-sm">
+          <div id="talkwithus" className="max-md:mx-auto max-md:text-center md: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-wide" 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>
+              <ButtonIcon icon={FaGithub} size="lg-wide" iconPosition="left" variant="tertiary">
+                Report a bug
+              </ButtonIcon>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-16 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} />
+                ) : (
+                  <FooterLink key={section.label} href={section.href}>
+                    {section.label}
+                  </FooterLink>
+                )
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="typo-body-small md:typo-body-large mx-auto mt-36 flex w-full items-center justify-center gap-4 text-center text-text-secondary md:mb-12 md:max-w-7xl md:justify-between md:px-8 md:text-left">
+        <p id="copyright">PoliNetwork 2016-{new Date().getFullYear()} © All rights reserved</p>
+        {/**<div id="select-language">
+          <DropdownButton
+            placeholder="Select language"
+            options={[
+              { label: "Italiano", value: "it" },
+              { label: "English", value: "en" },
+            ]}
+          />
+        </div>**/}
+      </div>
+    </footer>
+  )
+}

src/components/ui/button.tsx

@@ -4,6 +4,18 @@ import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
+const buttonSizes = {
+  default: "h-9 px-4 py-2 has-[>svg]:px-3",
+  sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5 text-xs",
+  lg: "h-10 px-6 has-[>svg]:px-4",
+  "lg-wide": "h-10 px-10 has-[>svg]:px-7.5",
+  // icon: "size-9",
+  //"icon-sm": "size-8",
+  //"icon-lg": "size-10",
+}
+
+export type ButtonSizes = keyof typeof buttonSizes
+
 //TODO: Varianti
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-slate-950 focus-visible:ring-slate-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:focus-visible:border-slate-300 dark:focus-visible:ring-slate-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
@@ -20,14 +32,7 @@ const buttonVariants = cva(
           "border bg-white shadow-xs hover:bg-slate-100 hover:text-slate-900 dark:bg-slate-200/30 dark:border-slate-200 dark:hover:bg-slate-200/50 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:dark:bg-slate-800/30 dark:dark:border-slate-800 dark:dark:hover:bg-slate-800/50",
         link: "text-slate-900 underline-offset-4 underline dark:text-slate-50",
       },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5 text-xs",
-        lg: "h-10 px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
+      size: buttonSizes,
     },
     defaultVariants: {
       variant: "primary",