<!doctype html>
<html lang="en" class="h-full">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NexClient AI™ - Revolutionizing Industries with AI Solutions</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
  <script src="/_sdk/element_sdk.js"></script>
  <style>
    body {
      box-sizing: border-box;
    }
    
    * {
      font-family: 'Inter', sans-serif;
    }
    
    h1, h2, h3 {
      font-family: 'Montserrat', sans-serif;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-50px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(50px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes growBar {
      from {
        width: 0;
      }
      to {
        width: var(--bar-width);
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }
    
    .animate-fade-in-up {
      animation: fadeInUp 0.8s ease-out forwards;
    }
    
    .animate-fade-in {
      animation: fadeIn 1s ease-out forwards;
    }
    
    .animate-slide-in-left {
      animation: slideInLeft 0.8s ease-out forwards;
    }
    
    .animate-slide-in-right {
      animation: slideInRight 0.8s ease-out forwards;
    }
    
    .animate-grow-bar {
      animation: growBar 1.5s ease-out forwards;
    }
    
    .animate-pulse {
      animation: pulse 2s ease-in-out infinite;
    }
    
    .delay-100 {
      animation-delay: 0.1s;
      opacity: 0;
    }
    
    .delay-200 {
      animation-delay: 0.2s;
      opacity: 0;
    }
    
    .delay-300 {
      animation-delay: 0.3s;
      opacity: 0;
    }
    
    .delay-400 {
      animation-delay: 0.4s;
      opacity: 0;
    }
    
    .delay-500 {
      animation-delay: 0.5s;
      opacity: 0;
    }
    
    .delay-600 {
      animation-delay: 0.6s;
      opacity: 0;
    }
    
    .gradient-bg {
      background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    }
    
    .btn-hover-effect {
      transition: all 0.3s ease;
    }
    
    .btn-hover-effect:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    
    .card-hover {
      transition: all 0.3s ease;
    }
    
    .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }
    
    .progress-bar-fill {
      transition: width 1.5s ease-out;
    }
  </style>
  <style>@view-transition { navigation: auto; }</style>
  <script src="/_sdk/data_sdk.js" type="text/javascript"></script>
 </head>
 <body class="h-full w-full overflow-auto gradient-bg">
  <main class="w-full h-full"><!-- Hero Section -->
   <section class="w-full min-h-screen flex items-center justify-center px-6 py-20 relative overflow-hidden">
    <div class="absolute inset-0 opacity-5">
     <svg class="w-full h-full" viewbox="0 0 100 100" preserveaspectratio="none"><defs>
       <pattern id="grid" width="10" height="10" patternunits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="black" stroke-width="0.5" />
       </pattern>
      </defs> <rect width="100" height="100" fill="url(#grid)" />
     </svg>
    </div>
    <div class="max-w-6xl mx-auto text-center relative z-10">
     <h1 id="hero-headline" class="text-5xl md:text-7xl font-bold mb-6 animate-fade-in-up"><span class="text-red-600">Revolutionizing Industries</span> <br><span class="text-gray-900">with <span class="text-yellow-500">AI Solutions</span></span></h1>
     <p id="hero-subheading" class="text-xl md:text-2xl text-gray-700 mb-8 max-w-4xl mx-auto animate-fade-in-up delay-200">Unlock the power of AI to transform fitness, wellness, healthcare, and more. Seeking grant funding and offering early access.</p>
     <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8 animate-fade-in-up delay-300"><button id="grant-btn" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-4 px-8 rounded-lg text-lg btn-hover-effect w-full sm:w-auto"> View Grant Info </button> <button id="presale-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-lg text-lg btn-hover-effect w-full sm:w-auto"> Join the Presale </button>
     </div>
     <p class="text-sm text-gray-600 animate-fade-in-up delay-400">Seeking grant funding and offering early access to revolutionary AI technology.</p><!-- AI Brain Illustration -->
     <div class="mt-16 animate-fade-in delay-500">
      <svg class="w-64 h-64 mx-auto" viewbox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" stroke="#EF4444" stroke-width="3" fill="none" opacity="0.3" /> <circle cx="100" cy="100" r="60" stroke="#3B82F6" stroke-width="3" fill="none" opacity="0.3" /> <circle cx="100" cy="100" r="40" stroke="#EAB308" stroke-width="3" fill="none" opacity="0.3" /> <circle cx="100" cy="100" r="8" fill="#EF4444" /> <circle cx="70" cy="70" r="6" fill="#3B82F6" /> <circle cx="130" cy="70" r="6" fill="#3B82F6" /> <circle cx="70" cy="130" r="6" fill="#EAB308" /> <circle cx="130" cy="130" r="6" fill="#EAB308" /> <line x1="100" y1="100" x2="70" y2="70" stroke="#3B82F6" stroke-width="2" /> <line x1="100" y1="100" x2="130" y2="70" stroke="#3B82F6" stroke-width="2" /> <line x1="100" y1="100" x2="70" y2="130" stroke="#EAB308" stroke-width="2" /> <line x1="100" y1="100" x2="130" y2="130" stroke="#EAB308" stroke-width="2" />
      </svg>
     </div>
    </div>
   </section><!-- Problem & Solution Section -->
   <section class="w-full py-20 px-6 bg-white">
    <div class="max-w-6xl mx-auto">
     <div class="grid md:grid-cols-2 gap-12"><!-- Problem -->
      <div class="bg-gray-50 p-8 rounded-2xl card-hover animate-slide-in-left">
       <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-6">
        <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
       </div>
       <h2 id="problem-heading" class="text-3xl font-bold text-gray-900 mb-4">The Problem</h2>
       <p class="text-gray-700 leading-relaxed">There is a significant gap in AI-driven fitness and wellness solutions. Traditional systems don't adapt in real-time to user needs. Professionals and end-users lack intelligent, dynamic accountability and personalization that truly responds to their evolving goals and challenges.</p>
      </div><!-- Solution -->
      <div class="bg-blue-50 p-8 rounded-2xl card-hover animate-slide-in-right">
       <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
        </svg>
       </div>
       <h2 id="solution-heading" class="text-3xl font-bold text-gray-900 mb-4">Our Solution: NexClient AI™</h2>
       <p class="text-gray-700 leading-relaxed">NexClient AI™ uses real-time adaptation, AI-driven accountability, and personalized solutions to transform how professionals and individuals approach fitness, wellness, and healthcare. Our platform supports fitness professionals, healthcare providers, and individuals with tailored plans and intelligent insights.</p>
      </div>
     </div>
    </div>
   </section><!-- Market Demand Section -->
   <section class="w-full py-20 px-6 bg-gray-50">
    <div class="max-w-6xl mx-auto">
     <h2 class="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-4 animate-fade-in-up">Unlocking Growth Potential Across Industries</h2>
     <p class="text-xl text-gray-700 text-center mb-12 max-w-3xl mx-auto animate-fade-in-up delay-100">AI is rapidly growing across fitness, wellness, healthcare, legal, and more. NexClient AI™ is positioned at the intersection of these industries, enabling scalable, data-driven services.</p>
     <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-12"><!-- Fitness -->
      <div class="bg-white p-6 rounded-xl card-hover animate-fade-in-up delay-200">
       <div class="flex items-center justify-between mb-4">
        <h3 class="text-xl font-bold text-gray-900">Fitness</h3><span class="text-2xl">💪</span>
       </div>
       <div class="w-full bg-gray-200 rounded-full h-4 mb-2">
        <div class="bg-red-600 h-4 rounded-full progress-bar-fill" style="width: 0;" data-width="85%"></div>
       </div>
       <p class="text-sm text-gray-600 font-semibold">+85% YoY Growth</p>
      </div><!-- Wellness -->
      <div class="bg-white p-6 rounded-xl card-hover animate-fade-in-up delay-300">
       <div class="flex items-center justify-between mb-4">
        <h3 class="text-xl font-bold text-gray-900">Wellness</h3><span class="text-2xl">🧘</span>
       </div>
       <div class="w-full bg-gray-200 rounded-full h-4 mb-2">
        <div class="bg-yellow-500 h-4 rounded-full progress-bar-fill" style="width: 0;" data-width="78%"></div>
       </div>
       <p class="text-sm text-gray-600 font-semibold">+78% YoY Growth</p>
      </div><!-- Healthcare -->
      <div class="bg-white p-6 rounded-xl card-hover animate-fade-in-up delay-400">
       <div class="flex items-center justify-between mb-4">
        <h3 class="text-xl font-bold text-gray-900">Healthcare</h3><span class="text-2xl">🏥</span>
       </div>
       <div class="w-full bg-gray-200 rounded-full h-4 mb-2">
        <div class="bg-blue-600 h-4 rounded-full progress-bar-fill" style="width: 0;" data-width="92%"></div>
       </div>
       <p class="text-sm text-gray-600 font-semibold">+92% YoY Growth</p>
      </div><!-- Legal -->
      <div class="bg-white p-6 rounded-xl card-hover animate-fade-in-up delay-500">
       <div class="flex items-center justify-between mb-4">
        <h3 class="text-xl font-bold text-gray-900">Legal</h3><span class="text-2xl">⚖️</span>
       </div>
       <div class="w-full bg-gray-200 rounded-full h-4 mb-2">
        <div class="bg-gray-800 h-4 rounded-full progress-bar-fill" style="width: 0;" data-width="65%"></div>
       </div>
       <p class="text-sm text-gray-600 font-semibold">+65% YoY Growth</p>
      </div>
     </div>
     <p class="text-center text-gray-600 mt-8 animate-fade-in-up delay-600">AI adoption is accelerating across professional services—NexClient AI™ is ready to meet the demand.</p>
    </div>
   </section><!-- Grant Section -->
   <section class="w-full py-20 px-6 bg-yellow-50">
    <div class="max-w-4xl mx-auto text-center">
     <h2 id="grant-heading" class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 animate-fade-in-up">Seeking Grant Funding</h2>
     <p class="text-xl text-gray-700 mb-8 animate-fade-in-up delay-100">NexClient AI™ is seeking grant funding to scale across multiple industries: fitness, wellness, healthcare, legal, and other professional services. Our focus is on innovation, research, and real-world impact.</p>
     <div class="bg-yellow-100 border-2 border-yellow-400 rounded-xl p-6 mb-8 animate-fade-in-up delay-200">
      <p class="text-lg font-semibold text-gray-900">We qualify for research and development grants in AI, wellness tech, and professional services innovation.</p>
     </div><button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-4 px-10 rounded-lg text-lg btn-hover-effect animate-fade-in-up delay-300"> View Grant Opportunities </button>
     <p class="text-sm text-gray-600 mt-6 animate-fade-in-up delay-400">Breakthrough AI technology in health and wellness sectors.</p>
     <div class="mt-8 text-xs text-gray-500 space-y-1 animate-fade-in-up delay-500">
      <p>Trademark Pending • Protected by US • Patent Pending</p>
     </div>
    </div>
   </section><!-- Presale Section -->
   <section class="w-full py-20 px-6 bg-blue-50">
    <div class="max-w-4xl mx-auto text-center">
     <h2 id="presale-heading" class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 animate-fade-in-up">Join the Presale for Early Access</h2>
     <p class="text-xl text-gray-700 mb-8 animate-fade-in-up delay-100">The presale gives early adopters priority access to NexClient AI™, early feature previews, input on our roadmap, and preferential onboarding for fitness professionals, wellness businesses, healthcare providers, and more.</p>
     <div class="bg-red-100 border-2 border-red-400 rounded-xl p-6 mb-8 animate-pulse">
      <p class="text-lg font-bold text-red-700">⚡ Limited spots available for early access—secure your place today!</p>
     </div><!-- Progress Bar -->
     <div class="mb-8 animate-fade-in-up delay-200">
      <div class="flex justify-between items-center mb-2"><span class="text-sm font-semibold text-gray-700">Presale Progress</span> <span class="text-sm font-semibold text-blue-600">70% Claimed</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-6">
       <div class="bg-blue-600 h-6 rounded-full progress-bar-fill flex items-center justify-end pr-2" style="width: 0;" data-width="70%"><span class="text-xs text-white font-bold">70%</span>
       </div>
      </div>
     </div><button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-10 rounded-lg text-lg btn-hover-effect animate-fade-in-up delay-300"> Reserve Your Spot </button>
     <p class="text-sm text-gray-600 mt-6 animate-fade-in-up delay-400">No obligation. Be the first to experience NexClient AI™.</p>
    </div>
   </section><!-- Use Cases Section -->
   <section class="w-full py-20 px-6 bg-white">
    <div class="max-w-6xl mx-auto">
     <h2 class="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-16 animate-fade-in-up">Real-World Use Cases</h2>
     <div class="grid md:grid-cols-3 gap-8"><!-- Fitness Professionals -->
      <div class="bg-gradient-to-br from-red-50 to-red-100 p-8 rounded-2xl card-hover animate-fade-in-up delay-100">
       <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mb-6 mx-auto"><span class="text-3xl">🏋️</span>
       </div>
       <h3 class="text-2xl font-bold text-gray-900 mb-4 text-center">For Fitness Professionals</h3>
       <ul class="space-y-3 text-gray-700">
        <li class="flex items-start"><span class="text-red-500 mr-2">✓</span> <span>Track client progress in real time</span></li>
        <li class="flex items-start"><span class="text-red-500 mr-2">✓</span> <span>Deliver personalized workouts and feedback</span></li>
        <li class="flex items-start"><span class="text-red-500 mr-2">✓</span> <span>Keep clients accountable with intelligent reminders</span></li>
       </ul>
      </div><!-- Healthcare Providers -->
      <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-8 rounded-2xl card-hover animate-fade-in-up delay-200">
       <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-6 mx-auto"><span class="text-3xl">🏥</span>
       </div>
       <h3 class="text-2xl font-bold text-gray-900 mb-4 text-center">For Healthcare Providers</h3>
       <ul class="space-y-3 text-gray-700">
        <li class="flex items-start"><span class="text-blue-500 mr-2">✓</span> <span>Support rehabilitation and recovery programs</span></li>
        <li class="flex items-start"><span class="text-blue-500 mr-2">✓</span> <span>Monitor patient adherence effectively</span></li>
        <li class="flex items-start"><span class="text-blue-500 mr-2">✓</span> <span>Personalized wellness and movement protocols</span></li>
       </ul>
      </div><!-- End Users -->
      <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 p-8 rounded-2xl card-hover animate-fade-in-up delay-300">
       <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-6 mx-auto"><span class="text-3xl">❤️</span>
       </div>
       <h3 class="text-2xl font-bold text-gray-900 mb-4 text-center">For Individuals &amp; End-Users</h3>
       <ul class="space-y-3 text-gray-700">
        <li class="flex items-start"><span class="text-yellow-600 mr-2">✓</span> <span>Get personalized fitness or wellness plans</span></li>
        <li class="flex items-start"><span class="text-yellow-600 mr-2">✓</span> <span>Receive AI-driven insights and recommendations</span></li>
        <li class="flex items-start"><span class="text-yellow-600 mr-2">✓</span> <span>Build healthier habits with smart reminders</span></li>
       </ul>
      </div>
     </div>
    </div>
   </section><!-- Product Mockup Section -->
   <section class="w-full py-20 px-6 bg-gray-50">
    <div class="max-w-6xl mx-auto">
     <h2 class="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-16 animate-fade-in-up">See NexClient AI™ in Action</h2>
     <div class="grid md:grid-cols-3 gap-8"><!-- Dashboard Mockup -->
      <div class="bg-white p-6 rounded-2xl shadow-lg card-hover animate-fade-in-up delay-100">
       <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg p-6 mb-4">
        <div class="flex items-center justify-between mb-4">
         <h4 class="text-white font-bold text-lg">Performance Dashboard</h4><span class="text-white text-2xl">📊</span>
        </div>
        <div class="space-y-3">
         <div class="bg-white bg-opacity-20 rounded p-3">
          <div class="flex justify-between items-center mb-1"><span class="text-white text-sm">Workouts Completed</span> <span class="text-white font-bold">24/30</span>
          </div>
          <div class="w-full bg-white bg-opacity-30 rounded-full h-2">
           <div class="bg-yellow-400 h-2 rounded-full" style="width: 80%"></div>
          </div>
         </div>
         <div class="bg-white bg-opacity-20 rounded p-3">
          <div class="flex justify-between items-center mb-1"><span class="text-white text-sm">Weekly Goal</span> <span class="text-white font-bold">85%</span>
          </div>
          <div class="w-full bg-white bg-opacity-30 rounded-full h-2">
           <div class="bg-green-400 h-2 rounded-full" style="width: 85%"></div>
          </div>
         </div>
        </div>
       </div>
       <p class="text-gray-700 text-sm text-center">Track progress with real-time metrics</p>
      </div><!-- Notifications Mockup -->
      <div class="bg-white p-6 rounded-2xl shadow-lg card-hover animate-fade-in-up delay-200">
       <div class="bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-lg p-6 mb-4">
        <div class="flex items-center justify-between mb-4">
         <h4 class="text-gray-900 font-bold text-lg">Smart Reminders</h4><span class="text-2xl">🔔</span>
        </div>
        <div class="space-y-3">
         <div class="bg-white rounded-lg p-3 shadow">
          <div class="flex items-center"><span class="text-2xl mr-3">💧</span>
           <div>
            <p class="text-gray-900 font-semibold text-sm">Hydration Check</p>
            <p class="text-gray-600 text-xs">Time to drink water!</p>
           </div>
          </div>
         </div>
         <div class="bg-white rounded-lg p-3 shadow">
          <div class="flex items-center"><span class="text-2xl mr-3">🏃</span>
           <div>
            <p class="text-gray-900 font-semibold text-sm">Workout Reminder</p>
            <p class="text-gray-600 text-xs">Leg day in 30 minutes</p>
           </div>
          </div>
         </div>
        </div>
       </div>
       <p class="text-gray-700 text-sm text-center">AI-powered intelligent notifications</p>
      </div><!-- Insights Mockup -->
      <div class="bg-white p-6 rounded-2xl shadow-lg card-hover animate-fade-in-up delay-300">
       <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-lg p-6 mb-4">
        <div class="flex items-center justify-between mb-4">
         <h4 class="text-white font-bold text-lg">AI Insights</h4><span class="text-white text-2xl">🧠</span>
        </div>
        <div class="bg-white rounded-lg p-4">
         <p class="text-gray-900 font-semibold text-sm mb-2">Weekly Summary</p>
         <p class="text-gray-700 text-xs mb-3">Great progress! You've increased your workout intensity by 15% this week.</p>
         <div class="flex items-center justify-between text-xs"><span class="text-green-600 font-semibold">↑ 15% Intensity</span> <span class="text-blue-600 font-semibold">↑ 8% Duration</span>
         </div>
        </div>
       </div>
       <p class="text-gray-700 text-sm text-center">Personalized AI-driven recommendations</p>
      </div>
     </div>
    </div>
   </section><!-- Footer -->
   <footer class="w-full py-12 px-6 bg-gray-900 text-white">
    <div class="max-w-6xl mx-auto">
     <div class="text-center mb-8">
      <h3 class="text-3xl font-bold mb-2">NexClient AI™</h3>
      <p class="text-gray-400">Official Site</p>
     </div>
     <div class="grid md:grid-cols-3 gap-8 mb-8">
      <div class="text-center">
       <h4 class="font-semibold mb-2 text-yellow-400">Contact Us</h4>
       <p id="contact-email" class="text-gray-400 text-sm">info@nexclientai.com</p>
       <p id="contact-phone" class="text-gray-400 text-sm">(XXX) XXX-XXXX</p>
      </div>
      <div class="text-center">
       <h4 class="font-semibold mb-2 text-yellow-400">Legal</h4>
       <p class="text-gray-400 text-xs">Trademark Pending</p>
       <p class="text-gray-400 text-xs">Protected by US</p>
       <p class="text-gray-400 text-xs">Patent Pending</p>
      </div>
      <div class="text-center">
       <h4 class="font-semibold mb-2 text-yellow-400">Follow Us</h4>
       <div class="flex justify-center space-x-4"><a href="#" class="text-gray-400 hover:text-white transition">
         <svg class="w-6 h-6" fill="currentColor" viewbox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
         </svg></a> <a href="#" class="text-gray-400 hover:text-white transition">
         <svg class="w-6 h-6" fill="currentColor" viewbox="0 0 24 24"><path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
         </svg></a>
       </div>
      </div>
     </div>
     <div class="text-center text-gray-500 text-sm border-t border-gray-800 pt-8">
      <p>© 2024 NexClient AI™. All rights reserved.</p>
     </div>
    </div>
   </footer>
  </main>
  <script>
    // Default configuration
    const defaultConfig = {
      hero_headline: "Revolutionizing Industries with AI Solutions",
      hero_subheading: "Unlock the power of AI to transform fitness, wellness, healthcare, and more. Seeking grant funding and offering early access.",
      grant_button_text: "View Grant Info",
      presale_button_text: "Join the Presale",
      problem_heading: "The Problem",
      solution_heading: "Our Solution: NexClient AI™",
      grant_heading: "Seeking Grant Funding",
      presale_heading: "Join the Presale for Early Access",
      contact_email: "info@nexclientai.com",
      contact_phone: "(XXX) XXX-XXXX",
      background_color: "#ffffff",
      primary_action_color: "#EAB308",
      secondary_action_color: "#2563EB",
      text_color: "#111827",
      accent_color: "#EF4444",
      font_family: "Inter",
      font_size: 16
    };

    // Update UI based on config
    async function onConfigChange(config) {
      const heroHeadline = document.getElementById('hero-headline');
      const heroSubheading = document.getElementById('hero-subheading');
      const grantBtn = document.getElementById('grant-btn');
      const presaleBtn = document.getElementById('presale-btn');
      const problemHeading = document.getElementById('problem-heading');
      const solutionHeading = document.getElementById('solution-heading');
      const grantHeading = document.getElementById('grant-heading');
      const presaleHeading = document.getElementById('presale-heading');
      const contactEmail = document.getElementById('contact-email');
      const contactPhone = document.getElementById('contact-phone');

      // Update text content
      if (heroHeadline) {
        const headlineText = config.hero_headline || defaultConfig.hero_headline;
        heroHeadline.innerHTML = `<span class="text-red-600">Revolutionizing Industries</span><br><span class="text-gray-900">with <span class="text-yellow-500">AI Solutions</span></span>`;
      }
      
      if (heroSubheading) {
        heroSubheading.textContent = config.hero_subheading || defaultConfig.hero_subheading;
      }
      
      if (grantBtn) {
        grantBtn.textContent = config.grant_button_text || defaultConfig.grant_button_text;
      }
      
      if (presaleBtn) {
        presaleBtn.textContent = config.presale_button_text || defaultConfig.presale_button_text;
      }
      
      if (problemHeading) {
        problemHeading.textContent = config.problem_heading || defaultConfig.problem_heading;
      }
      
      if (solutionHeading) {
        solutionHeading.textContent = config.solution_heading || defaultConfig.solution_heading;
      }
      
      if (grantHeading) {
        grantHeading.textContent = config.grant_heading || defaultConfig.grant_heading;
      }
      
      if (presaleHeading) {
        presaleHeading.textContent = config.presale_heading || defaultConfig.presale_heading;
      }
      
      if (contactEmail) {
        contactEmail.textContent = config.contact_email || defaultConfig.contact_email;
      }
      
      if (contactPhone) {
        contactPhone.textContent = config.contact_phone || defaultConfig.contact_phone;
      }

      // Apply colors
      const bgColor = config.background_color || defaultConfig.background_color;
      const primaryColor = config.primary_action_color || defaultConfig.primary_action_color;
      const secondaryColor = config.secondary_action_color || defaultConfig.secondary_action_color;
      const textColor = config.text_color || defaultConfig.text_color;
      const accentColor = config.accent_color || defaultConfig.accent_color;

      document.body.style.background = `linear-gradient(135deg, ${bgColor} 0%, #f5f5f5 100%)`;
      
      if (grantBtn) {
        grantBtn.style.backgroundColor = primaryColor;
      }
      
      if (presaleBtn) {
        presaleBtn.style.backgroundColor = secondaryColor;
      }

      // Apply font
      const customFont = config.font_family || defaultConfig.font_family;
      const baseFontStack = 'Arial, sans-serif';
      document.body.style.fontFamily = `${customFont}, ${baseFontStack}`;

      // Apply font size
      const baseSize = config.font_size || defaultConfig.font_size;
      document.body.style.fontSize = `${baseSize}px`;
    }

    // Initialize Element SDK
    if (window.elementSdk) {
      window.elementSdk.init({
        defaultConfig: defaultConfig,
        onConfigChange: onConfigChange,
        mapToCapabilities: (config) => ({
          recolorables: [
            {
              get: () => config.background_color || defaultConfig.background_color,
              set: (value) => {
                config.background_color = value;
                window.elementSdk.setConfig({ background_color: value });
              }
            },
            {
              get: () => config.primary_action_color || defaultConfig.primary_action_color,
              set: (value) => {
                config.primary_action_color = value;
                window.elementSdk.setConfig({ primary_action_color: value });
              }
            },
            {
              get: () => config.secondary_action_color || defaultConfig.secondary_action_color,
              set: (value) => {
                config.secondary_action_color = value;
                window.elementSdk.setConfig({ secondary_action_color: value });
              }
            },
            {
              get: () => config.text_color || defaultConfig.text_color,
              set: (value) => {
                config.text_color = value;
                window.elementSdk.setConfig({ text_color: value });
              }
            },
            {
              get: () => config.accent_color || defaultConfig.accent_color,
              set: (value) => {
                config.accent_color = value;
                window.elementSdk.setConfig({ accent_color: value });
              }
            }
          ],
          borderables: [],
          fontEditable: {
            get: () => config.font_family || defaultConfig.font_family,
            set: (value) => {
              config.font_family = value;
              window.elementSdk.setConfig({ font_family: value });
            }
          },
          fontSizeable: {
            get: () => config.font_size || defaultConfig.font_size,
            set: (value) => {
              config.font_size = value;
              window.elementSdk.setConfig({ font_size: value });
            }
          }
        }),
        mapToEditPanelValues: (config) => new Map([
          ["hero_headline", config.hero_headline || defaultConfig.hero_headline],
          ["hero_subheading", config.hero_subheading || defaultConfig.hero_subheading],
          ["grant_button_text", config.grant_button_text || defaultConfig.grant_button_text],
          ["presale_button_text", config.presale_button_text || defaultConfig.presale_button_text],
          ["problem_heading", config.problem_heading || defaultConfig.problem_heading],
          ["solution_heading", config.solution_heading || defaultConfig.solution_heading],
          ["grant_heading", config.grant_heading || defaultConfig.grant_heading],
          ["presale_heading", config.presale_heading || defaultConfig.presale_heading],
          ["contact_email", config.contact_email || defaultConfig.contact_email],
          ["contact_phone", config.contact_phone || defaultConfig.contact_phone]
        ])
      });
    }

    // Animate progress bars on scroll
    const observerOptions = {
      threshold: 0.5,
      rootMargin: '0px'
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const progressBars = entry.target.querySelectorAll('.progress-bar-fill');
          progressBars.forEach(bar => {
            const targetWidth = bar.getAttribute('data-width');
            if (targetWidth) {
              setTimeout(() => {
                bar.style.width = targetWidth;
              }, 100);
            }
          });
          observer.unobserve(entry.target);
        }
      });
    }, observerOptions);

    // Observe sections with progress bars
    document.addEventListener('DOMContentLoaded', () => {
      const sectionsWithBars = document.querySelectorAll('section');
      sectionsWithBars.forEach(section => {
        if (section.querySelectorAll('.progress-bar-fill').length > 0) {
          observer.observe(section);
        }
      });
    });

    // Button click handlers with inline messages
    document.getElementById('grant-btn').addEventListener('click', () => {
      const btn = document.getElementById('grant-btn');
      const originalText = btn.textContent;
      btn.textContent = '✓ Grant Information Coming Soon!';
      btn.style.backgroundColor = '#10B981';
      setTimeout(() => {
        btn.textContent = originalText;
        btn.style.backgroundColor = '';
      }, 3000);
    });

    document.getElementById('presale-btn').addEventListener('click', () => {
      const btn = document.getElementById('presale-btn');
      const originalText = btn.textContent;
      btn.textContent = '✓ Presale Registration Coming Soon!';
      btn.style.backgroundColor = '#10B981';
      setTimeout(() => {
        btn.textContent = originalText;
        btn.style.backgroundColor = '';
      }, 3000);
    });
  </script>
 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9aa9c6b9751a7b7f',t:'MTc2NTE3MDgzNS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>