mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Refine homepage services section and hero spacing

Browse Source
This commit is contained in:
MOH
2026-03-08 05:19:13 +01:00
parent 2bda611a3b
commit ed14160adb
5 changed files with 43 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/(site)/page.tsx
+12 -11
View File
@@ -85,23 +85,22 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
<Container className="relative z-10 -mt-6 flex flex-col gap-section pb-12 lg:-mt-8 lg:pb-16">
<MotionFade delay={0.05}>
<AppCard
level="inverse"
className="overflow-hidden border border-white/6 bg-[linear-gradient(145deg,hsl(var(--foreground)),hsl(221_42%_10%))] text-primary-foreground"
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"
>
<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-primary-foreground/62">
<p className="text-sm font-medium tracking-[0.08em] text-foreground/56 dark:text-primary-foreground/62">
{t("servicesEyebrow")}
</p>
<h2 className="mt-4 max-w-[12ch] text-balance text-4xl font-semibold leading-[0.92] tracking-[-0.06em] text-primary-foreground sm:text-5xl lg:text-6xl">
<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">
{t("servicesTitle")}
</h2>
<p className="mt-5 max-w-[34rem] text-sm leading-7 text-primary-foreground/76 sm:text-base">
<p className="mt-5 max-w-[34rem] text-sm leading-7 text-muted-foreground sm:text-base dark:text-primary-foreground/76">
{t("servicesText")}
</p>
<div className="mt-7 flex flex-wrap gap-3">
<Button asChild size="lg" variant="secondary" className="min-w-[11rem]">
<div className="mt-8 flex flex-wrap gap-3">
<Button asChild size="lg" className="min-w-[11rem]">
<Link href={getLocalizedPath(localeKey, "/contact")}>
{t("servicesPrimaryCta")}
<ArrowRight className="h-4 w-4" />
@@ -111,7 +110,7 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
asChild
size="lg"
variant="outline"
className="min-w-[11rem] border-white/16 bg-white/6 text-primary-foreground hover:bg-white/10 hover:text-primary-foreground"
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"
>
<Link href={getLocalizedPath(localeKey, "/portfolio")}>
{t("servicesSecondaryCta")}
@@ -127,10 +126,12 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
return (
<div
key={item}
className="rounded-nested border border-white/10 bg-white/6 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-sm transition-colors hover:bg-white/8"
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"
>
<Icon className="h-5 w-5 text-primary-foreground/72" />
<p className="mt-4 text-sm font-medium leading-6 text-primary-foreground/88 sm:text-base">
<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>
<p className="mt-4 text-sm font-medium leading-6 text-foreground/88 sm:text-base dark:text-primary-foreground/88">
{item}
</p>
</div>