| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SkyScribe - Cloud-Powered Productivity Suite</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| }, |
| secondary: { |
| 50: '#eef2ff', |
| 100: '#e0e7ff', |
| 500: '#6366f1', |
| 600: '#4f46e5', |
| 700: '#4338ca', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| :root { |
| --glass-bg: rgba(255, 255, 255, 0.75); |
| --glass-border: rgba(209, 213, 219, 0.3); |
| --glass-shadow: rgba(0, 0, 0, 0.1); |
| } |
| .dark { |
| --glass-bg: rgba(17, 24, 39, 0.75); |
| --glass-border: rgba(255, 255, 255, 0.125); |
| --glass-shadow: rgba(0, 0, 0, 0.25); |
| } |
| .vanta-bg { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| } |
| .glass-effect { |
| background: var(--glass-bg); |
| border-radius: 16px; |
| border: 1px solid var(--glass-border); |
| box-shadow: 0 4px 30px var(--glass-shadow); |
| backdrop-filter: blur(16px) saturate(180%); |
| -webkit-backdrop-filter: blur(16px) saturate(180%); |
| } |
| .dark { |
| background-color: #111827; |
| color: #f3f4f6; |
| } |
| .dark nav { |
| background-color: #111827 !important; |
| } |
| .dark .bg-white { |
| background-color: #1f2937 !important; |
| } |
| .dark .text-gray-600, .dark .text-gray-400 { |
| color: #9ca3af !important; |
| } |
| .dark .text-gray-900 { |
| color: #f9fafb !important; |
| } |
| .dark .border-gray-200, .dark .border-gray-300 { |
| border-color: #374151 !important; |
| } |
| .feature-card:hover { |
| transform: translateY(-8px); |
| transition: all 0.3s ease; |
| } |
| .pricing-card { |
| transition: all 0.3s ease; |
| } |
| .pricing-card:hover { |
| transform: scale(1.05); |
| } |
| </style> |
| </head> |
| <body class="bg-white text-gray-800"> |
| |
| <nav class="bg-white dark:bg-gray-900 shadow-sm fixed w-full z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i data-feather="cloud" class="h-8 w-8 text-primary-500"></i> |
| <span class="ml-2 text-xl font-bold text-gray-900 dark:text-white">SkyScribe</span> |
| </div> |
| </div> |
| <div class="ml-4 flex items-center"> |
| <button id="theme-toggle" class="text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"> |
| <i id="theme-icon" data-feather="moon"></i> |
| </button> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-baseline space-x-4"> |
| <a href="#features" class="text-gray-600 hover:text-primary-500 px-3 py-2 rounded-md text-sm font-medium transition-colors">Features</a> |
| <a href="#pricing" class="text-gray-600 hover:text-primary-500 px-3 py-2 rounded-md text-sm font-medium transition-colors">Pricing</a> |
| <a href="#testimonials" class="text-gray-600 hover:text-primary-500 px-3 py-2 rounded-md text-sm font-medium transition-colors">Testimonials</a> |
| <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Get Started</a> |
| </div> |
| </div> |
| <div class="md:hidden"> |
| <button class="text-gray-600 hover:text-primary-500"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
| |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden dark:bg-gray-900"> |
| <div id="vanta-bg" class="vanta-bg"></div> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10"> |
| <div class="max-w-4xl mx-auto glass-effect p-8 md:p-12"> |
| <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6"> |
| Write. Collaborate. |
| <span class="text-primary-500">Soar.</span> |
| </h1> |
| <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto"> |
| SkyScribe transforms how teams create content together. Real-time collaboration, AI-powered insights, and seamless cloud integration in one beautiful platform. |
| </p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors shadow-lg flex items-center"> |
| <i data-feather="play" class="mr-2"></i> |
| Start Free Trial |
| </button> |
| <button class="border-2 border-gray-300 hover:border-primary-500 text-gray-700 hover:text-primary-500 px-8 py-4 rounded-lg font-semibold text-lg transition-colors flex items-center"> |
| <i data-feather="video" class="mr-2"></i> |
| Watch Demo |
| </button> |
| </div> |
| <div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto"> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-primary-500">10K+</div> |
| <div class="text-gray-600">Happy Teams</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-primary-500">99.9%</div> |
| <div class="text-gray-600">Uptime</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-primary-500">50+</div> |
| <div class="text-gray-600">Integrations</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-primary-500">24/7</div> |
| <div class="text-gray-600">Support</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section id="features" class="py-20 bg-gray-50 dark:bg-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> |
| Powerful Features for |
| <span class="text-primary-500">Modern Teams</span> |
| </h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Everything you need to create amazing content together, with tools designed to boost productivity and foster collaboration. |
| </p> |
| </div> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="feature-card bg-white rounded-2xl p-8 shadow-lg border border-gray-100"> |
| <div class="w-16 h-16 bg-primary-50 rounded-xl flex items-center justify-center mb-6"> |
| <i data-feather="edit-3" class="h-8 w-8 text-primary-500"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Real-time Collaboration</h3> |
| <p class="text-gray-600 mb-6">Work together seamlessly with live editing, comments, and version control that keeps everyone in sync.</p> |
| <ul class="space-y-2"> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
| Live cursor presence |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
| Instant updates |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
| Comment threads |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="feature-card bg-white rounded-2xl p-8 shadow-lg border border-gray-100"> |
| <div class="w-16 h-16 bg-secondary-50 rounded-xl flex items-center justify-center mb-6"> |
| <i data-feather="zap" class="h-8 w-8 text-secondary-500"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">AI-Powered Insights</h3> |
| <p class="text-gray-600 mb-6">Get smart suggestions, grammar corrections, and content optimization powered by advanced AI.</p> |
| <ul class="space-y-2"> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-4 w-4 text-secondary-500 mr-2"></i> |
| Tone analysis |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-4 w-4 text-secondary-500 mr-2"></i> |
| Content suggestions |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-4 w-4 text-secondary-500 mr-2"></i> |
| Grammar excellence |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="feature-card bg-white rounded-2xl p-8 shadow-lg border border-gray-100"> |
| <div class="w-16 h-16 bg-primary-50 rounded-xl flex items-center justify-center mb-6"> |
| <i data-feather="layers" class="h-8 w-8 text-primary-500"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Cloud Integration</h3> |
| <p class="text-gray-600 mb-6">Connect with your favorite tools and services for a unified workflow experience.</p> |
| <ul class="space-y-2"> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
| Google Drive |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
| Dropbox |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
| Slack integration |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section id="pricing" class="py-20 bg-white dark:bg-gray-900"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> |
| Simple, Transparent |
| <span class="text-primary-500">Pricing</span> |
| </h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Choose the plan that works best for your team. All plans include our core features with no hidden fees. |
| </p> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
| |
| <div class="pricing-card bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-gray-200 dark:border-gray-700"> |
| <div class="text-center mb-8"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Starter</h3> |
| <p class="text-gray-600">Perfect for small teams getting started</p> |
| </div> |
| <div class="text-center mb-8"> |
| <span class="text-5xl font-bold text-gray-900">$12</span> |
| <span class="text-gray-600">/user/month</span> |
| </div> |
| <ul class="space-y-4 mb-8"> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| Up to 5 team members |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| 10GB storage per user |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| Basic collaboration |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| Email support |
| </li> |
| </ul> |
| <button class="w-full bg-gray-100 hover:bg-primary-500 hover:text-white text-gray-700 py-3 rounded-lg font-semibold transition-colors"> |
| Get Started |
| </button> |
| </div> |
|
|
| |
| <div class="pricing-card bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-primary-500 relative shadow-xl"> |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> |
| <span class="bg-primary-500 text-white px-4 py-1 rounded-full text-sm font-semibold">Most Popular</span> |
| </div> |
| <div class="text-center mb-8"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Professional</h3> |
| <p class="text-gray-600">Ideal for growing teams and businesses</p> |
| </div> |
| <div class="text-center mb-8"> |
| <span class="text-5xl font-bold text-gray-900">$24</span> |
| <span class="text-gray-600">/user/month</span> |
| </div> |
| <ul class="space-y-4 mb-8"> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| Unlimited team members |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| 100GB storage per user |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| Advanced collaboration |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| Priority support |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| AI-powered features |
| </li> |
| </ul> |
| <button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-3 rounded-lg font-semibold transition-colors"> |
| Get Started |
| </button> |
| </div> |
|
|
| |
| <div class="pricing-card bg-white rounded-2xl p-8 border-2 border-gray-200"> |
| <div class="text-center mb-8"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Enterprise</h3> |
| <p class="text-gray-600">For large organizations with custom needs</p> |
| </div> |
| <div class="text-center mb-8"> |
| <span class="text-5xl font-bold text-gray-900">$45</span> |
| <span class="text-gray-600">/user/month</span> |
| </div> |
| <ul class="space-y-4 mb-8"> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| Unlimited everything |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| Custom storage solutions |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| Dedicated account manager |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| 24/7 phone support |
| </li> |
| <li class="flex items-center text-gray-600"> |
| <i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
| Custom integrations |
| </li> |
| </ul> |
| <button class="w-full bg-gray-100 hover:bg-primary-500 hover:text-white text-gray-700 py-3 rounded-lg font-semibold transition-colors"> |
| Contact Sales |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gradient-to-r from-primary-500 to-secondary-500"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
| Ready to Transform Your Team's Workflow? |
| </h2> |
| <p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto"> |
| Join thousands of teams who have already elevated their content creation process with SkyScribe. |
| </p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> |
| <button class="bg-white hover:bg-gray-100 text-primary-500 px-8 py-4 rounded-lg font-semibold text-lg transition-colors shadow-lg flex items-center"> |
| <i data-feather="rocket" class="mr-2"></i> |
| Start Your Free Trial |
| </button> |
| <button class="border-2 border-white hover:bg-white hover:text-primary-500 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors flex items-center"> |
| <i data-feather="message-circle" class="mr-2"></i> |
| Schedule a Demo |
| </button> |
| </div> |
| <p class="text-primary-100 mt-6">No credit card required • 14-day free trial • Cancel anytime</p> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <i data-feather="cloud" class="h-6 w-6 text-primary-500"></i> |
| <span class="ml-2 text-xl font-bold">SkyScribe</span> |
| </div> |
| <p class="text-gray-400">Empowering teams to create amazing content together, faster and smarter.</p> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Product</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="#" class="hover:text-white transition-colors">Features</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Integrations</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Updates</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Company</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="#" class="hover:text-white transition-colors">About</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Careers</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Blog</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Press</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Support</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Contact</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Status</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">API Docs</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2024 SkyScribe. All rights reserved.</p> |
| </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: 0x0ea5e9, |
| backgroundColor: 0xffffff, |
| size: 1.00 |
| }); |
| |
| feather.replace(); |
| |
| const themeToggle = document.getElementById('theme-toggle'); |
| const themeIcon = document.getElementById('theme-icon'); |
| const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); |
| |
| |
| function applyTheme(isDark) { |
| document.documentElement.style.transition = 'all 0.5s ease'; |
| if (isDark) { |
| document.documentElement.classList.add('dark'); |
| themeIcon.setAttribute('data-feather', 'sun'); |
| } else { |
| document.documentElement.classList.remove('dark'); |
| themeIcon.setAttribute('data-feather', 'moon'); |
| } |
| feather.replace(); |
| setTimeout(() => { |
| document.documentElement.style.transition = ''; |
| }, 500); |
| } |
| |
| |
| const currentTheme = localStorage.getItem('theme'); |
| if (currentTheme === 'dark' || (!currentTheme && prefersDarkScheme.matches)) { |
| applyTheme(true); |
| } else { |
| applyTheme(false); |
| } |
| |
| |
| themeToggle.addEventListener('click', function() { |
| const html = document.documentElement; |
| const isDark = !html.classList.contains('dark'); |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); |
| applyTheme(isDark); |
| }); |
| |
| |
| prefersDarkScheme.addListener((e) => { |
| if (!localStorage.getItem('theme')) { |
| applyTheme(e.matches); |
| } |
| }); |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const targetId = this.getAttribute('href'); |
| const target = document.querySelector(targetId); |
| if (target) { |
| const headerHeight = document.querySelector('nav').offsetHeight; |
| const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight; |
| window.scrollTo({ |
| top: targetPosition, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| window.addEventListener('scroll', function() { |
| const nav = document.querySelector('nav'); |
| if (window.scrollY > 20) { |
| nav.classList.add('bg-white/80', 'dark:bg-gray-900/80', 'shadow-lg', 'backdrop-blur-md'); |
| nav.style.backdropFilter = 'blur(8px)'; |
| nav.style.webkitBackdropFilter = 'blur(8px)'; |
| } else { |
| nav.classList.remove('shadow-lg', 'backdrop-blur-md'); |
| nav.style.backdropFilter = ''; |
| nav.style.webkitBackdropFilter = ''; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
