feat: make page backgrounds to represent Figma's ones

src/app/layout.tsx

@@ -1,6 +1,5 @@
 import { ConditionalFooter } from "@/components/conditional-footer"
 import { Header } from "@/components/header/header"
-import { Shape } from "@/components/shapes"
 import { ThemeProvider } from "@/components/theme-provider"
 import "@/styles/globals.css"
 import type { Metadata } from "next"
@@ -75,12 +74,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
           // storageKey="polinetwork_darkmode_temp" // TODO: enable when dark mode design is ready
           disableTransitionOnChange
         >
-          <div className="-z-10 pointer-events-none fixed inset-0">
-            <Shape variant="big-teal" className="-translate-x-1/2 top-2 left-1/2" />
-            <Shape variant="small-blue" className="-translate-x-1/2 top-2 left-1/4 translate-y-1/2" />
-            <Shape variant="big-blue" className="-translate-x-1/2 -translate-y-1/2 top-0 left-1/2" />
-            <Shape variant="looper" className="-translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" />
-          </div>
+          {/* <ConditionalGlobalShapes /> */}
           <div className="flex min-h-screen w-full flex-col items-center justify-start">
             <Header />
             {children}

src/app/page.tsx

@@ -2,13 +2,20 @@ 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 { HomeMaterialsShapes, HomeProjectsShapes } from "@/components/home/shapes"
 
 export default function Home() {
   return (
     <main className="w-full">
       <Hero />
-      <Materials />
-      <Projects />
+      <div className="relative">
+        <HomeMaterialsShapes />
+        <Materials />
+      </div>
+      <div className="relative">
+        <HomeProjectsShapes />
+        <Projects />
+      </div>
       <AboutUs />
     </main>
   )

src/app/projects/page.tsx

@@ -3,6 +3,7 @@ import { CommunityNews } from "@/components/projects/community-news"
 import { Deprecated } from "@/components/projects/deprecated"
 import { Upload } from "@/components/projects/upload"
 import { getAllProjects } from "@/queries/projects"
+import { CollectionShapes, CommunityNewsShapes, DeprecatedShapes, UploadShapes } from "./shapes"
 
 export const metadata = {
   title: "Progetti",
@@ -20,10 +21,22 @@ export default async function Home() {
 
   return (
     <main className="w-full">
-      <CommunityNews projects={news} />
-      <Collection projects={general} />
-      <Upload />
-      <Deprecated projects={deprecated} />
+      <div className="relative">
+        <CommunityNewsShapes />
+        <CommunityNews projects={news} />
+      </div>
+      <div className="relative">
+        <CollectionShapes />
+        <Collection projects={general} />
+      </div>
+      <div className="relative">
+        <UploadShapes />
+        <Upload />
+      </div>
+      <div className="relative">
+        <DeprecatedShapes />
+        <Deprecated projects={deprecated} />
+      </div>
     </main>
   )
 }

src/app/projects/shapes.tsx

@@ -0,0 +1,97 @@
+import { Shape } from "@/components/shapes"
+
+/**
+ * `left` offsets below are expressed as `calc(50% + Npx)`, i.e. relative to the
+ * horizontal center of the section rather than its left edge. The projects
+ * content is itself center-anchored (not width-capped), so anchoring shapes to
+ * the edge would make them drift away from the content on screens wider or
+ * narrower than the 1728px/402px Figma reference frames.
+ *
+ * `top` is relative to the top of the section each component is mounted in
+ * (CommunityNews, Collection, Upload, Deprecated), not to the page. Every
+ * section on this page uses `min-h-screen` (fluid height, depends on the viewport)
+ * — each shape below is therefore scoped and `top`-anchored to the section it
+ * visually belongs to, rather than using cumulative page offsets.
+ */
+
+export function CommunityNewsShapes() {
+  return (
+    <div aria-hidden className="-z-10 pointer-events-none absolute inset-0">
+      {/* Mobile Shapes */}
+      <Shape variant="big-teal" className="top-12.25 left-[calc(50%-44px)] size-100.25 md:hidden" />
+      <Shape variant="small-blue" className="top-64.75 left-[calc(50%-307px)] size-71.25 md:hidden" />
+      <Shape variant="big-teal" className="top-209 left-[calc(50%-200px)] size-100.25 md:hidden" />
+      <Shape variant="small-blue" className="top-253.75 left-[calc(50%-110px)] size-58.25 md:hidden" />
+      <Shape variant="looper" className="top-120 left-[calc(50%-411px)] h-216.5 w-222.75 rotate-45 md:hidden" />
+      <Shape variant="looper" className="-rotate-155 top-17.75 left-[calc(50%-303px)] h-216.5 w-263 md:hidden" />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-teal" className="top-0 left-[calc(50%-1314px)] hidden size-243.5 md:block" />
+      <Shape variant="big-teal" className="top-0 left-[calc(50%+340px)] hidden size-243.5 md:block" />
+      <Shape
+        variant="looper"
+        className="top-[-73.78px] left-[calc(50%-1428px)] hidden h-[1881.13px] w-[1918.09px] md:block"
+      />
+      <Shape variant="projects-glow" className="-top-12.75 left-[calc(50%-1037px)] hidden size-115 md:block" />
+      <Shape
+        variant="looper"
+        className="top-[-280.4px] left-[calc(50%-27.41px)] hidden h-[1584.39px] w-[1464.51px] md:block"
+      />
+    </div>
+  )
+}
+
+export function CollectionShapes() {
+  return (
+    <div aria-hidden className="-z-10 pointer-events-none absolute inset-0">
+      {/* Mobile Shapes */}
+      <Shape variant="small-blue" className="top-76.25 left-[calc(50%-14px)] size-58.25 md:hidden" />
+      <Shape variant="big-teal" className="top-95.5 left-[calc(50%-317px)] size-100.25 md:hidden" />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-teal" className="top-9.25 left-[calc(50%-487px)] hidden size-243.5 md:block" />
+      <Shape variant="big-blue" className="top-128 left-[calc(50%-294px)] hidden size-144.5 md:block" />
+      <Shape
+        variant="looper"
+        className="top-[-205.37px] left-[calc(50%-763.83px)] hidden h-[1560.48px] w-[1609.71px] md:block"
+      />
+    </div>
+  )
+}
+
+export function UploadShapes() {
+  return (
+    <div aria-hidden className="-z-9 pointer-events-none absolute inset-0">
+      {/* Mobile Shapes */}
+      <Shape variant="big-teal" className="top-161 left-[calc(50%-52px)] size-100.25 md:hidden" />
+      <Shape variant="looper" className="-rotate-120 top-70 left-[calc(50%-480px)] h-265 w-258 md:hidden" />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-blue" className="top-24 left-[calc(50%-50px)] hidden size-115 md:block" />
+      <Shape variant="big-teal" className="top-17.25 left-[calc(50%-801px)] hidden size-243.5 md:block" />
+      <Shape
+        variant="looper"
+        className="-top-15.25 left-[calc(50%-1096.09px)] hidden h-[1560.48px] w-[1609.71px] md:block"
+      />
+    </div>
+  )
+}
+
+export function DeprecatedShapes() {
+  return (
+    <div aria-hidden className="-z-10 pointer-events-none absolute inset-0">
+      {/* Mobile Shapes */}
+      <Shape variant="big-teal" className="top-23.25 left-[calc(50%-338px)] size-100.25 md:hidden" />
+      <Shape variant="small-blue" className="top-45.5 left-[calc(50%-67px)] size-58.25 md:hidden" />
+      <Shape variant="looper" className="-rotate-137 top-143.5 left-[calc(50%-609px)] h-394.25 w-364.75 md:hidden" />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-teal" className="-top-13 left-[calc(50%+77px)] hidden size-243.5 md:block" />
+      <Shape variant="big-blue" className="top-[364.81px] left-[calc(50%+212.4px)] hidden size-[448.76px] md:block" />
+      <Shape
+        variant="looper"
+        className="top-[-147.41px] left-[calc(50%-268.41px)] hidden h-[1560.62px] w-[1609.84px] rotate-180 md:block"
+      />
+    </div>
+  )
+}

src/components/conditional-global-shapes.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { Shape } from "@/components/shapes"
+
+const HIDDEN_EXACT = ["/"]
+
+/**
+ * Generic top-of-page decorative shapes, reused on every page that doesn't
+ * define its own (e.g. the homepage, which has a Figma-accurate composition).
+ */
+export function ConditionalGlobalShapes() {
+  const pathname = usePathname()
+  if (HIDDEN_EXACT.includes(pathname)) return null
+
+  return (
+    <div aria-hidden className="-z-10 pointer-events-none fixed inset-0 overflow-hidden">
+      <div className="*:-translate-x-1/2 contents">
+        <Shape variant="big-teal" className="top-2 left-1/2" />
+        <Shape variant="small-blue" className="top-2 left-1/4 translate-y-1/2" />
+        <Shape variant="big-blue" className="-translate-y-1/2 top-0 left-1/2" />
+        <Shape variant="looper" className="-translate-y-1/2 top-1/2 left-1/2" />
+      </div>
+    </div>
+  )
+}

src/components/footer/index.tsx

@@ -4,11 +4,13 @@ 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 "../card-multiple-icons"
+import { FooterShapes } from "./shapes"
 
 export function Footer() {
   return (
-    <footer className="my-8 w-full px-8">
-      <h2 className="typo-headline-medium md:typo-display-large bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-center text-transparent">
+    <footer className="relative w-full px-8">
+      <FooterShapes />
+      <h2 className="typo-headline-medium md:typo-display-large mt-18 bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-center text-transparent md:mt-30.5">
         Keep in touch!
       </h2>
 
@@ -40,7 +42,7 @@ export function Footer() {
         </div>
       </div>
 
-      <div className="typo-body-small md:typo-body-large mt-12 w-full text-center text-text-secondary md:mt-36">
+      <div className="typo-body-small md:typo-body-large mt-12 mb-10.5 w-full text-center text-text-secondary md:mt-36 md:mb-10">
         <p id="copyright">PoliNetwork 2016-{new Date().getFullYear()} - All rights reserved</p>
       </div>
     </footer>

src/components/footer/shapes.tsx

@@ -0,0 +1,12 @@
+import { Shape } from "@/components/shapes"
+
+export function FooterShapes() {
+  return (
+    <div aria-hidden className="-z-10 pointer-events-none absolute inset-0 overflow-hidden">
+      {/* Desktop Shapes */}
+      <Shape variant="big-teal" className="top-45.75 left-[calc(50%-1064px)] hidden size-361 md:block" />
+      <Shape variant="small-blue" className="top-88.75 left-[calc(50%-815px)] hidden size-88.5 md:block" />
+      <Shape variant="big-blue" className="top-8.5 left-[calc(50%-100px)] hidden size-265.5 rotate-26 md:block" />
+    </div>
+  )
+}

src/components/home/hero.tsx

@@ -2,10 +2,13 @@ import Link from "next/link"
 import { FiNavigation, FiUserPlus } from "react-icons/fi"
 import { Button } from "../ui/button"
 import { GroupSearch } from "./group-search"
+import { HomeHeroShapes } from "./shapes"
 
 export function Hero() {
   return (
-    <section className="flex min-h-screen flex-col gap-40 px-6 pt-67 pb-15 sm:gap-70 sm:px-12">
+    <section className="relative flex min-h-screen flex-col gap-40 px-6 pt-67 pb-15 sm:gap-70 sm:px-12">
+      <HomeHeroShapes />
+
       <div className="flex flex-col items-center gap-17.5 text-center">
         <h1 className="typo-display-small sm:typo-display-medium md:typo-display-large w-fit max-w-4xl bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
           Trova gruppi, risorse e supporto tra gli studenti del Polimi