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
@@ -18,7 +18,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the

 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+This project uses [`next/font/local`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to load local font assets from `app/fonts` without relying on external font providers.

 ## Learn More

@@ -13,11 +13,6 @@ import "./globals.css";

 const museo = localFont({
  src: [
-    {
-      path: "./fonts/MuseoSansRounded100.woff2",
-      weight: "100",
-      style: "normal",
-    },
    {
      path: "./fonts/MuseoSansRounded300.woff2",
      weight: "300",
@@ -38,14 +33,12 @@ const museo = localFont({
      weight: "900",
      style: "normal",
    },
-    {
-      path: "./fonts/MuseoSansRounded1000.woff2",
-      weight: "1000",
-      style: "normal",
-    },
  ],
  variable: "--font-museo",
  display: "swap",
+  preload: false,
+  fallback: ["Arial", "Helvetica", "sans-serif"],
+  adjustFontFallback: "Arial",
 });

 const dubai = localFont({
@@ -60,11 +53,6 @@ const dubai = localFont({
      weight: "400",
      style: "normal",
    },
-    {
-      path: "./fonts/Dubai-Medium.woff2",
-      weight: "500",
-      style: "normal",
-    },
    {
      path: "./fonts/Dubai-Bold.woff2",
      weight: "700",
@@ -73,6 +61,9 @@ const dubai = localFont({
  ],
  variable: "--font-dubai",
  display: "swap",
+  preload: false,
+  fallback: ["Tahoma", "Arial", "sans-serif"],
+  adjustFontFallback: "Arial",
 });

 export const dynamic = "force-dynamic";
@@ -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>
-  );
-}
-
 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,18 +136,7 @@ export function HeroTitle({
  className,
 }: HeroTitleProps) {
  const isArabic = locale === "ar";
-  const reducedMotion = useReducedMotion();
-
-  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(
+  const titleClassName = cn(
    "text-balance font-semibold text-[hsl(var(--hero-ink))]",
    variant === "home"
      ? isArabic
@@ -195,8 +144,10 @@ export function HeroTitle({
        : "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 (
+    <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>
  );
 }