feat(home): convert hero to two-column left/right layout

Restructure the homepage hero from a single centered block into a
responsive two-column grid: left column holds the left-aligned
headline, subtext, CTAs, click-to-call and trust line; right column
holds the framed product dashboard preview.

- Replace `max-w-5xl mx-auto text-center` with
  `grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center`.
- Scale headline down from text-5xl/8xl to a responsive
  text-4xl md:text-5xl lg:text-6xl so it no longer overflows.
- Left-align CTAs/links on desktop (justify-start, lg:text-left)
  while keeping centered stacking on mobile (grid-cols-1).
- Swap section min-h-screen for lg:min-h-[85vh] and py-24 lg:py-32
  so the hero fits the viewport instead of dominating it.
- Preserve existing background gradient and decorative blur elements,
  consistent with the about/portfolio heroes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

graphify-out/GRAPH_REPORT.md

@@ -1,7 +1,7 @@
 # Graph Report - 2e709500-79ab-403f-9ca0-3f027ac9f36e  (2026-06-17)
 
 ## Corpus Check
-- 58 files · ~328,409 words
+- 58 files · ~328,509 words
 - Verdict: corpus is large enough that graph structure adds value.
 
 ## Summary

graphify-out/cache/ast/1388212cecf0aece6257f00ac9b9ca7a74df0c2cdf6c6f8e3de782591bd6ba65.json

@@ -0,0 +1 @@
+{"nodes": [{"id": "home_agent_ai_agent_backend_workspace_2e709500_79ab_403f_9ca0_3f027ac9f36e_src_middleware_ts", "label": "middleware.ts", "file_type": "code", "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L1"}, {"id": "src_middleware_validatecsrforigin", "label": "validateCsrfOrigin()", "file_type": "code", "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L19"}], "edges": [{"source": "home_agent_ai_agent_backend_workspace_2e709500_79ab_403f_9ca0_3f027ac9f36e_src_middleware_ts", "target": "astro_middleware", "relation": "imports_from", "context": "import", "confidence": "EXTRACTED", "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L1", "weight": 1.0}, {"source": "home_agent_ai_agent_backend_workspace_2e709500_79ab_403f_9ca0_3f027ac9f36e_src_middleware_ts", "target": "home_agent_ai_agent_backend_workspace_2e709500_79ab_403f_9ca0_3f027ac9f36e_src_utils_logger_ts", "relation": "imports_from", "context": "import", "confidence": "EXTRACTED", "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L2", "weight": 1.0}, {"source": "home_agent_ai_agent_backend_workspace_2e709500_79ab_403f_9ca0_3f027ac9f36e_src_middleware_ts", "target": "utils_logger_logger", "relation": "imports", "context": "import", "confidence": "EXTRACTED", "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L2", "weight": 1.0}, {"source": "home_agent_ai_agent_backend_workspace_2e709500_79ab_403f_9ca0_3f027ac9f36e_src_middleware_ts", "target": "home_agent_ai_agent_backend_workspace_2e709500_79ab_403f_9ca0_3f027ac9f36e_src_utils_sentry_ts", "relation": "imports_from", "context": "import", "confidence": "EXTRACTED", "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L3", "weight": 1.0}, {"source": "home_agent_ai_agent_backend_workspace_2e709500_79ab_403f_9ca0_3f027ac9f36e_src_middleware_ts", "target": "utils_sentry_captureexception", "relation": "imports", "context": "import", "confidence": "EXTRACTED", "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L3", "weight": 1.0}, {"source": "home_agent_ai_agent_backend_workspace_2e709500_79ab_403f_9ca0_3f027ac9f36e_src_middleware_ts", "target": "src_middleware_validatecsrforigin", "relation": "contains", "confidence": "EXTRACTED", "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L19", "weight": 1.0}], "raw_calls": [{"caller_nid": "src_middleware_validatecsrforigin", "callee": "includes", "is_member_call": true, "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L24"}, {"caller_nid": "src_middleware_validatecsrforigin", "callee": "startsWith", "is_member_call": true, "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L25"}, {"caller_nid": "src_middleware_validatecsrforigin", "callee": "get", "is_member_call": true, "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L36"}, {"caller_nid": "src_middleware_validatecsrforigin", "callee": "get", "is_member_call": true, "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L37"}, {"caller_nid": "src_middleware_validatecsrforigin", "callee": "startsWith", "is_member_call": true, "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L52"}, {"caller_nid": "src_middleware_validatecsrforigin", "callee": "startsWith", "is_member_call": true, "source_file": "/home/agent/ai-agent/backend/workspace/2e709500-79ab-403f-9ca0-3f027ac9f36e/src/middleware.ts", "source_location": "L52"}]}

src/components/Header.astro

@@ -12,12 +12,12 @@ const { class: className } = Astro.props;
 
 const navLinks = [
   { name: 'Home', href: '/' },
+  { name: 'WRNexus', href: 'https://wrnexus.com/', external: true },
   { name: 'About', href: '/about' },
   { name: 'Services', href: '/services' },
   { name: 'Portfolio', href: '/portfolio' },
   { name: 'Blog', href: '/blog' },
   { name: 'Contact', href: '/contact' },
-  { name: 'WRNexus', href: 'https://wrnexus.com/', external: true },
 ];
 
 const currentPath = Astro.url.pathname;

src/pages/index.astro

