Refine hero typography and coming soon flow
This commit is contained in:
MOH
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user