Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NotteClone Pro | Dark-First Note Taking</title> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <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> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#fffbeb', | |
| 100: '#fef3c7', | |
| 200: '#fde68a', | |
| 300: '#fcd34d', | |
| 400: '#fbbf24', | |
| 500: '#f59e0b', | |
| 600: '#d97706', | |
| 700: '#b45309', | |
| 800: '#92400e', | |
| 900: '#78350f', | |
| }, | |
| secondary: { | |
| 50: '#f7fee7', | |
| 100: '#ecfccb', | |
| 200: '#d9f99d', | |
| 300: '#bef264', | |
| 400: '#a3e635', | |
| 500: '#84cc16', | |
| 600: '#65a30d', | |
| 700: '#4d7c0f', | |
| 800: '#3f6212', | |
| 900: '#365314', | |
| } | |
| }, | |
| fontFamily: { | |
| 'sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'], | |
| 'mono': ['JetBrains Mono', 'monospace'] | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-glow': 'pulse-glow 2s ease-in-out infinite alternate', | |
| 'slide-in': 'slide-in 0.5s ease-out forwards', | |
| 'typewriter': 'typewriter 4s steps(40) 1s 1 normal both' | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' } | |
| }, | |
| 'pulse-glow': { | |
| '0%': { boxShadow: '0 0 10px rgba(245, 158, 11, 0.3)' }, | |
| '100%': { boxShadow: '0 0 25px rgba(245, 158, 11, 0.7)' } | |
| }, | |
| 'slide-in': { | |
| '0%': { transform: 'translateY(30px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' } | |
| }, | |
| typewriter: { | |
| '0%': { width: '0' }, | |
| '100%': { width: '100%' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="dark:bg-gray-900 dark:text-gray-100 font-sans bg-gray-900 text-gray-100 min-h-screen overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <script src="components/navbar.js"></script> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <main class="relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full opacity-5"> | |
| <div class="absolute top-20 left-10 w-72 h-72 bg-primary-500 rounded-full mix-blend-screen filter blur-3xl"></div> | |
| <div class="absolute bottom-20 right-10 w-96 h-96 bg-secondary-500 rounded-full mix-blend-screen filter blur-3xl"></div> | |
| </div> | |
| <section class="relative container mx-auto px-4 py-24 md:py-32"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-800 border border-gray-700 mb-8 animate-pulse-glow"> | |
| <span class="w-2 h-2 rounded-full bg-secondary-400 animate-ping"></span> | |
| <span class="text-sm font-medium text-secondary-300">Dark Mode Optimized</span> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> | |
| <span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400 animate-slide-in"> | |
| Note-Taking | |
| </span> | |
| <span class="block dark:text-gray-200">Reimagined for</span> | |
| <span class="typewriter-wrapper inline-block overflow-hidden whitespace-nowrap border-r-4 border-primary-500"> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-secondary-400 to-primary-400">Night Owls</span> | |
| </span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-400 mb-12 max-w-3xl mx-auto leading-relaxed"> | |
| NotteClone Pro combines elegant dark design with powerful organization tools. Capture thoughts, organize ideas, and sync seamlessly across all your devices. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center mb-20"> | |
| <a href="#signup" class="px-8 py-4 bg-primary-500 hover:bg-primary-600 text-white font-semibold rounded-xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-primary-500/20 flex items-center justify-center gap-3"> | |
| <i data-feather="star" class="w-5 h-5"></i> | |
| Start Free Trial | |
| </a> | |
| <a href="#features" class="px-8 py-4 bg-gray-800 hover:bg-gray-700 border border-gray-700 text-white font-semibold rounded-xl transition-all duration-300 flex items-center justify-center gap-3"> | |
| <i data-feather="play-circle" class="w-5 h-5"></i> | |
| Watch Demo | |
| </a> | |
| </div> | |
| <div class="relative max-w-4xl mx-auto rounded-2xl overflow-hidden border border-gray-800 shadow-2xl shadow-primary-900/10 animate-float"> | |
| <div class="absolute top-0 left-0 right-0 h-8 bg-gray-800 flex items-center px-4"> | |
| <div class="flex gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-amber-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-secondary-500"></div> | |
| </div> | |
| </div> | |
| <img src="http://static.photos/technology/1200x630/42" alt="NotteClone Pro Dashboard" class="w-full h-auto mt-8"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-24 bg-gradient-to-b from-gray-900 to-gray-950"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Why Choose <span class="text-primary-400">NotteClone</span></h2> | |
| <p class="text-gray-400 text-xl max-w-3xl mx-auto">Designed specifically for dark mode enthusiasts with features that shine in low light</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-8 transition-all duration-300 hover:border-primary-500 hover:shadow-xl hover:shadow-primary-500/10 hover:transform hover:-translate-y-2"> | |
| <div class="w-14 h-14 rounded-xl bg-primary-500/10 flex items-center justify-center mb-6"> | |
| <i data-feather="moon" class="w-8 h-8 text-primary-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">True Dark Mode</h3> | |
| <p class="text-gray-400 mb-6">OLED-friendly pure black backgrounds reduce eye strain and save battery life on modern devices.</p> | |
| <div class="flex items-center text-primary-400 font-medium"> | |
| <span>Learn more</span> | |
| <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-8 transition-all duration-300 hover:border-secondary-500 hover:shadow-xl hover:shadow-secondary-500/10 hover:transform hover:-translate-y-2"> | |
| <div class="w-14 h-14 rounded-xl bg-secondary-500/10 flex items-center justify-center mb-6"> | |
| <i data-feather="zap" class="w-8 h-8 text-secondary-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Lightning Fast</h3> | |
| <p class="text-gray-400 mb-6">Optimized performance with instant search, real-time sync, and minimalistic interface for maximum productivity.</p> | |
| <div class="flex items-center text-secondary-400 font-medium"> | |
| <span>Learn more</span> | |
| <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-8 transition-all duration-300 hover:border-primary-500 hover:shadow-xl hover:shadow-primary-500/10 hover:transform hover:-translate-y-2"> | |
| <div class="w-14 h-14 rounded-xl bg-primary-500/10 flex items-center justify-center mb-6"> | |
| <i data-feather="lock" class="w-8 h-8 text-primary-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">End-to-End Encryption</h3> | |
| <p class="text-gray-400 mb-6">Your notes are encrypted before they leave your device. Not even we can read your private thoughts.</p> | |
| <div class="flex items-center text-primary-400 font-medium"> | |
| <span>Learn more</span> | |
| <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-24"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-gradient-to-r from-gray-800 to-gray-900 border border-gray-700 rounded-3xl p-8 md:p-12 text-center relative overflow-hidden"> | |
| <div class="absolute -top-20 -right-20 w-64 h-64 bg-primary-500 rounded-full opacity-10 blur-3xl"></div> | |
| <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-secondary-500 rounded-full opacity-10 blur-3xl"></div> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Ready to Transform Your <span class="text-primary-400">Note-Taking</span>?</h2> | |
| <p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">Join thousands of night owls who have already switched to NotteClone Pro.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="#signup" class="px-8 py-4 bg-primary-500 hover:bg-primary-600 text-white font-semibold rounded-xl transition-all duration-300 flex items-center justify-center gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5"></i> | |
| Get Started for Free | |
| </a> | |
| <a href="#pricing" class="px-8 py-4 bg-gray-800 hover:bg-gray-700 border border-gray-700 text-white font-semibold rounded-xl transition-all duration-300 flex items-center justify-center gap-3"> | |
| <i data-feather="dollar-sign" class="w-5 h-5"></i> | |
| View Pricing Plans | |
| </a> | |
| </div> | |
| <p class="text-gray-500 mt-8 text-sm">No credit card required • 14-day free trial • Cancel anytime</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <script src="components/footer.js"></script> | |
| <custom-footer></custom-footer> | |
| <!-- Scripts --> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Typewriter effect | |
| const typewriterElement = document.querySelector('.typewriter-wrapper'); | |
| if (typewriterElement) { | |
| typewriterElement.style.animation = 'typewriter 4s steps(40) 1s 1 normal both'; | |
| } | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| e.preventDefault(); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |