Refactor site hero and localized branding UI

2026-03-08 05:13:10 +01:00
parent 9edb162148
commit 2bda611a3b
35 changed files with 682 additions and 234 deletions
@@ -0,0 +1,100 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+type HeroMotionBackdropProps = {
+  compact?: boolean;
+};
+
+export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps) {
+  return (
+    <div className="hero-sheet pointer-events-none absolute inset-0 overflow-hidden">
+      <div className="hero-sheet-base" />
+      <motion.div
+        animate={{
+          x: compact ? [0, 18, -10, 0] : [0, 44, -24, 0],
+          y: compact ? [0, -16, 10, 0] : [0, -34, 18, 0],
+          scale: compact ? [1, 1.03, 0.99, 1] : [1, 1.08, 0.96, 1],
+        }}
+        transition={{
+          duration: compact ? 18 : 26,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: "easeInOut",
+        }}
+        className="hero-blob hero-blob-left"
+      />
+      <motion.div
+        animate={{
+          x: compact ? [0, -14, 8, 0] : [0, -36, 18, 0],
+          y: compact ? [0, 10, -8, 0] : [0, 22, -14, 0],
+          scale: compact ? [1, 0.98, 1.04, 1] : [1, 0.94, 1.08, 1],
+        }}
+        transition={{
+          duration: compact ? 20 : 30,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: "easeInOut",
+        }}
+        className="hero-blob hero-blob-right"
+      />
+      <motion.div
+        animate={{
+          x: compact ? [0, 12, -8, 0] : [0, 26, -14, 0],
+          y: compact ? [0, -6, 8, 0] : [0, -18, 16, 0],
+          scale: compact ? [1, 1.02, 0.98, 1] : [1, 1.06, 0.97, 1],
+          opacity: compact ? [0.36, 0.5, 0.4, 0.36] : [0.34, 0.54, 0.4, 0.34],
+        }}
+        transition={{
+          duration: compact ? 16 : 24,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: "easeInOut",
+        }}
+        className="hero-blob hero-blob-bottom"
+      />
+
+      <motion.div
+        animate={{
+          opacity: compact ? [0.18, 0.26, 0.2, 0.18] : [0.2, 0.3, 0.22, 0.2],
+          scale: compact ? [1, 1.01, 1, 1] : [1, 1.02, 1, 1],
+        }}
+        transition={{
+          duration: compact ? 16 : 22,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: "easeInOut",
+        }}
+        className="hero-sheet-glow"
+      />
+
+      <motion.div
+        animate={{
+          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.14, 0.24, 0.16, 0.14],
+        }}
+        transition={{
+          duration: compact ? 20 : 28,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: "easeInOut",
+        }}
+        className="hero-sheet-wave"
+      />
+
+      <motion.div
+        animate={{
+          backgroundPosition: compact
+            ? ["0 0, 0 0", "40px 24px, 0 0", "0 0, 0 0"]
+            : ["0 0, 0 0", "64px 40px, 0 0", "0 0, 0 0"],
+        }}
+        transition={{
+          duration: compact ? 20 : 28,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: "linear",
+        }}
+        className="hero-sheet-noise"
+      />
+
+      <div className="hero-sheet-veil" />
+      <div className="hero-sheet-fade" />
+    </div>
+  );
+}