Refactor frontend system primitives and surfaces
This commit is contained in:
MOH
@@ -94,18 +94,18 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
|
||||
<Container id="home-content" className="relative z-10 -mt-6 flex scroll-mt-28 flex-col gap-section pb-12 lg:-mt-8 lg:pb-16">
|
||||
<MotionFade delay={0.05}>
|
||||
<AppCard
|
||||
className="overflow-hidden border border-border/70 bg-[linear-gradient(145deg,rgba(255,255,255,0.82),rgba(236,240,251,0.72))] text-foreground shadow-[0_24px_64px_-40px_rgba(15,23,42,0.28)] backdrop-blur-xl dark:border-white/10 dark:bg-[linear-gradient(145deg,rgba(17,24,39,0.78),rgba(10,16,30,0.7))] dark:text-primary-foreground"
|
||||
className="overflow-hidden border border-border/70 bg-card/90 text-card-foreground shadow-panel backdrop-blur-xl"
|
||||
>
|
||||
<CardContent className="p-6 lg:p-10">
|
||||
<div className="grid gap-8 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)] lg:items-start">
|
||||
<div>
|
||||
<p className="text-sm font-medium tracking-[0.08em] text-foreground/56 dark:text-primary-foreground/62">
|
||||
<p className="text-sm font-medium tracking-[0.08em] text-foreground/56">
|
||||
{t("servicesEyebrow")}
|
||||
</p>
|
||||
<h2 className="mt-4 max-w-[12ch] text-balance text-4xl font-semibold leading-[0.92] tracking-[-0.06em] text-foreground sm:text-5xl lg:text-6xl dark:text-primary-foreground">
|
||||
<h2 className="mt-4 max-w-[12ch] text-balance text-4xl font-semibold leading-[0.92] tracking-[-0.06em] text-foreground sm:text-5xl lg:text-6xl">
|
||||
{t("servicesTitle")}
|
||||
</h2>
|
||||
<p className="mt-5 max-w-[34rem] text-sm leading-7 text-muted-foreground sm:text-base dark:text-primary-foreground/76">
|
||||
<p className="mt-5 max-w-[34rem] text-sm leading-7 text-muted-foreground sm:text-base">
|
||||
{t("servicesText")}
|
||||
</p>
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
@@ -119,7 +119,7 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
|
||||
asChild
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="min-w-[11rem] border-border/80 bg-background/70 hover:bg-background dark:border-white/16 dark:bg-white/6 dark:text-primary-foreground dark:hover:bg-white/10 dark:hover:text-primary-foreground"
|
||||
className="min-w-[11rem] border-border/80 bg-background/70 hover:bg-background"
|
||||
>
|
||||
<Link href={getLocalizedPath(localeKey, "/portfolio")}>
|
||||
{t("servicesSecondaryCta")}
|
||||
@@ -135,12 +135,12 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
|
||||
return (
|
||||
<div
|
||||
key={item}
|
||||
className="rounded-nested border border-border/70 bg-white/54 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.5)] transition-colors hover:bg-white/78 dark:border-white/10 dark:bg-white/6 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] dark:hover:bg-white/8"
|
||||
className="rounded-nested border border-border/70 bg-background/80 p-4 shadow-xs transition-colors hover:bg-accent/40"
|
||||
>
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[linear-gradient(135deg,hsl(var(--hero-left)/0.42),hsl(var(--hero-right)/0.26))] dark:bg-[linear-gradient(135deg,rgba(99,125,214,0.18),rgba(192,137,170,0.16))]">
|
||||
<Icon className="h-5 w-5 text-foreground/78 dark:text-primary-foreground/78" />
|
||||
<div className="flex h-10 w-10 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/78" />
|
||||
</div>
|
||||
<p className="mt-4 text-sm font-medium leading-6 text-foreground/88 sm:text-base dark:text-primary-foreground/88">
|
||||
<p className="mt-4 text-sm font-medium leading-6 text-foreground/88 sm:text-base">
|
||||
{item}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -173,11 +173,11 @@ export default async function RootMediaPage({ searchParams }: RootMediaPageProps
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{asset.kind === "IMAGE" ? (
|
||||
<div className="overflow-hidden rounded-lg border bg-card">
|
||||
<div className="overflow-hidden rounded-nested border bg-card">
|
||||
<img src={asset.url} alt={asset.label} className="h-48 w-full object-cover" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg border bg-card px-4 py-6 text-sm text-muted-foreground">
|
||||
<div className="rounded-nested border bg-card px-4 py-6 text-sm text-muted-foreground">
|
||||
{asset.fileName}
|
||||
</div>
|
||||
)}
|
||||
@@ -193,7 +193,7 @@ export default async function RootMediaPage({ searchParams }: RootMediaPageProps
|
||||
</div>
|
||||
|
||||
{asset.usages.length > 0 ? (
|
||||
<div className="space-y-2 rounded-md border bg-muted/40 px-4 py-3 text-xs text-muted-foreground">
|
||||
<div className="space-y-2 rounded-nested border bg-muted/40 px-4 py-3 text-xs text-muted-foreground">
|
||||
{asset.usages.map((usage) => (
|
||||
<p key={usage.id}>
|
||||
{usage.usageType} / {usage.entityType} / {usage.fieldKey}
|
||||
|
||||
+5
-5
@@ -171,25 +171,25 @@ export default async function RootPage({ searchParams }: RootPageProps) {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!authConfigured ? (
|
||||
<p className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
<p className="mb-4 rounded-nested border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{copy.configMissing}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{!basicConfigured ? (
|
||||
<p className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
<p className="mb-4 rounded-nested border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{copy.basicAuthMissing}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{searchParams?.error === "invalid" ? (
|
||||
<p className="mb-4 rounded-md border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
|
||||
<p className="mb-4 rounded-nested border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
|
||||
{copy.invalidLogin}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{searchParams?.error === "locked" || lockState.locked ? (
|
||||
<p className="mb-4 rounded-md border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
|
||||
<p className="mb-4 rounded-nested border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
|
||||
{copy.lockedLogin}
|
||||
</p>
|
||||
) : null}
|
||||
@@ -385,7 +385,7 @@ export default async function RootPage({ searchParams }: RootPageProps) {
|
||||
<CardDescription>{copy.systemStatusDescription}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="rounded-lg border border-border bg-muted/40 p-4">
|
||||
<div className="rounded-nested border border-border bg-muted/40 p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{copy.authCard}</p>
|
||||
|
||||
Reference in New Issue
Block a user