<div id="how-it-works" class="order-2 md:order-1"> <h3 class="text-2xl font-bold mb-4">How It Works</h3> <p class="text-gray-400 mb-6"> We pick up every enquiry, qualify it, and book it—then notify both sides. <strong>Works with your tools.</strong> </p> <ul class="space-y-3"> <li class="flex items-start"> <div class="text-accent mr-3 mt-1"><i class=></i></div> <span><strong>1) Customer reaches you</strong> (call, SMS, WhatsApp, or your usual channel).</span> </li> <li class="flex items-start"> <div class="text-accent mr-3 mt-1"><i class=></i></div> <span><strong>2) We qualify</strong> suburb, job type, photos, access, timeframe, and budget.</span> </li> <li class="flex items-start"> <div class="text-accent mr-3 mt-1"><i class=></i></div> <span><strong>3) We book it</strong> into your Google/Outlook calendar and tag the job (e.g., “Plumbing — burst pipe”).</span> </li> <li class="flex items-start"> <div class="text-accent mr-3 mt-1"><i ></i></div> <span><strong>4) Everyone is notified</strong>: summary to you; confirmation & reminder to the customer.</span> </li> </ul> </div> Make the enumerations 1) 2) 3) and 4) have this formatclass="bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent" - Follow Up Deployment
817fa88 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TransferToAI | AI-Powered Productivity</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"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1A1F36', | |
| accent: '#0EF6CC', | |
| accent2: '#7B61FF', | |
| dark: '#0F111A', | |
| light: '#F8FAFC' | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'float2': 'float 8s ease-in-out infinite', | |
| 'float3': 'float 10s ease-in-out infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| glow: { | |
| '0%': { 'box-shadow': '0 0 5px -5px #0EF6CC' }, | |
| '100%': { 'box-shadow': '0 0 20px 5px #0EF6CC' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0F111A; | |
| color: #F8FAFC; | |
| scroll-behavior: smooth; | |
| } | |
| .glass-card { | |
| background: rgba(26, 31, 54, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(14, 246, 204, 0.2); | |
| } | |
| .testimonial-card { | |
| background: linear-gradient(145deg, #1A1F36, #0F111A); | |
| box-shadow: 5px 5px 15px rgba(0,0,0,0.3); | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-10px); | |
| border-color: #7B61FF; | |
| } | |
| .feature-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: scale(1.2) rotate(5deg); | |
| } | |
| .custom-underline { | |
| position: relative; | |
| } | |
| .custom-underline:after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background: linear-gradient(90deg, #0EF6CC, #7B61FF); | |
| transform: scaleX(0); | |
| transition: transform 0.3s ease; | |
| } | |
| .custom-underline:hover:after { | |
| transform: scaleX(1); | |
| } | |
| #toggleDarkMode { | |
| transition: all 0.3s ease; | |
| } | |
| #toggleDarkMode:hover { | |
| transform: rotate(30deg); | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease; | |
| } | |
| .accordion.active .accordion-content { | |
| max-height: 300px; | |
| } | |
| .chat-message { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| animation: fadeIn 0.3s forwards; | |
| } | |
| @keyframes fadeIn { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { | |
| opacity: 0.1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.8; | |
| transform: scale(1.2); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark text-light relative overflow-x-hidden"> | |
| <!-- Floating particles background --> | |
| <div class="absolute inset-0 overflow-hidden pointer-events-none"> | |
| <div class="absolute w-3 h-3 rounded-full bg-accent opacity-20 animation-float" style="top:20%; left:10%"></div> | |
| <div class="absolute w-4 h-4 rounded-full bg-accent2 opacity-20 animation-float2" style="top:40%; left:20%"></div> | |
| <div class="absolute w-2 h-2 rounded-full bg-accent opacity-20 animation-float3" style="top:60%; left:50%"></div> | |
| <div class="absolute w-3 h-3 rounded-full bg-accent2 opacity-20 animation-float" style="top:80%; left:30%"></div> | |
| <div class="absolute w-4 h-4 rounded-full bg-accent opacity-20 animation-float2" style="top:30%; left:80%"></div> | |
| <div class="absolute w-2 h-2 rounded-full bg-accent2 opacity-20 animation-float3" style="top:70%; left:70%"></div> | |
| <!-- Starfield background --> | |
| <div id="starfield" class="absolute inset-0 overflow-hidden"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="relative z-50 py-1 px-4 sm:px-10 lg:px-20 xl:px-32 flex justify-between items-center glass-card"> | |
| <div class="flex items-center"> | |
| <a href="/" class="flex items-center" aria-label="TransferToAI home"> | |
| <img src="https://i.ibb.co/nsPHrKGL/logo-transfertoaai1.png" alt="TransferToAI" class="h-18 sm:h-20 md:h-22 w-auto object-contain shrink-0" /> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex space-x-10"> | |
| <a href="#features" class="custom-underline hover:text-accent transition">Features</a> | |
| <a href="#demo" class="custom-underline hover:text-accent transition">How It</a> | |
| <a href="#pricing" class="custom-underline hover:text-accent transition">Pricing</a> | |
| <a href="#faq" class="custom-underline hover:text-accent transition">FAQ</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#final-cta" class="px-4 py-2 bg-gradient-to-r from-accent to-accent2 text-dark font-medium rounded-full hover:opacity-90 transition">Join Us</a> | |
| <button class="md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative py-20 px-4 sm:px-10 lg:px-20 xl:px-32 flex flex-col md:flex-row items-center justify-between min-h-screen"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 z-10"> | |
| <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6"> | |
| <span class="bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent">AI Agents </span>that answer, qualify & book — 24/7 | |
| </h1> | |
| <p class="text-lg sm:text-xl text-gray-300 mb-10"> | |
| Never miss a call again. We qualify enquiries, book the job in your calendar, and send summaries—24/7. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#final-cta" class="px-8 py-4 bg-gradient-to-r from-accent to-accent2 text-dark font-bold rounded-lg hover:opacity-90 transition transform hover:scale-105 shadow-lg inline-block text-center"> | |
| Join Us | |
| </a> | |
| </button> | |
| </div> | |
| <div class="mt-10 flex items-center space-x-4"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://i.ibb.co/Vp0RgMgj/N8N-logo.png" class="w-10 h-10 rounded-full border-2" alt="User"> | |
| <img src="https://i.ibb.co/vC2Z0qtS/Chat-GPT-Logo-svg.jpg" class="w-10 h-10 rounded-full border-2" alt="User"> | |
| <img src="https://i.ibb.co/ds3cjtfG/whatsapp-logo-icon-186881.jpg" class="w-10 h-10 rounded-full border-2" alt="User"> | |
| </div> | |
| <div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shield mr-1"></i> | |
| <span class="font-medium">10/10</span> | |
| </div> | |
| <p class="text-sm text-gray-400">Trusted communications & automation providers.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center z-10"> | |
| <div class="relative animation-float"> | |
| <div class="glass-card p-4 rounded-3xl w-full max-w-md"> | |
| <div class="bg-primary p-2 rounded-2xl"> | |
| <div class="bg-gradient-to-br from-dark to-primary rounded-xl overflow-hidden"> | |
| <div class="p-4 flex items-center justify-between bg-primary rounded-t-xl"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-xs text-gray-400">Smart Assistant</div> | |
| </div> | |
| <div class="p-6 h-30 bg-gradient-to-b from-primary to-dark"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <!-- Slides container --> | |
| <div class="h-full transition-transform duration-500 ease-in-out" id="chat-slides"> | |
| <!-- Slide 1 --> | |
| <div class="h-full flex flex-col justify-center"> | |
| <div class="chat-message"> | |
| <div class="text-accent text-sm mb-2 flex items-center gap-1 whitespace-nowrap"> | |
| Plumber AI Agent | |
| <i class="fas fa-phone text-gray-500 text-[10px]" aria-hidden="true"></i> | |
| <i class="fas fa-robot text-gray-400 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <div class="bg-dark rounded-lg p-3 text-sm mb-4">Hello. Plumbing Mackay here. What's the issue?</div> | |
| </div> | |
| <div class="chat-message"> | |
| <div class="text-accent text-sm mb-2 flex items-center gap-1 whitespace-nowrap"> | |
| Client | |
| <i class="fas fa-phone text-gray-500 text-[10px]" aria-hidden="true"></i> | |
| <i class="fas fa-user text-gray-400 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <div class="bg-primary rounded-lg p-3 text-sm border border-gray-700 mb-4">Hi, I've got a leaking tap in the kitchen.</div> | |
| </div> | |
| </div> | |
| <!-- Slide 2 --> | |
| <div class="h-full flex flex-col justify-center"> | |
| <div class="chat-message"> | |
| <div class="text-accent text-sm mb-2 flex items-center gap-1 whitespace-nowrap"> | |
| Plumber AI Agent | |
| <i class="fas fa-phone text-gray-500 text-[10px]" aria-hidden="true"></i> | |
| <i class="fas fa-robot text-gray-400 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <div class="bg-dark rounded-lg p-3 text-sm mb-4">Understood. Is it an emergency (active leak or flooding)?</div> | |
| </div> | |
| <div class="chat-message"> | |
| <div class="text-accent text-sm mb-2 flex items-center gap-1 whitespace-nowrap"> | |
| Client | |
| <i class="fas fa-phone text-gray-500 text-[10px]" aria-hidden="true"></i> | |
| <i class="fas fa-user text-gray-400 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <div class="bg-primary rounded-lg p-3 text-sm border border-gray-700 mb-4">No, slow drip only.</div> | |
| </div> | |
| </div> | |
| <!-- Slide 3 --> | |
| <div class="h-full flex flex-col justify-center"> | |
| <div class="chat-message"> | |
| <div class="text-accent text-sm mb-2 flex items-center gap-1 whitespace-nowrap"> | |
| Plumber AI Agent | |
| <i class="fas fa-phone text-gray-500 text-[10px]" aria-hidden="true"></i> | |
| <i class="fas fa-robot text-gray-400 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <div class="bg-dark rounded-lg p-3 text-sm mb-4">Thanks. Which suburb are you in?</div> | |
| </div> | |
| <div class="chat-message"> | |
| <div class="text-accent text-sm mb-2 flex items-center gap-1 whitespace-nowrap"> | |
| Client | |
| <i class="fas fa-phone text-gray-500 text-[10px]" aria-hidden="true"></i> | |
| <i class="fas fa-user text-gray-400 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <div class="bg-primary rounded-lg p-3 text-sm border border-gray-700 mb-4">North Mackay.</div> | |
| </div> | |
| </div> | |
| <!-- Slide 4 --> | |
| <div class="h-full flex flex-col justify-center"> | |
| <div class="chat-message"> | |
| <div class="text-accent text-sm mb-2 flex items-center gap-1 whitespace-nowrap"> | |
| Plumber AI Agent | |
| <i class="fas fa-phone text-gray-500 text-[10px]" aria-hidden="true"></i> | |
| <i class="fas fa-robot text-gray-400 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <div class="bg-dark rounded-lg p-3 text-sm mb-4">Earliest slot is tomorrow 9 am. Shall I lock that in?</div> | |
| </div> | |
| <div class="chat-message"> | |
| <div class="text-accent text-sm mb-2 flex items-center gap-1 whitespace-nowrap"> | |
| Client | |
| <i class="fas fa-phone text-gray-500 text-[10px]" aria-hidden="true"></i> | |
| <i class="fas fa-user text-gray-400 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <div class="bg-primary rounded-lg p-3 text-sm border border-gray-700 mb-4">Yes, please.</div> | |
| </div> | |
| </div> | |
| <!-- Slide 5 --> | |
| <div class="h-full flex flex-col justify-center"> | |
| <div class="chat-message"> | |
| <div class="text-accent text-sm mb-2 flex items-center gap-1 whitespace-nowrap"> | |
| Plumber AI Agent | |
| <i class="fas fa-phone text-gray-500 text-[10px]" aria-hidden="true"></i> | |
| <i class="fas fa-robot text-gray-400 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <div class="bg-dark rounded-lg p-3 text-sm mb-4">Great. I'll book the visit for tomorrow 9am and share the confirmation on WhatsApp.</div> | |
| </div> | |
| <div class="chat-message"> | |
| <div class="text-accent text-sm mb-2 flex items-center gap-1 whitespace-nowrap"> | |
| Client | |
| <i class="fas fa-phone text-gray-500 text-[10px]" aria-hidden="true"></i> | |
| <i class="fas fa-user text-gray-400 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <div class="bg-primary rounded-lg p-3 text-sm border border-gray-700 mb-4">Perfect, thank you.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation dots --> | |
| <div class="absolute bottom-2 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="w-2 h-2 rounded-full bg-accent opacity-30 chat-dot" data-slide="0"></button> | |
| <button class="w-2 h-2 rounded-full bg-accent opacity-30 chat-dot" data-slide="1"></button> | |
| <button class="w-2 h-2 rounded-full bg-accent opacity-30 chat-dot" data-slide="2"></button> | |
| <button class="w-2 h-2 rounded-full bg-accent opacity-30 chat-dot" data-slide="3"></button> | |
| <button class="w-2 h-2 rounded-full bg-accent opacity-30 chat-dot" data-slide="4"></button> | |
| </div> | |
| </div> | |
| <script> | |
| // Chat slideshow functionality | |
| const chatSlides = document.getElementById('chat-slides'); | |
| const dots = document.querySelectorAll('.chat-dot'); | |
| let currentSlide = 0; | |
| const totalSlides = 5; | |
| function showSlide(index) { | |
| chatSlides.style.transform = `translateY(-${index * 100}%)`; | |
| dots.forEach((dot, i) => { | |
| dot.classList.toggle('opacity-100', i === index); | |
| dot.classList.toggle('opacity-30', i !== index); | |
| }); | |
| currentSlide = index; | |
| } | |
| // Initialize first slide | |
| showSlide(0); | |
| // Auto-advance slides | |
| setInterval(() => { | |
| currentSlide = (currentSlide + 1) % totalSlides; | |
| showSlide(currentSlide); | |
| }, 4000); | |
| // Dot navigation | |
| dots.forEach(dot => { | |
| dot.addEventListener('click', () => { | |
| showSlide(parseInt(dot.dataset.slide)); | |
| }); | |
| }); | |
| </script> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -inset-4 rounded-3xl bg-gradient-to-br from-accent to-accent2 opacity-20 blur-lg -z-10 animation-glow"></div> | |
| </div> | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-b from-primary/0 to-primary/50 -z-10"></div> | |
| </section> | |
| <!-- Features --> | |
| <section id="features" class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32"> | |
| <div class="max-w-4xl mx-auto text-center mb-16"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-6">What Our Agents Actually Do</h2> | |
| <p class="text-lg text-gray-400"> | |
| Practical workflows we ship for service businesses. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-20"> | |
| <div class="feature-card glass-card p-8 rounded-2xl transition hover:border-accent hover:border-opacity-30"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-2xl text-dark mb-6 feature-icon"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">24/7 Answering & Routing</h3> | |
| <p class="text-gray-400"> | |
| Every call is answered around the clock and routed by service, suburb, or priority—no voicemails, no queue black holes. | |
| </p> | |
| </div> | |
| <div class="feature-card glass-card p-8 rounded-2xl transition hover:border-accent hover:border-opacity-30"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-2xl text-dark mb-6 feature-icon"> | |
| <i class="fas fa-clipboard-check"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Intake & Qualification</h3> | |
| <p class="text-gray-400"> | |
| Asks the right questions, tags the job, and routes to the right queue. | |
| </p> | |
| </div> | |
| <div class="feature-card glass-card p-8 rounded-2xl transition hover:border-accent hover:border-opacity-30"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-2xl text-dark mb-6 feature-icon"> | |
| <i class="fas fa-calendar-check"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Scheduling & Dispatch</h3> | |
| <p class="text-gray-400"> | |
| Proposes time windows, books the job, and drops it in your calendar/CRM. | |
| </p> | |
| </div> | |
| <div class="feature-card glass-card p-8 rounded-2xl transition hover:border-accent hover:border-opacity-30"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-2xl text-dark mb-6 feature-icon"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Reminders & Follow-ups</h3> | |
| <p class="text-gray-400"> | |
| Reduces no-shows, sends updates, and requests reviews after the job. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="glass-card rounded-2xl p-8 md:p-12 grid md:grid-cols-2 gap-8 items-start"> | |
| <!-- IZQUIERDA: texto --> | |
| <div id="how-it-works" class="order-2 md:order-1"> | |
| <h3 class="text-2xl font-bold mb-4">How It Works</h3> | |
| <p class="text-gray-400 mb-6"> | |
| We pick up every enquiry, qualify it, and book it—then notify both sides. <strong>Works with your tools.</strong> | |
| </p> | |
| <ul class="space-y-3"> | |
| <!-- ITEM 1 --> | |
| <li class="grid grid-cols-[1.75rem_1fr] gap-x-3 items-baseline"> | |
| <span class="text-center font-extrabold leading-none bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent [font-variant-numeric:tabular-nums]"> | |
| 1) | |
| </span> | |
| <p class="m-0 text-white leading-6"> | |
| <span class="font-semibold bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent">Customer reaches you</span> | |
| (call, SMS, WhatsApp, or your usual channel). | |
| </p> | |
| </li> | |
| <!-- ITEM 2 --> | |
| <li class="grid grid-cols-[1.75rem_1fr] gap-x-3 items-baseline"> | |
| <span class="text-center font-extrabold leading-none bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent [font-variant-numeric:tabular-nums]"> | |
| 2) | |
| </span> | |
| <p class="m-0 text-white leading-6"> | |
| <span class="font-semibold bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent">We qualify</span> | |
| suburb, job type, photos, access, timeframe, and budget. | |
| </p> | |
| </li> | |
| <!-- ITEM 3 --> | |
| <li class="grid grid-cols-[1.75rem_1fr] gap-x-3 items-baseline"> | |
| <span class="text-center font-extrabold leading-none bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent [font-variant-numeric:tabular-nums]"> | |
| 3) | |
| </span> | |
| <p class="m-0 text-white leading-6"> | |
| <span class="font-semibold bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent">We book it</span> | |
| into your Google/Outlook calendar and tag the job (e.g., “Plumbing — burst pipe”). | |
| </p> | |
| </li> | |
| <!-- ITEM 4 --> | |
| <li class="grid grid-cols-[1.75rem_1fr] gap-x-3 items-baseline"> | |
| <span class="text-center font-extrabold leading-none bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent [font-variant-numeric:tabular-nums]"> | |
| 4) | |
| </span> | |
| <p class="m-0 text-white leading-6"> | |
| <span class="font-semibold bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent">Everyone is notified</span>: | |
| summary to you; confirmation & reminder to the customer. | |
| </p> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- DERECHA: card --> | |
| <div class="order-1 md:order-2 md:pl-6 md:justify-self-end w-full"> | |
| <div class="glass-card rounded-2xl p-6 shadow-xl ring-1 ring-white/10 w-full max-w-md"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-3"> | |
| <div class="h-10 w-10 rounded-xl bg-white/5 flex items-center justify-center"> | |
| <i class="fas fa-calendar-check text-accent"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-400">Example summary you receive</p> | |
| <h4 class="font-semibold">Booked Job</h4> | |
| </div> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-emerald-500/15 text-emerald-300">Confirmed</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm"> | |
| <div class="text-gray-400">Client</div><div>Jane Smith · 04xx xxx xxx</div> | |
| <div class="text-gray-400">Suburb</div><div>Andergrove</div> | |
| <div class="text-gray-400">Service</div><div>Leaking mixer tap</div> | |
| <div class="text-gray-400">Window</div><div>Tue 9–11 am</div> | |
| <div class="text-gray-400">Channel</div><div>Phone</div> | |
| <div class="text-gray-400">Ref</div><div>#TR-1028</div> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-white/5">Qualified ✓</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-white/5">Photos ✓</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-white/5">Access OK</span> | |
| </div> | |
| <div class="mt-6 flex gap-2"> | |
| <a href="#" class="px-3 py-2 text-sm rounded-lg bg-gradient-to-r from-accent to-accent2 text-dark font-semibold">Open in Calendar</a> | |
| <a href="#preview" class="px-3 py-2 text-sm rounded-lg border border-white/10">View transcript</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32 bg-gradient-to-b from-primary/50 to-dark"> | |
| <div class="max-w-4xl mx-auto text-center mb-16"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-6">Why Teams Pick TransferToAI</h2> | |
| <p class="text-lg text-gray-400 max-w-1xl mx-auto"> | |
| We build reliable AI + telephony workflows for local SMBs in Australia. Fast pilots, clear milestones, no lock-in. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="testimonial-card rounded-2xl p-8"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-accent to-accent2 | |
| flex items-center justify-center text-xl text-dark mr-3 shrink-0" | |
| role="img" aria-label="14-Day Pilot icon"> | |
| <i class="fas fa-rocket leading-none" aria-hidden="true"></i> <!-- FA6: fa-solid fa-rocket --> | |
| </div> | |
| <div class="flex flex-col leading-tight"> | |
| <div class="font-bold">14-Day Pilot</div> | |
| <div class="text-sm text-gray-400">From idea to working flow</div> | |
| </div> | |
| </div> | |
| <div class="text-gray-300 mb-4"> | |
| We scope a tight pilot and ship a usable WhatsApp + calls workflow in 14 days or less. Then we iterate with your team. | |
| </div> | |
| <div class="flex"> | |
| </div> | |
| </div> | |
| <div class="testimonial-card rounded-2xl p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-accent to-accent2 | |
| flex items-center justify-center text-xl text-dark mr-3" role="img" aria-label="Milestone Billing icon"> | |
| <i class="fas fa-tasks" aria-hidden="true"></i> <!-- FA6: fa-solid fa-list-check --> | |
| </div> | |
| <!-- ✅ apilar vertical --> | |
| <div class="flex flex-col leading-tight"> | |
| <div class="font-bold">Milestone Billing</div> | |
| <div class="text-sm text-gray-400">Pay only for delivered value</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-gray-300 mb-4"> | |
| Work is split into milestones. You approve each one before paying—no long-term contracts or retainers. | |
| </div> | |
| <div class="flex"> | |
| </div> | |
| </div> | |
| <div class="testimonial-card rounded-2xl p-8"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-accent to-accent2 | |
| flex items-center justify-center text-xl text-dark mr-3 shrink-0" | |
| role="img" aria-label="Support icon"> | |
| <!-- FA5 --> | |
| <i class="fas fa-headset leading-none" aria-hidden="true"></i> | |
| <!-- Si no se ve con FA5, usa este fallback: --> | |
| <!-- <i class="fas fa-headphones leading-none" aria-hidden="true"></i> --> | |
| <!-- FA6 sería: <i class="fa-solid fa-headset"></i> o <i class="fa-solid fa-headphones-simple"></i> --> | |
| </div> | |
| <div class="flex flex-col leading-tight"> | |
| <div class="font-bold">Support You Can Count On</div> | |
| <div class="text-sm text-gray-400">Business-hours support (AEST)</div> | |
| </div> | |
| </div> | |
| <div class="text-gray-300 mb-4"> | |
| We reply during business hours and commit to next-business-day responses for change requests. | |
| </div> | |
| <div class="flex"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <div class="inline-flex items-center bg-dark px-6 py-3 rounded-full"> | |
| <div class="flex mr-4"> | |
| <div> | |
| <span>Built with:</span> | |
| <span class="font-bold ml-2"> Twilio, WhatsApp, Business, Platform, n8n, OpenAI</span> | |
| <span class="font-bold">and more</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo Section --> | |
| <section id="demo" class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-6">See It In Action</h2> | |
| <p class="text-lg text-gray-400 mb-8"> | |
| Experience how NeuraFlow can transform your daily workflow. Try our interactive demo to see the AI assistant in action. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="text-accent mr-4 mt-1"> | |
| <i class="fas fa-play-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">1. Speak or Type Your Request</h4> | |
| <p class="text-gray-400"> | |
| Just tell the AI what you need help with in natural language. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-accent mr-4 mt-1"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">2. AI Understands & Executes</h4> | |
| <p class="text-gray-400"> | |
| Our AI comprehends context and handles complex multi-step requests. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-accent mr-4 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">3. Automatic Follow Through</h4> | |
| <p class="text-gray-400"> | |
| The system completes tasks and provides updates without you lifting a finger. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="glass-card rounded-2xl overflow-hidden p-6"> | |
| <div class="bg-gradient-to-b from-dark to-primary rounded-xl overflow-hidden border border-gray-700"> | |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-accent mr-2"></div> | |
| <span class="text-sm font-medium">NeuraFlow AI Demo</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 rounded-full bg-dark border border-gray-700 flex items-center justify-center text-xs"> | |
| <i class="fas fa-microphone text-accent"></i> | |
| </button> | |
| <button class="w-6 h-6 rounded-full bg-dark border border-gray-700 flex items-center justify-center text-xs"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4" style="height: 300px; overflow-y: auto;"> | |
| <div class="chat-message" style="animation-delay: 0.2s"> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-dark mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-accent mb-1">NeuraFlow AI</div> | |
| <div class="bg-dark rounded-lg p-3 text-sm"> | |
| Hi! I'm your AI productivity assistant. Try asking me to: | |
| <div class="mt-2 space-y-1"> | |
| <div class="text-xs p-2 bg-primary rounded hover:bg-gray-800 cursor-pointer">Schedule a meeting with John next week</div> | |
| <div class="text-xs p-2 bg-primary rounded hover:bg-gray-800 cursor-pointer">Draft an email to the team about the Q2 goals</div> | |
| <div class="text-xs p-2 bg-primary rounded hover:bg-gray-800 cursor-pointer">Set up a reminder to follow up on the client proposal</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-message" style="animation-delay: 1s"> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-primary border border-gray-700 flex items-center justify-center text-accent mr-3"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-accent mb-1">You</div> | |
| <div class="bg-primary rounded-lg p-3 text-sm border border-gray-700"> | |
| Send email to the marketing team about the new campaign, attach the creative brief, and schedule a review meeting for next Monday | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-message" style="animation-delay: 2s"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-dark mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-accent mb-1">NeuraFlow AI</div> | |
| <div class="bg-dark rounded-lg p-3 text-sm"> | |
| <div class="mb-2">Done! Here's what I've completed:</div> | |
| <div class="text-xs space-y-2"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Drafted email to marketing@company.com</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Attached "Campaign_Creative_Brief.pdf"</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Scheduled review meeting for Mon, 9:30am</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Sent calendar invites to 6 team members</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-xs text-gray-400"> | |
| <i class="fas fa-clock mr-1"></i> Completed in 12 seconds | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Type your request here..." class="w-full bg-dark rounded-full py-3 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-accent"> | |
| <button class="absolute right-3 top-2 text-accent"> | |
| <i class="far fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="text-xs text-center text-gray-500 mt-2"> | |
| <span class="hidden sm:inline">Try: "Schedule a 30-minute focus session every morning this week" or</span> | |
| <button class="underline text-accent hover:no-underline">View more examples</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -inset-4 rounded-2xl bg-gradient-to-br from-accent to-accent2 opacity-10 blur-lg -z-10"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <section id="pricing" class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32 bg-gradient-to-b from-dark/60 to-primary/30"> | |
| <div class="max-w-4xl mx-auto text-center mb-16"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-6">Simple, Transparent Pricing</h2> | |
| <p class="text-lg text-gray-400"> | |
| Choose the plan that fits your needs. Try risk-free with our 14-day money back guarantee. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="pricing-card glass-card p-8 rounded-2xl border border-gray-700 transition duration-300 hover:shadow-xl"> | |
| <h3 class="text-xl font-bold mb-3">Starter</h3> | |
| <p class="text-gray-400 mb-6">For individuals getting started with AI productivity</p> | |
| <div class="text-4xl font-bold mb-6"> | |
| $0<span class="text-xl text-gray-400">/month</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>Basic task automation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>Simple scheduling</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-gray-600 mr-3 mt-1"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <span class="text-gray-500">Advanced analytics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-gray-600 mr-3 mt-1"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <span class="text-gray-500">Team features</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-gray-600 mr-3 mt-1"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <span class="text-gray-500">Priority support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 rounded-lg border border-accent text-accent font-medium hover:bg-accent hover:bg-opacity-10 transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="pricing-card glass-card p-8 rounded-2xl border-2 border-accent transition duration-300 hover:shadow-xl relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 py-1 px-4 bg-accent text-dark font-bold text-xs rotate-45 translate-x-9 translate-y-3"> | |
| POPULAR | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Professional</h3> | |
| <p class="text-gray-400 mb-6">For professionals serious about productivity</p> | |
| <div class="text-4xl font-bold mb-6"> | |
| $19<span class="text-xl text-gray-400">/month</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>All Starter features</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>Advanced AI automation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>Deep insights & analytics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>Smart integrations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-gray-600 mr-3 mt-1"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <span class="text-gray-500">Team dashboard</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 rounded-lg bg-gradient-to-r from-accent to-accent2 text-dark font-medium hover:opacity-90 transition"> | |
| Try Free for 14 Days | |
| </button> | |
| </div> | |
| <div class="pricing-card glass-card p-8 rounded-2xl border border-gray-700 transition duration-300 hover:shadow-xl"> | |
| <h3 class="text-xl font-bold mb-3">Enterprise</h3> | |
| <p class="text-gray-400 mb-6">For teams and organizations</p> | |
| <div class="text-4xl font-bold mb-6"> | |
| Custom | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>All Professional features</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>Team dashboard & analytics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>Custom AI training</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>Dedicated support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="text-accent mr-3 mt-1"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span>API access</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 rounded-lg border border-accent text-accent font-medium hover:bg-accent hover:bg-opacity-10 transition"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </div> | |
| <div class="max-w-2xl mx-auto mt-16 glass-card rounded-2xl p-6 text-center"> | |
| <h4 class="font-bold text-lg mb-3">Not sure which plan is right for you?</h4> | |
| <p class="text-gray-400 mb-4">Take our 30-second quiz to find the perfect plan based on your needs.</p> | |
| <button class="text-accent font-medium flex items-center justify-center mx-auto"> | |
| Take the quiz | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section id="final-cta" class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32 bg-gradient-to-br from-primary to-dark text-center"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-6">Ready to Transform How You Work?</h2> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6 max-w-lg mx-auto"> | |
| </div> | |
| </div> | |
| <div class="glass-card rounded-2xl p-8 mt-8 max-w-2xl mx-auto w-full"> | |
| <h3 class="text-xl font-bold mb-6 text-center"> Join us and boost your productivity with AI. </h3> | |
| <form class="space-y-4" | |
| action="https://formsubmit.co/sales@transfertoai.com" | |
| method="POST"> | |
| <!-- Meta --> | |
| <input type="hidden" name="_subject" value="New lead — TransferToAI"> | |
| <input type="hidden" name="_template" value="table"> | |
| <input type="hidden" name="_captcha" value="true"> | |
| <input type="hidden" name="_next" value="https://transfertoai.com"> | |
| <input type="text" name="_honey" style="display:none"> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Full name*</label> | |
| <input name="full_name" type="text" required class="w-full px-4 py-2 rounded-lg bg-dark border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Business name*</label> | |
| <input name="business_name" type="text" required class="w-full px-4 py-2 rounded-lg bg-dark border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent"> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Email*</label> | |
| <input name="email" type="email" required class="w-full px-4 py-2 rounded-lg bg-dark border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Phone (optional)</label> | |
| <input name="phone" type="tel" class="w-full px-4 py-2 rounded-lg bg-dark border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="industry" class="block text-sm font-medium mb-1">Industry*</label> | |
| <input | |
| id="industry" | |
| name="industry" | |
| type="text" | |
| required | |
| placeholder="E.g., Plumbing, Electrical, Dental Clinic" | |
| class="w-full px-4 py-2 rounded-lg bg-dark border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent" | |
| autocapitalize="words" | |
| spellcheck="false" | |
| /> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Location/Suburb*</label> | |
| <input name="location" type="text" placeholder="Kelvin Grove" required class="w-full px-4 py-2 rounded-lg bg-dark border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent"> | |
| </div> | |
| <!-- ✅ Weekly call volume --> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Weekly call volume*</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="call_volume" value="0-50" required class="mr-2"> 0–50 | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="call_volume" value="51-200" class="mr-2"> 51–200 | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="call_volume" value="201-500" class="mr-2"> 201–500 | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="call_volume" value="501-1500" class="mr-2"> 501–1,500 | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="call_volume" value="1500+" class="mr-2"> 1,500+ | |
| </label> | |
| </div> | |
| </div> | |
| <!-- ✅ Weekly WhatsApp messages --> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Weekly WhatsApp messages*</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="whatsapp_volume" value="0-100" required class="mr-2"> 0–100 | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="whatsapp_volume" value="101-500" class="mr-2"> 101–500 | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="whatsapp_volume" value="501-2000" class="mr-2"> 501–2,000 | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="whatsapp_volume" value="2001-5000" class="mr-2"> 2,001–5,000 | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="whatsapp_volume" value="5000+" class="mr-2"> 5,000+ | |
| </label> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full py-3 mt-6 bg-gradient-to-r from-accent to-accent2 text-dark font-bold rounded-lg hover:opacity-90 transition"> | |
| Submit Application | |
| </button> | |
| </form> | |
| </div> | |
| <div class="flex justify-center mt-8 space-x-4"> | |
| <div class="flex items-center text-sm text-gray-400"> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-400"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>No credit card required</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ (mismo formato, más compacto + preguntas actualizadas) --> | |
| <section id="faq" class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-10"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-3">Frequently Asked Questions</h2> | |
| <p class="text-base text-gray-400">Quick answers about the service and billing.</p> | |
| </div> | |
| <div class="space-y-3"><!-- antes era space-y-4 --> | |
| <!-- 1 --> | |
| <div class="accordion glass-card rounded-lg p-4 sm:p-5"> | |
| <button class="accordion-header w-full flex justify-between items-center text-left"> | |
| <h4 class="font-semibold text-base sm:text-lg">Do you replace my receptionist?</h4> | |
| <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2 text-sm text-gray-400"> | |
| We handle first-line answering, qualification and booking. Complex cases can be escalated to your team. | |
| </div> | |
| </div> | |
| <!-- 2 --> | |
| <div class="accordion glass-card rounded-lg p-4 sm:p-5"> | |
| <button class="accordion-header w-full flex justify-between items-center text-left"> | |
| <h4 class="font-semibold text-base sm:text-lg">Which channels do you support?</h4> | |
| <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2 text-sm text-gray-400"> | |
| Phone & SMS by default. We can also work with WhatsApp, email and web forms. <span class="text-white/80">We adapt to your tools.</span> | |
| </div> | |
| </div> | |
| <!-- 3 --> | |
| <div class="accordion glass-card rounded-lg p-4 sm:p-5"> | |
| <button class="accordion-header w-full flex justify-between items-center text-left"> | |
| <h4 class="font-semibold text-base sm:text-lg">Can you use our existing phone number?</h4> | |
| <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2 text-sm text-gray-400"> | |
| Yes—forwarding is quickest. We can also port your number or provision a new one. | |
| </div> | |
| </div> | |
| <!-- 4 --> | |
| <div class="accordion glass-card rounded-lg p-4 sm:p-5"> | |
| <button class="accordion-header w-full flex justify-between items-center text-left"> | |
| <h4 class="font-semibold text-base sm:text-lg">Do you book directly in our calendar?</h4> | |
| <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2 text-sm text-gray-400"> | |
| Yes—Google/Outlook. Or we drop jobs into your CRM with notes & tags. | |
| </div> | |
| </div> | |
| <!-- 5 --> | |
| <div class="accordion glass-card rounded-lg p-4 sm:p-5"> | |
| <button class="accordion-header w-full flex justify-between items-center text-left"> | |
| <h4 class="font-semibold text-base sm:text-lg">Can you transfer live calls?</h4> | |
| <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2 text-sm text-gray-400"> | |
| Yes—warm or cold transfer to a mobile or landline. | |
| </div> | |
| </div> | |
| <!-- 6 --> | |
| <div class="accordion glass-card rounded-lg p-4 sm:p-5"> | |
| <button class="accordion-header w-full flex justify-between items-center text-left"> | |
| <h4 class="font-semibold text-base sm:text-lg">How fast is setup?</h4> | |
| <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2 text-sm text-gray-400"> | |
| A working pilot usually goes live in ~10 days. | |
| </div> | |
| </div> | |
| <!-- 7 --> | |
| <div class="accordion glass-card rounded-lg p-4 sm:p-5"> | |
| <button class="accordion-header w-full flex justify-between items-center text-left"> | |
| <h4 class="font-semibold text-base sm:text-lg">What about data and recordings?</h4> | |
| <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2 text-sm text-gray-400"> | |
| Calls run on Twilio; transcripts via OpenAI. We store only what’s needed for summaries & bookings. Call recording is optional. | |
| </div> | |
| </div> | |
| <!-- 8 --> | |
| <div class="accordion glass-card rounded-lg p-4 sm:p-5"> | |
| <button class="accordion-header w-full flex justify-between items-center text-left"> | |
| <h4 class="font-semibold text-base sm:text-lg">Contract & cancellation?</h4> | |
| <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2 text-sm text-gray-400"> | |
| Month-to-month. Cancel anytime before the next billing date. No lock-in. | |
| </div> | |
| </div> | |
| <!-- 9 --> | |
| <div class="accordion glass-card rounded-lg p-4 sm:p-5"> | |
| <button class="accordion-header w-full flex justify-between items-center text-left"> | |
| <h4 class="font-semibold text-base sm:text-lg">How do you charge?</h4> | |
| <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2 text-sm text-gray-400"> | |
| Quote based on enquiries volume & channels. Most new clients land between <span class="text-white/80">A$79–A$149/mo</span>. | |
| </div> | |
| </div> | |
| <!-- 10 --> | |
| <div class="accordion glass-card rounded-lg p-4 sm:p-5"> | |
| <button class="accordion-header w-full flex justify-between items-center text-left"> | |
| <h4 class="font-semibold text-base sm:text-lg">Do you cover my area?</h4> | |
| <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2 text-sm text-gray-400"> | |
| Australia-wide. We route by suburb/postcode and your service area. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <h4 class="text-lg font-bold mb-2">Still have questions?</h4> | |
| Contact us at | |
| <span class="bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent">support@transfertoai.com</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-16 px-4 sm:px-10 lg:px-20 xl:px-32 bg-dark"> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-10 max-w-6xl mx-auto"> | |
| <div class="col-span-2"> | |
| <h3 class="mb-4"> | |
| <a href="/" class="inline-block align-middle" aria-label="TransferToAI"> | |
| <img src="https://i.ibb.co/nswpjPdC/logo-transfertoai2.png" | |
| alt="TransferToAI logo" | |
| class="h-16 sm:h-18 md:h-20 w-auto object-contain shrink-0" /> | |
| <span class="sr-only">TransferToAI</span> | |
| </a> | |
| </h3> | |
| <p class="text-gray-400 mb-6"> | |
| AI-powered productivity assistant that helps you work smarter, not harder. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-accent hover:bg-gray-800 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-accent hover:bg-gray-800 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-accent hover:bg-gray-800 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-accent hover:bg-gray-800 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 mb-4 md:mb-0">© 2025 TransferToAI. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-accent transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-accent transition">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-accent transition">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Starfield animation | |
| const starfield = document.getElementById('starfield'); | |
| const starsCount = 400; | |
| for (let i = 0; i < starsCount; i++) { | |
| const star = document.createElement('div'); | |
| star.className = 'absolute rounded-full bg-white'; | |
| // Random star properties | |
| const size = Math.random() * 2; | |
| const opacity = Math.random() * 0.8 + 0.1; | |
| const x = Math.random() * 100; | |
| const y = Math.random() * 100; | |
| const duration = Math.random() * 10 + 5; | |
| const delay = Math.random() * 5; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| star.style.opacity = opacity; | |
| star.style.left = `${x}%`; | |
| star.style.top = `${y}%`; | |
| star.style.animation = `twinkle ${duration}s ease-in-out ${delay}s infinite alternate`; | |
| starfield.appendChild(star); | |
| } | |
| // FAQ accordion (una abierta + animación) | |
| const accordions = document.querySelectorAll('.accordion'); | |
| // colapsa todo de inicio | |
| accordions.forEach(acc => { | |
| const header = acc.querySelector('.accordion-header'); | |
| const content = acc.querySelector('.accordion-content'); | |
| const icon = acc.querySelector('.accordion-header i'); | |
| if (!header || !content) return; | |
| // evita submit si es <button> | |
| if (header.tagName === 'BUTTON') header.type = 'button'; | |
| // preps para animación (quitamos hidden por si está en el HTML) | |
| content.classList.remove('hidden'); | |
| content.style.overflow = 'hidden'; | |
| content.style.maxHeight = '0px'; | |
| content.style.transition = 'max-height 300ms ease'; | |
| acc.classList.remove('active'); | |
| if (icon) { icon.classList.remove('fa-chevron-up'); icon.classList.add('fa-chevron-down'); } | |
| }); | |
| // click handlers | |
| accordions.forEach(acc => { | |
| const header = acc.querySelector('.accordion-header'); | |
| const content = acc.querySelector('.accordion-content'); | |
| const icon = acc.querySelector('.accordion-header i'); | |
| if (!header || !content) return; | |
| header.addEventListener('click', () => { | |
| const wasOpen = acc.classList.contains('active'); | |
| // cierra todos | |
| accordions.forEach(other => { | |
| const oc = other.querySelector('.accordion-content'); | |
| const oi = other.querySelector('.accordion-header i'); | |
| other.classList.remove('active'); | |
| if (oc) oc.style.maxHeight = '0px'; | |
| if (oi) { oi.classList.remove('fa-chevron-up'); oi.classList.add('fa-chevron-down'); } | |
| }); | |
| // si estaba cerrada, abre la actual | |
| if (!wasOpen) { | |
| acc.classList.add('active'); | |
| content.style.maxHeight = content.scrollHeight + 'px'; | |
| if (icon) { icon.classList.remove('fa-chevron-down'); icon.classList.add('fa-chevron-up'); } | |
| } | |
| }); | |
| }); | |
| // re-calcula altura si cambia el layout (p.ej., responsive) | |
| window.addEventListener('resize', () => { | |
| const open = document.querySelector('.accordion.active .accordion-content'); | |
| if (open) open.style.maxHeight = open.scrollHeight + 'px'; | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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=ahakobyan/testspace" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=ismamagen/testspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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=BrunoBen/testspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |