Hugging Face's logo

Spaces:
DavesBits
/
single-shot-deepsite
Running

App Files Community
single-shot-deepsite / index.html
DavesBits's picture
DavesBits
Add 3 files
6f14137 verified
raw
history blame contribute delete
45.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>byAIm - Modern Web Experience</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 /* Custom CSS for elements not covered by Tailwind */
 .parallax {
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 }
.text-gradient {
 background: linear-gradient(90deg, #3b82f6, #8b5cf6);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
.form-input.error {
 border-color: #ef4444;
 }
.form-input.success {
 border-color: #10b981;
 }
.nav-primary {
 transition: all 0.3s ease;
 }
.nav-primary.scrolled {
 background-color: rgba(15, 23, 42, 0.95);
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
.card-hover:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }
/* Animation for multi-step form */
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
.form-step {
 animation: fadeIn 0.3s ease forwards;
 }
 </style>
</head>
<body class="bg-slate-50 font-sans antialiased text-slate-900">
 <!-- Navigation -->
 <nav class="nav-primary fixed w-full z-50 py-4 px-6 bg-transparent">
 <div class="max-w-7xl mx-auto flex justify-between items-center">
 <a href="#" class="text-2xl font-bold text-white">
 <span class="text-gradient">byAIm</span>
 </a>
<div class="hidden md:flex space-x-8">
 <a href="#features" class="text-white hover:text-blue-200 transition">Features</a>
 <a href="#blog" class="text-white hover:text-blue-200 transition">Blog</a>
 <a href="#contact" class="text-white hover:text-blue-200 transition">Contact</a>
 <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full transition">Get Started</a>
 </div>
<button id="mobile-menu-button" class="md:hidden text-white">
 <i class="fas fa-bars text-2xl"></i>
 </button>
 </div>
<!-- Mobile menu -->
 <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-slate-900 py-4 px-6">
 <div class="flex flex-col space-y-4">
 <a href="#features" class="text-white hover:text-blue-200 transition">Features</a>
 <a href="#blog" class="text-white hover:text-blue-200 transition">Blog</a>
 <a href="#contact" class="text-white hover:text-blue-200 transition">Contact</a>
 <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full transition text-center">Get Started</a>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <section class="relative h-screen flex items-center justify-center overflow-hidden">
 <div class="parallax absolute inset-0 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2232&q=80')]"></div>
 <div class="absolute inset-0 bg-slate-900 opacity-70"></div>
<div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
 <h1 class="text-5xl md:text-7xl font-bold text-white mb-6">Build <span class="text-gradient">Amazing</span> Digital Experiences</h1>
 <p class="text-xl text-slate-200 mb-10">byAIm helps you create beautiful, high-performance websites with our modern design system and developer tools.</p>
 <div class="flex flex-col sm:flex-row justify-center gap-4">
 <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full text-lg font-medium transition">Start Free Trial</a>
 <a href="#" class="bg-transparent hover:bg-slate-800 text-white border border-slate-400 px-8 py-4 rounded-full text-lg font-medium transition">Learn More</a>
 </div>
 </div>
 </section>
<!-- Features Section -->
 <section id="features" class="py-20 px-6 bg-white">
 <div class="max-w-7xl mx-auto">
 <div class="text-center mb-16">
 <h2 class="text-4xl font-bold mb-4">Powerful Features</h2>
 <p class="text-xl text-slate-600 max-w-3xl mx-auto">Our platform provides everything you need to build modern web applications with ease.</p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Feature Card 1 (Small) -->
 <div class="bg-slate-50 rounded-xl p-6 shadow-sm hover:shadow-md transition card-hover">
 <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
 <i class="fas fa-bolt text-blue-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Lightning Fast</h3>
 <p class="text-slate-600">Optimized for performance with lazy loading, code splitting, and modern image formats.</p>
 </div>
<!-- Feature Card 2 (Medium) -->
 <div class="bg-slate-50 rounded-xl p-8 shadow-sm hover:shadow-md transition card-hover">
 <div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
 <i class="fas fa-mobile-alt text-purple-600 text-3xl"></i>
 </div>
 <h3 class="text-2xl font-bold mb-4">Fully Responsive</h3>
 <p class="text-slate-600 mb-4">Looks perfect on any device with our mobile-first responsive design approach.</p>
 <a href="#" class="text-blue-600 font-medium inline-flex items-center">
 Learn more <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
<!-- Feature Card 3 (Large) -->
 <div class="bg-slate-50 rounded-xl p-8 shadow-lg transition card-hover">
 <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mb-6">
 <i class="fas fa-cogs text-green-600 text-4xl"></i>
 </div>
 <h3 class="text-3xl font-bold mb-4">Customizable</h3>
 <p class="text-slate-600 mb-6">Easily customize every aspect of your design with our comprehensive theme system.</p>
 <ul class="space-y-3 mb-6">
 <li class="flex items-center">
 <i class="fas fa-check-circle text-green-500 mr-3"></i>
 <span>Color palette customization</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check-circle text-green-500 mr-3"></i>
 <span>Typography controls</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check-circle text-green-500 mr-3"></i>
 <span>Component variants</span>
 </li>
 </ul>
 <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full text-lg font-medium transition inline-block">View Documentation</a>
 </div>
<!-- Feature Card 4 (XLarge) -->
 <div class="md:col-span-2 bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-8 shadow-sm hover:shadow-md transition card-hover">
 <div class="flex flex-col md:flex-row">
 <div class="md:w-1/2 mb-6 md:mb-0 md:pr-6">
 <div class="w-20 h-20 bg-white rounded-lg flex items-center justify-center mb-6 shadow-sm">
 <i class="fas fa-shield-alt text-blue-600 text-4xl"></i>
 </div>
 <h3 class="text-3xl font-bold mb-4">Enterprise Security</h3>
 <p class="text-slate-700 mb-6">Built with security in mind from the ground up, protecting your data and your customers.</p>
 <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full text-lg font-medium transition inline-block">Security Overview</a>
 </div>
 <div class="md:w-1/2 md:pl-6">
 <div class="bg-white rounded-lg p-6 shadow-sm">
 <h4 class="font-bold mb-3 text-lg">Security Features</h4>
 <ul class="space-y-3">
 <li class="flex items-start">
 <i class="fas fa-lock text-blue-500 mt-1 mr-3"></i>
 <span>End-to-end encryption</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-fingerprint text-blue-500 mt-1 mr-3"></i>
 <span>Biometric authentication</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-globe-europe text-blue-500 mt-1 mr-3"></i>
 <span>Global compliance standards</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-history text-blue-500 mt-1 mr-3"></i>
 <span>Activity logging</span>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>
<!-- Feature Card 5 (XXLarge) -->
 <div class="lg:col-span-3 bg-gradient-to-r from-slate-900 to-blue-900 rounded-xl p-10 text-white">
 <div class="flex flex-col lg:flex-row items-center">
 <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
 <h3 class="text-4xl font-bold mb-6">Ready to Transform Your Business?</h3>
 <p class="text-xl text-slate-300 mb-8">Join thousands of companies using byAIm to build their digital presence.</p>
 <a href="#" class="bg-white hover:bg-slate-100 text-slate-900 px-8 py-4 rounded-full text-lg font-medium transition inline-block">Schedule a Demo</a>
 </div>
 <div class="lg:w-1/2">
 <div class="bg-white rounded-xl p-6 shadow-lg text-slate-900">
 <div class="flex mb-6">
 <div class="w-1/2 pr-3">
 <div class="text-5xl font-bold text-blue-600">95%</div>
 <div class="text-slate-600">Customer satisfaction</div>
 </div>
 <div class="w-1/2 pl-3">
 <div class="text-5xl font-bold text-purple-600">4.9</div>
 <div class="text-slate-600">Average rating</div>
 </div>
 </div>
 <div class="bg-slate-100 rounded-lg p-4">
 <div class="flex items-center mb-3">
 <div class="flex -space-x-2 mr-4">
 <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Happy customer">
 <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Happy customer">
 <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Happy customer">
 </div>
 <div>
 <div class="font-medium">Trusted by 10,000+ businesses</div>
 <div class="flex text-yellow-400 text-sm">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 </div>
 </div>
 </div>
 <p class="text-slate-700 italic">"byAIm helped us increase our conversion rate by 300% while reducing our development costs."</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Blog Section -->
 <section id="blog" class="py-20 px-6 bg-slate-50">
 <div class="max-w-7xl mx-auto">
 <div class="text-center mb-16">
 <h2 class="text-4xl font-bold mb-4">From Our Blog</h2>
 <p class="text-xl text-slate-600 max-w-3xl mx-auto">Learn about web development, design trends, and business growth strategies.</p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
 <!-- Blog Post 1 -->
 <article class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition card-hover">
 <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Web development team working on project" class="w-full h-48 object-cover">
 <div class="p-6">
 <div class="flex items-center text-sm text-slate-500 mb-3">
 <span>June 15, 2023</span>
 <span class="mx-2">•</span>
 <span>5 min read</span>
 </div>
 <h3 class="text-xl font-bold mb-3">How We Built a 100ms Website</h3>
 <p class="text-slate-600 mb-4">Learn the techniques we used to achieve lightning fast load times while maintaining beautiful design.</p>
 <a href="#" class="text-blue-600 font-medium inline-flex items-center">
 Read article <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
 </article>
<!-- Blog Post 2 -->
 <article class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition card-hover">
 <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Designer working on color palette" class="w-full h-48 object-cover">
 <div class="p-6">
 <div class="flex items-center text-sm text-slate-500 mb-3">
 <span>May 28, 2023</span>
 <span class="mx-2">•</span>
 <span>8 min read</span>
 </div>
 <h3 class="text-xl font-bold mb-3">2023 Design Trends to Watch</h3>
 <p class="text-slate-600 mb-4">Discover the emerging design patterns that will dominate the web this year and how to implement them.</p>
 <a href="#" class="text-blue-600 font-medium inline-flex items-center">
 Read article <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
 </article>
<!-- Blog Post 3 -->
 <article class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition card-hover">
 <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1115&q=80" alt="Business analytics dashboard on computer screen" class="w-full h-48 object-cover">
 <div class="p-6">
 <div class="flex items-center text-sm text-slate-500 mb-3">
 <span>April 10, 2023</span>
 <span class="mx-2">•</span>
 <span>12 min read</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Measuring ROI on Your Website</h3>
 <p class="text-slate-600 mb-4">A comprehensive guide to tracking and improving the return on investment from your digital presence.</p>
 <a href="#" class="text-blue-600 font-medium inline-flex items-center">
 Read article <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
 </article>
 </div>
<div class="text-center">
 <a href="#" class="inline-flex items-center px-6 py-3 border border-slate-300 rounded-full text-lg font-medium hover:bg-slate-100 transition">
 View all articles <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="py-20 px-6 bg-white">
 <div class="max-w-4xl mx-auto">
 <div class="text-center mb-16">
 <h2 class="text-4xl font-bold mb-4">Get In Touch</h2>
 <p class="text-xl text-slate-600">Have questions or want to learn more? Our team is here to help.</p>
 </div>
<!-- Multi-step form -->
 <div class="bg-slate-50 rounded-xl p-8 shadow-sm">
 <div class="flex mb-8">
 <div class="w-1/3 text-center">
 <div class="mx-auto w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold mb-2">1</div>
 <div class="text-sm font-medium">Your Information</div>
 </div>
 <div class="w-1/3 text-center">
 <div class="mx-auto w-12 h-12 rounded-full bg-slate-200 text-slate-600 flex items-center justify-center font-bold mb-2">2</div>
 <div class="text-sm text-slate-500">Project Details</div>
 </div>
 <div class="w-1/3 text-center">
 <div class="mx-auto w-12 h-12 rounded-full bg-slate-200 text-slate-600 flex items-center justify-center font-bold mb-2">3</div>
 <div class="text-sm text-slate-500">Review & Submit</div>
 </div>
 </div>
<!-- Step 1 -->
 <div id="step-1" class="form-step">
 <h3 class="text-xl font-bold mb-6">Tell us about yourself</h3>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 <div>
 <label for="first-name" class="block text-sm font-medium text-slate-700 mb-1">First Name</label>
 <input type="text" id="first-name" class="form-input w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-blue-500">
 <div class="text-red-500 text-sm mt-1 hidden" id="first-name-error">Please enter your first name</div>
 </div>
 <div>
 <label for="last-name" class="block text-sm font-medium text-slate-700 mb-1">Last Name</label>
 <input type="text" id="last-name" class="form-input w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-blue-500">
 </div>
 </div>
 <div class="mb-6">
 <label for="email" class="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
 <input type="email" id="email" class="form-input w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-blue-500">
 <div class="text-red-500 text-sm mt-1 hidden" id="email-error">Please enter a valid email address</div>
 </div>
 <div class="mb-6">
 <label for="phone" class="block text-sm font-medium text-slate-700 mb-1">Phone Number</label>
 <input type="tel" id="phone" class="form-input w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-blue-500">
 </div>
 <div class="flex justify-end">
 <button type="button" onclick="nextStep(1)" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-lg font-medium transition">Next</button>
 </div>
 </div>
<!-- Step 2 -->
 <div id="step-2" class="form-step hidden">
 <h3 class="text-xl font-bold mb-6">Tell us about your project</h3>
 <div class="mb-6">
 <label for="project-type" class="block text-sm font-medium text-slate-700 mb-1">Project Type</label>
 <select id="project-type", class="select-field w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-blue-500">
 <option value="">Select project type</option>
 <option value="website">Website</option>
 <option value="webapp">Web Application</option>
 <option value="ecommerce">E-commerce</option>
 <option value="mobile">Mobile App</option>
 <option value="other">Other</option>
 </select>
 <div class="text-red-500 text-sm mt-1 hidden" id="project-type-error">Please select a project type</div>
 </div>
 <div class="mb-6">
 <label for="budget" class="block text-sm font-medium text-slate-700 mb-1">Estimated Budget</label>
 <select id="budget" class="select-field w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-blue-500">
 <option value="">Select budget range</option>
 <option value="1-5k">$1,000 - $5,000</option>
 <option value="5-10k">$5,000 - $10,000</option>
 <option value="10-25k">$10,000 - $25,000</option>
 <option value="25k+">$25,000+</option>
 </select>
 </div>
 <div class="mb-6">
 <label for="timeline", class="block text-sm font-medium text-slate-700 mb-1">Project Timeline</label>
 <select id="timeline" class="select-field w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-blue-500">
 <option value="">Select timeline</option>
 <option value="1-3m">1-3 months</option>
 <option value="3-6m">3-6 months</option>
 <option value="6m+">6+ months</option>
 </select>
 </div>
 <div class="mb-6">
 <label for="message" class="block text-sm font-medium text-slate-700 mb-1">Project Details</label>
 <textarea id="message" rows="4" class="form-input w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-blue-500" placeholder="Tell us more about your project..."></textarea>
 </div>
 <div class="flex justify-between">
 <button type="button" onclick="prevStep(2)" class="bg-transparent hover:bg-slate-100 text-slate-700 px-6 py-3 rounded-lg text-lg font-medium transition border border-slate-300">Back</button>
 <button type="button" onclick="nextStep(2)" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-lg font-medium transition">Next</button>
 </div>
 </div>
<!-- Step 3 -->
 <div id="step-3" class="form-step hidden">
 <h3 class="text-xl font-bold mb-6">Review your information</h3>
 <div class="bg-white rounded-lg p-6 mb-6 shadow-sm">
 <h4 class="font-bold mb-4">Contact Information</h4>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
 <div>
 <div class="text-sm text-slate-500">First Name</div>
 <div id="review-first-name" class="font-medium">-</div>
 </div>
 <div>
 <div class="text-sm text-slate-500">Last Name</div>
 <div id="review-last-name" class="font-medium">-</div>
 </div>
 <div>
 <div class="text-sm text-slate-500">Email</div>
 <div id="review-email" class="font-medium">-</div>
 </div>
 <div>
 <div class="text-sm text-slate-500">Phone</div>
 <div id="review-phone" class="font-medium">-</div>
 </div>
 </div>
<h4 class="font-bold mb-4 mt-6">Project Information</h4>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div>
 <div class="text-sm text-slate-500">Project Type</div>
 <div id="review-project-type" class="font-medium">-</div>
 </div>
 <div>
 <div class="text-sm text-slate-500">Budget</div>
 <div id="review-budget" class="font-medium">-</div>
 </div>
 <div>
 <div class="text-sm text-slate-500">Timeline</div>
 <div id="review-timeline" class="font-medium">-</div>
 </div>
 </div>
<div class="mt-6">
 <div class="text-sm text-slate-500 mb-1">Project Details</div>
 <div id="review-message" class="text-slate-700">-</div>
 </div>
 </div>
<div class="mb-6">
 <div class="flex items-start">
 <input type="checkbox" id="agree" class="mt-1 mr-3">
 <label for="agree" class="text-sm text-slate-700">I agree to the <a href="#" class="text-blue-600 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a></label>
 </div>
 <div class="text-red-500 text-sm mt-1 hidden" id="agree-error">You must agree to continue</div>
 </div>
<div class="flex justify-between">
 <button type="button" onclick="prevStep(3)" class="bg-transparent hover:bg-slate-100 text-slate-700 px-6 py-3 rounded-lg text-lg font-medium transition border border-slate-300">Back</button>
 <button type="button" onclick="submitForm()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg text-lg font-medium transition flex items-center">
 <span id="submit-text">Submit</span>
 <i class="fas fa-check ml-2"></i>
 </button>
 </div>
 </div>
<!-- Success Message -->
 <div id="success-message" class="hidden text-center py-10">
 <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
 <i class="fas fa-check text-green-600 text-3xl"></i>
 </div>
 <h3 class="text-2xl font-bold mb-3">Thank You!</h3>
 <p class="text-slate-600 mb-6 max-w-md mx-auto">We've received your message and will get back to you within 24 hours.</p>
 <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-lg font-medium transition inline-block">Back to Home</a>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-slate-900 text-white py-16 px-6">
 <div class="max-w-7xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
 <div>
 <h4 class="text-2xl font-bold mb-6">
 <span class="text-gradient">byAIm</span>
 </h4>
 <p class="text-slate-400 mb-6">Building the future of digital experiences with modern design and technology.</p>
 <div class="flex space-x-4">
 <a href="#" class="text-slate-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
 <a href="#" class="text-slate-400 hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a>
 <a href="#" class="text-slate-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a>
 <a href="#" class="text-slate-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
 </div>
 </div>
 <div>
 <h5 class="text-lg font-bold mb-6">Product</h5>
 <ul class="space-y-3">
 <li><a href="#" class="text-slate-400 hover:text-white transition">Features</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Pricing</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Templates</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Integrations</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Roadmap</a></li>
 </ul>
 </div>
 <div>
 <h5 class="text-lg font-bold mb-6">Resources</h5>
 <ul class="space-y-3">
 <li><a href="#" class="text-slate-400 hover:text-white transition">Documentation</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Tutorials</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Blog</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Community</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Support</a></li>
 </ul>
 </div>
 <div>
 <h5 class="text-lg font-bold mb-6">Company</h5>
 <ul class="space-y-3">
 <li><a href="#" class="text-slate-400 hover:text-white transition">About</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Careers</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Press</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Partners</a></li>
 <li><a href="#" class="text-slate-400 hover:text-white transition">Contact</a></li>
 </ul>
 </div>
 </div>
<div class="pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center">
 <p class="text-slate-500 mb-4 md:mb-0">© 2023 byAIm. All rights reserved.</p>
 <div class="flex space-x-6">
 <a href="#" class="text-slate-500 hover:text-white transition">Terms</a>
 <a href="#" class="text-slate-500 hover:text-white transition">Privacy</a>
 <a href="#" class="text-slate-500 hover:text-white transition">Cookies</a>
 </div>
 </div>
 </div>
 </footer>
<script>
 // Mobile menu toggle
 document.getElementById('mobile-menu-button').addEventListener('click', function() {
 const menu = document.getElementById('mobile-menu');
 menu.classList.toggle('hidden');
 });
// Navbar scroll effect
 window.addEventListener('scroll', function() {
 const nav = document.querySelector('.nav-primary');
 if (window.scrollY > 50) {
 nav.classList.add('scrolled');
 } else {
 nav.classList.remove('scrolled');
 }
 });
// Form navigation
 function nextStep(currentStep) {
 // Validate current step before proceeding
 let isValid = true;
if (currentStep === 1) {
 const firstName = document.getElementById('first-name').value;
 const email = document.getElementById('email').value;
if (!firstName) {
 document.getElementById('first-name').classList.add('error');
 document.getElementById('first-name-error').classList.remove('hidden');
 isValid = false;
 } else {
 document.getElementById('first-name').classList.remove('error');
 document.getElementById('first-name-error').classList.add('hidden');
 }
if (!email || !/^\S+@\S+\.\S+$/.test(email)) {
 document.getElementById('email').classList.add('error');
 document.getElementById('email-error').classList.remove('hidden');
 isValid = false;
 } else {
 document.getElementById('email').classList.remove('error');
 document.getElementById('email-error').classList.add('hidden');
 }
 } else if (currentStep === 2) {
 const projectType = document.getElementById('project-type').value;
if (!projectType) {
 document.getElementById('project-type').classList.add('error');
 document.getElementById('project-type-error').classList.remove('hidden');
 isValid = false;
 } else {
 document.getElementById('project-type').classList.remove('error');
 document.getElementById('project-type-error').classList.add('hidden');
 }
 }
if (!isValid) return;
// Update review section
 if (currentStep === 2) {
 document.getElementById('review-first-name').textContent = document.getElementById('first-name').value;
 document.getElementById('review-last-name').textContent = document.getElementById('last-name').value;
 document.getElementById('review-email').textContent = document.getElementById('email').value;
 document.getElementById('review-phone').textContent = document.getElementById('phone').value || '-';
 document.getElementById('review-project-type').textContent = document.getElementById('project-type').options[document.getElementById('project-type').selectedIndex].text;
 document.getElementById('review-budget').textContent = document.getElementById('budget').value ? document.getElementById('budget').options[document.getElementById('budget').selectedIndex].text : '-';
 document.getElementById('review-timeline').textContent = document.getElementById('timeline').value ? document.getElementById('timeline').options[document.getElementById('timeline').selectedIndex].text : '-';
 document.getElementById('review-message').textContent = document.getElementById('message').value || '-';
 }
// Hide current step and show next
 document.getElementById(`step-${currentStep}`).classList.add('hidden');
 document.getElementById(`step-${currentStep + 1}`).classList.remove('hidden');
// Update progress indicator
 document.querySelectorAll('.flex > div > div')[currentStep - 1].classList.remove('bg-blue-600', 'text-white');
 document.querySelectorAll('.flex > div > div')[currentStep - 1].classList.add('bg-slate-200', 'text-slate-600');
 document.querySelectorAll('.flex > div > div')[currentStep].classList.remove('bg-slate-200', 'text-slate-600');
 document.querySelectorAll('.flex > div > div')[currentStep].classList.add('bg-blue-600', 'text-white');
 }
function prevStep(currentStep) {
 document.getElementById(`step-${currentStep}`).classList.add('hidden');
 document.getElementById(`step-${currentStep - 1}`).classList.remove('hidden');
// Update progress indicator
 document.querySelectorAll('.flex > div > div')[currentStep - 1].classList.remove('bg-blue-600', 'text-white');
 document.querySelectorAll('.flex > div > div')[currentStep - 1].classList.add('bg-slate-200', 'text-slate-600');
 document.querySelectorAll('.flex > div > div')[currentStep - 2].classList.remove('bg-slate-200', 'text-slate-600');
 document.querySelectorAll('.flex > div > div')[currentStep - 2].classList.add('bg-blue-600', 'text-white');
 }
function submitForm() {
 const agree = document.getElementById('agree').checked;
if (!agree) {
 document.getElementById('agree-error').classList.remove('hidden');
 return;
 }
document.getElementById('agree-error').classList.add('hidden');
// Show loading state
 const submitBtn = document.querySelector('#step-3 button[onclick="submitForm()"]');
 submitBtn.disabled = true;
 document.getElementById('submit-text').textContent = 'Submitting...';
// Simulate form submission
 setTimeout(function() {
 document.getElementById('step-3').classList.add('hidden');
 document.getElementById('success-message').classList.remove('hidden');
// Reset form
 setTimeout(function() {
 document.getElementById('first-name').value = '';
 document.getElementById('last-name').value = '';
 document.getElementById('email').value = '';
 document.getElementById('phone').value = '';
 document.getElementById('project-type').value = '';
 document.getElementById('budget').value = '';
 document.getElementById('timeline').value = '';
 document.getElementById('message').value = '';
 document.getElementById('agree').checked = false;
// Reset progress
 document.getElementById('step-1').classList.remove('hidden');
 document.getElementById('step-2').classList.add('hidden');
 document.getElementById('step-3').classList.add('hidden');
 document.getElementById('success-message').classList.add('hidden');
document.querySelectorAll('.flex > div > div')[0].classList.add('bg-blue-600', 'text-white');
 document.querySelectorAll('.flex > div > div')[1].classList.remove('bg-blue-600', 'text-white');
 document.querySelectorAll('.flex > div > div')[1].classList.add('bg-slate-200', 'text-slate-600');
 document.querySelectorAll('.flex > div > div')[2].classList.remove('bg-blue-600', 'text-white');
 document.querySelectorAll('.flex > div > div')[2].classList.add('bg-slate-200', 'text-slate-600');
submitBtn.disabled = false;
 document.getElementById('submit-text').textContent = 'Submit';
 }, 5000);
 }, 1500);
 }
// Initialize CLIP for alt text generation (simulated)
 document.querySelectorAll('img').forEach(img => {
 if (!img.alt) {
 // In a real implementation, this would call CLIP API
 img.alt = 'Relevant image description for accessibility';
 }
 });
// Dynamic content variations with GPT-4 (simulated)
 function generateDynamicContent() {
 // In a real implementation, this would call GPT-4 API
 const headlines = [
 "Transform Your Digital Presence",
 "Build Faster, Better Websites",
 "The Future of Web Development"
 ];
const randomHeadline = headlines[Math.floor(Math.random() * headlines.length)];
 document.querySelector('section.relative h1').textContent = randomHeadline;
 }
// Call on page load
 generateDynamicContent();
// Auto-optimize images using Squoosh API (simulated)
 function optimizeImages() {
 // In a real implementation, this would call Squoosh API
 console.log('Images optimized for performance');
 }
// Call on page load
 optimizeImages();
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DavesBits/single-shot-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>