Skip to content

Commit 9cdd93a

Browse files
DiubiiDiubii
authored
Merge branch 'main' into bianca/faqs
2 parents 5498ccf + 1080199 commit 9cdd93a

10 files changed

Lines changed: 103 additions & 24 deletions

File tree

‎src/app/matricole/page.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
1+
import type { Metadata } from "next"
12
import { FAQsPage } from "@/components/matricole/faqs"
3+
import { MatricoleIntro } from "@/components/matricole/intro"
24

3-
export default function Home() {
5+
export const metadata: Metadata = {
6+
title: "Matricole",
7+
description: "Risorse utili, guide e strumenti per le matricole del Politecnico di Milano.",
8+
}
9+
10+
export default function MatricolePage() {
411
return (
512
<main className="w-full">
13+
<MatricoleIntro />
614
<FAQsPage />
715
</main>
816
)

‎src/components/card-icon/classes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,39 @@
11
import type { SizeClassMap } from "./types"
22

33
export const ICON_SIZE_CLASSES: SizeClassMap = {
4+
compact: "h-12 w-12",
45
xs: "h-10 w-10",
56
sm: "h-14 w-14",
67
md: "h-32 w-32",
78
lg: "h-44 w-44",
89
}
910

1011
export const CARD_PADDING_WITHOUT_DESCRIPTION: SizeClassMap = {
12+
compact: "p-6",
1113
xs: "p-3",
1214
sm: "px-8 py-4",
1315
md: "p-8",
1416
lg: "p-8",
1517
}
1618

1719
export const CARD_PADDING_WITH_DESCRIPTION: SizeClassMap = {
20+
compact: "p-8",
1821
xs: "p-8",
1922
sm: "p-8",
2023
md: "p-8",
2124
lg: "p-8",
2225
}
2326

2427
export const CONTENT_GAP_CLASSES: SizeClassMap = {
28+
compact: "gap-4",
2529
xs: "gap-2",
2630
sm: "gap-2",
2731
md: "gap-6",
2832
lg: "gap-6",
2933
}
3034

3135
export const TITLE_SIZE_CLASSES: SizeClassMap = {
36+
compact: "typo-headline-medium",
3237
xs: "typo-label-large",
3338
sm: "typo-headline-medium",
3439
md: "typo-headline-medium",

‎src/components/card-icon/index.tsx‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,26 @@ import type { CardIconProps } from "./types"
77
import { getCardPaddingClasses, getContentGapClasses, getTitleSizeClasses } from "./utils"
88

99
export function CardIcon(props: CardIconProps) {
10-
const { title, icon, size = "md", href, hoverEffect = false, className } = props
10+
const { title, icon, size = "md", href, hoverEffect = false, align = "center", className } = props
1111
const description = "description" in props ? props.description : undefined
1212
const Root = href ? "a" : "div"
1313
const isDescriptionCard = Boolean(description)
14+
const isStartAligned = align === "start"
15+
const isCompactDescriptionCard = isDescriptionCard && size === "compact"
16+
const contentAlignmentClass = isDescriptionCard
17+
? isStartAligned
18+
? "items-start justify-start text-left"
19+
: "justify-between"
20+
: isStartAligned
21+
? "items-start justify-center text-left"
22+
: "items-center justify-center text-center"
23+
const textAlignmentClass = isDescriptionCard
24+
? isStartAligned
25+
? "items-start gap-5 text-left"
26+
: "gap-2 text-left"
27+
: isStartAligned
28+
? "items-start text-left"
29+
: "items-center text-center"
1430

1531
return (
1632
<Glass
@@ -29,31 +45,36 @@ export function CardIcon(props: CardIconProps) {
2945
{hoverEffect && <CardHoverBackground />}
3046

3147
<div
32-
className={cn(
33-
"relative z-10 flex h-full flex-1 flex-col",
34-
getContentGapClasses(size),
35-
isDescriptionCard ? "justify-between" : "items-center justify-center text-center"
36-
)}
48+
className={cn("relative z-10 flex h-full flex-1 flex-col", getContentGapClasses(size), contentAlignmentClass)}
3749
>
38-
<div className="flex justify-center">
50+
<div className={cn("flex", isStartAligned ? "justify-start" : "justify-center")}>
3951
{isDescriptionCard ? (
4052
<DescriptionCardMedia icon={icon} size={size} />
4153
) : (
4254
<BasicCardMedia icon={icon} size={size} />
4355
)}
4456
</div>
4557

46-
<div className={cn("flex flex-col", isDescriptionCard ? "gap-2 text-left" : "items-center text-center")}>
58+
<div className={cn("flex flex-col", textAlignmentClass)}>
4759
<h3
4860
className={cn(
4961
getTitleSizeClasses(size),
5062
"bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent",
51-
isDescriptionCard ? "text-left" : "text-center"
63+
isDescriptionCard || isStartAligned ? "text-left" : "text-center"
5264
)}
5365
>
5466
{title}
5567
</h3>
56-
{description && <p className="typo-body-medium max-w-sm text-left text-text-primary">{description}</p>}
68+
{description && (
69+
<p
70+
className={cn(
71+
"text-left text-text-primary",
72+
isCompactDescriptionCard ? "typo-body-large max-w-60" : "typo-body-medium max-w-sm"
73+
)}
74+
>
75+
{description}
76+
</p>
77+
)}
5778
</div>
5879
</div>
5980
</Root>

‎src/components/card-icon/types.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import type { GradientIconType } from "@/components/gradient-icon"
22

3-
export type CardSize = "xs" | "sm" | "md" | "lg"
3+
export type CardSize = "compact" | "xs" | "sm" | "md" | "lg"
44
export type CardBreakpoint = "base" | "sm" | "md" | "lg"
5+
export type CardAlign = "center" | "start"
56

67
export type SizeClassMap = Record<CardSize, string>
78

@@ -18,6 +19,7 @@ export type SharedCardProps = {
1819
title: string
1920
icon: GradientIconType
2021
size?: ResponsiveCardSize
22+
align?: CardAlign
2123
href?: string
2224
hoverEffect?: boolean
2325
className?: string

‎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/header/desktop-layout.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,12 @@ export const DesktopLayout = () => {
2121
const customHoverEffectClass = "hover:underline focus:underline decoration-1 decoration-blue-secondary "
2222

2323
return (
24-
<Glass className="fixed inset-x-6 top-10 z-20 mx-auto box-border max-w-261.25 rounded-full px-17.5 py-5">
24+
<div className="fixed inset-x-6 top-10 z-20 mx-auto box-border max-w-261.25 rounded-full">
25+
<Glass className="pointer-events-none absolute inset-0 rounded-full" />
26+
2527
<NavigationMenu
2628
viewport={false}
27-
className="top-0 isolate flex max-w-full shrink-0 items-stretch bg-card [&>div]:w-full"
29+
className="relative top-0 flex max-w-full shrink-0 items-stretch bg-transparent px-17.5 py-5 [&>div]:w-full"
2830
>
2931
<NavigationMenuList className="flex w-full justify-between">
3032
<NavigationMenuLink asChild className={cn("p-0 py-0.75", removeDefaultHoverEffectClass)}>
@@ -47,7 +49,7 @@ export const DesktopLayout = () => {
4749
<span className="typo-body-medium font-red-hat text-text-primary">{item.title}</span>
4850
</div>
4951
<FiChevronDown
50-
size={24}
52+
size={16}
5153
className="relative top-px ml-1 text-text-primary transition duration-300 group-data-[state=open]:rotate-180"
5254
/>
5355
</NavigationMenuTrigger>
@@ -106,6 +108,6 @@ export const DesktopLayout = () => {
106108
</NavigationMenuItem>
107109
</NavigationMenuList>
108110
</NavigationMenu>
109-
</Glass>
111+
</div>
110112
)
111113
}

‎src/components/header/icon-buttons.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const IconButtonsMobile = () => (
1212
<>
1313
{iconConfigs.map(({ key, label, Icon, onClick }) => (
1414
<button key={key} type="button" onClick={onClick} aria-label={label}>
15-
<Icon size={24} className="text-black" />
15+
<Icon className="size-[24px] text-text-primary" />
1616
</button>
1717
))}
1818
</>
@@ -23,7 +23,7 @@ export const IconButtonsDesktop = ({ removeHoverClass }: { removeHoverClass: str
2323
{iconConfigs.map(({ key, label, Icon, onClick }) => (
2424
<NavigationMenuLink key={key} asChild className={cn("p-0", removeHoverClass)}>
2525
<button type="button" onClick={onClick} aria-label={label}>
26-
<Icon size={24} className="size-[24px] text-text-primary" />
26+
<Icon className="size-[20px] text-text-primary" />
2727
</button>
2828
</NavigationMenuLink>
2929
))}

‎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/faqs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,14 @@ const accordionItems: AccordionListItem[] = [
3737

3838
export function FAQsPage() {
3939
return (
40-
<main className="mx-auto flex min-h-screen w-full max-w-400 flex-col items-center justify-center gap-16 px-9 py-49 sm:gap-20">
40+
<section className="mx-auto flex w-full max-w-400 flex-col items-center justify-center gap-16 px-9 py-49 sm:gap-20">
4141
<h2 className="typo-headline-medium sm:typo-display-medium text-center text-text-primary">
4242
Domande Frequenti tra le Matricole
4343
</h2>
4444

4545
<div className="mx-auto flex w-full max-w-255 flex-col">
4646
<AccordionList items={accordionItems} />
4747
</div>
48-
</main>
48+
</section>
4949
)
5050
}

‎src/components/matricole/intro.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { FiBarChart2, FiMonitor } from "react-icons/fi"
2+
import { CardIcon } from "@/components/card-icon"
3+
4+
const resources = [
5+
{
6+
title: "Graduatorie",
7+
description: "Risultati storici e soglie di accesso per i vari corsi di laurea.",
8+
icon: FiBarChart2,
9+
},
10+
{
11+
title: "Progetto TOL",
12+
description: "Informazioni sul test di ingresso (TOL) e su come prepararsi al meglio.",
13+
icon: FiMonitor,
14+
},
15+
] as const
16+
17+
export function MatricoleIntro() {
18+
return (
19+
<section className="flex min-h-screen w-full flex-col items-center px-6 pt-40 pb-16 sm:px-10">
20+
<div className="mx-auto flex w-full max-w-7xl flex-col items-center">
21+
<div className="flex w-full max-w-200 flex-col items-center gap-6 text-center">
22+
<h1 className="typo-display-large md:typo-display-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-8 text-transparent">
23+
Matricole
24+
</h1>
25+
<p className="typo-title-large md:typo-headline-small w-full text-text-primary">
26+
Ecco una raccolta curata di risorse utili, guide e strumenti per supportare il tuo percorso.
27+
</p>
28+
</div>
29+
30+
<div className="mt-30 grid w-full gap-6 md:grid-cols-2">
31+
{resources.map((resource) => (
32+
<CardIcon key={resource.title} {...resource} align="start" className="h-full min-h-50" size="compact" />
33+
))}
34+
</div>
35+
</div>
36+
</section>
37+
)
38+
}

0 commit comments

Comments
 (0)