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

Refine home hero and header experience

Browse Source
This commit is contained in:
MOH
2026-03-09 08:39:49 +01:00
parent c009f71e39
commit 9632958e41
6 changed files with 166 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/site-header.tsx
+16 -20
View File
@@ -128,6 +128,7 @@ export function SiteHeader({
}: SiteHeaderProps) {
const [isOpen, setIsOpen] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);
const [logoReplayKey, setLogoReplayKey] = useState(0);
const pathname = usePathname();
const locale = useLocale();
const t = useTranslations("navigation");
@@ -137,7 +138,7 @@ export function SiteHeader({
? "مــــــطـــــــــــــور ويــــــــــب | فــــــــــــريــــــلانــــــســــــر"
: "Webdesigner Bremen | Freelancer";
const desktopControlRailClassName =
"inline-flex items-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1 shadow-panel backdrop-blur-chrome";
"inline-flex items-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1 backdrop-blur-chrome";
const desktopControlButtonClassName =
"h-9 w-9 rounded-pill border border-transparent p-0 text-foreground/80 hover:bg-accent hover:text-foreground";
const mobileControlButtonClassName =
@@ -158,7 +159,7 @@ export function SiteHeader({
return (
<header className="fixed inset-x-0 top-3 z-40 bg-transparent">
<Container className="max-w-[88rem]">
<Container className="max-w-[88rem] px-5 sm:px-6 lg:px-8">
<div className="relative grid min-h-[4.5rem] grid-cols-[auto_1fr_auto] items-center gap-3 lg:min-h-[5rem]">
<motion.div
initial={false}
@@ -172,21 +173,16 @@ export function SiteHeader({
<Link
href={getLocalizedPath(locale)}
className="inline-flex items-center gap-2.5 rounded-pill px-1 py-1 sm:gap-3 lg:py-2"
onClick={() => setLogoReplayKey((value) => value + 1)}
>
<motion.span
initial={reducedMotion ? false : isArabic ? { opacity: 0, x: 18, scale: 0.82, rotate: 14, filter: "blur(10px)" } : { opacity: 0, x: -18, scale: 0.82, rotate: -14, filter: "blur(10px)" }}
animate={{ opacity: 1, x: 0, scale: 1, rotate: 0, filter: "blur(0px)" }}
transition={reducedMotion ? { duration: 0 } : { duration: 0.32, ease: [0.22, 1, 0.36, 1] }}
className="relative inline-flex items-center justify-center [transform-style:preserve-3d]"
>
<SiteLogo
lightLogoUrl={lightLogoUrl}
darkLogoUrl={darkLogoUrl}
alt="mohfarawati"
priority
className="relative h-10 opacity-95"
/>
</motion.span>
<SiteLogo
lightLogoUrl={lightLogoUrl}
darkLogoUrl={darkLogoUrl}
alt="mohfarawati"
priority
className="relative h-10 opacity-95"
replayKey={logoReplayKey}
/>
<motion.span
initial={isArabic ? false : "hidden"}
animate="visible"
@@ -250,7 +246,7 @@ export function SiteHeader({
animate={isScrolled ? { y: -1, scale: 0.985 } : { y: 0, scale: 1 }}
transition={reducedMotion ? { duration: 0 } : { duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
className={cn(
"inline-flex items-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1.5 shadow-panel backdrop-blur-chrome",
"inline-flex items-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1.5 backdrop-blur-chrome",
isArabic ? "w-auto max-w-none" : "min-w-[27rem] max-w-[42rem]",
)}
>
@@ -298,7 +294,7 @@ export function SiteHeader({
onClick={() => setIsOpen((open) => !open)}
variant="ghost"
size="icon"
className="col-start-3 ml-auto h-11 w-11 justify-self-end rounded-pill border border-border/70 bg-background/80 text-foreground shadow-panel backdrop-blur-chrome hover:bg-accent lg:hidden"
className="col-start-3 ml-auto h-11 w-11 justify-self-end rounded-pill border border-border/70 bg-background/80 text-foreground backdrop-blur-chrome hover:bg-accent lg:hidden"
aria-label={isOpen ? t("closeMenu") : t("openMenu")}
>
<motion.span
@@ -321,13 +317,13 @@ export function SiteHeader({
transition={{ duration: 0.22, ease: "easeOut" }}
className="bg-transparent lg:hidden"
>
<Container className="pb-2 pt-3">
<Container className="px-5 pb-2 pt-3 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, scale: 0.98 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.98 }}
transition={{ duration: 0.2, ease: "easeOut" }}
className="overflow-hidden rounded-surface border border-border/70 bg-card/95 shadow-panel backdrop-blur-chrome"
className="overflow-hidden rounded-surface border border-border/70 bg-card/95 backdrop-blur-chrome"
>
<motion.nav
initial="closed"