Spaces:
Running
Running
File size: 14,585 Bytes
da4e478 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 | <!DOCTYPE html>
<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> |