From 4dbf566f0c0f33fa9e2d2611e9683166bb72792b Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 25 Jan 2026 13:38:14 +0100
Subject: [PATCH] hero on mobile

---
 components/home/Hero.tsx             | 12 ++++++------
 components/home/HeroIllustration.tsx |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx
index 1fb8881d..a6d3cfb4 100644
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -8,12 +8,12 @@ export default function Hero() {
   const t = useTranslations('Home.hero');
 
   return (
-    <Section className="relative h-[70vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary py-0 md:py-0 lg:py-0">
+    <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">
       <HeroIllustration />
       
       <Container className="relative z-10 text-left text-white w-full">
         <div className="max-w-5xl animate-slide-up">
-          <Heading level={1} className="mb-4 md:mb-8 max-w-[15ch] md:max-w-none text-white">
+          <Heading level={1} className="mb-6 md:mb-8 max-w-[12ch] md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl">
             {t.rich('title', {
               green: (chunks) => (
                 <span className="relative inline-block">
@@ -23,15 +23,15 @@ export default function Hero() {
               )
             })}
           </Heading>
-          <p className="text-lg md:text-xl text-white leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
+          <p className="text-lg md:text-xl text-white/90 leading-relaxed max-w-2xl mb-10 md:mb-12">
             {t('subtitle')}
           </p>
-          <div className="flex flex-col md:flex-row gap-3 md:gap-6">
-            <Button href="/contact" variant="accent" size="lg" className="group w-full md:w-auto md:h-16 md:px-10 md:text-lg">
+          <div className="flex flex-col sm:flex-row gap-4 md:gap-6">
+            <Button href="/contact" variant="accent" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg">
               {t('cta')}
               <span className="ml-3 transition-transform group-hover:translate-x-1">&rarr;</span>
             </Button>
-            <Button href="/products" variant="ghost" size="lg" className="group w-full md:w-auto text-white hover:bg-white/10 md:bg-white md:text-saturated md:hover:bg-neutral-light md:h-16 md:px-10 md:text-lg">
+            <Button href="/products" variant="ghost" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg text-white border-white/20 hover:bg-white/10 md:bg-white md:text-saturated md:hover:bg-neutral-light md:border-none">
               {t('exploreProducts')}
             </Button>
           </div>
diff --git a/components/home/HeroIllustration.tsx b/components/home/HeroIllustration.tsx
index 8670db40..18eb09d6 100644
--- a/components/home/HeroIllustration.tsx
+++ b/components/home/HeroIllustration.tsx
@@ -166,7 +166,7 @@ export default function HeroIllustration() {
     <div className="absolute inset-0 z-0 overflow-hidden bg-primary">
       <svg
         viewBox="-400 -200 1800 1100"
-        className="w-full h-full opacity-40 md:opacity-100 scale-150 md:scale-100 translate-x-1/4 md:translate-x-0"
+        className="w-full h-full opacity-30 md:opacity-100 scale-[2] md:scale-100 translate-x-1/3 md:translate-x-0"
         preserveAspectRatio="xMidYMid slice"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"