Add hero illustration and enhance CTA buttons (#11)

- Add robot illustration positioned above CTAs on mobile, larger on desktop
- Increase CTA button size (px-8 py-4) and font weight (bold, text-lg)
- Add prominent shadow effects to CTAs with coral glow on primary button
- Reposition decorative elements to left side to accommodate illustration
- Hide some decorative elements on mobile/tablet for cleaner layout

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: mostlyerror

app/page.tsx

@@ -11,45 +11,37 @@ export default function Home() {
         {/* Decorative elements */}
         <div className="absolute inset-0 overflow-hidden pointer-events-none">
           {/* Large blurred gradient blobs */}
-          <div className="absolute -top-32 -right-32 w-[500px] h-[500px] bg-mustard/15 rounded-full blur-3xl"></div>
-          <div className="absolute top-1/2 -left-48 w-[600px] h-[600px] bg-sage/10 rounded-full blur-3xl"></div>
-          <div className="absolute -bottom-20 right-1/4 w-[400px] h-[400px] bg-coral/5 rounded-full blur-3xl"></div>
-          
+          <div className="absolute -top-32 -left-32 w-[500px] h-[500px] bg-mustard/15 rounded-full blur-3xl"></div>
+          <div className="absolute top-1/2 -right-48 w-[600px] h-[600px] bg-sage/10 rounded-full blur-3xl"></div>
+          <div className="absolute -bottom-20 left-1/4 w-[400px] h-[400px] bg-coral/5 rounded-full blur-3xl"></div>
+
           {/* SVG decorative elements */}
-          <svg className="absolute top-32 right-[12%] w-24 h-24 text-coral/15" viewBox="0 0 100 100">
+          <svg className="absolute top-32 left-[8%] w-24 h-24 text-coral/15 max-lg:hidden" viewBox="0 0 100 100">
             <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" strokeWidth="2" strokeDasharray="8 6"/>
           </svg>
-          <svg className="absolute bottom-1/4 left-[8%] w-40 h-40 text-sage/15" viewBox="0 0 100 100">
+          <svg className="absolute bottom-1/4 right-[8%] w-40 h-40 text-sage/15 max-lg:hidden" viewBox="0 0 100 100">
             <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" strokeWidth="1.5"/>
           </svg>
-          <svg className="absolute top-[45%] right-[5%] w-16 h-16 text-mustard/25" viewBox="0 0 100 100">
-            <circle cx="50" cy="50" r="40" fill="currentColor"/>
-          </svg>
-          <svg className="absolute top-[20%] left-[15%] w-10 h-10 text-lavender/20" viewBox="0 0 100 100">
+          <svg className="absolute top-[20%] left-[12%] w-10 h-10 text-lavender/20 max-lg:hidden" viewBox="0 0 100 100">
             <rect x="10" y="10" width="80" height="80" rx="20" fill="currentColor"/>
           </svg>
-          <svg className="absolute bottom-32 right-[20%] w-8 h-8 text-coral/20" viewBox="0 0 100 100">
+          <svg className="absolute bottom-32 left-[18%] w-8 h-8 text-coral/20 max-lg:hidden" viewBox="0 0 100 100">
             <rect x="15" y="15" width="70" height="70" rx="15" fill="currentColor"/>
           </svg>
-          
+
           {/* Dot grid patterns */}
-          <div className="absolute top-40 left-[5%] grid grid-cols-4 gap-4 opacity-20 max-md:hidden">
+          <div className="absolute top-40 left-[5%] grid grid-cols-4 gap-4 opacity-20 max-lg:hidden">
             {[...Array(12)].map((_, i) => (
               <div key={i} className="w-2 h-2 bg-charcoal/60 rounded-full"></div>
             ))}
           </div>
-          <div className="absolute bottom-24 right-[8%] grid grid-cols-3 gap-3 opacity-15 max-md:hidden">
-            {[...Array(6)].map((_, i) => (
-              <div key={i} className="w-1.5 h-1.5 bg-charcoal rounded-full"></div>
-            ))}
-          </div>
         </div>
-        
+
         {/* Floating shapes (animated) */}
-        <div className="absolute top-[20%] right-[10%] w-14 h-14 bg-sage/80 rounded-2xl animate-float max-md:hidden shadow-lg"></div>
-        <div className="absolute top-[55%] right-[18%] w-10 h-10 bg-mustard/80 rounded-full animate-float-delayed max-md:hidden shadow-lg"></div>
-        <div className="absolute top-[35%] right-[5%] w-6 h-6 bg-lavender/80 rounded-xl animate-float-fast max-md:hidden shadow-md"></div>
-        
+        <div className="absolute top-[20%] left-[8%] w-14 h-14 bg-sage/80 rounded-2xl animate-float max-lg:hidden shadow-lg"></div>
+        <div className="absolute top-[55%] left-[15%] w-10 h-10 bg-mustard/80 rounded-full animate-float-delayed max-lg:hidden shadow-lg"></div>
+        <div className="absolute top-[35%] left-[5%] w-6 h-6 bg-lavender/80 rounded-xl animate-float-fast max-lg:hidden shadow-md"></div>
+
         <div className="max-w-6xl mx-auto px-6 relative z-10">
           <div className="max-w-[700px]">
             <div className="inline-flex items-center gap-2 bg-white/80 backdrop-blur-sm px-3.5 py-1.5 rounded-full text-sm font-medium mb-5 shadow-sm border border-mustard/30">
@@ -61,11 +53,24 @@ export default function Home() {
             <p className="text-lg text-charcoal-light max-w-[550px] mb-8">
               You don&apos;t need more software. You need the right solution, and someone who&apos;ll tell you the truth about what that is.
             </p>
-            <div className="flex gap-3 flex-wrap max-md:flex-col">
-              <Link href="#contact" className="inline-block px-6 py-3 bg-coral text-white font-semibold text-base rounded-full hover:bg-coral-hover hover:-translate-y-0.5 hover:shadow-lg hover:shadow-coral/30 transition-all duration-300 text-center">
+
+            {/* Illustration */}
+            <div className="mb-0 md:mb-8 md:mt-4">
+              <Image
+                src="/good_robot_hero.png"
+                alt="Person working collaboratively with a friendly robot assistant"
+                width={600}
+                height={400}
+                priority
+                className="w-full h-auto max-w-full md:max-w-2xl"
+              />
+            </div>
+
+            <div className="flex gap-4 flex-wrap max-md:flex-col">
+              <Link href="#contact" className="inline-block px-8 py-4 bg-coral text-white font-bold text-lg rounded-full shadow-xl shadow-coral/40 hover:bg-coral-hover hover:-translate-y-1 hover:shadow-2xl hover:shadow-coral/50 transition-all duration-300 text-center">
                 Let&apos;s Talk →
               </Link>
-              <Link href="#services" className="inline-block px-6 py-3 bg-white/80 backdrop-blur-sm text-charcoal font-semibold text-base rounded-full border-2 border-charcoal/20 hover:bg-charcoal hover:text-white hover:border-charcoal transition-all duration-300 text-center">
+              <Link href="#services" className="inline-block px-8 py-4 bg-white text-charcoal font-bold text-lg rounded-full border-2 border-charcoal/30 shadow-lg hover:bg-charcoal hover:text-white hover:border-charcoal hover:-translate-y-1 hover:shadow-xl transition-all duration-300 text-center">
                 See How We Help
               </Link>
             </div>