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

Optimize local fonts and remove hero motion

Browse Source
This commit is contained in:
MOH
2026-03-10 18:38:59 +01:00
parent 743f6746e0
commit 814447ae5d
5 changed files with 31 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/site-hero.tsx
+15 -70
View File
@@ -3,7 +3,6 @@
import type { ReactNode } from "react";
import { ArrowDown } from "lucide-react";
import { motion, useReducedMotion } from "framer-motion";
import { Container } from "@/components/layout/container";
import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
@@ -119,54 +118,15 @@ export function HeroShell({
export function HeroContentMotion({
children,
className,
variant = "home",
}: HeroContentMotionProps) {
const reducedMotion = useReducedMotion();
if (reducedMotion) {
return <div className={className}>{children}</div>;
}
return (
<motion.div
initial="hidden"
animate="visible"
variants={{
hidden: {},
visible: {
transition: {
staggerChildren: variant === "home" ? 0.07 : 0.05,
delayChildren: variant === "home" ? 0.08 : 0.04,
},
},
}}
className={className}
>
{children}
</motion.div>
);
return <div className={className}>{children}</div>;
}
export function HeroMotionItem({
children,
className,
variant = "home",
}: HeroContentMotionProps) {
const reducedMotion = useReducedMotion();
return (
<motion.div
initial={reducedMotion ? false : { opacity: 0, y: variant === "home" ? 14 : 10, filter: "blur(6px)" }}
animate={reducedMotion ? undefined : { opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{
duration: variant === "home" ? 0.48 : 0.38,
ease: [0.22, 1, 0.36, 1],
}}
className={className}
>
{children}
</motion.div>
);
return <div className={className}>{children}</div>;
}
export function HeroTitle({
@@ -176,27 +136,18 @@ export function HeroTitle({
className,
}: HeroTitleProps) {
const isArabic = locale === "ar";
const reducedMotion = useReducedMotion();
const titleClassName = cn(
"text-balance font-semibold text-[hsl(var(--hero-ink))]",
variant === "home"
? isArabic
? "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,
);
return (
<motion.h1
initial={reducedMotion ? false : { opacity: 0, y: variant === "home" ? 18 : 12, filter: "blur(8px)" }}
animate={reducedMotion ? undefined : { opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{
duration: variant === "home" ? 0.56 : 0.42,
delay: variant === "home" ? 0.06 : 0.04,
ease: [0.22, 1, 0.36, 1],
}}
className={cn(
"text-balance font-semibold text-[hsl(var(--hero-ink))]",
variant === "home"
? isArabic
? "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,
)}
>
<h1 className={titleClassName}>
{lines.map((line, index) => (
<span
key={`${index}-${line.text}`}
@@ -221,7 +172,7 @@ export function HeroTitle({
)}
</span>
))}
</motion.h1>
</h1>
);
}
@@ -230,19 +181,13 @@ export function HeroScrollLink({
label,
className,
}: HeroScrollLinkProps) {
const reducedMotion = useReducedMotion();
return (
<motion.a
<a
href={href}
aria-label={label}
initial={reducedMotion ? false : { opacity: 0, y: 10 }}
animate={reducedMotion ? undefined : { opacity: 1, y: 0 }}
transition={{ duration: 0.34, delay: 0.16, ease: [0.22, 1, 0.36, 1] }}
whileHover={reducedMotion ? undefined : { y: 2 }}
className={cn("hero-scroll-link", className)}
>
<ArrowDown className="h-5 w-5" />
</motion.a>
</a>
);
}