Restructure about page bento layout
This commit is contained in:
MOH
+227
-241
@@ -1,15 +1,5 @@
|
||||
import type { Metadata } from "next";
|
||||
import {
|
||||
ArrowRight,
|
||||
Blocks,
|
||||
BriefcaseBusiness,
|
||||
Compass,
|
||||
Layers3,
|
||||
MessageSquareMore,
|
||||
Sparkles,
|
||||
Workflow,
|
||||
} from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { ArrowRight, BriefcaseBusiness, GraduationCap, Layers3, MapPin, Sparkles, Wrench } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
@@ -17,10 +7,8 @@ import { Container } from "@/components/layout/container";
|
||||
import { PageHero } from "@/components/layout/page-hero";
|
||||
import { SiteLogo } from "@/components/layout/site-logo";
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent } from "@/components/ui/card";
|
||||
import { getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
|
||||
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
||||
import { buildLocalizedMetadata } from "@/lib/metadata";
|
||||
@@ -56,61 +44,43 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
|
||||
]);
|
||||
const siteName = siteSettings.locales[localeKey].siteName;
|
||||
|
||||
const valueItems = [
|
||||
const workItems = [
|
||||
{
|
||||
icon: Compass,
|
||||
title: t("valueA"),
|
||||
text: t("valueAText"),
|
||||
period: t("workOnePeriod"),
|
||||
role: t("workOneRole"),
|
||||
company: t("workOneCompany"),
|
||||
text: t("workOneText"),
|
||||
},
|
||||
{
|
||||
icon: Layers3,
|
||||
title: t("valueB"),
|
||||
text: t("valueBText"),
|
||||
period: t("workTwoPeriod"),
|
||||
role: t("workTwoRole"),
|
||||
company: t("workTwoCompany"),
|
||||
text: t("workTwoText"),
|
||||
},
|
||||
{
|
||||
icon: MessageSquareMore,
|
||||
title: t("valueC"),
|
||||
text: t("valueCText"),
|
||||
period: t("workThreePeriod"),
|
||||
role: t("workThreeRole"),
|
||||
company: t("workThreeCompany"),
|
||||
text: t("workThreeText"),
|
||||
},
|
||||
];
|
||||
|
||||
const processItems = [
|
||||
const educationItems = [
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: t("processOne"),
|
||||
text: t("processOneText"),
|
||||
title: t("educationOneTitle"),
|
||||
place: t("educationOnePlace"),
|
||||
text: t("educationOneText"),
|
||||
},
|
||||
{
|
||||
icon: Blocks,
|
||||
title: t("processTwo"),
|
||||
text: t("processTwoText"),
|
||||
},
|
||||
{
|
||||
icon: Workflow,
|
||||
title: t("processThree"),
|
||||
text: t("processThreeText"),
|
||||
title: t("educationTwoTitle"),
|
||||
place: t("educationTwoPlace"),
|
||||
text: t("educationTwoText"),
|
||||
},
|
||||
];
|
||||
|
||||
const statItems = [
|
||||
{
|
||||
value: t("statOneValue"),
|
||||
label: t("statOneLabel"),
|
||||
text: t("statOneText"),
|
||||
},
|
||||
{
|
||||
value: t("statTwoValue"),
|
||||
label: t("statTwoLabel"),
|
||||
text: t("statTwoText"),
|
||||
},
|
||||
{
|
||||
value: t("statThreeValue"),
|
||||
label: t("statThreeLabel"),
|
||||
text: t("statThreeText"),
|
||||
},
|
||||
];
|
||||
|
||||
const highlightItems = [t("highlightOne"), t("highlightTwo"), t("highlightThree")];
|
||||
const skillItems = [t("skillOne"), t("skillTwo"), t("skillThree"), t("skillFour"), t("skillFive"), t("skillSix")];
|
||||
const toolItems = [t("toolOne"), t("toolTwo"), t("toolThree"), t("toolFour")];
|
||||
const focusItems = [t("focusOne"), t("focusTwo"), t("focusThree")];
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -121,220 +91,236 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
|
||||
description={t("intro")}
|
||||
/>
|
||||
|
||||
<Container className="relative z-10 flex flex-col gap-6 pb-12 lg:pb-16">
|
||||
<Container className="relative z-10 flex flex-col gap-8 pb-12 lg:pb-16">
|
||||
<MotionFade delay={0.05}>
|
||||
<section className="grid gap-6 lg:grid-cols-12">
|
||||
<AppCard className="overflow-hidden lg:col-span-7">
|
||||
<CardContent className="p-6 lg:p-8">
|
||||
<section className="grid gap-8 border-b border-border/70 pb-8 lg:grid-cols-12">
|
||||
<div className="lg:col-span-9">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||
>
|
||||
{t("storyEyebrow")}
|
||||
</Badge>
|
||||
|
||||
<h2 className="mt-5 max-w-[11ch] text-balance text-4xl font-semibold leading-[0.92] tracking-[-0.06em] text-foreground sm:text-5xl lg:text-6xl">
|
||||
{t("storyTitle")}
|
||||
</h2>
|
||||
|
||||
<div className="mt-6 grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(15rem,18rem)]">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm leading-7 text-muted-foreground sm:text-base">
|
||||
{t("storyTextOne")}
|
||||
</p>
|
||||
<p className="text-sm leading-7 text-muted-foreground sm:text-base">
|
||||
{t("storyTextTwo")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{focusItems.map((item) => (
|
||||
<div key={item} className="rounded-nested border border-border/70 bg-surface-2/70 px-4 py-4 text-sm font-medium leading-6 text-foreground/84">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
<Button asChild size="lg" className="min-w-[11rem]">
|
||||
<Link href={getLocalizedPath(localeKey, "/contact")}>
|
||||
{t("primaryCta")}
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="min-w-[11rem] border-border/80 bg-background/70 hover:bg-background"
|
||||
>
|
||||
<Link href={getLocalizedPath(localeKey, "/portfolio")}>
|
||||
{t("secondaryCta")}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="flex flex-col gap-5 lg:col-span-3">
|
||||
<div className="rounded-surface border border-border/70 bg-surface-2/65 p-5">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||
>
|
||||
{t("storyEyebrow")}
|
||||
{t("snapshotEyebrow")}
|
||||
</Badge>
|
||||
|
||||
<h2 className="mt-5 max-w-[11ch] text-balance text-4xl font-semibold leading-[0.92] tracking-[-0.06em] text-foreground sm:text-5xl lg:text-6xl">
|
||||
{t("storyTitle")}
|
||||
</h2>
|
||||
|
||||
<div className="mt-6 grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(12rem,15rem)] lg:items-start">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm leading-7 text-muted-foreground sm:text-base">
|
||||
{t("storyTextOne")}
|
||||
</p>
|
||||
<p className="text-sm leading-7 text-muted-foreground sm:text-base">
|
||||
{t("storyTextTwo")}
|
||||
</p>
|
||||
<div className="mt-5 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-foreground">{t("snapshotTitle")}</h3>
|
||||
<p className="mt-2 text-sm leading-6 text-muted-foreground">{t("snapshotText")}</p>
|
||||
</div>
|
||||
<SiteLogo
|
||||
alt={siteName}
|
||||
priority
|
||||
lightLogoUrl={mediaBindings.siteLogoLight?.url}
|
||||
darkLogoUrl={mediaBindings.siteLogoDark?.url}
|
||||
className="h-10 sm:h-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{highlightItems.map((item) => (
|
||||
<AppCard key={item} padding="sm" className="text-sm font-medium leading-6 text-foreground/84">
|
||||
{item}
|
||||
</AppCard>
|
||||
))}
|
||||
<div className="rounded-surface border border-border/70 bg-background/40 p-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin className="mt-0.5 h-4 w-4 text-brand-primary" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">{t("locationTitle")}</p>
|
||||
<p className="mt-1 text-sm leading-6 text-muted-foreground">{t("locationText")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
<Button asChild size="lg" className="min-w-[11rem]">
|
||||
<Link href={getLocalizedPath(localeKey, "/contact")}>
|
||||
{t("primaryCta")}
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="min-w-[11rem] border-border/80 bg-background/70 hover:bg-background"
|
||||
>
|
||||
<Link href={getLocalizedPath(localeKey, "/portfolio")}>
|
||||
{t("secondaryCta")}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
|
||||
<AppCard className="overflow-hidden lg:col-span-5">
|
||||
<CardContent className="p-5">
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<AppCard className="sm:col-span-2 lg:col-span-4">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-foreground/48">
|
||||
{t("logoEyebrow")}
|
||||
</p>
|
||||
<p className="mt-2 max-w-[16rem] text-sm leading-6 text-muted-foreground">
|
||||
{t("logoText")}
|
||||
</p>
|
||||
</div>
|
||||
<SiteLogo
|
||||
alt={siteName}
|
||||
priority
|
||||
lightLogoUrl={mediaBindings.siteLogoLight?.url}
|
||||
darkLogoUrl={mediaBindings.siteLogoDark?.url}
|
||||
className="h-10 sm:h-11"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
|
||||
<AppCard padding="none" className="overflow-hidden sm:col-span-1 lg:col-span-2">
|
||||
<div className="relative min-h-[9rem] overflow-hidden rounded-nested">
|
||||
<Image
|
||||
src="/uploads/portfolio/demo-cover.svg"
|
||||
alt={t("galleryAltOne")}
|
||||
fill
|
||||
sizes="(min-width: 1024px) 16rem, (min-width: 640px) 50vw, 100vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard className="min-h-[9rem] sm:col-span-1 lg:col-span-2">
|
||||
<CardContent className="flex h-full flex-col justify-between p-4">
|
||||
<div className="flex items-center gap-3 text-foreground/86">
|
||||
<BriefcaseBusiness className="h-5 w-5 text-brand-primary" />
|
||||
<span className="text-sm font-medium">{t("availabilityLabel")}</span>
|
||||
</div>
|
||||
<p className="text-sm leading-6 text-muted-foreground">
|
||||
{t("availabilityText")}
|
||||
</p>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
|
||||
<AppCard padding="none" className="overflow-hidden sm:col-span-2 lg:col-span-4">
|
||||
<div className="relative min-h-[13rem] overflow-hidden rounded-nested">
|
||||
<Image
|
||||
src="/uploads/portfolio/demo-cover.svg"
|
||||
alt={t("galleryAltTwo")}
|
||||
fill
|
||||
sizes="(min-width: 1024px) 28rem, (min-width: 640px) 100vw, 100vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</AppCard>
|
||||
</div>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
</MotionFade>
|
||||
|
||||
<MotionFade delay={0.1}>
|
||||
<section className="grid gap-6 lg:grid-cols-12">
|
||||
<AppCard className="lg:col-span-3">
|
||||
<CardContent className="flex h-full flex-col p-6">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="w-fit border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||
>
|
||||
{t("valuesEyebrow")}
|
||||
</Badge>
|
||||
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground sm:text-4xl">
|
||||
{t("valuesTitle")}
|
||||
</h2>
|
||||
<p className="mt-4 max-w-[28rem] text-sm leading-7 text-muted-foreground">
|
||||
{t("valuesIntro")}
|
||||
</p>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
<section className="grid gap-8 border-b border-border/70 pb-8 lg:grid-cols-10">
|
||||
<div className="lg:col-span-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||
>
|
||||
{t("experienceEyebrow")}
|
||||
</Badge>
|
||||
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
|
||||
{t("experienceTitle")}
|
||||
</h2>
|
||||
</div>
|
||||
<BriefcaseBusiness className="h-5 w-5 text-brand-primary" />
|
||||
</div>
|
||||
|
||||
{valueItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<AppCard key={item.title} className="lg:col-span-3">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-[linear-gradient(135deg,hsl(var(--hero-left)/0.42),hsl(var(--hero-right)/0.26))]">
|
||||
<Icon className="h-5 w-5 text-foreground/80" />
|
||||
</div>
|
||||
<h3 className="mt-4 text-lg font-semibold text-foreground">{item.title}</h3>
|
||||
<div className="mt-6 space-y-5">
|
||||
{workItems.map((item, index) => (
|
||||
<div
|
||||
key={`${item.period}-${item.role}`}
|
||||
className={index === 0 ? "" : "border-t border-border/70 pt-5"}
|
||||
>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-foreground/50">
|
||||
{item.period}
|
||||
</p>
|
||||
<h3 className="mt-3 text-lg font-semibold text-foreground">{item.role}</h3>
|
||||
<p className="mt-1 text-sm font-medium text-foreground/72">{item.company}</p>
|
||||
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||
>
|
||||
{t("educationEyebrow")}
|
||||
</Badge>
|
||||
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
|
||||
{t("educationTitle")}
|
||||
</h2>
|
||||
<p className="mt-4 max-w-[34rem] text-sm leading-7 text-muted-foreground">
|
||||
{t("educationIntro")}
|
||||
</p>
|
||||
</div>
|
||||
<GraduationCap className="h-5 w-5 text-brand-primary" />
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid gap-6 md:grid-cols-2">
|
||||
{educationItems.map((item) => (
|
||||
<div key={item.title} className="rounded-surface border border-border/70 bg-surface-2/60 p-5">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.16em] text-foreground/50">
|
||||
{item.place}
|
||||
</p>
|
||||
<h3 className="mt-3 text-xl font-semibold text-foreground">{item.title}</h3>
|
||||
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</MotionFade>
|
||||
|
||||
<MotionFade delay={0.15}>
|
||||
<section className="grid gap-6 lg:grid-cols-12">
|
||||
<AppCard className="lg:col-span-4">
|
||||
<CardContent className="flex h-full flex-col p-6 lg:p-7">
|
||||
<section className="grid gap-8 lg:grid-cols-10">
|
||||
<div className="lg:col-span-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||
>
|
||||
{t("skillsEyebrow")}
|
||||
</Badge>
|
||||
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
|
||||
{t("skillsTitle")}
|
||||
</h2>
|
||||
<p className="mt-4 max-w-[34rem] text-sm leading-7 text-muted-foreground">
|
||||
{t("skillsIntro")}
|
||||
</p>
|
||||
</div>
|
||||
<Layers3 className="h-5 w-5 text-brand-primary" />
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
{skillItems.map((item) => (
|
||||
<span
|
||||
key={item}
|
||||
className="inline-flex items-center rounded-pill border border-border/70 bg-surface-2/70 px-4 py-2 text-sm font-medium text-foreground/84"
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="w-fit border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||
>
|
||||
{t("processEyebrow")}
|
||||
{t("toolsEyebrow")}
|
||||
</Badge>
|
||||
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground sm:text-4xl">
|
||||
{t("processTitle")}
|
||||
</h2>
|
||||
<p className="mt-4 max-w-[28rem] text-sm leading-7 text-muted-foreground">
|
||||
{t("processIntro")}
|
||||
</p>
|
||||
<Wrench className="h-4 w-4 text-brand-primary" />
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
|
||||
{statItems.map((item) => (
|
||||
<AppCard key={item.label} layer="single" padding="sm" className="shadow-none">
|
||||
<p className="text-3xl font-semibold tracking-[-0.05em] text-foreground">
|
||||
{item.value}
|
||||
</p>
|
||||
<h3 className="mt-2 text-sm font-semibold uppercase tracking-[0.14em] text-foreground/58">
|
||||
{item.label}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-6 text-muted-foreground">{item.text}</p>
|
||||
</AppCard>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
<div className="mt-5 space-y-3">
|
||||
{toolItems.map((item) => (
|
||||
<div key={item} className="rounded-surface border border-border/70 bg-surface-2/60 px-4 py-3 text-sm font-medium text-foreground/84">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:col-span-8 lg:grid-cols-2">
|
||||
{processItems.map((item, index) => {
|
||||
const Icon = item.icon;
|
||||
const isWide = index === 0;
|
||||
<div className="lg:col-span-2">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||
>
|
||||
{t("focusEyebrow")}
|
||||
</Badge>
|
||||
<Sparkles className="h-4 w-4 text-brand-primary" />
|
||||
</div>
|
||||
|
||||
return (
|
||||
<AppCard key={item.title} className={isWide ? "lg:col-span-2" : ""}>
|
||||
<CardContent className="p-5 lg:p-6">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="inline-flex h-8 min-w-[2.5rem] items-center justify-center rounded-pill border border-border/70 px-3 text-xs font-semibold tracking-[0.18em] text-foreground/60">
|
||||
0{index + 1}
|
||||
</span>
|
||||
<Icon className="h-5 w-5 text-brand-primary" />
|
||||
</div>
|
||||
<h3 className="mt-5 text-xl font-semibold text-foreground">{item.title}</h3>
|
||||
<p className="mt-3 max-w-[34rem] text-sm leading-6 text-muted-foreground">
|
||||
{item.text}
|
||||
</p>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
);
|
||||
})}
|
||||
<div className="mt-5 space-y-3">
|
||||
{focusItems.map((item) => (
|
||||
<div key={item} className="rounded-surface border border-border/70 bg-background/40 px-4 py-4 text-sm leading-6 text-foreground/84">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</MotionFade>
|
||||
|
||||
Reference in New Issue
Block a user