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

Refactor site header, heroes, and design system

Browse Source
This commit is contained in:
MOH
2026-03-08 00:29:51 +01:00
parent a18370d003
commit 0c2b67e378
56 changed files with 2714 additions and 1318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/(site)/page.tsx
+19 -48
View File
@@ -4,12 +4,12 @@ import {
BriefcaseBusiness,
Boxes,
Mail,
Sparkles,
} from "lucide-react";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { Container } from "@/components/layout/container";
import { HomeHero } from "@/components/layout/home-hero";
import { MotionFade } from "@/components/motion-fade";
import { getSiteSettings } from "@/lib/app-config";
import { buildLocalizedMetadata } from "@/lib/metadata";
@@ -56,48 +56,18 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
const t = await getTranslations({ locale: localeKey, namespace: "homepage" });
return (
<Container className="flex flex-col gap-section py-10 lg:py-14">
<MotionFade>
<AppCard level={3}>
<CardContent className="grid gap-6 p-6 lg:grid-cols-[1.35fr_0.65fr] lg:p-10">
<div className="space-y-5">
<p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
<Sparkles className="h-4 w-4 text-brand-secondary" />
{t("heroKicker")}
</p>
<h1 className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-5xl">
{t("heroTitle")}
</h1>
<p className="max-w-2xl text-base text-muted-foreground sm:text-lg">
{t("heroText")}
</p>
<div className="flex flex-wrap gap-3">
<Button asChild>
<Link href={getLocalizedPath(localeKey, "/portfolio")}>
{t("toPortfolio")}
<ArrowRight className="h-4 w-4" />
</Link>
</Button>
<Button asChild variant="outline">
<Link href={getLocalizedPath(localeKey, "/products")}>{t("toProducts")}</Link>
</Button>
</div>
</div>
<>
<HomeHero
locale={localeKey}
kicker={t("heroKicker")}
title={t("heroTitle")}
description={t("heroText")}
portfolioLabel={t("toPortfolio")}
contactLabel={t("toContact")}
/>
<AppCard level={2} padding="md" className="self-start">
<p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
<BriefcaseBusiness className="h-4 w-4 text-brand-primary" />
{t("heroCardTitle")}
</p>
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">
{t("heroCardText")}
</p>
</AppCard>
</CardContent>
</AppCard>
</MotionFade>
<MotionFade delay={0.05}>
<Container className="flex flex-col gap-section pb-12 lg:pb-16">
<MotionFade delay={0.05}>
<AppCard>
<CardContent className="p-6 lg:p-8">
<div className="mb-6 flex items-center justify-between gap-4">
@@ -139,9 +109,9 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
</div>
</CardContent>
</AppCard>
</MotionFade>
</MotionFade>
<MotionFade delay={0.1}>
<MotionFade delay={0.1}>
<AppCard>
<CardContent className="p-6 lg:p-8">
<div className="mb-6 flex items-center justify-between gap-4">
@@ -182,9 +152,9 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
</div>
</CardContent>
</AppCard>
</MotionFade>
</MotionFade>
<MotionFade delay={0.15}>
<MotionFade delay={0.15}>
<AppCard level="inverse">
<CardContent className="p-6 lg:p-8">
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
@@ -206,7 +176,8 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
</div>
</CardContent>
</AppCard>
</MotionFade>
</Container>
</MotionFade>
</Container>
</>
);
}