From 9efe88d9ebf169fd5ba673613b08cf96986713e0 Mon Sep 17 00:00:00 2001 From: diubi Date: Wed, 2 Sep 2026 19:15:10 +0200 Subject: [PATCH 1/5] feat: homepage bg --- src/app/layout.tsx | 9 +-- src/app/page.tsx | 10 ++- src/assets/shapes/hero-glow.svg | 30 +++++++++ src/components/conditional-global-shapes.tsx | 26 ++++++++ src/components/home/hero.tsx | 5 +- src/components/home/shapes.tsx | 66 ++++++++++++++++++++ 6 files changed, 135 insertions(+), 11 deletions(-) create mode 100644 src/assets/shapes/hero-glow.svg create mode 100644 src/components/conditional-global-shapes.tsx create mode 100644 src/components/home/shapes.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c6156ef..909ee12 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,6 @@ import { ConditionalFooter } from "@/components/conditional-footer" +import { ConditionalGlobalShapes } from "@/components/conditional-global-shapes" 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 +75,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac // storageKey="polinetwork_darkmode_temp" // TODO: enable when dark mode design is ready disableTransitionOnChange > -
- - - - -
+
{children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 0296908..ddc53c1 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,14 +2,18 @@ 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 { MiddleShapes } from "@/components/home/shapes" export default function Home() { return (
- - - +
+ + + + +
) } diff --git a/src/assets/shapes/hero-glow.svg b/src/assets/shapes/hero-glow.svg new file mode 100644 index 0000000..98a159b --- /dev/null +++ b/src/assets/shapes/hero-glow.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/conditional-global-shapes.tsx b/src/components/conditional-global-shapes.tsx new file mode 100644 index 0000000..d034b7e --- /dev/null +++ b/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 ( +
+
+ + + + +
+
+ ) +} diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx index ff1152f..ab9d378 100644 --- a/src/components/home/hero.tsx +++ b/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 { HeroShapes } from "./shapes" export function Hero() { return ( -
+
+ +

Trova gruppi, risorse e supporto tra gli studenti del Polimi diff --git a/src/components/home/shapes.tsx b/src/components/home/shapes.tsx new file mode 100644 index 0000000..01b2407 --- /dev/null +++ b/src/components/home/shapes.tsx @@ -0,0 +1,66 @@ +import Image from "next/image" +import heroGlowSvg from "@/assets/shapes/hero-glow.svg" +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 homepage + * 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. + */ + +/** + * Decorative shapes for the Hero section, matching the Figma homepage design. + * Renders a mobile composition (< sm) and a desktop composition (>= sm). + */ +export function HeroShapes() { + return ( +
+ + + + + + +
+ ) +} + +/** + * Decorative shapes bleeding across the Materials, Projects and About Us sections, + * matching the Figma homepage design. Mount this once behind those three sections. + */ +export function MiddleShapes() { + return ( +
+ + + + + + + + + + + + + + +
+ ) +} From 255f6802b0e2bdcbac7081da8192463f2a5e43f7 Mon Sep 17 00:00:00 2001 From: diubi Date: Thu, 3 Sep 2026 19:26:16 +0200 Subject: [PATCH 2/5] feat: finished homepage bg --- src/components/home/shapes.tsx | 61 +++++++++++++--------------------- src/components/shapes.tsx | 9 +++-- 2 files changed, 30 insertions(+), 40 deletions(-) diff --git a/src/components/home/shapes.tsx b/src/components/home/shapes.tsx index 01b2407..cc8c004 100644 --- a/src/components/home/shapes.tsx +++ b/src/components/home/shapes.tsx @@ -1,5 +1,3 @@ -import Image from "next/image" -import heroGlowSvg from "@/assets/shapes/hero-glow.svg" import { Shape } from "@/components/shapes" /** @@ -10,57 +8,44 @@ import { Shape } from "@/components/shapes" * narrower than the 1728px/402px Figma reference frames. */ -/** - * Decorative shapes for the Hero section, matching the Figma homepage design. - * Renders a mobile composition (< sm) and a desktop composition (>= sm). - */ export function HeroShapes() { return (
- - - + {/* Mobile Shapes */} + + + - - + {/* Desktop Shapes */} + +
) } -/** - * Decorative shapes bleeding across the Materials, Projects and About Us sections, - * matching the Figma homepage design. Mount this once behind those three sections. - */ export function MiddleShapes() { return (
- - - - - - - - + {/* Mobile Shapes */} + + + + + + + + + - + {/* Desktop Shapes */} + - - - + + +
) } diff --git a/src/components/shapes.tsx b/src/components/shapes.tsx index 19dd3e2..7f78ba5 100644 --- a/src/components/shapes.tsx +++ b/src/components/shapes.tsx @@ -1,11 +1,12 @@ import Image from "next/image" import bigBlueSvg from "@/assets/shapes/big-blue.svg" import bigTealSvg from "@/assets/shapes/big-teal.svg" +import heroGlowSvg from "@/assets/shapes/hero-glow.svg" import looperSvg from "@/assets/shapes/looper.svg" import smallBlueSvg from "@/assets/shapes/small-blue.svg" import { cn } from "@/lib/utils" -export type ShapeVariant = "big-blue" | "big-teal" | "small-blue" | "looper" +export type ShapeVariant = "big-blue" | "big-teal" | "small-blue" | "hero-glow" | "looper" export type ShapeProps = { variant: ShapeVariant @@ -21,6 +22,8 @@ export const Shape: React.FC = ({ variant, className }) => { return bigTealSvg case "small-blue": return smallBlueSvg + case "hero-glow": + return heroGlowSvg case "looper": return looperSvg default: @@ -28,5 +31,7 @@ export const Shape: React.FC = ({ variant, className }) => { } } - return + return ( + + ) } From 52254e5217c7bfa3aeb98b5d901c6b6502dec0d4 Mon Sep 17 00:00:00 2001 From: diubi Date: Thu, 3 Sep 2026 19:28:10 +0200 Subject: [PATCH 3/5] refactor: edit homepage exported shapes names --- src/app/page.tsx | 4 ++-- src/components/footer/shapes.tsx | 0 src/components/home/hero.tsx | 4 ++-- src/components/home/shapes.tsx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 src/components/footer/shapes.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index ddc53c1..d7b541e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,14 +2,14 @@ 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 { MiddleShapes } from "@/components/home/shapes" +import { HomeMiddleShapes } from "@/components/home/shapes" export default function Home() { return (
- + diff --git a/src/components/footer/shapes.tsx b/src/components/footer/shapes.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx index ab9d378..22bfccb 100644 --- a/src/components/home/hero.tsx +++ b/src/components/home/hero.tsx @@ -2,12 +2,12 @@ import Link from "next/link" import { FiNavigation, FiUserPlus } from "react-icons/fi" import { Button } from "../ui/button" import { GroupSearch } from "./group-search" -import { HeroShapes } from "./shapes" +import { HomeHeroShapes } from "./shapes" export function Hero() { return (
- +

diff --git a/src/components/home/shapes.tsx b/src/components/home/shapes.tsx index cc8c004..52f5ad3 100644 --- a/src/components/home/shapes.tsx +++ b/src/components/home/shapes.tsx @@ -8,7 +8,7 @@ import { Shape } from "@/components/shapes" * narrower than the 1728px/402px Figma reference frames. */ -export function HeroShapes() { +export function HomeHeroShapes() { return (
{/* Mobile Shapes */} @@ -23,7 +23,7 @@ export function HeroShapes() { ) } -export function MiddleShapes() { +export function HomeMiddleShapes() { return (
{/* Mobile Shapes */} From 0a5f92c85ee3d47b64f15c8c6dd0753d7bf8437b Mon Sep 17 00:00:00 2001 From: diubi Date: Thu, 3 Sep 2026 20:05:31 +0200 Subject: [PATCH 4/5] feat: footer shapes --- src/components/footer/index.tsx | 8 +++++--- src/components/footer/shapes.tsx | 12 ++++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index f403e40..7ccad65 100644 --- a/src/components/footer/index.tsx +++ b/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 ( -
-

+
+ +

Keep in touch!

@@ -40,7 +42,7 @@ export function Footer() {

-
+
diff --git a/src/components/footer/shapes.tsx b/src/components/footer/shapes.tsx index e69de29..6299352 100644 --- a/src/components/footer/shapes.tsx +++ b/src/components/footer/shapes.tsx @@ -0,0 +1,12 @@ +import { Shape } from "@/components/shapes" + +export function FooterShapes() { + return ( +
+ {/* Desktop Shapes */} + + + +
+ ) +} From ccd04559f8a603517bb9e996c6812fa0dfbbedab Mon Sep 17 00:00:00 2001 From: diubi Date: Fri, 4 Sep 2026 20:40:26 +0200 Subject: [PATCH 5/5] feat: projects shapes --- src/app/layout.tsx | 3 +- src/app/page.tsx | 9 ++- src/app/projects/page.tsx | 21 +++++-- src/app/projects/shapes.tsx | 97 +++++++++++++++++++++++++++++ src/assets/shapes/projects-glow.svg | 12 ++++ src/components/home/shapes.tsx | 39 +++++++++--- src/components/shapes.tsx | 5 +- 7 files changed, 167 insertions(+), 19 deletions(-) create mode 100644 src/app/projects/shapes.tsx create mode 100644 src/assets/shapes/projects-glow.svg diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 909ee12..c1b9db0 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,4 @@ import { ConditionalFooter } from "@/components/conditional-footer" -import { ConditionalGlobalShapes } from "@/components/conditional-global-shapes" import { Header } from "@/components/header/header" import { ThemeProvider } from "@/components/theme-provider" import "@/styles/globals.css" @@ -75,7 +74,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac // storageKey="polinetwork_darkmode_temp" // TODO: enable when dark mode design is ready disableTransitionOnChange > - + {/* */}
{children} diff --git a/src/app/page.tsx b/src/app/page.tsx index d7b541e..66b8b37 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,18 +2,21 @@ 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 { HomeMiddleShapes } from "@/components/home/shapes" +import { HomeMaterialsShapes, HomeProjectsShapes } from "@/components/home/shapes" export default function Home() { return (
- + +
+
+ -
+
) } diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx index fbfb0d7..a431936 100644 --- a/src/app/projects/page.tsx +++ b/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 (
- - - - +
+ + +
+
+ + +
+
+ + +
+
+ + +
) } diff --git a/src/app/projects/shapes.tsx b/src/app/projects/shapes.tsx new file mode 100644 index 0000000..35d9031 --- /dev/null +++ b/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 ( +
+ {/* Mobile Shapes */} + + + + + + + + {/* Desktop Shapes */} + + + + + +
+ ) +} + +export function CollectionShapes() { + return ( +
+ {/* Mobile Shapes */} + + + + {/* Desktop Shapes */} + + + +
+ ) +} + +export function UploadShapes() { + return ( +
+ {/* Mobile Shapes */} + + + + {/* Desktop Shapes */} + + + +
+ ) +} + +export function DeprecatedShapes() { + return ( +
+ {/* Mobile Shapes */} + + + + + {/* Desktop Shapes */} + + + +
+ ) +} diff --git a/src/assets/shapes/projects-glow.svg b/src/assets/shapes/projects-glow.svg new file mode 100644 index 0000000..07df19c --- /dev/null +++ b/src/assets/shapes/projects-glow.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/home/shapes.tsx b/src/components/home/shapes.tsx index 52f5ad3..a1667be 100644 --- a/src/components/home/shapes.tsx +++ b/src/components/home/shapes.tsx @@ -6,6 +6,17 @@ import { Shape } from "@/components/shapes" * 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 + * (Materials or Projects), not to the page. Materials and Projects/AboutUs + * used to share one absolute layer with cumulative offsets, but AboutUs uses + * `min-h-screen` (fluid height, depends on the viewport) — if a shape ever + * needs to sit inside AboutUs, mount it scoped to that section too, the same + * way this file already splits Materials from Projects. Otherwise any + * mismatch between a fluid section's real height and Figma's fixed height + * assumption compounds into every shape positioned after it (e.g. shapes + * drifting away from their section when the browser is zoomed out — see + * src/app/projects/shapes.tsx, which had exactly this bug). */ export function HomeHeroShapes() { @@ -23,7 +34,7 @@ export function HomeHeroShapes() { ) } -export function HomeMiddleShapes() { +export function HomeMaterialsShapes() { return (
{/* Mobile Shapes */} @@ -32,20 +43,30 @@ export function HomeMiddleShapes() { - - - {/* Desktop Shapes */} - -
) } + +export function HomeProjectsShapes() { + return ( +
+ {/* Mobile Shapes */} + + + + + {/* Desktop Shapes */} + + +
+ ) +} diff --git a/src/components/shapes.tsx b/src/components/shapes.tsx index 7f78ba5..683100e 100644 --- a/src/components/shapes.tsx +++ b/src/components/shapes.tsx @@ -3,10 +3,11 @@ import bigBlueSvg from "@/assets/shapes/big-blue.svg" import bigTealSvg from "@/assets/shapes/big-teal.svg" import heroGlowSvg from "@/assets/shapes/hero-glow.svg" import looperSvg from "@/assets/shapes/looper.svg" +import projectsGlowSvg from "@/assets/shapes/projects-glow.svg" import smallBlueSvg from "@/assets/shapes/small-blue.svg" import { cn } from "@/lib/utils" -export type ShapeVariant = "big-blue" | "big-teal" | "small-blue" | "hero-glow" | "looper" +export type ShapeVariant = "big-blue" | "big-teal" | "small-blue" | "hero-glow" | "projects-glow" | "looper" export type ShapeProps = { variant: ShapeVariant @@ -24,6 +25,8 @@ export const Shape: React.FC = ({ variant, className }) => { return smallBlueSvg case "hero-glow": return heroGlowSvg + case "projects-glow": + return projectsGlowSvg case "looper": return looperSvg default: