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

Refine site hero copy and reusable badge

Browse Source
This commit is contained in:
MOH
2026-03-09 08:51:17 +01:00
parent efef4f4c13
commit c517c68b23
11 changed files with 99 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/(site)/about/page.tsx
+6 -1
View File
@@ -36,7 +36,12 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
return (
<>
<PageHero title={t("title")} description={t("intro")} />
<PageHero
locale={localeKey}
badge={t("heroBadge")}
title={t("heroTitle")}
description={t("intro")}
/>
<Container className="flex flex-col gap-section pb-12 lg:pb-16">
<MotionFade delay={0.05}>
app/[locale]/(site)/contact/page.tsx
+6 -1
View File
@@ -50,7 +50,12 @@ export default async function ContactPage({
return (
<>
<PageHero title={t("title")} description={t("intro")} />
<PageHero
locale={localeKey}
badge={t("heroBadge")}
title={t("heroTitle")}
description={t("intro")}
/>
<Container className="grid gap-6 pb-12 lg:grid-cols-2 lg:pb-16">
<MotionFade>
app/[locale]/(site)/portfolio/page.tsx
+6 -1
View File
@@ -57,7 +57,12 @@ export default async function PortfolioPage({
return (
<>
<PageHero title={t("title")} description={t("intro")} />
<PageHero
locale={localeKey}
badge={t("heroBadge")}
title={t("heroTitle")}
description={t("intro")}
/>
<Container className="flex flex-col gap-section pb-12 lg:pb-16">
<section className="flex flex-wrap gap-3">
app/[locale]/(site)/products/page.tsx
+6 -1
View File
@@ -38,7 +38,12 @@ export default async function ProductsPage({ params: { locale } }: ProductsPageP
return (
<>
<PageHero title={t("title")} description={t("intro")} />
<PageHero
locale={localeKey}
badge={t("heroBadge")}
title={t("heroTitle")}
description={t("intro")}
/>
<Container className="flex flex-col gap-section pb-12 lg:pb-16">
<section className="grid gap-4 md:grid-cols-3">
components/layout/hero-badge.tsx
+23
View File
@@ -0,0 +1,23 @@
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";
type HeroBadgeProps = {
children: ReactNode;
className?: string;
trailing?: ReactNode;
};
export function HeroBadge({ children, className, trailing }: HeroBadgeProps) {
return (
<p
className={cn(
"inline-flex items-center gap-1.5 rounded-pill border border-border/70 bg-background/75 px-3 py-1 text-[0.84rem] font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome sm:px-3.5 sm:py-1 sm:text-[0.9rem]",
className,
)}
>
<span>{children}</span>
{trailing}
</p>
);
}
components/layout/home-hero.tsx
+7 -3
View File
@@ -2,6 +2,7 @@
import { motion, useReducedMotion } from "framer-motion";
import { HeroBadge } from "@/components/layout/hero-badge";
import {
HeroContentMotion,
HeroMotionItem,
@@ -70,8 +71,8 @@ export function HomeHero({
<HeroShell showBridges>
<HeroContentMotion variant="home">
<HeroMotionItem variant="home">
<p className="inline-flex items-center gap-1.5 rounded-pill border border-border/70 bg-background/75 px-3 py-1 text-[0.84rem] font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome sm:px-3.5 sm:py-1 sm:text-[0.9rem]">
<span>{kicker}</span>
<HeroBadge
trailing={
<motion.span
aria-hidden="true"
className="text-[0.95rem] leading-none"
@@ -99,7 +100,10 @@ export function HomeHero({
>
👋
</motion.span>
</p>
}
>
{kicker}
</HeroBadge>
</HeroMotionItem>
<HeroTitle locale={locale} lines={lines} />
<HeroMotionItem variant="home">
components/layout/page-hero.tsx
+16 -6
View File
@@ -1,20 +1,30 @@
import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle } from "@/components/layout/site-hero";
import { HeroBadge } from "@/components/layout/hero-badge";
import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle, type HeroTitleLineValue } from "@/components/layout/site-hero";
type PageHeroProps = {
badge?: string;
title: string;
description?: string;
lines?: HeroTitleLineValue[];
locale?: string;
};
export function PageHero({ title, description }: PageHeroProps) {
function getDefaultLines(title: string): HeroTitleLineValue[] {
return title.split("\n").filter(Boolean).map((line, index) => ({
text: line,
tone: index === 0 ? "soft" : "accent",
align: "center",
}));
}
export function PageHero({ badge, title, description, lines, locale }: PageHeroProps) {
return (
<HeroShell compactBackdrop variant="page">
<HeroContentMotion variant="page">
<HeroMotionItem variant="page">
<p className="inline-flex items-center rounded-pill border border-border/70 bg-background/75 px-4 py-2 text-sm font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome">
{title}
</p>
<HeroBadge>{badge ?? title}</HeroBadge>
</HeroMotionItem>
<HeroTitle lines={[{ text: title }]} variant="page" />
<HeroTitle lines={lines ?? getDefaultLines(title)} locale={locale} variant="page" />
{description ? (
<HeroMotionItem variant="page">
<p className="mx-auto mt-6 max-w-[34rem] text-base leading-7 text-foreground/72">
components/layout/site-hero.tsx
+5 -3
View File
@@ -66,6 +66,8 @@ const lineAlignClasses: Record<HeroLineAlign, string> = {
end: "self-center text-center lg:self-end lg:text-end",
};
export type HeroTitleLineValue = HeroTitleLine;
export function HeroShell({
children,
className,
@@ -189,9 +191,9 @@ export function HeroTitle({
"text-balance font-semibold text-[hsl(var(--hero-ink))]",
variant === "home"
? isArabic
? "mt-6 flex w-full max-w-[20rem] flex-col gap-y-1 text-[clamp(3rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] sm:max-w-[24rem] md:max-w-[30rem] lg:max-w-[32rem]"
: "mt-6 flex w-full max-w-[20rem] flex-col gap-y-1 text-[clamp(3.1rem,11vw,6.3rem)] leading-[0.94] tracking-[-0.06em] sm:max-w-[24rem] md:max-w-[30rem] lg:max-w-[32rem]"
: "mt-4 flex w-full max-w-[20rem] flex-col gap-y-1 text-[clamp(2.8rem,10vw,4.9rem)] leading-[0.96] tracking-[-0.06em] sm:max-w-[24rem] md:max-w-[28rem] lg:max-w-[32rem]",
? "mt-6 flex w-full max-w-[26rem] flex-col gap-y-1 px-4 text-[clamp(2.85rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] sm:max-w-[30rem] sm:px-0 md:max-w-[36rem] lg:max-w-[32rem]"
: "mt-6 flex w-full max-w-[26rem] flex-col gap-y-1 px-4 text-[clamp(2.7rem,12vw,6.3rem)] leading-[0.94] tracking-[-0.045em] sm:max-w-[30rem] sm:px-0 md:max-w-[36rem] lg:max-w-[32rem]"
: "mt-4 flex w-full max-w-[30rem] flex-col gap-y-1 px-4 text-[clamp(2.55rem,9vw,4.9rem)] leading-[0.96] tracking-[-0.05em] sm:px-0 md:max-w-[36rem] lg:max-w-[40rem]",
className,
)}
>
messages/ar.json
+8
View File
@@ -48,6 +48,8 @@
},
"portfolioPage": {
"title": "الأعمال",
"heroBadge": "شغل مختار",
"heroTitle": "شغل\nمختار",
"intro": "مجموعة مشاريع مختارة مع تركيز على الوضوح والنتائج.",
"open": "فتح المشروع",
"all": "كل التصنيفات",
@@ -55,11 +57,15 @@
},
"productsPage": {
"title": "المنتجات",
"heroBadge": "حلول جاهزة",
"heroTitle": "باقات\nجاهزة",
"intro": "باقات للفرق من البداية حتى التوسع.",
"open": "فتح المنتج"
},
"aboutPage": {
"title": "من أنا",
"heroBadge": "خلّيني عرّفك عليّي",
"heroTitle": "عنّي\nأكتر",
"intro": "أبني تجارب رقمية واضحة للعلامات والمنتجات والفرق.",
"valuesTitle": "كيف أعمل",
"valueA": "الاستراتيجية أولاً",
@@ -75,6 +81,8 @@
},
"contactPage": {
"title": "تواصل",
"heroBadge": "خلّينا نحكي",
"heroTitle": "خلّينا\nنحكي",
"intro": "ابعث لي هدفك باختصار وسأعود إليك بسرعة.",
"name": "الاسم",
"email": "البريد الإلكتروني",
messages/de.json
+8
View File
@@ -48,6 +48,8 @@
},
"portfolioPage": {
"title": "Portfolio",
"heroBadge": "Ausgewaehlte Arbeiten",
"heroTitle": "Ausgewaehlte\nProjekte",
"intro": "Eine Auswahl von Projekten mit Fokus auf Klarheit und Ergebnis.",
"open": "Projekt oeffnen",
"all": "Alle Kategorien",
@@ -55,11 +57,15 @@
},
"productsPage": {
"title": "Produkte",
"heroBadge": "Pakete und Loesungen",
"heroTitle": "Klare\nAngebote",
"intro": "Pakete fuer Teams von Start bis Skalierung.",
"open": "Produkt oeffnen"
},
"aboutPage": {
"title": "Ueber mich",
"heroBadge": "Mehr ueber mich",
"heroTitle": "Ueber\nmich",
"intro": "Ich baue klare digitale Erlebnisse fuer Marken, Produkte und Teams.",
"valuesTitle": "Wie ich arbeite",
"valueA": "Strategie zuerst",
@@ -75,6 +81,8 @@
},
"contactPage": {
"title": "Kontakt",
"heroBadge": "Lass uns reden",
"heroTitle": "Lass uns\nreden",
"intro": "Schreib mir kurz dein Ziel und ich melde mich zeitnah.",
"name": "Name",
"email": "E-Mail",
messages/en.json
+8
View File
@@ -48,6 +48,8 @@
},
"portfolioPage": {
"title": "Portfolio",
"heroBadge": "Selected work",
"heroTitle": "Selected\nwork",
"intro": "Selected projects with a focus on clarity and outcomes.",
"open": "Open project",
"all": "All categories",
@@ -55,11 +57,15 @@
},
"productsPage": {
"title": "Products",
"heroBadge": "Packages and offers",
"heroTitle": "Clear\noffers",
"intro": "Packages for teams from early stage to scale.",
"open": "Open product"
},
"aboutPage": {
"title": "About",
"heroBadge": "A bit more about me",
"heroTitle": "About\nme",
"intro": "I build clear digital experiences for brands, products, and teams.",
"valuesTitle": "How I work",
"valueA": "Strategy first",
@@ -75,6 +81,8 @@
},
"contactPage": {
"title": "Contact",
"heroBadge": "Let us talk",
"heroTitle": "Let us\ntalk",
"intro": "Share your goal and I will get back quickly.",
"name": "Name",
"email": "Email",