From f54d8277b3e2fd03bf54482beab9762dddbfaec1 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Tue, 27 Jan 2026 00:49:19 +0100
Subject: [PATCH] hero on mobile

---
 components/home/Hero.tsx             | 22 +++++++++++-----------
 components/home/HeroIllustration.tsx |  4 ++--
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx
index 204bed13..e9e107ca 100644
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -11,17 +11,8 @@ export default function Hero() {
   const t = useTranslations('Home.hero');
 
   return (
-    <Section className="relative min-h-[85vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
-      <motion.div
-        className="absolute inset-0 z-0"
-        initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
-        animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
-        transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
-      >
-        <HeroIllustration />
-      </motion.div>
-      
-      <Container className="relative z-10 text-left text-white w-full">
+    <Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
+      <Container className="relative z-10 text-left text-white w-full order-1">
         <motion.div
           className="max-w-5xl"
           initial="hidden"
@@ -73,6 +64,15 @@ export default function Hero() {
           </motion.div>
         </motion.div>
       </Container>
+
+      <motion.div
+        className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-2 mt-8 md:mt-0"
+        initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
+        animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
+        transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
+      >
+        <HeroIllustration />
+      </motion.div>
       
       <motion.div
         className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block"
diff --git a/components/home/HeroIllustration.tsx b/components/home/HeroIllustration.tsx
index 18eb09d6..6e49a427 100644
--- a/components/home/HeroIllustration.tsx
+++ b/components/home/HeroIllustration.tsx
@@ -163,10 +163,10 @@ const POWER_LINES = [
 
 export default function HeroIllustration() {
   return (
-    <div className="absolute inset-0 z-0 overflow-hidden bg-primary">
+    <div className="absolute md:inset-0 z-0 overflow-hidden bg-primary w-full h-full">
       <svg
         viewBox="-400 -200 1800 1100"
-        className="w-full h-full opacity-30 md:opacity-100 scale-[2] md:scale-100 translate-x-1/3 md:translate-x-0"
+        className="w-full h-full opacity-60 md:opacity-100 scale-[1.5] md:scale-100 translate-x-0"
         preserveAspectRatio="xMidYMid slice"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"