@@ -179,7 +179,7 @@ const techStack = [
   />
 
   <!-- Hero Section - Enhanced -->
-  <section class="relative min-h-screen flex items-center overflow-hidden bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900">
+  <section class="relative lg:min-h-[85vh] flex items-center overflow-hidden bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900">
     <!-- Background decorative elements -->
     <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
       <div class="absolute -top-40 -right-40 w-[600px] h-[600px] bg-primary/20 rounded-full blur-3xl animate-pulse-slow"></div>
@@ -191,8 +191,10 @@ const techStack = [
       <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-secondary-900/50"></div>
     </div>
 
-    <div class="container-wrapper relative z-10 py-24">
-      <div class="max-w-5xl mx-auto text-center">
+    <div class="container-wrapper relative z-10 py-24 lg:py-32">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+        <!-- Left column — copy + CTAs -->
+        <div class="text-center lg:text-left">
         <!-- Trust badge -->
         <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-8 opacity-0 animate-slide-up">
           <svg class="w-5 h-5 text-accent-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
@@ -202,17 +204,17 @@ const techStack = [
         </div>
 
         <!-- Main heading — benefit-led: outcome + audience -->
-        <h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold text-white leading-[1.1] tracking-tight">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-[1.1] tracking-tight">
           <span class="block opacity-0 animate-slide-up" style="animation-delay: 0.2s;">Custom Software That</span>
           <span class="block opacity-0 animate-slide-up" style="animation-delay: 0.4s;">Powers <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 via-primary-300 to-accent-400">Enterprises &amp; Governments</span></span>
         </h1>
 
-        <p class="mt-8 text-xl sm:text-2xl text-secondary-200 max-w-3xl mx-auto opacity-0 animate-slide-up leading-relaxed" style="animation-delay: 0.6s;">
+        <p class="mt-6 text-lg sm:text-xl text-secondary-200 max-w-xl mx-auto lg:mx-0 opacity-0 animate-slide-up leading-relaxed" style="animation-delay: 0.6s;">
           We design, build, and run production-grade web, mobile, and ERP systems for startups, enterprises, and government bodies.
         </p>
 
         <!-- Dual CTA Buttons — action verb + clear secondary -->
-        <div class="mt-12 flex flex-wrap justify-center gap-4 opacity-0 animate-slide-up" style="animation-delay: 0.8s;">
+        <div class="mt-10 flex flex-wrap justify-center lg:justify-start gap-4 opacity-0 animate-slide-up" style="animation-delay: 0.8s;">
           <a
             href="/contact?source=hero"
             data-cta="hero-primary"
@@ -238,7 +240,7 @@ const techStack = [
 
         <!-- Tertiary click-to-call — one-tap dial for visitors who'd rather
              talk now. Min 48px tap target per WCAG 2.5.5 / Apple HIG. -->
-        <p class="mt-6 text-base sm:text-lg text-secondary-200 opacity-0 animate-slide-up flex flex-wrap items-center justify-center gap-x-2 gap-y-1" style="animation-delay: 0.85s;">
+        <p class="mt-6 text-base sm:text-lg text-secondary-200 opacity-0 animate-slide-up flex flex-wrap items-center justify-center lg:justify-start gap-x-2 gap-y-1" style="animation-delay: 0.85s;">
           <span>Prefer to talk now?</span>
           <a
             href="tel:+919561417403"
@@ -254,7 +256,7 @@ const techStack = [
         </p>
 
         <!-- Micro-trust line under CTAs -->
-        <p class="mt-6 text-sm sm:text-base text-secondary-300 opacity-0 animate-slide-up flex flex-wrap items-center justify-center gap-x-3 gap-y-2" style="animation-delay: 0.9s;" aria-label="Trust signals">
+        <p class="mt-6 text-sm sm:text-base text-secondary-300 opacity-0 animate-slide-up flex flex-wrap items-center justify-center lg:justify-start gap-x-3 gap-y-2" style="animation-delay: 0.9s;" aria-label="Trust signals">
           <span class="inline-flex items-center gap-2">
             <svg class="w-4 h-4 text-accent-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
               <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
@@ -266,14 +268,16 @@ const techStack = [
           <span class="hidden sm:inline text-secondary-500" aria-hidden="true">·</span>
           <span>No commitment</span>
         </p>
+        </div>
+        <!-- /Left column -->
 
-        <!-- Product preview — framed dashboard mock so the hero leads with a
+        <!-- Right column — framed dashboard mock so the hero leads with a
              concrete product visual, not text alone. The image is a polished
              placeholder UI (public/images/product-dashboard.svg); swap in a
              real product screenshot or screen-recording poster frame
              (≥1200×720, .webp/.png) at the same path — no template change
              needed. Explicit width/height keep CLS at zero while it loads. -->
-        <figure class="mt-16 sm:mt-20 max-w-4xl mx-auto opacity-0 animate-slide-up" style="animation-delay: 1s;">
+        <figure class="mt-4 lg:mt-0 w-full max-w-xl mx-auto lg:mx-0 lg:ml-auto opacity-0 animate-slide-up" style="animation-delay: 1s;">
           <div class="relative rounded-2xl border border-white/15 bg-white/5 backdrop-blur-sm shadow-2xl shadow-primary/20 overflow-hidden">
             <!-- Glow behind the frame -->
             <div class="absolute -inset-px rounded-2xl bg-gradient-to-tr from-primary-500/10 via-transparent to-accent-400/10 pointer-events-none" aria-hidden="true"></div>