Refactor site hero and localized branding UI

This commit is contained in:
MOH
2026-03-08 05:13:10 +01:00
parent 9edb162148
commit 2bda611a3b
35 changed files with 682 additions and 234 deletions
+8 -9
View File
@@ -1,5 +1,4 @@
import { HeroAtmosphere } from "@/components/layout/hero-atmosphere";
import { MotionFade } from "@/components/motion-fade";
import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
type PageHeroProps = {
title: string;
@@ -8,22 +7,22 @@ type PageHeroProps = {
export function PageHero({ title, description }: PageHeroProps) {
return (
<section className="relative isolate flex min-h-[42vh] items-end overflow-hidden">
<HeroAtmosphere compact />
<section className="hero-surface hero-page relative isolate flex min-h-[42vh] items-end overflow-hidden">
<HeroMotionBackdrop compact />
<div className="relative z-10 mx-auto w-full max-w-[72rem] px-4 pb-10 pt-24 sm:px-6 lg:px-8 lg:pb-12 lg:pt-28">
<MotionFade className="max-w-[44rem]">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-foreground/48">
<div className="mx-auto max-w-[42rem] text-center">
<p className="text-sm font-medium tracking-[-0.02em] text-foreground/58">
{title}
</p>
<h1 className="mt-4 text-balance text-4xl font-semibold leading-[0.95] tracking-[-0.05em] text-foreground sm:text-5xl lg:text-6xl">
<h1 className="mt-4 text-balance text-4xl font-semibold leading-[0.9] tracking-[-0.07em] text-foreground sm:text-5xl lg:text-[4.5rem]">
{title}
</h1>
{description ? (
<p className="mt-5 max-w-[36rem] text-sm leading-6 text-foreground/66 sm:text-base">
<p className="mx-auto mt-5 max-w-[32rem] text-sm leading-6 text-foreground/64 sm:text-base">
{description}
</p>
) : null}
</MotionFade>
</div>
</div>
</section>
);