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

Refine hero typography and coming soon flow

Browse Source
This commit is contained in:
MOH
2026-03-08 06:15:36 +01:00
parent 96995ed5f1
commit 97ac06e89a
7 changed files with 176 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/(site)/page.tsx
+1 -3
View File
@@ -78,11 +78,9 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
kicker={t("heroKicker")}
title={t("heroTitle")}
description={t("heroText")}
portfolioLabel={t("toPortfolio")}
contactLabel={t("toContact")}
/>
<Container className="relative z-10 -mt-6 flex flex-col gap-section pb-12 lg:-mt-8 lg:pb-16">
<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"
app/[locale]/coming-soon/page.tsx
+28 -30
View File
@@ -1,15 +1,13 @@
import type { Metadata } from "next";
import { ArrowRight, Sparkles } from "lucide-react";
import Link from "next/link";
import { Sparkles } from "lucide-react";
import { getTranslations } from "next-intl/server";
import { FloatingPreferences } from "@/components/layout/floating-preferences";
import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
import { MotionFade } from "@/components/motion-fade";
import { Button } from "@/components/ui/button";
import { getSiteSettings } from "@/lib/app-config";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
import { resolveLocale } from "@/lib/locale";
type ComingSoonPageProps = {
params: {
@@ -38,6 +36,7 @@ export default async function ComingSoonPage({
}: ComingSoonPageProps) {
const localeKey = resolveLocale(locale);
const t = await getTranslations({ locale: localeKey, namespace: "comingSoon" });
const isArabic = localeKey === "ar";
return (
<div className="relative min-h-screen overflow-hidden">
@@ -50,21 +49,37 @@ export default async function ComingSoonPage({
<MotionFade className="relative z-10 w-full">
<div className="mx-auto max-w-[56rem] text-center">
<p className="inline-flex items-center gap-2 rounded-full border border-white/24 bg-[linear-gradient(180deg,rgba(255,255,255,0.2),rgba(255,255,255,0.08))] px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-foreground/78 shadow-[inset_0_1px_0_rgba(255,255,255,0.42),0_18px_44px_-28px_rgba(15,23,42,0.22)] backdrop-blur-[24px] dark:border-white/10 dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03))]">
<p className="inline-flex items-center gap-2 rounded-full border border-black/6 bg-white/24 px-4 py-2 text-sm font-medium tracking-[-0.02em] text-[hsl(var(--hero-ink)/0.84)] shadow-[0_14px_34px_-24px_rgba(15,23,42,0.18)] backdrop-blur-[18px] dark:border-white/10 dark:bg-white/4 dark:text-foreground/84 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)]">
<Sparkles className="h-3.5 w-3.5 text-brand-secondary" />
{t("badge")}
</p>
<p className="mx-auto mt-8 max-w-[20rem] text-base font-medium tracking-[-0.03em] text-[hsl(var(--hero-ink)/0.76)] drop-shadow-[0_10px_24px_rgba(15,23,42,0.16)] sm:text-lg">
{t("kicker")}
</p>
<h1 className="mx-auto mt-5 flex max-w-[42rem] flex-col gap-y-1 pb-[0.08em] text-[3.15rem] font-semibold leading-[0.94] tracking-[-0.08em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:text-[4.8rem] lg:gap-y-2 lg:text-[6rem]">
<span className="self-start bg-[linear-gradient(135deg,hsl(var(--hero-ink)),hsl(var(--hero-left)/0.9))] bg-clip-text text-transparent">
<h1
className={
isArabic
? "mx-auto mt-8 flex max-w-[40rem] flex-col items-center gap-y-2 overflow-visible pb-[0.12em] text-[3.35rem] font-bold leading-[1.12] tracking-normal text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.18)] sm:text-[4.7rem] lg:max-w-[44rem] lg:text-[5.5rem]"
: "mx-auto mt-8 flex max-w-[44rem] flex-col gap-y-0.5 overflow-visible pb-[0.2em] text-[3.15rem] font-semibold leading-[0.98] tracking-[-0.05em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:text-[4.8rem] lg:max-w-[46rem] lg:gap-y-1 lg:pb-[0.22em] lg:text-[5.85rem]"
}
>
<span
className={
isArabic
? "hero-title-line hero-title-accent-soft self-center whitespace-nowrap"
: "hero-title-line hero-title-accent-soft self-start whitespace-nowrap"
}
>
{t("titleLineOne")}
</span>
<span className="self-end">{t("titleLineTwo")}</span>
<span className="self-start bg-[linear-gradient(135deg,hsl(var(--hero-ink)),hsl(var(--hero-right)/0.85))] bg-clip-text text-transparent">
<span className={isArabic ? "hero-title-line self-center whitespace-nowrap" : "hero-title-line self-end whitespace-nowrap"}>
{t("titleLineTwo")}
</span>
<span
className={
isArabic
? "hero-title-line hero-title-accent self-center whitespace-nowrap"
: "hero-title-line hero-title-accent self-start whitespace-nowrap"
}
>
{t("titleLineThree")}
</span>
</h1>
@@ -76,23 +91,6 @@ export default async function ComingSoonPage({
<p className="mx-auto mt-4 max-w-[32rem] text-sm leading-6 text-foreground/54 sm:text-base">
{t("note")}
</p>
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
<Button asChild size="lg" className="min-w-[11rem] px-6">
<Link href={getLocalizedPath(localeKey, "/contact")}>
{t("primaryCta")}
<ArrowRight className="h-4 w-4" />
</Link>
</Button>
<Button
asChild
variant="outline"
size="lg"
className="min-w-[11rem] border-white/40 bg-white/35 px-6 backdrop-blur-sm hover:bg-white/55 dark:border-white/14 dark:bg-white/6 dark:hover:bg-white/10"
>
<Link href={getLocalizedPath(localeKey, "/")}>{t("secondaryCta")}</Link>
</Button>
</div>
</div>
</MotionFade>
</section>
app/globals.css
+106
View File
@@ -360,6 +360,112 @@ html[lang="ar"] {
background: linear-gradient(180deg, transparent, hsl(var(--background)));
}
.hero-title-line {
display: inline-block;
padding-inline: 0.02em;
padding-block-end: 0.05em;
}
.hero-title-accent {
background-image: linear-gradient(
120deg,
hsl(var(--hero-ink)) 0%,
hsl(var(--hero-ink)) 24%,
hsl(var(--primary) / 0.58) 52%,
hsl(var(--hero-right) / 0.34) 78%,
hsl(var(--hero-ink)) 100%
);
background-size: 220% 220%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: hero-title-shift 8s ease-in-out infinite alternate;
}
.hero-title-accent-soft {
background-image: linear-gradient(
120deg,
hsl(var(--hero-ink)) 0%,
hsl(var(--hero-ink)) 34%,
hsl(var(--hero-left) / 0.26) 62%,
hsl(var(--primary) / 0.24) 82%,
hsl(var(--hero-ink)) 100%
);
background-size: 220% 220%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: hero-title-shift 10s ease-in-out infinite alternate;
}
.hero-scroll-link {
display: inline-flex;
height: 3.25rem;
width: 3.25rem;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid hsl(var(--border) / 0.55);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.38),
0 18px 44px -28px rgba(15, 23, 42, 0.28);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition:
transform 220ms ease,
border-color 220ms ease,
background-color 220ms ease;
}
.hero-scroll-link:hover {
transform: translateY(2px);
border-color: hsl(var(--primary) / 0.42);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.22));
}
.hero-scroll-link svg {
animation: hero-scroll-bob 1.8s ease-in-out infinite;
}
.dark .hero-scroll-link {
border-color: rgba(255, 255, 255, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 18px 44px -28px rgba(0, 0, 0, 0.58);
}
.dark .hero-scroll-link:hover {
border-color: rgba(255, 255, 255, 0.18);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
}
@keyframes hero-title-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 45% 100%;
}
}
@keyframes hero-scroll-bob {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(4px);
}
}
.hero-header-bridge {
position: absolute;
left: 50%;
components/layout/floating-preferences.tsx
+12 -3
View File
@@ -19,9 +19,18 @@ export function FloatingPreferences({
return (
<div className={cn("fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6", className)}>
<div className="mx-auto flex w-full max-w-max items-center justify-center gap-2">
<ThemeToggle ariaLabel={t("themeToggle")} className="bg-background/90" />
<LocaleToggle locale={locale} />
<div className="mx-auto flex w-full justify-center">
<div className="inline-flex items-center justify-center gap-1 rounded-[var(--radius-pill)] border border-black/6 bg-white/24 p-1 shadow-[0_14px_34px_-24px_rgba(15,23,42,0.18)] backdrop-blur-[18px] dark:border-white/10 dark:bg-white/4 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)]">
<ThemeToggle
ariaLabel={t("themeToggle")}
variant="ghost"
className="h-9 w-9 rounded-[var(--radius-pill)] border border-transparent bg-transparent text-[hsl(var(--hero-ink)/0.76)] hover:border-black/5 hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:border-white/10 dark:hover:bg-white/10"
/>
<LocaleToggle
locale={locale}
className="h-9 w-9 rounded-[var(--radius-pill)] border border-transparent bg-transparent p-0 text-[hsl(var(--hero-ink)/0.76)] hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:bg-white/10"
/>
</div>
</div>
</div>
);
components/layout/home-hero.tsx
+13 -26
View File
@@ -1,17 +1,12 @@
import { ArrowRight } from "lucide-react";
import Link from "next/link";
import { ArrowDown } from "lucide-react";
import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
import { Button } from "@/components/ui/button";
import { getLocalizedPath } from "@/lib/locale";
type HomeHeroProps = {
locale: string;
kicker: string;
title: string;
description: string;
portfolioLabel: string;
contactLabel: string;
};
export function HomeHero({
@@ -19,8 +14,6 @@ export function HomeHero({
kicker,
title,
description,
portfolioLabel,
contactLabel,
}: HomeHeroProps) {
const titleLines = title.split("\n").filter(Boolean);
const isArabic = locale === "ar";
@@ -31,15 +24,15 @@ export function HomeHero({
<div className="hero-header-bridge" />
<div className="hero-content-bridge" />
<div className="relative z-10 mx-auto flex w-full max-w-[72rem] flex-col items-center justify-center px-4 pb-12 pt-24 text-center sm:px-6 lg:px-8 lg:pb-16 lg:pt-28">
<div className="mx-auto flex max-w-[46rem] flex-col items-center">
<div className="mx-auto flex max-w-[46rem] flex-col items-center overflow-visible">
<p className="text-base font-medium tracking-[-0.03em] text-[hsl(var(--hero-ink)/0.76)] drop-shadow-[0_10px_24px_rgba(15,23,42,0.16)] sm:text-lg">
{kicker}
</p>
<h1
className={
isArabic
? "mt-5 flex w-full max-w-[40rem] flex-col text-[3rem] font-bold leading-[1.12] tracking-normal text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.16)] sm:text-[4.25rem] lg:max-w-[48rem] lg:text-[5.35rem]"
: "mt-4 flex w-full max-w-[36rem] flex-col gap-y-1 pb-[0.08em] text-[3.25rem] font-semibold leading-[0.94] tracking-[-0.085em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:max-w-[38rem] sm:text-[4.9rem] lg:max-w-[39rem] lg:gap-y-2 lg:text-[6.15rem]"
? "mt-5 flex w-full max-w-[40rem] flex-col overflow-visible pb-[0.1em] text-[3rem] font-bold leading-[1.1] tracking-normal text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.16)] sm:text-[4.25rem] lg:max-w-[48rem] lg:text-[5.35rem]"
: "mt-4 flex w-full max-w-[37rem] flex-col gap-y-0.5 overflow-visible pb-[0.18em] text-[3.25rem] font-semibold leading-[0.98] tracking-[-0.05em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:max-w-[39rem] sm:text-[4.9rem] lg:max-w-[40rem] lg:gap-y-1 lg:pb-[0.2em] lg:text-[6rem]"
}
>
{titleLines.map((line, index) => (
@@ -48,13 +41,13 @@ export function HomeHero({
className={
isArabic
? index === 1
? "self-center whitespace-nowrap"
: "self-center whitespace-nowrap bg-[linear-gradient(135deg,hsl(var(--hero-ink)),hsl(var(--primary)))] bg-clip-text text-transparent"
? "hero-title-line self-center whitespace-nowrap"
: "hero-title-line hero-title-accent self-center whitespace-nowrap"
: index === 1
? "self-end"
? "hero-title-line self-end whitespace-nowrap"
: index === titleLines.length - 1
? "self-start bg-[linear-gradient(135deg,hsl(var(--hero-ink)),hsl(var(--primary)))] bg-clip-text text-transparent"
: "self-start bg-[linear-gradient(135deg,hsl(var(--hero-ink)),hsl(var(--primary)/0.78))] bg-clip-text text-transparent"
? "hero-title-line hero-title-accent self-start whitespace-nowrap"
: "hero-title-line hero-title-accent-soft self-start whitespace-nowrap"
}
>
{line}
@@ -64,16 +57,10 @@ export function HomeHero({
<p className="mx-auto mt-8 max-w-[30rem] whitespace-pre-line text-sm leading-7 text-[hsl(var(--hero-ink)/0.72)] drop-shadow-[0_8px_18px_rgba(15,23,42,0.12)] sm:text-base">
{description}
</p>
<div className="mt-9 flex flex-wrap items-center justify-center gap-3">
<Button asChild size="lg" className="min-w-[10.5rem] px-6">
<Link href={getLocalizedPath(locale, "/portfolio")}>
{portfolioLabel}
<ArrowRight className="h-4 w-4" />
</Link>
</Button>
<Button asChild variant="outline" size="lg" className="min-w-[10.5rem] border-white/40 bg-white/35 px-6 backdrop-blur-sm hover:bg-white/55 dark:border-white/14 dark:bg-white/6 dark:hover:bg-white/10">
<Link href={getLocalizedPath(locale, "/contact")}>{contactLabel}</Link>
</Button>
<div className="mt-10 flex items-center justify-center">
<a href="#home-content" aria-label="Scroll to content" className="hero-scroll-link text-[hsl(var(--hero-ink)/0.74)] dark:text-foreground/82">
<ArrowDown className="h-5 w-5" />
</a>
</div>
</div>
</div>
components/layout/locale-toggle.tsx
+7 -7
View File
@@ -42,16 +42,16 @@ export function LocaleToggle({ locale, className, showLabel = false }: LocaleTog
aria-label={`Locale: ${currentLocale.toUpperCase()}`}
className={cn(
"group cursor-pointer rounded-pill border border-transparent text-muted-foreground hover:border-border/70 hover:bg-background/80 hover:text-foreground",
showLabel ? "gap-2 px-3" : undefined,
showLabel ? "gap-2 px-3" : "h-9 w-9 p-0",
className,
)}
>
<Image
src={localeFlags[currentLocale].src}
alt={localeFlags[currentLocale].alt}
width={18}
height={18}
className="h-[18px] w-[18px] rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
width={20}
height={20}
className="h-5 w-5 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
/>
</Button>
</DropdownMenuTrigger>
@@ -72,9 +72,9 @@ export function LocaleToggle({ locale, className, showLabel = false }: LocaleTog
<Image
src={localeFlags[targetLocale].src}
alt={localeFlags[targetLocale].alt}
width={18}
height={18}
className="h-[18px] w-[18px] rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
width={20}
height={20}
className="h-5 w-5 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
/>
</a>
</DropdownMenuItem>
messages/ar.json
+9 -6
View File
@@ -15,12 +15,12 @@
},
"comingSoon": {
"badge": "قريباً",
"kicker": "مرحبااا، أنا محمد",
"titleLineOne": "نسخة أوضح",
"titleLineTwo": "وأقوى",
"titleLineThree": "بالطريق.",
"description": "عم نجهز النسخة الجديدة بهوية أنضف، محتوى أوضح، وتجربة أرتب من البداية للنهاية.",
"note": "إذا عندك مشروع أو فكرة، فيك تتواصل من هلق ونبلش نحكي بالتفاصيل.",
"kicker": "مرحبا، أنا محمد",
"titleLineOne": "الموقع",
"titleLineTwo": "رح يفتح",
"titleLineThree": "قريباً.",
"description": "عم حضّر الموقع بحلّة جديدة، محتوى أوضح، وتجربة أرتب من أولها لآخرها.",
"note": "إذا حابب تبلّش من هلق، ابعتلي ومنحكي بالتفاصيل.",
"primaryCta": "تواصل معي",
"secondaryCta": "العودة للرئيسية"
},
@@ -76,7 +76,10 @@
"intro": "ابعث لي هدفك باختصار وسأعود إليك بسرعة.",
"name": "الاسم",
"email": "البريد الإلكتروني",
"phone": "الهاتف",
"company": "الشركة",
"message": "الرسالة",
"note": "اذكر السياق والهدف وأي موعد مهم حتى تكون الإجابة أدق.",
"submit": "إرسال",
"preview": "فتح صفحة النجاح",
"city": "برلين، ألمانيا"