<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    
    <!-- Primary Meta Tags -->
    <title data-rh="true">AI Automation Solutions | AppAI Process (App AI) - Custom AI Chat Agents &amp; Business Automation</title>
    <meta name="title" content="AppAI | Websites for Small Businesses in 24 Hours">
    <meta data-rh="true" name="description" content="Transform your business with AI automation (App AI). Get 24/7 AI chat agents, automated lead generation, and seamless CRM integration. Book a free consultation today."/>

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta data-rh="true" property="og:url" content="https://appaiprocess.com/"/>
    <meta data-rh="true" property="og:title" content="AI Automation Solutions | AppAI Process"/>
    <meta data-rh="true" property="og:description" content="Transform your business with AI automation. Get 24/7 AI chat agents, automated lead generation, and seamless CRM integration."/>
    <meta property="og:image" content="https://appaiprocess.com/og-image.png">
    <meta property="og:image:width" content="1280">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="AppAI - Websites that work while you sleep">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta data-rh="true" name="twitter:title" content="AI Automation Solutions | AppAI Process"/>
    <meta data-rh="true" name="twitter:description" content="Transform your business with AI automation. Get 24/7 AI chat agents, automated lead generation, and seamless CRM integration."/>
    <meta name="twitter:image" content="https://appaiprocess.com/og-image.png">
    <link data-rh="true" rel="canonical" href="https://appaiprocess.com/"/>
    <meta name="keywords" content="AI automation, AI chat agents, lead generation, CRM integration, business automation, website development, AI solutions, process automation, New Zealand">
    <meta name="robots" content="index, follow">
    <meta name="author" content="AppAI Process">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2306b6d4' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 8V4H8'/%3e%3crect width='16' height='12' x='4' y='8' rx='2'/%3e%3cpath d='M2 14h2'/%3e%3cpath d='M20 14h2'/%3e%3ccircle cx='9' cy='13' r='2' fill='%23000000'/%3e%3ccircle cx='15' cy='13' r='2' fill='%23000000'/%3e%3c/svg%3e" />
    
    <!-- Google Site Verification -->
    <meta name="google-site-verification" content="Euk3XEFbe05d7OxzxStz8Mf3I9P2sQkmnbndxIouqCA" />
    
    <!-- Preconnect to external resources for performance -->
    <link rel="preconnect" href="https://assets.calendly.com">
    <link rel="dns-prefetch" href="https://assets.calendly.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdn.voiceflow.com">
    <link rel="preconnect" href="https://r2.leadsy.ai">
    
    <!-- Schema.org structured data for SEO -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "AppAI Process",
      "url": "https://appaiprocess.com",
      "logo": "https://appaiprocess.com/logo.png",
      "description": "Websites for small businesses built and delivered in 24 hours. Based in Christchurch, New Zealand.",
      "contactPoint": {
        "@type": "ContactPoint",
        "contactType": "Sales",
        "url": "https://appaiprocess.com/contact"
      },
      "areaServed": "New Zealand",
      "serviceType": [
        "AI Chat Agents",
        "Lead Generation",
        "CRM Integration",
        "Website Development",
        "Business Automation"
      ]
    }
    </script>
    
    <!-- Defer Leadsy AI tag to load after page content -->
    <script id="vtag-ai-js" defer src="https://r2.leadsy.ai/tag.js" data-pid="1s1mnYO6T4URdI0IU" data-version="062024"></script>

    <!-- Calendly widget - loaded once here so ConsultationPage doesn't re-inject it on every mount -->
    <script defer src="https://assets.calendly.com/assets/external/widget.js"></script>
    
    <!-- Defer Voiceflow chatbot to load after page content -->
    <script type="text/javascript">
      window.addEventListener('load', function() {
        (function(d, t) {
            var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
            v.onload = function() {
              window.voiceflow.chat.load({
                verify: { projectID: '69c0b7956653a9146a1e3c14' },
                url: 'https://general-runtime.voiceflow.com',
                versionID: 'production',
                voice: {
                  url: "https://runtime-api.voiceflow.com"
                }
              });
            }
            v.src = "https://cdn.voiceflow.com/widget-next/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
        })(document, 'script');
      });
    </script>
    <script type="module" crossorigin src="/assets/index-CB2_15kU.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-C_gYsUBP.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-D7HrI6pR.js">
    <link rel="modulepreload" crossorigin href="/assets/router-CdbLPShL.js">
    <link rel="modulepreload" crossorigin href="/assets/icons-bdzbzFdX.js">
    <link rel="stylesheet" crossorigin href="/assets/index-Dby5srKp.css">
  </head>
  <body>
    <div id="root"><div class="min-h-screen bg-black text-white overflow-x-hidden"><nav class="relative z-50 px-4 lg:px-6 py-4 border-b border-gray-800/50"><div class="flex justify-between items-center"><div class="flex items-center gap-3"><svg class="w-7 h-7 text-cyan-400 -translate-y-1.5 sm:-translate-y-1" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M12 8V4H8"></path><circle cx="9" cy="13" r="2" fill="black"></circle><circle cx="15" cy="13" r="2" fill="black"></circle></svg><a class="text-lg sm:text-xl lg:text-2xl font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent hover:opacity-80 transition-opacity" href="/" data-discover="true">appaiprocess.com</a></div><div class="hidden md:flex items-center gap-5 lg:gap-7"><a class="text-sm transition-colors text-cyan-400" href="/" data-discover="true">Home</a><a class="text-sm transition-colors text-gray-300 hover:text-cyan-300" href="/website-catalog" data-discover="true">Website Packages</a><a class="text-sm transition-colors text-gray-300 hover:text-cyan-300" href="/gallery" data-discover="true">Gallery</a><a class="text-sm transition-colors text-gray-300 hover:text-cyan-300" href="/audit" data-discover="true">Free Audit</a><a class="text-sm transition-colors text-gray-300 hover:text-cyan-300" href="/about" data-discover="true">About</a><a class="text-sm transition-colors text-gray-300 hover:text-cyan-300" href="/contact" data-discover="true">Contact</a><div class="relative"><button class="text-sm transition-colors flex items-center gap-1 text-gray-300 hover:text-cyan-300">Add-ons<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-3 h-3 transition-transform duration-200 "><path d="m6 9 6 6 6-6"></path></svg></button></div><a class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full text-white font-semibold hover:shadow-lg hover:shadow-cyan-500/25 transition-all duration-300 text-sm " href="/consultation" data-discover="true">Get My AI Plan</a></div><button class="md:hidden p-2 text-gray-400 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-cyan-400 rounded-lg" aria-label="Toggle mobile menu" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu w-6 h-6"><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg></button></div><div class="md:hidden absolute left-0 right-0 top-full bg-gray-900/95 backdrop-blur-lg border-b border-gray-800/50 shadow-xl transition-all duration-300 ease-in-out opacity-0 -translate-y-4 invisible"><div class="flex flex-col py-4 px-4 space-y-1"><a class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200 text-cyan-400 bg-cyan-400/10" href="/" data-discover="true">Home</a><a class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200 text-gray-300 hover:text-cyan-300 hover:bg-gray-800/50" href="/website-catalog" data-discover="true">Website Packages</a><a class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200 text-gray-300 hover:text-cyan-300 hover:bg-gray-800/50" href="/gallery" data-discover="true">Gallery</a><a class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200 text-gray-300 hover:text-cyan-300 hover:bg-gray-800/50" href="/audit" data-discover="true">Free Audit</a><a class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200 text-gray-300 hover:text-cyan-300 hover:bg-gray-800/50" href="/about" data-discover="true">About</a><a class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200 text-gray-300 hover:text-cyan-300 hover:bg-gray-800/50" href="/contact" data-discover="true">Contact</a><div><button class="w-full text-left py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200 flex items-center justify-between text-gray-300 hover:text-cyan-300 hover:bg-gray-800/50">Add-ons<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-4 h-4 transition-transform duration-200 "><path d="m6 9 6 6 6-6"></path></svg></button></div><a class="mt-2 py-3 px-4 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg text-white font-semibold text-center text-sm hover:shadow-lg hover:shadow-cyan-500/25 transition-all duration-300 " href="/consultation" data-discover="true">Get My AI Plan</a></div></div></nav><section class="relative min-h-[50vh] flex items-center justify-center px-6 py-8"><div class="flex flex-col lg:flex-row items-center justify-between w-full max-w-7xl gap-8 lg:gap-16"><div class="w-full lg:w-1/2 text-center lg:text-left max-w-2xl relative z-20 order-1 lg:order-1"><h1 class="text-3xl sm:text-5xl md:text-6xl font-bold leading-tight mb-8 sm:mb-10 bg-gradient-to-r from-white via-cyan-400 to-purple-400 bg-clip-text text-transparent animate-glow">Websites That Work While You Sleep.</h1><p class="text-base lg:text-lg text-gray-400 mb-8 lg:mb-10 max-w-lg mx-auto lg:mx-0">We build you a modern website and set it up to capture leads, answer customers, and book jobs automatically—24/7. All the tech, none of the hassle.</p><div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"><button class="group px-8 py-4 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full text-white font-semibold hover:shadow-lg hover:shadow-cyan-500/25 transition-all duration-300 animate-pulse-glow text-base"><span class="flex items-center gap-2">See Packages<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-5 h-5 group-hover:translate-x-1 transition-transform"><path d="m9 18 6-6-6-6"></path></svg></span></button><button class="px-8 py-4 border border-gray-600/50 rounded-full text-gray-300 hover:border-gray-500 hover:text-white transition-all duration-300 text-base">Book a Free Call</button></div></div><div class="w-full lg:w-1/2 h-[300px] sm:h-[400px] lg:h-[600px] relative order-2 lg:order-2"><div class="relative w-full h-full flex items-center justify-center overflow-hidden"><div class="floating-robot-container"><div class="robot-glow"></div><div class="robot-wrapper"><div class="robot-body"><div class="robot-antenna"></div><div class="robot-head"><div class="robot-eyes"><div class="robot-eye left"></div><div class="robot-eye right"></div></div><div class="robot-mouth"></div></div><div class="robot-torso"><div class="robot-chest-light"></div><div class="robot-panel"></div></div><div class="robot-arms"><div class="robot-arm left"><div class="robot-hand"></div></div><div class="robot-arm right"><div class="robot-hand"></div></div></div><div class="robot-legs"><div class="robot-leg left"></div><div class="robot-leg right"></div></div></div></div><div class="floating-particles"><div class="particle" style="--delay:0s;--x:20px;--y:30px"></div><div class="particle" style="--delay:1s;--x:-30px;--y:20px"></div><div class="particle" style="--delay:2s;--x:40px;--y:-25px"></div><div class="particle" style="--delay:3s;--x:-20px;--y:-30px"></div><div class="particle" style="--delay:1.5s;--x:35px;--y:15px"></div><div class="particle" style="--delay:2.5s;--x:-25px;--y:-20px"></div></div></div></div></div></div></section><section class="relative py-20 px-6 border-t border-gray-800/50"><div class="max-w-6xl mx-auto"><div class="text-center mb-12"><p class="text-sm text-cyan-400 tracking-wider uppercase mb-3">Real Examples</p><h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-4"><span class="bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">Real Examples Built for NZ Businesses Like Yours</span></h2><p class="text-gray-400 text-lg max-w-2xl mx-auto">Fully functional demo sites built for NZ trades businesses. Click to explore them live.</p></div><div class="grid md:grid-cols-3 gap-8 mb-8"><div class="flex-col border border-gray-800/50 rounded-2xl overflow-hidden bg-gradient-to-b from-gray-900/50 to-black/50 transition-all duration-500 hover:shadow-2xl hover:shadow-yellow-500/10 hover:border-yellow-500/40 flex"><div class="bg-gray-800/80 px-4 py-3 flex items-center gap-2 border-b border-gray-700/50 flex-shrink-0"><div class="w-2.5 h-2.5 rounded-full bg-red-500/80"></div><div class="w-2.5 h-2.5 rounded-full bg-yellow-500/80"></div><div class="w-2.5 h-2.5 rounded-full bg-green-500/80"></div><div class="flex-1 mx-2 bg-gray-700/80 rounded-full px-3 py-1 text-xs text-gray-400 truncate">sparkelectric.co.nz</div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 text-gray-500 shrink-0"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><div class="relative overflow-hidden cursor-pointer flex-shrink-0" style="height:170px;background:linear-gradient(135deg, #111827 0%, #271f0a 100%)"><div class="absolute inset-0 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-20 h-20 text-yellow-400 opacity-15"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg></div><div class="absolute top-4 left-4 right-4 h-3 rounded bg-white/5"></div><div class="absolute top-10 left-4 right-4 h-10 rounded bg-white/5"></div><div class="absolute top-24 left-4 right-4 grid grid-cols-3 gap-2"><div class="h-10 rounded bg-white/5"></div><div class="h-10 rounded bg-white/5"></div><div class="h-10 rounded bg-white/5"></div></div></div><div class="p-5 flex flex-col flex-1"><div class="flex items-center gap-3 mb-3"><div class="p-2 rounded-lg bg-gray-800/80 flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-5 h-5 text-yellow-400"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg></div><div><h3 class="text-white font-bold text-base leading-tight">Spark Electric</h3><span class="text-xs font-medium border rounded-full px-2 py-0.5 bg-yellow-400/10 border-yellow-400/30 text-yellow-400">Electrician<!-- --> Website</span></div></div><p class="text-gray-400 text-sm mb-4 leading-relaxed flex-1">A bold, high-converting site for a local electrician: dark theme, instant trust signals, and a clear path to booking.</p><button class="w-full py-3 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-xl text-white font-semibold text-sm hover:opacity-90 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2">View Live Demo<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-4 h-4"><path d="m9 18 6-6-6-6"></path></svg></button></div></div><div class="flex-col border border-gray-800/50 rounded-2xl overflow-hidden bg-gradient-to-b from-gray-900/50 to-black/50 transition-all duration-500 hover:shadow-2xl hover:shadow-blue-500/10 hover:border-blue-500/40 hidden md:flex"><div class="bg-gray-800/80 px-4 py-3 flex items-center gap-2 border-b border-gray-700/50 flex-shrink-0"><div class="w-2.5 h-2.5 rounded-full bg-red-500/80"></div><div class="w-2.5 h-2.5 rounded-full bg-yellow-500/80"></div><div class="w-2.5 h-2.5 rounded-full bg-green-500/80"></div><div class="flex-1 mx-2 bg-gray-700/80 rounded-full px-3 py-1 text-xs text-gray-400 truncate">flowrightplumbing.co.nz</div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 text-gray-500 shrink-0"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><div class="relative overflow-hidden cursor-pointer flex-shrink-0" style="height:170px;background:linear-gradient(135deg, #0c1a2e 0%, #0a2540 100%)"><div class="absolute inset-0 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-droplets w-20 h-20 text-blue-400 opacity-15"><path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"></path><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"></path></svg></div><div class="absolute top-4 left-4 right-4 h-3 rounded bg-white/5"></div><div class="absolute top-10 left-4 right-4 h-10 rounded bg-white/5"></div><div class="absolute top-24 left-4 right-4 grid grid-cols-3 gap-2"><div class="h-10 rounded bg-white/5"></div><div class="h-10 rounded bg-white/5"></div><div class="h-10 rounded bg-white/5"></div></div></div><div class="p-5 flex flex-col flex-1"><div class="flex items-center gap-3 mb-3"><div class="p-2 rounded-lg bg-gray-800/80 flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-droplets w-5 h-5 text-blue-400"><path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"></path><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"></path></svg></div><div><h3 class="text-white font-bold text-base leading-tight">FlowRight Plumbing</h3><span class="text-xs font-medium border rounded-full px-2 py-0.5 bg-blue-400/10 border-blue-400/30 text-blue-400">Plumber<!-- --> Website</span></div></div><p class="text-gray-400 text-sm mb-4 leading-relaxed flex-1">A clean, trust-building site for a plumber: light theme, emergency call-to-action front and centre, easy quote form.</p><button class="w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl text-white font-semibold text-sm hover:opacity-90 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2">View Live Demo<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-4 h-4"><path d="m9 18 6-6-6-6"></path></svg></button></div></div><div class="flex-col border border-gray-800/50 rounded-2xl overflow-hidden bg-gradient-to-b from-gray-900/50 to-black/50 transition-all duration-500 hover:shadow-2xl hover:shadow-amber-500/10 hover:border-amber-500/40 hidden md:flex"><div class="bg-gray-800/80 px-4 py-3 flex items-center gap-2 border-b border-gray-700/50 flex-shrink-0"><div class="w-2.5 h-2.5 rounded-full bg-red-500/80"></div><div class="w-2.5 h-2.5 rounded-full bg-yellow-500/80"></div><div class="w-2.5 h-2.5 rounded-full bg-green-500/80"></div><div class="flex-1 mx-2 bg-gray-700/80 rounded-full px-3 py-1 text-xs text-gray-400 truncate">craftandtimber.co.nz</div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 text-gray-500 shrink-0"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div><div class="relative overflow-hidden cursor-pointer flex-shrink-0" style="height:170px;background:linear-gradient(135deg, #1c1209 0%, #2d1a07 100%)"><div class="absolute inset-0 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hammer w-20 h-20 text-amber-400 opacity-15"><path d="m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9"></path><path d="m18 15 4-4"></path><path d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5"></path></svg></div><div class="absolute top-4 left-4 right-4 h-3 rounded bg-white/5"></div><div class="absolute top-10 left-4 right-4 h-10 rounded bg-white/5"></div><div class="absolute top-24 left-4 right-4 grid grid-cols-3 gap-2"><div class="h-10 rounded bg-white/5"></div><div class="h-10 rounded bg-white/5"></div><div class="h-10 rounded bg-white/5"></div></div></div><div class="p-5 flex flex-col flex-1"><div class="flex items-center gap-3 mb-3"><div class="p-2 rounded-lg bg-gray-800/80 flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hammer w-5 h-5 text-amber-400"><path d="m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9"></path><path d="m18 15 4-4"></path><path d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5"></path></svg></div><div><h3 class="text-white font-bold text-base leading-tight">Craft &amp; Timber Co.</h3><span class="text-xs font-medium border rounded-full px-2 py-0.5 bg-amber-400/10 border-amber-400/30 text-amber-400">Carpenter<!-- --> Website</span></div></div><p class="text-gray-400 text-sm mb-4 leading-relaxed flex-1">A warm, premium site for a carpenter: earthy tones, craftsmanship focus, and a project inquiry form that converts.</p><button class="w-full py-3 bg-gradient-to-r from-amber-600 to-orange-700 rounded-xl text-white font-semibold text-sm hover:opacity-90 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2">View Live Demo<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-4 h-4"><path d="m9 18 6-6-6-6"></path></svg></button></div></div></div><div class="text-center"><a class="inline-flex items-center gap-1 text-cyan-400 hover:text-cyan-300 font-medium transition-colors" href="/gallery" data-discover="true">View all 22 demos →</a></div></div></section><section id="services" class="relative py-20 px-6 border-t border-gray-800/50"><div class="max-w-6xl mx-auto"><div class="text-center mb-4"><h2 class="text-3xl sm:text-4xl md:text-5xl font-bold"><span class="bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">What You Get</span></h2></div><p class="text-center text-gray-400 mb-10 max-w-2xl mx-auto">Every website comes ready to add these features whenever you need them. Start simple, add automation later.</p><div class="group border border-green-500/30 rounded-2xl bg-gradient-to-b from-gray-900/50 to-black/50 hover:border-green-500/60 transition-all duration-500 hover:shadow-lg hover:shadow-green-500/10 cursor-pointer p-8 mb-6"><div class="flex flex-col sm:flex-row sm:items-center gap-6"><div class="w-16 h-16 bg-gradient-to-r from-green-500 to-cyan-500 rounded-full flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe w-8 h-8 text-white"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg></div><div class="flex-1"><div class="flex items-center gap-3 mb-2"><h3 class="text-2xl font-bold text-white">Custom Website</h3><span class="text-xs font-semibold px-3 py-1 rounded-full bg-green-500/15 border border-green-500/30 text-green-400">Core Service</span></div><p class="text-gray-400 leading-relaxed">Fast, mobile-friendly websites that turn visitors into customers. Built to your brand, optimised for Google, and ready for automation from day one.</p></div><div class="flex items-center text-green-400 gap-1 flex-shrink-0"><span class="text-sm font-medium">Modern &amp; Responsive</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-4 h-4 group-hover:translate-x-1 transition-transform"><path d="m9 18 6-6-6-6"></path></svg></div></div></div><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Optional add-ons — add any of these to your website at any time</p><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"><div class="group flex flex-col border border-gray-800/50 rounded-2xl bg-gradient-to-b from-gray-900/50 to-black/50 hover:border-purple-500/50 transition-all duration-500 hover:shadow-lg hover:shadow-purple-500/10 cursor-pointer p-6"><div class="flex items-center gap-2 mb-1"><span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400">Optional</span></div><div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-target w-6 h-6 text-white"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg></div><h3 class="text-base font-bold mb-2 text-white">Get More Leads</h3><p class="text-gray-400 text-sm leading-relaxed flex-1">Automatically follow up with new leads so you never miss an opportunity.</p><div class="flex items-center text-purple-400 mt-3 text-sm"><span>Smart Qualification</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-4 h-4 ml-auto group-hover:translate-x-1 transition-transform"><path d="m9 18 6-6-6-6"></path></svg></div></div><div class="group flex flex-col border border-gray-800/50 rounded-2xl bg-gradient-to-b from-gray-900/50 to-black/50 hover:border-cyan-500/50 transition-all duration-500 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer p-6"><div class="flex items-center gap-2 mb-1"><span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-cyan-500/10 border border-cyan-500/20 text-cyan-400">Optional</span></div><div class="w-12 h-12 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot w-6 h-6 text-white"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg></div><h3 class="text-base font-bold mb-2 text-white">AI Chat Assistant</h3><p class="text-gray-400 text-sm leading-relaxed flex-1">Add a chat assistant that answers customers 24/7—even while you&#x27;re on the job.</p><div class="flex items-center text-cyan-400 mt-3 text-sm"><span>Always On</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-4 h-4 ml-auto group-hover:translate-x-1 transition-transform"><path d="m9 18 6-6-6-6"></path></svg></div></div><div class="group flex flex-col border border-gray-800/50 rounded-2xl bg-gradient-to-b from-gray-900/50 to-black/50 hover:border-pink-500/50 transition-all duration-500 hover:shadow-lg hover:shadow-pink-500/10 cursor-pointer p-6"><div class="flex items-center gap-2 mb-1"><span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-pink-500/10 border border-pink-500/20 text-pink-400">Optional</span></div><div class="w-12 h-12 bg-gradient-to-r from-pink-500 to-cyan-500 rounded-full flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bar-chart3 w-6 h-6 text-white"><path d="M3 3v18h18"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg></div><h3 class="text-base font-bold mb-2 text-white">Connect to Your Tools</h3><p class="text-gray-400 text-sm leading-relaxed flex-1">Connect to the tools you already use (Salesforce, HubSpot, Zoho) so nothing falls through the cracks.</p><div class="flex items-center text-pink-400 mt-3 text-sm"><span>One Place for Everything</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-4 h-4 ml-auto group-hover:translate-x-1 transition-transform"><path d="m9 18 6-6-6-6"></path></svg></div></div><div class="group flex flex-col border border-gray-800/50 rounded-2xl bg-gradient-to-b from-gray-900/50 to-black/50 hover:border-teal-500/50 transition-all duration-500 hover:shadow-lg hover:shadow-teal-500/10 cursor-pointer p-6"><div class="flex items-center gap-2 mb-1"><span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-teal-500/10 border border-teal-500/20 text-teal-400">Free</span></div><div class="w-12 h-12 bg-gradient-to-r from-teal-500 to-cyan-500 rounded-full flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search w-6 h-6 text-white"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg></div><h3 class="text-base font-bold mb-2 text-white">Free Systems Audit</h3><p class="text-gray-400 text-sm leading-relaxed flex-1">Not sure what you need? We&#x27;ll look at your current setup and show you exactly where you&#x27;re losing time and leads.</p><div class="flex items-center text-teal-400 mt-3 text-sm"><span>No Commitment</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-4 h-4 ml-auto group-hover:translate-x-1 transition-transform"><path d="m9 18 6-6-6-6"></path></svg></div></div></div></div></section><section class="py-16 px-6 border-t border-gray-800/50"><div class="text-center max-w-2xl mx-auto mb-10"><p class="text-sm text-cyan-400 tracking-wider animate-pulse mb-3">Why Automate?</p><h2 class="text-3xl sm:text-4xl md:text-5xl font-bold"><span class="bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">See the Difference</span></h2><p class="text-gray-500 mt-3 text-sm sm:text-base">What your business looks like before and after our automation solutions.</p></div><div class="flex flex-row gap-2 sm:gap-6 max-w-4xl mx-auto items-stretch"><div class="flex-1 min-w-0 rounded-2xl p-3 sm:p-7 relative overflow-hidden border border-red-500/25" style="background:linear-gradient(135deg, rgba(255,60,60,0.06) 0%, rgba(30,30,30,0.9) 100%)"><div class="absolute -top-16 w-44 h-44 rounded-full pointer-events-none" style="left:-60px;background:radial-gradient(circle, rgba(255,60,60,0.15) 0%, transparent 70%)"></div><span class="inline-flex items-center px-2 sm:px-3.5 py-0.5 sm:py-1 rounded-full text-xs font-bold tracking-widest uppercase mb-2 sm:mb-4 border text-red-400 bg-red-500/10 border-red-500/30">Before</span><h3 class="text-xs sm:text-xl font-bold text-gray-100 mb-2 sm:mb-6 leading-snug">Without a Modern Website</h3><div class="flex flex-col gap-1.5 sm:gap-3.5"><div class="flex items-start gap-1.5 sm:gap-3 animate-fade-slide-in" style="animation-delay:0s"><span class="text-xs sm:text-lg shrink-0 mt-0.5">🐌</span><span class="text-xs sm:text-sm text-gray-300/80 leading-snug">Slow, outdated site</span></div><div class="flex items-start gap-1.5 sm:gap-3 animate-fade-slide-in" style="animation-delay:0.08s"><span class="text-xs sm:text-lg shrink-0 mt-0.5">📱</span><span class="text-xs sm:text-sm text-gray-300/80 leading-snug">Broken on mobile</span></div><div class="flex items-start gap-1.5 sm:gap-3 animate-fade-slide-in" style="animation-delay:0.16s"><span class="text-xs sm:text-lg shrink-0 mt-0.5">🔍</span><span class="text-xs sm:text-sm text-gray-300/80 leading-snug">Invisible on Google</span></div><div class="flex items-start gap-1.5 sm:gap-3 animate-fade-slide-in" style="animation-delay:0.24s"><span class="text-xs sm:text-lg shrink-0 mt-0.5">🖥️</span><span class="text-xs sm:text-sm text-gray-300/80 leading-snug">Can&#x27;t capture leads</span></div><div class="flex items-start gap-1.5 sm:gap-3 animate-fade-slide-in" style="animation-delay:0.32s"><span class="text-xs sm:text-lg shrink-0 mt-0.5">🔧</span><span class="text-xs sm:text-sm text-gray-300/80 leading-snug">Expensive to update</span></div></div></div><div class="flex sm:flex-col items-center justify-center shrink-0 sm:py-4"><div class="w-12 h-12 rounded-full bg-gradient-to-br from-red-500 to-cyan-400 flex items-center justify-center text-white font-extrabold text-xl" style="box-shadow:0 0 24px rgba(0,230,230,0.3), 0 0 24px rgba(255,60,60,0.3)">→</div></div><div class="flex-1 min-w-0 rounded-2xl p-3 sm:p-7 relative overflow-hidden border border-cyan-400/25" style="background:linear-gradient(135deg, rgba(0,230,230,0.08) 0%, rgba(30,30,30,0.9) 100%)"><div class="absolute -top-16 w-44 h-44 rounded-full pointer-events-none" style="right:-60px;background:radial-gradient(circle, rgba(0,230,230,0.15) 0%, transparent 70%)"></div><span class="inline-flex items-center px-2 sm:px-3.5 py-0.5 sm:py-1 rounded-full text-xs font-bold tracking-widest uppercase mb-2 sm:mb-4 border text-cyan-400 bg-cyan-500/10 border-cyan-500/30">After</span><h3 class="text-xs sm:text-xl font-bold text-gray-100 mb-2 sm:mb-6 leading-snug">With AppAI Process</h3><div class="flex flex-col gap-1.5 sm:gap-3.5"><div class="flex items-start gap-1.5 sm:gap-3 animate-fade-slide-in" style="animation-delay:0s"><span class="text-xs sm:text-lg shrink-0 mt-0.5">🚀</span><span class="text-xs sm:text-sm text-gray-300/80 leading-snug">Lightning-fast design</span></div><div class="flex items-start gap-1.5 sm:gap-3 animate-fade-slide-in" style="animation-delay:0.08s"><span class="text-xs sm:text-lg shrink-0 mt-0.5">📱</span><span class="text-xs sm:text-sm text-gray-300/80 leading-snug">Works on every device</span></div><div class="flex items-start gap-1.5 sm:gap-3 animate-fade-slide-in" style="animation-delay:0.16s"><span class="text-xs sm:text-lg shrink-0 mt-0.5">🔍</span><span class="text-xs sm:text-sm text-gray-300/80 leading-snug">SEO built-in</span></div><div class="flex items-start gap-1.5 sm:gap-3 animate-fade-slide-in" style="animation-delay:0.24s"><span class="text-xs sm:text-lg shrink-0 mt-0.5">🤖</span><span class="text-xs sm:text-sm text-gray-300/80 leading-snug">AI-ready from day one</span></div><div class="flex items-start gap-1.5 sm:gap-3 animate-fade-slide-in" style="animation-delay:0.32s"><span class="text-xs sm:text-lg shrink-0 mt-0.5">⚡</span><span class="text-xs sm:text-sm text-gray-300/80 leading-snug">Easy to update &amp; scale</span></div></div></div></div></section><section id="how-it-works" class="relative py-20 px-6 border-t border-gray-800/50"><div class="max-w-5xl mx-auto"><div class="text-center mb-4"><p class="text-sm text-cyan-400 tracking-wider uppercase mb-3">Getting Started</p><h2 class="text-3xl sm:text-4xl md:text-5xl font-bold"><span class="bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">How It Works</span></h2></div><p class="text-center text-gray-400 mb-12 max-w-xl mx-auto">No meetings required. Get your website in 3 simple steps.</p><div class="grid md:grid-cols-3 gap-8"><article class="p-6 border border-gray-800/50 rounded-xl bg-gradient-to-b from-gray-900/50 to-black/50 text-center"><div class="w-14 h-14 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-5"><span class="text-white font-bold text-xl">1</span></div><h3 class="text-xl font-bold text-white mb-3">Pick &amp; Pay</h3><p class="text-gray-400">Choose your package, select hosting, and pay online. Takes 2 minutes. No sales calls required.</p></article><article class="p-6 border border-gray-800/50 rounded-xl bg-gradient-to-b from-gray-900/50 to-black/50 text-center"><div class="w-14 h-14 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-5"><span class="text-white font-bold text-xl">2</span></div><h3 class="text-xl font-bold text-white mb-3">Send Your Details</h3><p class="text-gray-400">Fill out a quick form with your business info, logo, and content. We handle all the technical work.</p></article><article class="p-6 border border-gray-800/50 rounded-xl bg-gradient-to-b from-gray-900/50 to-black/50 text-center"><div class="w-14 h-14 bg-gradient-to-r from-pink-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-5"><span class="text-white font-bold text-xl">3</span></div><h3 class="text-xl font-bold text-white mb-3">Get Your Site</h3><p class="text-gray-400">Your site goes live in 24 hours to 7 days. You own it outright. Start getting customers immediately.</p></article></div><p class="text-center text-gray-500 text-sm mt-10 mb-6">Not sure which package is right?<!-- --> <button class="text-cyan-400 hover:text-cyan-300 transition-colors">Book a free call</button> <!-- -->and we&#x27;ll help you choose.</p><div class="flex flex-col sm:flex-row gap-4 justify-center"><button class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full text-white font-semibold hover:shadow-lg hover:shadow-cyan-500/25 transition-all duration-300">See Packages →</button><button class="px-8 py-3 border border-gray-600/50 rounded-full text-gray-300 hover:border-gray-500 hover:text-white transition-all duration-300">Talk to Us First</button></div></div></section><section class="relative py-20 px-6 border-t border-gray-800/50 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-cyan-950/20 via-transparent to-purple-950/20 pointer-events-none"></div><div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/30 to-transparent"></div><div class="max-w-6xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10"><div><div class="mb-4 text-sm text-cyan-400 tracking-wider animate-pulse">Live Demo</div><h2 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-6 leading-tight pb-2"><span class="bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">See AI in Action, Right Now</span></h2><p class="text-gray-400 text-lg mb-8 leading-relaxed">Meet Aiden, our own chat assistant. He&#x27;s live on this page right now. This is exactly the same type of bot we can add to your website.</p><button class="group inline-flex items-center gap-3 px-6 py-3 border border-cyan-500/40 rounded-full text-cyan-400 hover:bg-cyan-500/10 hover:border-cyan-500/60 transition-all duration-300">Chat with Aiden<span class="text-lg group-hover:translate-x-1 group-hover:translate-y-1 transition-transform inline-block">↘</span></button><p class="mt-3 text-xs text-gray-600">Look for the chat icon in the bottom-right corner</p></div><div class="hidden lg:block"><div class="border border-cyan-500/20 rounded-2xl bg-gray-900/80 shadow-xl shadow-cyan-500/5 overflow-hidden"><div class="bg-gradient-to-r from-cyan-950/80 to-purple-950/80 px-4 py-3 flex items-center gap-3 border-b border-gray-800/50"><div class="w-9 h-9 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot w-4 h-4 text-white"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg></div><div><div class="text-white text-sm font-semibold">Aiden</div><div class="flex items-center gap-1.5"><div class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></div><span class="text-xs text-green-400">Online now</span></div></div></div><div class="p-4 space-y-4"><div class="flex gap-2 items-end"><div class="w-6 h-6 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full flex-shrink-0 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot w-3 h-3 text-white"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg></div><div class="bg-gray-800/80 rounded-2xl rounded-bl-sm px-4 py-2.5 text-sm text-gray-300 max-w-xs leading-relaxed">Hi there! I&#x27;m Aiden 👋 Ask me anything about our services or how a website could work for your business.</div></div><div class="flex justify-end"><div class="bg-gradient-to-r from-cyan-500/15 to-purple-500/15 border border-cyan-500/20 rounded-2xl rounded-br-sm px-4 py-2.5 text-sm text-gray-300 max-w-xs">How quickly can you build a website?</div></div><div class="flex gap-2 items-end"><div class="w-6 h-6 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full flex-shrink-0 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot w-3 h-3 text-white"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg></div><div class="bg-gray-800/80 rounded-2xl rounded-bl-sm px-4 py-2.5 text-sm text-gray-300 max-w-xs leading-relaxed">Starter sites are ready in 24 hours. Bigger 3-page sites take about 7 days. We handle everything 🚀</div></div><div class="flex items-center gap-2 pl-8"><div class="flex gap-1"><span class="w-1.5 h-1.5 rounded-full bg-gray-600 animate-bounce" style="animation-delay:0ms"></span><span class="w-1.5 h-1.5 rounded-full bg-gray-600 animate-bounce" style="animation-delay:150ms"></span><span class="w-1.5 h-1.5 rounded-full bg-gray-600 animate-bounce" style="animation-delay:300ms"></span></div><span class="text-xs text-gray-600">Aiden is typing…</span></div></div><div class="border-t border-gray-800/50 px-4 py-3 flex items-center gap-2"><div class="flex-1 bg-gray-800/60 rounded-full px-4 py-2 text-xs text-gray-600">Ask Aiden anything…</div><div class="w-7 h-7 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-3.5 h-3.5 text-white"><path d="m9 18 6-6-6-6"></path></svg></div></div></div></div></div></section><section class="relative py-20 px-6 border-t border-gray-800/50"><div class="max-w-6xl mx-auto"><div class="grid lg:grid-cols-2 gap-12 items-center mb-14"><div class="flex justify-center lg:justify-start"><div class="p-1 rounded-full bg-gradient-to-r from-cyan-500 to-purple-500 shadow-lg shadow-cyan-500/25"><img src="/images/julian_headshot_optimised.jpg" alt="Julian Thorpe - Founder of AppAI Process" class="w-40 h-40 sm:w-52 sm:h-52 rounded-full object-cover"/></div></div><div><div class="mb-4 text-sm text-cyan-400 tracking-wider animate-pulse">Who&#x27;s Behind This</div><h2 class="text-3xl sm:text-4xl font-bold mb-6 bg-gradient-to-r from-white via-cyan-400 to-purple-400 bg-clip-text text-transparent leading-tight pb-1">The Person Behind the Tech</h2><p class="text-gray-300 leading-relaxed mb-4">I&#x27;m Julian Thorpe, founder of AppAI Process. I started this business because I kept seeing small businesses waste hours on things their software could already handle, or lose leads simply because no one was there to reply.</p><p class="text-gray-400 leading-relaxed mb-6">Before this, I spent 3+ years building machine learning systems for Australia&#x27;s Defence Science and Technology Group. I bring that same standard of reliability to every system I build. Based in Christchurch, working with businesses worldwide.</p><a class="text-cyan-400 hover:text-cyan-300 text-sm font-medium transition-colors" href="/about" data-discover="true">Learn more about us →</a></div></div><div class="hidden md:grid md:grid-cols-3 gap-6"><div class="p-5 border border-gray-800/50 rounded-xl bg-gradient-to-b from-gray-900/50 to-black/50"><div class="w-10 h-10 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full flex items-center justify-center mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield w-5 h-5 text-white"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg></div><h3 class="text-base font-bold mb-2 text-white">Built to Last</h3><p class="text-gray-400 text-sm leading-relaxed">Every system is built to the same reliability standard expected in high-stakes defence research. No shortcuts.</p></div><div class="p-5 border border-gray-800/50 rounded-xl bg-gradient-to-b from-gray-900/50 to-black/50"><div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-5 h-5 text-white"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg></div><h3 class="text-base font-bold mb-2 text-white">Tested Beyond Normal Use</h3><p class="text-gray-400 text-sm leading-relaxed">Our automations are stress-tested well beyond what your business will throw at them, so they hold up when it matters.</p></div><div class="p-5 border border-gray-800/50 rounded-xl bg-gradient-to-b from-gray-900/50 to-black/50"><div class="w-10 h-10 bg-gradient-to-r from-pink-500 to-cyan-500 rounded-full flex items-center justify-center mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe w-5 h-5 text-white"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg></div><h3 class="text-base font-bold mb-2 text-white">Global Standards, Local Focus</h3><p class="text-gray-400 text-sm leading-relaxed">Based in Christchurch and serving clients worldwide, with international-level expertise and a personal approach.</p></div></div></div></section><section class="relative py-20 px-6 border-t border-gray-800/50"><div class="max-w-4xl mx-auto text-center"><h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-6 bg-gradient-to-r from-white via-cyan-400 to-purple-400 bg-clip-text text-transparent">Ready to Get Your Business Online?</h2><p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">Book a free 30 minute call. We&#x27;ll look at what you need, show you some examples, and give you a straight answer on cost and timing. No jargon, no pressure.</p><button class="group px-8 sm:px-12 py-4 sm:py-6 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full text-white font-bold text-lg sm:text-xl hover:shadow-xl hover:shadow-cyan-500/25 transition-all duration-300 animate-pulse-glow"><span class="flex items-center gap-3">Book a Call<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-6 h-6 group-hover:translate-x-1 transition-transform"><path d="m9 18 6-6-6-6"></path></svg></span></button><div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-10 max-w-2xl mx-auto"><div class="p-4 border border-gray-800/50 rounded-lg bg-gradient-to-b from-gray-900/50 to-black/50"><p class="text-2xl font-bold mb-1 text-cyan-400">Free</p><p class="text-xs text-gray-400">No Cost Consultation</p></div><div class="p-4 border border-gray-800/50 rounded-lg bg-gradient-to-b from-gray-900/50 to-black/50"><p class="text-2xl font-bold mb-1 text-purple-400">30 min</p><p class="text-xs text-gray-400">Strategy Session</p></div><div class="p-4 border border-gray-800/50 rounded-lg bg-gradient-to-b from-gray-900/50 to-black/50"><p class="text-2xl font-bold mb-1 text-pink-400">Remote</p><p class="text-xs text-gray-400">Worldwide Available</p></div><div class="p-4 border border-gray-800/50 rounded-lg bg-gradient-to-b from-gray-900/50 to-black/50"><p class="text-2xl font-bold mb-1 text-green-400">Zero</p><p class="text-xs text-gray-400">Commitment Required</p></div></div></div></section><div class="fixed bottom-24 right-4 z-40 max-w-[210px]"><div class="relative bg-gray-900 border border-gray-700/50 rounded-xl p-3 shadow-xl shadow-black/40"><div class="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-t-xl"></div><button class="absolute top-2 right-2 text-gray-500 hover:text-white transition-colors" aria-label="Dismiss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x w-3 h-3"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button><p class="text-sm font-semibold text-white pr-4 mb-1">Meet Aiden</p><p class="text-xs text-gray-400 leading-snug">See our AI support in action.</p><div class="absolute -bottom-2 right-6 border-l-[6px] border-r-[6px] border-t-[8px] border-l-transparent border-r-transparent border-t-gray-700/50"></div></div></div><footer class="relative py-8 px-6 border-t border-gray-800/50 text-center text-gray-500 text-sm">© APPAIPROCESS.COM 2025. ALL RIGHTS RESERVED. AI AUTOMATION SPECIALISTS.</footer></div></div>
    
    <!-- SEO Content for Crawlers (hidden when JavaScript loads) -->
    <noscript>
      <div style="max-width: 1200px; margin: 0 auto; padding: 40px 20px; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; color: #333;">
        <header style="text-align: center; margin-bottom: 60px;">
          <h1 style="font-size: 2.5em; color: #06b6d4; margin-bottom: 20px;">AI Automation Solutions for Modern Businesses</h1>
          <p style="font-size: 1.2em; color: #666;">Transform your business with cutting-edge AI technology and intelligent automation.</p>
        </header>
        
        <main>
          <section style="margin-bottom: 60px;">
            <h2 style="font-size: 2em; color: #1e293b; margin-bottom: 30px; border-bottom: 3px solid #06b6d4; padding-bottom: 10px;">Our Services</h2>
            
            <article style="margin-bottom: 40px; padding: 20px; border-left: 4px solid #06b6d4; background: #f8f9fa;">
              <h3 style="font-size: 1.5em; color: #0891b2; margin-bottom: 15px;">AI Chat Agents</h3>
              <p style="margin-bottom: 15px;">Deploy intelligent conversational AI agents that handle customer inquiries 24/7, qualify leads, and provide personalized support. Our custom AI chat agents integrate seamlessly with your existing systems, reducing response times and increasing customer satisfaction.</p>
              <a href="https://appaiprocess.com/chat-agents" style="color: #8b5cf6; text-decoration: none; font-weight: bold;">Learn more about AI Chat Agents →</a>
            </article>
            
            <article style="margin-bottom: 40px; padding: 20px; border-left: 4px solid #8b5cf6; background: #f8f9fa;">
              <h3 style="font-size: 1.5em; color: #7c3aed; margin-bottom: 15px;">Lead Generation Automation</h3>
              <p style="margin-bottom: 15px;">Automate your lead generation process with AI-powered tools that identify, qualify, and nurture prospects. Increase conversion rates, streamline your sales pipeline, and focus your team on high-value opportunities.</p>
              <a href="https://appaiprocess.com/lead-generation" style="color: #06b6d4; text-decoration: none; font-weight: bold;">Learn more about Lead Generation →</a>
            </article>
            
            <article style="margin-bottom: 40px; padding: 20px; border-left: 4px solid #06b6d4; background: #f8f9fa;">
              <h3 style="font-size: 1.5em; color: #0891b2; margin-bottom: 15px;">CRM Integration</h3>
              <p style="margin-bottom: 15px;">Seamlessly connect your AI solutions with popular CRM platforms like Salesforce, HubSpot, and Zoho. Automate data entry, sync customer interactions, and gain actionable insights from your customer data without manual work.</p>
              <a href="https://appaiprocess.com/crm-integration" style="color: #8b5cf6; text-decoration: none; font-weight: bold;">Learn more about CRM Integration →</a>
            </article>
            
            <article style="margin-bottom: 40px; padding: 20px; border-left: 4px solid #8b5cf6; background: #f8f9fa;">
              <h3 style="font-size: 1.5em; color: #7c3aed; margin-bottom: 15px;">Website Development</h3>
              <p style="margin-bottom: 15px;">Build modern, responsive websites optimized for conversions and integrated with AI automation tools. Fast, secure, and designed to grow your business with cutting-edge technology and best practices.</p>
              <a href="https://appaiprocess.com/website-development" style="color: #06b6d4; text-decoration: none; font-weight: bold;">Learn more about Website Development →</a>
            </article>

            <article style="margin-bottom: 40px; padding: 20px; border-left: 4px solid #06b6d4; background: #f8f9fa;">
              <h3 style="font-size: 1.5em; color: #0891b2; margin-bottom: 15px;">Book a Free Consultation</h3>
              <p style="margin-bottom: 15px;">Ready to explore how AI automation can transform your business? Book a free consultation with our team and we'll walk you through exactly how we can help streamline your operations and drive growth.</p>
              <a href="https://appaiprocess.com/consultation" style="color: #8b5cf6; text-decoration: none; font-weight: bold;">Book a Consultation →</a>
            </article>
          </section>

          <section style="margin-bottom: 60px;">
            <h2 style="font-size: 2em; color: #1e293b; margin-bottom: 30px; border-bottom: 3px solid #06b6d4; padding-bottom: 10px;">Our Work</h2>
            <p style="margin-bottom: 15px;">See real examples of AI automation solutions we've built for businesses across New Zealand. From custom chat agents to fully automated lead generation pipelines.</p>
            <a href="https://appaiprocess.com/gallery" style="color: #06b6d4; text-decoration: none; font-weight: bold;">View Our Gallery →</a>
          </section>

          <section style="margin-bottom: 60px;">
            <h2 style="font-size: 2em; color: #1e293b; margin-bottom: 30px; border-bottom: 3px solid #06b6d4; padding-bottom: 10px;">About AppAI Process</h2>
            <p style="margin-bottom: 15px;">AppAI Process is a New Zealand-based AI automation agency helping small and medium businesses save time, generate more leads, and grow faster using intelligent automation tools. We specialise in building custom AI solutions that integrate with your existing workflows.</p>
            <a href="https://appaiprocess.com/about" style="color: #06b6d4; text-decoration: none; font-weight: bold;">Learn About Us →</a>
          </section>
          
          <section style="margin-bottom: 60px; padding: 30px; background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%); color: white; border-radius: 10px;">
            <h2 style="font-size: 2em; margin-bottom: 20px;">Why Choose AppAI Process?</h2>
            <ul style="font-size: 1.1em; line-height: 2;">
              <li>✓ Custom AI solutions tailored to your business needs</li>
              <li>✓ Seamless integration with existing systems and workflows</li>
              <li>✓ 24/7 automation that scales with your business growth</li>
              <li>✓ Proven track record of increasing efficiency and ROI</li>
              <li>✓ Expert support and ongoing optimization</li>
              <li>✓ Cutting-edge technology from industry leaders</li>
            </ul>
          </section>
          
          <section style="text-align: center; margin-bottom: 60px; padding: 40px; background: #f8f9fa; border-radius: 10px;">
            <h2 style="font-size: 2em; color: #1e293b; margin-bottom: 20px;">Get Started Today</h2>
            <p style="font-size: 1.2em; color: #666; margin-bottom: 30px;">Ready to transform your business with AI automation? Contact us for a free consultation and discover how we can help you streamline operations and boost productivity.</p>
            <a href="https://appaiprocess.com/contact" style="display: inline-block; padding: 15px 40px; background: linear-gradient(135deg, #06b6d4, #8b5cf6); color: white; text-decoration: none; font-weight: bold; font-size: 1.1em; border-radius: 5px;">Contact Us →</a>
          </section>
          
         
        <footer style="margin-top: 80px; padding-top: 40px; border-top: 2px solid #e5e7eb; text-align: center;">
          <nav style="margin-bottom: 30px;">
            <a href="https://appaiprocess.com/" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">Home</a> |
            <a href="https://appaiprocess.com/website-catalog" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">Website Packages</a> |
            <a href="https://appaiprocess.com/about" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">About</a> |
            <a href="https://appaiprocess.com/chat-agents" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">AI Chat Agents</a> |
            <a href="https://appaiprocess.com/lead-generation" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">Lead Generation</a> |
            <a href="https://appaiprocess.com/crm-integration" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">CRM Integration</a> |
            <a href="https://appaiprocess.com/website-development" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">Website Development</a> |
            <a href="https://appaiprocess.com/gallery" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">Gallery</a> |
            <a href="https://appaiprocess.com/consultation" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">Book Consultation</a> 
            <a href="https://appaiprocess.com/audit" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">Free Audit</a> |
            <a href="https://appaiprocess.com/contact" style="color: #06b6d4; text-decoration: none; margin: 0 15px; font-weight: 500;">Contact</a>
          </nav>
          <p style="color: #666;">&copy; 2025 AppAI Process. All rights reserved. | AI Automation Solutions New Zealand</p>
        </footer>
      </div>
    </noscript>
    
  
<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="ad5b1aa6-5270-4d5a-bf8c-cef8d28ef5c8" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiYWQ1YjFhYTYtNTI3MC00ZDVhLWJmOGMtY2VmOGQyOGVmNWM4IiwiYWNjb3VudF9pZCI6IjY4YzM3MzIxMzJlZTU3ZjNkOTI2ZDRhMiIsImRlcGxveV9pZCI6IjY5ZTFiYjdmZmU2MTE4MDAwODk1OWE1OSIsImlzc3VlciI6Im5mc2VydmVyIn0.tqK2taxP5hQdtGZc_JL2Mows_6gjFls5pNGwuBixYTo"></script></body>
</html>