Skip to content

Commit b591dd6

Browse files
ShaanveerSShaanveerS
committed
feat: add matricole intro
Signed-off-by: Shaanveer Singh <shaanver.singh@gmail.com>
1 parent f34cf16 commit b591dd6

4 files changed

Lines changed: 169 additions & 4 deletions

File tree

‎src/app/matricole/page.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { Metadata } from "next"
2+
import { MatricoleIntro } from "@/components/matricole/intro"
3+
4+
export const metadata: Metadata = {
5+
title: "Matricole",
6+
description: "Risorse utili, guide e strumenti per le matricole del Politecnico di Milano.",
7+
}
8+
9+
export default function MatricolePage() {
10+
return (
11+
<main className="w-full">
12+
<MatricoleIntro />
13+
</main>
14+
)
15+
}

‎src/components/header/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const headerMenuItems: HeaderMenuItem[] = [
1818
menu: [
1919
{ title: "Groups", href: "#", icon: FiChevronRight },
2020
{ title: "Projects", href: "#", icon: FiChevronRight },
21-
{ title: "Freshman", href: "#", icon: FiChevronRight },
21+
{ title: "Freshman", href: "/matricole", icon: FiChevronRight },
2222
{ title: "Associations", href: "#", icon: FiChevronRight },
2323
],
2424
},

‎src/components/home/hero.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Link from "next/link"
12
import { FiNavigation, FiSearch, FiUserPlus } from "react-icons/fi"
23
import { Button } from "@/components/ui/button"
34
import { Input } from "@/components/ui/input"
@@ -26,9 +27,11 @@ export function Hero() {
2627
</div>
2728

2829
<div className="flex items-end justify-end">
29-
<Button variant="tertiaryBlur" size="lg" className="text-blue-secondary">
30-
<FiUserPlus />
31-
Sei una matricola?
30+
<Button variant="tertiaryBlur" size="lg" className="text-blue-secondary" asChild>
31+
<Link href="/matricole">
32+
<FiUserPlus />
33+
Sei una matricola?
34+
</Link>
3235
</Button>
3336
</div>
3437
</section>

‎src/components/matricole/intro.tsx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import Image from "next/image"
2+
import { FiBarChart2, FiMonitor } from "react-icons/fi"
3+
import bigTealSvg from "@/assets/shapes/big-teal.svg"
4+
import looperSvg from "@/assets/shapes/looper.svg"
5+
import { Glass } from "@/components/glass"
6+
import { GradientIcon, type GradientIconType } from "@/components/gradient-icon"
7+
import { cn } from "@/lib/utils"
8+
9+
const resources = [
10+
{
11+
title: "Graduatorie",
12+
description: "Controlla i risultati storici e le soglie di accesso per i vari corsi di laurea",
13+
icon: FiBarChart2,
14+
},
15+
{
16+
title: "Progetto TOL",
17+
description: "Tutte le informazioni sul test di ingresso (TOL) e come prepararsi al meglio.",
18+
icon: FiMonitor,
19+
},
20+
] as const
21+
22+
type ResourceCardProps = {
23+
title: string
24+
description: string
25+
icon: GradientIconType
26+
className?: string
27+
}
28+
29+
function ResourceCard({ title, description, icon, className }: ResourceCardProps) {
30+
return (
31+
<Glass
32+
className={cn(
33+
"h-full overflow-hidden rounded-rectangles border-white/50 bg-background-blur p-0 text-card-foreground",
34+
className
35+
)}
36+
>
37+
<div className="flex min-h-50 flex-col items-start px-6 py-8 sm:px-8 sm:py-10 md:px-10">
38+
<GradientIcon icon={icon} className="h-8 w-8" />
39+
<h2 className="typo-headline-small mt-4 bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent">
40+
{title}
41+
</h2>
42+
<p className="typo-body-small mt-5 max-w-60 text-text-primary">{description}</p>
43+
</div>
44+
</Glass>
45+
)
46+
}
47+
48+
function MatricoleBackground() {
49+
return (
50+
<div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
51+
<div className="absolute top-0 left-0 h-[248.3218vw] w-full">
52+
<Image
53+
src={bigTealSvg}
54+
alt=""
55+
aria-hidden
56+
priority
57+
className="absolute max-w-none select-none"
58+
style={{
59+
top: 0,
60+
left: "-26.0417%",
61+
width: "56.3657%",
62+
height: "22.6987%",
63+
}}
64+
/>
65+
<Image
66+
src={bigTealSvg}
67+
alt=""
68+
aria-hidden
69+
priority
70+
className="absolute max-w-none select-none"
71+
style={{
72+
top: "-0.1165%",
73+
left: "66.7244%",
74+
width: "56.3657%",
75+
height: "22.6987%",
76+
}}
77+
/>
78+
<div
79+
className="absolute flex items-center justify-center"
80+
style={{
81+
top: "-10.1142%",
82+
left: "-32.6389%",
83+
width: "111.0005%",
84+
height: "43.8377%",
85+
}}
86+
>
87+
<Image
88+
src={looperSvg}
89+
alt=""
90+
aria-hidden
91+
priority
92+
className="max-w-none rotate-[-12.93deg] select-none"
93+
style={{
94+
width: "83.9224%",
95+
height: "82.954%",
96+
}}
97+
/>
98+
</div>
99+
<div
100+
className="absolute flex items-center justify-center"
101+
style={{
102+
top: "-12.6544%",
103+
left: "17.5347%",
104+
width: "125.2498%",
105+
height: "49.9899%",
106+
}}
107+
>
108+
<Image
109+
src={looperSvg}
110+
alt=""
111+
aria-hidden
112+
priority
113+
className="max-w-none rotate-[-151.01deg] select-none"
114+
style={{
115+
width: "74.3748%",
116+
height: "72.7469%",
117+
}}
118+
/>
119+
</div>
120+
</div>
121+
</div>
122+
)
123+
}
124+
125+
export function MatricoleIntro() {
126+
return (
127+
<section className="relative isolate flex min-h-screen w-full flex-col items-center overflow-hidden bg-background px-6 pt-40 pb-16 sm:px-10">
128+
<MatricoleBackground />
129+
<div className="relative z-10 mx-auto flex w-full max-w-275 flex-col items-center">
130+
<div className="flex w-full max-w-200 flex-col items-center gap-7 text-center">
131+
<h1 className="typo-display-small sm:typo-display-medium md:typo-display-large bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
132+
Matricole
133+
</h1>
134+
<p className="typo-title-medium w-full max-w-135 text-text-primary">
135+
Ecco una raccolta curata di risorse utili, guide e strumenti per supportare il tuo percorso.
136+
</p>
137+
</div>
138+
139+
<div className="mt-16 grid w-full max-w-205 gap-4 md:grid-cols-2">
140+
{resources.map((resource) => (
141+
<ResourceCard key={resource.title} {...resource} />
142+
))}
143+
</div>
144+
</div>
145+
</section>
146+
)
147+
}

0 commit comments

Comments
 (0)