Optimize local fonts and remove hero motion

2026-03-10 18:38:59 +01:00
parent 743f6746e0
commit 814447ae5d
5 changed files with 31 additions and 229 deletions
@@ -1,129 +1,19 @@
 "use client";

-import { motion, useReducedMotion } from "framer-motion";
-
 type HeroMotionBackdropProps = {
  compact?: boolean;
 };

-export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps) {
-  const reducedMotion = useReducedMotion();
-
+export function HeroMotionBackdrop({}: HeroMotionBackdropProps) {
  return (
    <div className="hero-sheet pointer-events-none absolute inset-0 overflow-hidden">
      <div className="hero-sheet-base" />
-      <motion.div
-        initial={false}
-        animate={
-          reducedMotion
-            ? { x: 0, y: 0 }
-            : {
-                x: compact ? [0, 18, -10, 0] : [0, 52, -28, 0],
-                y: compact ? [0, -16, 10, 0] : [0, -38, 22, 0],
-                scale: compact ? [1, 1.03, 0.99, 1] : [1, 1.12, 0.95, 1],
-              }
-        }
-        transition={{
-          duration: compact ? 18 : 20,
-          repeat: Number.POSITIVE_INFINITY,
-          ease: "easeInOut",
-        }}
-        className="hero-blob hero-blob-left"
-      />
-      <motion.div
-        initial={false}
-        animate={
-          reducedMotion
-            ? { x: 0, y: 0 }
-            : {
-                x: compact ? [0, -14, 8, 0] : [0, -42, 22, 0],
-                y: compact ? [0, 10, -8, 0] : [0, 26, -18, 0],
-                scale: compact ? [1, 0.98, 1.04, 1] : [1, 0.92, 1.1, 1],
-              }
-        }
-        transition={{
-          duration: compact ? 20 : 22,
-          repeat: Number.POSITIVE_INFINITY,
-          ease: "easeInOut",
-        }}
-        className="hero-blob hero-blob-right"
-      />
-      <motion.div
-        initial={false}
-        animate={
-          reducedMotion
-            ? { x: 0, y: 0, opacity: compact ? 0.36 : 0.38 }
-            : {
-                x: compact ? [0, 12, -8, 0] : [0, 32, -16, 0],
-                y: compact ? [0, -6, 8, 0] : [0, -20, 18, 0],
-                scale: compact ? [1, 1.02, 0.98, 1] : [1, 1.1, 0.96, 1],
-                opacity: compact ? [0.36, 0.5, 0.4, 0.36] : [0.38, 0.6, 0.44, 0.38],
-              }
-        }
-        transition={{
-          duration: compact ? 16 : 18,
-          repeat: Number.POSITIVE_INFINITY,
-          ease: "easeInOut",
-        }}
-        className="hero-blob hero-blob-bottom"
-      />
-
-      <motion.div
-        initial={false}
-        animate={
-          reducedMotion
-            ? undefined
-            : {
-                opacity: compact ? [0.18, 0.26, 0.2, 0.18] : [0.22, 0.36, 0.24, 0.22],
-                scale: compact ? [1, 1.01, 1, 1] : [1, 1.04, 1, 1],
-              }
-        }
-        transition={{
-          duration: compact ? 16 : 18,
-          repeat: Number.POSITIVE_INFINITY,
-          ease: "easeInOut",
-        }}
-        className="hero-sheet-glow"
-      />
-
-      <motion.div
-        initial={false}
-        animate={
-          reducedMotion
-            ? { rotate: 0 }
-            : {
-                x: compact ? [0, 10, -8, 0] : [0, 18, -14, 0],
-                y: compact ? [0, -8, 6, 0] : [0, -18, 10, 0],
-                rotate: compact ? [0, 2, -1, 0] : [0, 4, -2, 0],
-                opacity: compact ? [0.12, 0.2, 0.14, 0.12] : [0.16, 0.28, 0.18, 0.16],
-              }
-        }
-        transition={{
-          duration: compact ? 20 : 22,
-          repeat: Number.POSITIVE_INFINITY,
-          ease: "easeInOut",
-        }}
-        className="hero-sheet-wave"
-      />
-
-      <motion.div
-        initial={false}
-        animate={
-          reducedMotion
-            ? undefined
-            : {
-                backgroundPosition: compact
-                  ? ["0 0, 0 0", "40px 24px, 0 0", "0 0, 0 0"]
-                  : ["0 0, 0 0", "84px 52px, 0 0", "0 0, 0 0"],
-              }
-        }
-        transition={{
-          duration: compact ? 20 : 20,
-          repeat: Number.POSITIVE_INFINITY,
-          ease: "linear",
-        }}
-        className="hero-sheet-noise"
-      />
+      <div className="hero-blob hero-blob-left" />
+      <div className="hero-blob hero-blob-right" />
+      <div className="hero-blob hero-blob-bottom" />
+      <div className="hero-sheet-glow" />
+      <div className="hero-sheet-wave" />
+      <div className="hero-sheet-noise" />

      <div className="hero-sheet-veil" />
      <div className="hero-sheet-fade" />
@@ -1,7 +1,5 @@
 "use client";

-import { motion, useReducedMotion } from "framer-motion";
-
 import { HeroBadge } from "@/components/layout/hero-badge";
 import {
  HeroContentMotion,
@@ -23,7 +21,6 @@ export function HomeHero({
  title,
  description,
 }: HomeHeroProps) {
-  const reducedMotion = useReducedMotion();
  const titleLines = title.split("\n").filter(Boolean);
  const isArabic = locale === "ar";
  const lines = isArabic
@@ -73,33 +70,12 @@ export function HomeHero({
        <HeroMotionItem variant="home">
          <HeroBadge
            trailing={
-            <motion.span
+            <span
              aria-hidden="true"
              className="text-[0.95rem] leading-none"
-              initial={reducedMotion ? false : { rotate: 0, scale: 1 }}
-              animate={
-                reducedMotion
-                  ? undefined
-                  : {
-                      rotate: [0, 16, -10, 16, -4, 0],
-                      scale: [1, 1.08, 1.08, 1.08, 1.04, 1],
-                    }
-              }
-              transition={
-                reducedMotion
-                  ? undefined
-                  : {
-                      duration: 1.4,
-                      delay: 0.5,
-                      repeat: Number.POSITIVE_INFINITY,
-                      repeatDelay: 2.8,
-                      ease: "easeInOut",
-                    }
-              }
-              style={{ transformOrigin: "70% 70%" }}
            >
              👋
-            </motion.span>
+            </span>
            }
          >
            {kicker}
@@ -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>
  );
 }