Skip to content

Commit 238a282

Browse files
committed
feat: improve Material's mobile layout
1 parent 1080199 commit 238a282

1 file changed

Lines changed: 16 additions & 3 deletions

File tree

src/components/home/materials.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { FiArrowUpRight, FiBook, FiBookOpen, FiClipboard, FiFileText, FiUploadCloud } from "react-icons/fi"
22
import { CardIcon } from "@/components/card-icon"
33
import { Button } from "@/components/ui/button"
4+
import { CardCaption } from "../card-caption"
45

56
const featuredCards = [
67
{
78
title: "Carica",
89
description:
910
"Hai appunti, dispense o temi d'esame che vuoi condividere? Caricali qui! Il tuo contributo é prezioso per aiutare migliaia di colleghi con materiale aggiornato!",
11+
caption:
12+
"Hai appunti, dispense o temi d'esame che vuoi condividere? Caricali qui! Il tuo contributo è prezioso per aiutare migliaia di colleghi con materiale aggiornato!",
13+
1014
icon: FiUploadCloud,
1115
size: "lg",
1216
href: "#",
@@ -15,6 +19,8 @@ const featuredCards = [
1519
title: "Visualizza",
1620
description:
1721
"Cerca cio che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.",
22+
caption:
23+
"Cerca cio che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.",
1824
icon: FiBookOpen,
1925
size: "lg",
2026
href: "#",
@@ -30,13 +36,20 @@ const quickLinks = [
3036
export function Materials() {
3137
return (
3238
<section className="mx-auto flex max-w-400 flex-col-reverse gap-24 p-11 py-28 sm:px-20 2xl:flex-row 2xl:items-start 2xl:gap-32">
33-
<div className="flex grow flex-col gap-5 sm:gap-6 2xl:gap-8 2xl:pt-44">
34-
<div className="grid gap-4 sm:grid-cols-2 sm:gap-12 2xl:gap-20">
35-
{/* TODO sotto sm usare le altre card fatte da Diubi */}
39+
<div className="flex grow flex-col gap-4 sm:gap-6 2xl:gap-8 2xl:pt-44">
40+
41+
{/* Desktop Cards */}
42+
<div className="hidden gap-4 sm:grid sm:grid-cols-2 sm:gap-12 2xl:gap-20">
3643
{featuredCards.map((card) => (
3744
<CardIcon key={card.title} {...card} className="h-full" />
3845
))}
3946
</div>
47+
{/* Mobile Cards */}
48+
<div className="flex flex-col items-center gap-4 sm:hidden">
49+
{featuredCards.map((card) => (
50+
<CardCaption key={card.title} {...card} className="h-full w-fit" />
51+
))}
52+
</div>
4053

4154
<div className="grid grid-cols-3 gap-4 sm:gap-12 2xl:gap-20">
4255
{quickLinks.map((card) => (

0 commit comments

Comments
 (0)