Optimize local fonts and remove hero motion

README.md

@@ -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
 

app/layout.tsx

@@ -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";

components/layout/hero-motion-backdrop.tsx

@@ -1,129 +1,19 @@
 "use client";
 
-import { motion, useReducedMotion } from "framer-motion";
-
 type HeroMotionBackdropProps = {
   compact?: boolean;
 };
 
-export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps) {
+export function HeroMotionBackdrop({}: HeroMotionBackdropProps) {
-  const reducedMotion = useReducedMotion();
-
   return (
     <div className="hero-sheet pointer-events-none absolute inset-0 overflow-hidden">
       <div className="hero-sheet-base" />
-      <motion.div
+      <div className="hero-blob hero-blob-left" />
-        initial={false}
+      <div className="hero-blob hero-blob-right" />
-        animate={
+      <div className="hero-blob hero-blob-bottom" />
-          reducedMotion
+      <div className="hero-sheet-glow" />
-            ? { x: 0, y: 0 }
+      <div className="hero-sheet-wave" />
-            : {
+      <div className="hero-sheet-noise" />
-                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-sheet-veil" />
       <div className="hero-sheet-fade" />

components/layout/home-hero.tsx

@@ -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}

components/layout/site-hero.tsx

@@ -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();
+  return <div className={className}>{children}</div>;
-
-  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 <div className={className}>{children}</div>;
-
-  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>
-  );
 }
 
 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
+    <h1 className={titleClassName}>
-      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,
-      )}
-    >
       {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>
   );
 }