From 97ac06e89abf1067e2aef43107fff7de034ce04e Mon Sep 17 00:00:00 2001 From: MOH Date: Sun, 8 Mar 2026 06:15:36 +0100 Subject: [PATCH] Refine hero typography and coming soon flow --- app/[locale]/(site)/page.tsx | 4 +- app/[locale]/coming-soon/page.tsx | 58 ++++++----- app/globals.css | 106 +++++++++++++++++++++ components/layout/floating-preferences.tsx | 15 ++- components/layout/home-hero.tsx | 39 +++----- components/layout/locale-toggle.tsx | 14 +-- messages/ar.json | 15 +-- 7 files changed, 176 insertions(+), 75 deletions(-) diff --git a/app/[locale]/(site)/page.tsx b/app/[locale]/(site)/page.tsx index 6d151ea..860e178 100644 --- a/app/[locale]/(site)/page.tsx +++ b/app/[locale]/(site)/page.tsx @@ -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")} /> - + @@ -50,21 +49,37 @@ export default async function ComingSoonPage({
-

+

- {t("badge")} -

- -

{t("kicker")}

-

- +

+ {t("titleLineOne")} - {t("titleLineTwo")} - + + {t("titleLineTwo")} + + {t("titleLineThree")}

@@ -76,23 +91,6 @@ export default async function ComingSoonPage({

{t("note")}

- -
- - -

diff --git a/app/globals.css b/app/globals.css index 2fbf28c..e5a9dca 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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%; diff --git a/components/layout/floating-preferences.tsx b/components/layout/floating-preferences.tsx index e41ba4d..dd48cec 100644 --- a/components/layout/floating-preferences.tsx +++ b/components/layout/floating-preferences.tsx @@ -19,9 +19,18 @@ export function FloatingPreferences({ return (
-
- - +
+
+ + +
); diff --git a/components/layout/home-hero.tsx b/components/layout/home-hero.tsx index 9e58bc7..9e54706 100644 --- a/components/layout/home-hero.tsx +++ b/components/layout/home-hero.tsx @@ -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({
-
+

{kicker}

{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({

{description}

-
- - +

diff --git a/components/layout/locale-toggle.tsx b/components/layout/locale-toggle.tsx index e54bc01..3cf41fa 100644 --- a/components/layout/locale-toggle.tsx +++ b/components/layout/locale-toggle.tsx @@ -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, )} > {localeFlags[currentLocale].alt} @@ -72,9 +72,9 @@ export function LocaleToggle({ locale, className, showLabel = false }: LocaleTog {localeFlags[targetLocale].alt} diff --git a/messages/ar.json b/messages/ar.json index 486c993..ed8e2e2 100644 --- a/messages/ar.json +++ b/messages/ar.json @@ -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": "برلين، ألمانيا"