Footer

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "biomejs.biome",
+    "bradlc.vscode-tailwindcss",
+    "yoavbls.pretty-ts-errors",
+    "usernamehw.errorlens"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.defaultFormatter": "biomejs.biome"
+}

package.json

@@ -13,29 +13,31 @@
     "check:fix": "biome check --write --unsafe"
   },
   "dependencies": {
-    "@t3-oss/env-nextjs": "^0.13.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-table": "^8.21.3",
     "babel-plugin-react-compiler": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
     "geist": "^1.5.1",
     "lucide-react": "^0.545.0",
-    "next": "^15.5.4",
+    "next": "^15.5.9",
     "next-themes": "^0.4.6",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.64.0",
-    "tailwind-merge": "^3.3.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-hook-form": "^7.68.0",
+    "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.1.12"
+    "zod": "^4.2.1"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.5",
-    "@tailwindcss/postcss": "^4.1.14",
-    "@types/node": "^24.7.1",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^24.10.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.14",
     "tw-animate-css": "^1.4.0",

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { Footer } from "@/components/footer"
 import { HEADER_HEIGHT, Header } from "@/components/header"
 import { ThemeProvider } from "@/components/theme-provider"
 import "@/styles/globals.css"
@@ -63,6 +64,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,3 +1,7 @@
+import { Users } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { ButtonWithIcon } from "@/components/ui/buttonWithIcon"
+
 export default function Home() {
   return (
     <main className="container mx-auto px-4 py-8">
@@ -8,12 +12,10 @@ export default function Home() {
       <div className="bg-red rounded-rectangles w-90 py-8 flex justify-center items-center flex-col gap-2">
         <p className="text-text-accent-darkbg typo-body-medium">Test with figma variables</p>
         <div className="bg-background-blur w-20 h-20 rounded-images" />
-        <button
-          className="bg-button-primary text-text-accent-lightbg typo-label-large px-6 py-2.5 rounded-buttonsM"
-          type="button"
-        >
-          More groups
-        </button>
+        <ButtonWithIcon variant="primary" icon={Users} iconPosition="left" text="Diventa socio" />
+        <ButtonWithIcon variant="tertiary" icon={Users} iconPosition="right" text="Diventa socio" />
+        <ButtonWithIcon variant="tertiaryBlur" icon={Users} iconPosition="left" text="Diventa socio" />
+        <Button variant="link">Link</Button>
       </div>
     </main>
   )

src/components/footer.tsx

@@ -0,0 +1,76 @@
+import { Github } from "lucide-react"
+import { Glass } from "./glass"
+import { Button } from "./ui/button"
+import { ButtonWithIcon } from "./ui/buttonWithIcon"
+
+export function Footer() {
+  //Icone a riga 11 in futuro per mobile
+  return (
+    <footer className="items-center w-full px-8 my-8">
+      <h2 className="text-3xl font-bold text-center mb-8">Keep in touch!</h2>
+      <div className="flex max-md:flex-col gap-8 max-md:items-center justify-evenly">
+        <div className="flex flex-col gap-8 md:order-2 max-w-sm">
+          <div id="talkwithus" className="w-full">
+            <h3 className="text-xl font-bold">Talk with us</h3>
+            <div id="emails">
+              <div id="collabs" className="my-4">
+                <p className="text-md text-gray-600">Per collaborazioni ed eventi</p>
+                <a href="mailto:eventi@polinetwork.org" className="text-sm">
+                  eventi@polinetwork.org
+                </a>
+              </div>
+              <div id="requests">
+                <p className="text-md text-gray-600">Per domande e richieste</p>
+                <a href="mailto:direttivo@polinetwork.org" className="text-sm">
+                  direttivo@polinetwork.org
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div id="interested" className="text-center md:text-left flex flex-col gap-4">
+            <h3 className="text-xl font-bold">Sei interessato?</h3>
+            <div>
+              <Button variant="primary" size="lg">
+                Unisciti a noi!
+              </Button>
+            </div>
+          </div>
+
+          <div id="problems" className="text-center md:text-left flex flex-col gap-4">
+            <h3 className="text-xl font-bold">Qualche problema? Segnalalo!</h3>
+            <div>
+              <ButtonWithIcon icon={Github} iconPosition="left" variant="tertiary" text="Report a bug"></ButtonWithIcon>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-8 max-w-sm md:justify-self-end">
+          <Glass id="donation" className="w-3xs max-md:mx-auto flex justify-around items-center gap-4 md:order-2">
+            <p className="text-xl">5x1000</p>
+            <div className="flex flex-col text-sm">
+              <p className="font-bold">Sostienici!</p>
+              <p className="whitespace-nowrap">CF: 97927490157</p>
+            </div>
+          </Glass>
+
+          <div id="sitemap" className="w-full flex flex-col gap-4">
+            <h3 className="text-xl font-bold">Visita il sito</h3>
+            <div className="grid grid-cols-2 text-gray-600 text-sm gap-2">
+              <p>Resources</p>
+              <p>Privacy Policy</p>
+              <p>Community</p>
+              <p>Terms & conditions</p>
+              <p>About</p>
+              <p>Cookie policy</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="copyright" className="text-center md:text-left text-xs text-gray-600 mt-12">
+        PoliNetwork 2016-2025 - All rights reserved
+      </div>
+    </footer>
+  )
+}

src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+//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",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-button-primary hover:bg-button-primary/90 text-text-accent-lightbg typo-label-large rounded-buttonsM",
+        tertiary:
+          "bg-button-tertiary hover:bg-button-tertiary/90 text-text-accent-lightbg typo-label-large rounded-buttonsM",
+        tertiaryBlur:
+          "bg-blue-tertiary-blur hover:bg-blue-tertiary-blur/90 text-text-accent-lightbg typo-label-large rounded-buttonsM",
+        outline:
+          "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",
+        lg: "h-10 px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "primary",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/buttonWithIcon.tsx

@@ -0,0 +1,22 @@
+import type { LucideIcon } from "lucide-react"
+import { Button } from "./button"
+
+export function ButtonWithIcon({
+  variant = "primary",
+  icon: Icon,
+  text,
+  iconPosition = "left",
+}: {
+  variant?: "primary" | "tertiary" | "tertiaryBlur"
+  icon: LucideIcon
+  text: string
+  iconPosition?: "left" | "right"
+}) {
+  return (
+    <Button variant={variant} size="lg">
+      {iconPosition === "left" && <Icon />}
+      {text}
+      {iconPosition === "right" && <Icon />}
+    </Button>
+  )
+}

src/components/ui/input.tsx

@@ -0,0 +1,39 @@
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Glass } from "../glass"
+
+type InputProps = React.ComponentProps<"input"> & {
+  icon?: React.ReactNode
+  containerClassName?: string
+}
+
+function Input({ icon, className, containerClassName, ...inputProps }: InputProps) {
+  return (
+    <Glass
+      className={cn(
+        "inline-flex w-full items-center gap-2.5",
+        "border border-white/50",
+        icon ? "px-6 py-3" : "px-4 py-2",
+        "rounded-buttonsM",
+        "bg-background-blur",
+        containerClassName
+      )}
+    >
+      {icon && <span className="flex h-6 w-6 items-center justify-center shrink-0 text-text-primary"> {icon} </span>}
+
+      <input
+        type={inputProps.type}
+        placeholder={inputProps.placeholder ?? undefined}
+        data-slot="input"
+        {...inputProps}
+        className={cn(
+          "w-full bg-transparent border-none outline-none",
+          "typo-body-medium text-text-primary placeholder:text-text-secondary",
+          className
+        )}
+      />
+    </Glass>
+  )
+}
+
+export { Input }

src/lib/utils.ts

@@ -1,5 +1,13 @@
 import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { extendTailwindMerge } from "tailwind-merge"
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      radius: ["images", "rectangles", "buttonsM", "buttonsL"], // custom rounded classes from figma
+    },
+  },
+})
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))