| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HealthConnect Launchpad - White Label Telehealth Solution</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Poppins', sans-serif; |
| scroll-behavior: smooth; |
| } |
| .gradient-text { |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| .hero-gradient { |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%); |
| } |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| </style> |
| </head> |
| <body class="antialiased text-gray-800"> |
| |
| <div id="vanta-bg" class="hero-gradient w-full relative overflow-hidden"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 relative z-10"> |
| <div class="text-center"> |
| <img src="https://www.todayintech.in/logo.svg" alt="HealthConnect Logo" class="h-16 mx-auto mb-8"> |
| <h1 class="text-4xl md:text-6xl font-bold tracking-tight"> |
| <span class="gradient-text">Launch Your White-label</span><br> |
| <span class="text-gray-900">Telehealth Platform</span><br> |
| <span class="text-blue-600">in Just 7 Days</span> |
| </h1> |
| <p class="mt-6 text-xl text-gray-600 max-w-3xl mx-auto"> |
| Complete HIPAA-compliant telehealth solution with Android, iOS apps and web admin dashboard. |
| <span class="font-semibold text-blue-600">No coding required.</span> |
| </p> |
| <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#demo" class="px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full shadow-lg transition duration-200 transform hover:scale-105"> |
| Free for 14 Days |
| </a> |
| <a href="#features" class="px-8 py-4 bg-white hover:bg-gray-50 text-blue-600 font-medium rounded-full shadow-lg border border-blue-200 transition duration-200 transform hover:scale-105"> |
| Explore Features |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center"> |
| <div class="mx-auto bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
| <i data-feather="shield" class="text-blue-600 w-6 h-6"></i> |
| </div> |
| <h3 class="font-semibold text-gray-900">HIPAA Compliant</h3> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center"> |
| <div class="mx-auto bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
| <i data-feather="zap" class="text-purple-600 w-6 h-6"></i> |
| </div> |
| <h3 class="font-semibold text-gray-900">Deploy in 7 Days</h3> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center"> |
| <div class="mx-auto bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
| <i data-feather="clock" class="text-green-600 w-6 h-6"></i> |
| </div> |
| <h3 class="font-semibold text-gray-900">Free for 14 Days</h3> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center"> |
| <div class="mx-auto bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
| <i data-feather="smartphone" class="text-indigo-600 w-6 h-6"></i> |
| </div> |
| <h3 class="font-semibold text-gray-900">Cross-platform</h3> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-50 py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> |
| <div class="mb-10 lg:mb-0"> |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"> |
| Native Mobile Apps for <span class="gradient-text">Patients & Providers</span> |
| </h2> |
| <p class="mt-4 text-lg text-gray-600"> |
| Your patients and healthcare providers get seamless experiences on both Android and iOS devices with our white-label apps. |
| </p> |
| <div class="mt-8 flex gap-4"> |
| <img src="https://www.todayintech.in/android.png" alt="Android App" class="h-12"> |
| <img src="https://www.todayintech.in/ios.png" alt="iOS App" class="h-12"> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl"> |
| <div class="w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute"></div> |
| <div class="h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg"></div> |
| <div class="h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg"></div> |
| <div class="h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"></div> |
| <div class="rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white"> |
| <img src="http://static.photos/medical/320x240/123" class="w-full h-full object-cover" alt="App screenshot"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> |
| <div class="order-2 lg:order-1 mt-10 lg:mt-0"> |
| <div class="relative rounded-xl overflow-hidden shadow-lg"> |
| <img src="http://static.photos/technology/1024x576/42" class="w-full h-auto" alt="Admin Dashboard"> |
| </div> |
| </div> |
| <div class="order-1 lg:order-2"> |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"> |
| Powerful <span class="gradient-text">Web Admin Dashboard</span> |
| </h2> |
| <p class="mt-4 text-lg text-gray-600"> |
| Comprehensive admin control panel to manage your telehealth operations with ease. |
| </p> |
| <div class="mt-8"> |
| <div class="flex items-start mb-6"> |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> |
| <i data-feather="bar-chart-2" class="text-blue-600 w-5 h-5"></i> |
| </div> |
| <div class="ml-4"> |
| <h3 class="font-semibold text-gray-900">Analytics & Reporting</h3> |
| <p class="mt-1 text-gray-600">Track key metrics and generate detailed reports.</p> |
| </div> |
| </div> |
| <div class="flex items-start mb-6"> |
| <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full"> |
| <i data-feather="users" class="text-purple-600 w-5 h-5"></i> |
| </div> |
| <div class="ml-4"> |
| <h3 class="font-semibold text-gray-900">User Management</h3> |
| <p class="mt-1 text-gray-600">Easily manage patients, providers and staff.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-green-100 p-2 rounded-full"> |
| <i data-feather="settings" class="text-green-600 w-5 h-5"></i> |
| </div> |
| <div class="ml-4"> |
| <h3 class="font-semibold text-gray-900">Custom Configuration</h3> |
| <p class="mt-1 text-gray-600">Tailor the platform to your specific needs.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-blue-50 py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="inline-flex items-center px-4 py-2 rounded-full bg-white shadow-sm mb-6"> |
| <div class="flex-shrink-0 bg-blue-100 p-1 rounded-full"> |
| <i data-feather="cpu" class="text-blue-600 w-4 h-4"></i> |
| </div> |
| <span class="ml-2 text-sm font-medium text-blue-600">New Feature</span> |
| </div> |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"> |
| Talk to our <span class="gradient-text">AI Assistant</span> |
| </h2> |
| <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto"> |
| The fastest way to launch your own branded telehealth platform with personalized guidance from our AI. |
| </p> |
| <div class="mt-10 max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 text-left"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i data-feather="message-circle" class="text-blue-600 w-5 h-5"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="bg-gray-100 rounded-lg p-4"> |
| <p class="text-sm text-gray-700">Hi! I'm your HealthConnect AI assistant. How can I help you launch your telehealth platform today?</p> |
| </div> |
| <div class="mt-4"> |
| <input type="text" placeholder="Type your question..." class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="demo" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| <div class="text-center"> |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"> |
| <span class="gradient-text">How It Works</span> |
| </h2> |
| <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto"> |
| Three simple steps to launch your telehealth platform |
| </p> |
| </div> |
| <div class="mt-16 grid md:grid-cols-3 gap-8"> |
| <div class="feature-card bg-white p-8 rounded-xl shadow-sm border border-gray-100 transition duration-200"> |
| <div class="flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 text-blue-600 text-2xl font-bold mb-6">1</div> |
| <h3 class="text-xl font-semibold text-gray-900 mb-4">Book a Demo</h3> |
| <p class="text-gray-600">We show you the product in action with a personalized walkthrough.</p> |
| </div> |
| <div class="feature-card bg-white p-8 rounded-xl shadow-sm border border-gray-100 transition duration-200"> |
| <div class="flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 text-purple-600 text-2xl font-bold mb-6">2</div> |
| <h3 class="text-xl font-semibold text-gray-900 mb-4">Customize Your Brand</h3> |
| <p class="text-gray-600">Add your logo, colors, domain, and provider profiles to make it yours.</p> |
| </div> |
| <div class="feature-card bg-white p-8 rounded-xl shadow-sm border border-gray-100 transition duration-200"> |
| <div class="flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-green-600 text-2xl font-bold mb-6">3</div> |
| <h3 class="text-xl font-semibold text-gray-900 mb-4">Go Live in 7 Days</h3> |
| <p class="text-gray-600">Start onboarding your patients or clients with our fast deployment.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="features" class="bg-gray-50 py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"> |
| Everything You Need to <span class="gradient-text">Run a Telehealth Platform</span> |
| </h2> |
| <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto"> |
| Complete feature set for healthcare providers and patients |
| </p> |
| </div> |
| <div class="mt-16 grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> |
| <i data-feather="calendar" class="text-blue-600 w-5 h-5"></i> |
| </div> |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Appointment Booking</h3> |
| </div> |
| <p class="text-gray-600">Easy-to-use scheduling system for patients and providers with automated reminders.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full"> |
| <i data-feather="video" class="text-purple-600 w-5 h-5"></i> |
| </div> |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Chat & Video Consultations</h3> |
| </div> |
| <p class="text-gray-600">Secure messaging and video calls with Zoom integration and waiting rooms.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0 bg-green-100 p-2 rounded-full"> |
| <i data-feather="user" class="text-green-600 w-5 h-5"></i> |
| </div> |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Doctor & Clinic Profiles</h3> |
| </div> |
| <p class="text-gray-600">Comprehensive provider profiles with specialties, availability, and ratings.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full"> |
| <i data-feather="file-text" class="text-indigo-600 w-5 h-5"></i> |
| </div> |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Patient Medical Records</h3> |
| </div> |
| <p class="text-gray-600">Secure, HIPAA-compliant electronic health records system with history tracking.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0 bg-red-100 p-2 rounded-full"> |
| <i data-feather="bell" class="text-red-600 w-5 h-5"></i> |
| </div> |
| <h3 class="ml-3 text-lg font-medium text-gray-900">SMS/Email Reminders</h3> |
| </div> |
| <p class="text-gray-600">Automated appointment reminders and notifications to reduce no-shows.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0 bg-yellow-100 p-2 rounded-full"> |
| <i data-feather="globe" class="text-yellow-600 w-5 h-5"></i> |
| </div> |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Custom Domain + Branding</h3> |
| </div> |
| <p class="text-gray-600">Your own domain with complete brand customization for a seamless experience.</p> |
| </div> |
| </div> |
| <div class="mt-12 text-center"> |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-blue-600 hover:bg-blue-700 transition duration-200"> |
| See Full Feature List |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"> |
| Trusted by <span class="gradient-text">Healthcare Innovators</span> |
| </h2> |
| <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto"> |
| See what our clients say about launching their telehealth platforms |
| </p> |
| </div> |
| <div class="mt-16 grid md:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="flex-shrink-0 bg-blue-100 h-12 w-12 rounded-full flex items-center justify-center"> |
| <span class="text-blue-600 font-medium">DC</span> |
| </div> |
| <div class="ml-4"> |
| <h3 class="font-medium text-gray-900">Dr. Sarah Chen</h3> |
| <p class="text-gray-600">Founder at MindWell Therapy</p> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"HealthConnect helped us launch our mental health platform in just 6 days. The HIPAA compliance and custom branding exceeded our expectations."</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="flex-shrink-0 bg-purple-100 h-12 w-12 rounded-full flex items-center justify-center"> |
| <span class="text-purple-600 font-medium">MR</span> |
| </div> |
| <div class="ml-4"> |
| <h3 class="font-medium text-gray-900">Michael Rodriguez</h3> |
| <p class="text-gray-600">CEO at VitalCare Solutions</p> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"The team was incredibly responsive and professional. We went from idea to live platform faster than we thought possible."</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="flex-shrink-0 bg-green-100 h-12 w-12 rounded-full flex items-center justify-center"> |
| <span class="text-green-600 font-medium">PP</span> |
| </div> |
| <div class="ml-4"> |
| <h3 class="font-medium text-gray-900">Dr. Priya Patel</h3> |
| <p class="text-gray-600">Medical Director at Family Health Connect</p> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"Perfect solution for our multi-clinic setup. The admin dashboard and patient management features are exactly what we needed."</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gradient-to-r from-blue-600 to-indigo-700 py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl"> |
| Ready to Launch Your Telehealth App? |
| </h2> |
| <p class="mt-4 text-xl text-blue-100 max-w-3xl mx-auto"> |
| Schedule a free demo and see how fast we can take you live with your own branded platform. |
| </p> |
| <div class="mt-10"> |
| <a href="#" class="inline-flex items-center px-8 py-4 border border-transparent text-base font-medium rounded-full shadow-sm text-blue-700 bg-white hover:bg-blue-50 transition duration-200 transform hover:scale-105"> |
| Book a Demo |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Demo</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Support</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">HIPAA</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-base text-gray-400">© 2023 HealthConnect Launchpad. All rights reserved.</p> |
| <div class="mt-6 md:mt-0 flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="facebook" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="linkedin" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x3b82f6, |
| backgroundColor: 0xf0f9ff, |
| size: 0.8 |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| |
| |
| const featureCards = document.querySelectorAll('.feature-card'); |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = '1'; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| featureCards.forEach(card => { |
| card.style.opacity = '0'; |
| card.style.transform = 'translateY(20px)'; |
| card.style.transition = 'all 0.4s ease-out'; |
| observer.observe(card); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
