File size: 17,734 Bytes
dc967a7 | 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 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudNimbus - Powerful SaaS Solution</title>
<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 = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#6366f1',
}
}
}
}
</script>
<script src="components/navbar.js"></script>
<script src="components/faq-item.js"></script>
<script src="components/testimonial-card.js"></script>
<script src="components/pricing-card.js"></script>
<script src="components/footer.js"></script>
<script src="components/fortune-teller.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<main>
<!-- Hero Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="space-y-6">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
Elevate Your Business with <span class="text-primary">CloudNimbus</span>
</h1>
<p class="text-xl text-gray-600">
The all-in-one SaaS platform that transforms your workflow with powerful automation and seamless integrations.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium text-center transition duration-300">
Get Started
</a>
<a href="#demo" class="border border-primary text-primary hover:bg-blue-50 px-6 py-3 rounded-lg font-medium text-center transition duration-300">
Watch Demo
</a>
</div>
<div class="flex items-center gap-2 pt-4">
<div class="flex -space-x-2">
<img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full border-2 border-white" alt="User">
<img src="http://static.photos/people/200x200/2" class="w-10 h-10 rounded-full border-2 border-white" alt="User">
<img src="http://static.photos/people/200x200/3" class="w-10 h-10 rounded-full border-2 border-white" alt="User">
</div>
<p class="text-sm text-gray-600">
Trusted by <span class="font-semibold text-gray-900">5,000+</span> businesses
</p>
</div>
</div>
<div class="relative">
<div class="bg-white p-2 rounded-xl shadow-xl border border-gray-200">
<img src="http://static.photos/technology/1024x576/10" alt="Dashboard" class="rounded-lg w-full h-auto">
</div>
<div class="absolute -bottom-6 -right-6 bg-primary text-white p-3 rounded-full shadow-lg">
<i data-feather="play"></i>
</div>
</div>
</div>
</section>
<!-- Logo Cloud -->
<section class="py-12 bg-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-center text-gray-500 mb-8">TRUSTED BY INNOVATIVE COMPANIES WORLDWIDE</p>
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
<img src="http://static.photos/minimal/320x240/1" alt="Logo" class="h-12 w-auto mx-auto opacity-70 hover:opacity-100 transition">
<img src="http://static.photos/minimal/320x240/2" alt="Logo" class="h-12 w-auto mx-auto opacity-70 hover:opacity-100 transition">
<img src="http://static.photos/minimal/320x240/3" alt="Logo" class="h-12 w-auto mx-auto opacity-70 hover:opacity-100 transition">
<img src="http://static.photos/minimal/320x240/4" alt="Logo" class="h-12 w-auto mx-auto opacity-70 hover:opacity-100 transition">
<img src="http://static.photos/minimal/320x240/5" alt="Logo" class="h-12 w-auto mx-auto opacity-70 hover:opacity-100 transition">
</div>
</div>
</section>
<!-- Features -->
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto" id="features">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Powerful Features</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Everything you need to streamline your operations and boost productivity
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition">
<div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
<i data-feather="zap" class="text-primary w-5 h-5"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Lightning Fast</h3>
<p class="text-gray-600">
Our infrastructure delivers unmatched speed and reliability, ensuring your workflows never slow down.
</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition">
<div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
<i data-feather="lock" class="text-primary w-5 h-5"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Enterprise Security</h3>
<p class="text-gray-600">
Military-grade encryption and compliance certifications to keep your data safe and secure.
</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition">
<div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
<i data-feather="refresh-cw" class="text-primary w-5 h-5"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Real-time Sync</h3>
<p class="text-gray-600">
Automatic updates across all devices so your team is always working with the latest information.
</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition">
<div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
<i data-feather="pie-chart" class="text-primary w-5 h-5"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Advanced Analytics</h3>
<p class="text-gray-600">
Powerful insights and customizable reports to help you make data-driven decisions.
</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition">
<div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
<i data-feather="git-branch" class="text-primary w-5 h-5"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">300+ Integrations</h3>
<p class="text-gray-600">
Connect with all your favorite tools and services for a seamless workflow experience.
</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition">
<div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
<i data-feather="headphones" class="text-primary w-5 h-5"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">24/7 Support</h3>
<p class="text-gray-600">
Our expert team is always available to help you get the most out of CloudNimbus.
</p>
</div>
</div>
</section>
<!-- Demo Video -->
<section class="py-20 bg-gray-100" id="demo">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold text-gray-900 mb-6">See CloudNimbus in Action</h2>
<p class="text-lg text-gray-600 mb-10 max-w-2xl mx-auto">
Watch our 2-minute demo to see how CloudNimbus can transform your business operations
</p>
<div class="relative aspect-video bg-gray-200 rounded-xl overflow-hidden shadow-xl">
<img src="http://static.photos/technology/1024x576/5" alt="Video thumbnail" class="w-full h-full object-cover">
<div class="absolute inset-0 flex items-center justify-center">
<button class="bg-primary hover:bg-blue-600 text-white p-4 rounded-full shadow-lg transition duration-300 transform hover:scale-110">
<i data-feather="play" class="w-8 h-8"></i>
</button>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Customers Say</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Don't just take our word for it - hear from businesses like yours
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<testimonial-card
name="Sarah Johnson"
title="CTO at TechCorp"
image="http://static.photos/people/200x200/10"
quote="CloudNimbus has revolutionized our workflow. We've seen a 40% increase in productivity since implementation."
rating="5">
</testimonial-card>
<testimonial-card
name="Michael Chen"
title="Product Manager at InnovateCo"
image="http://static.photos/people/200x200/11"
quote="The analytics dashboard alone is worth the price. We've made better decisions thanks to the insights."
rating="4">
</testimonial-card>
<testimonial-card
name="Emma Rodriguez"
title="CEO at Digital Solutions"
image="http://static.photos/people/200x200/12"
quote="Customer support is exceptional. They've helped us customize the platform to our exact needs."
rating="5">
</testimonial-card>
</div>
</section>
<!-- Pricing -->
<section class="py-20 bg-gray-100" id="pricing">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Choose the plan that fits your needs. No hidden fees, cancel anytime.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<pricing-card
name="Starter"
price="29"
period="month"
description="Perfect for small teams and individuals"
features='["Up to 5 users", "10GB storage", "Basic analytics", "Email support"]'
recommended="false">
</pricing-card>
<pricing-card
name="Professional"
price="79"
period="month"
description="For growing businesses with more needs"
features='["Up to 20 users", "100GB storage", "Advanced analytics", "Priority support", "API access"]'
recommended="true">
</pricing-card>
<pricing-card
name="Enterprise"
price="199"
period="month"
description="For large organizations with custom requirements"
features='["Unlimited users", "1TB storage", "Custom analytics", "24/7 support", "Dedicated account manager", "On-premise option"]'
recommended="false">
</pricing-card>
</div>
<div class="mt-12 text-center">
<p class="text-gray-600 mb-4">Need something custom? We've got you covered.</p>
<a href="#contact" class="text-primary font-medium hover:text-blue-600 transition">
Contact our sales team <i data-feather="arrow-right" class="inline w-4 h-4 ml-1"></i>
</a>
</div>
</div>
</section>
<!-- FAQ -->
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Everything you need to know about CloudNimbus
</p>
</div>
<div class="space-y-4">
<faq-item
question="What payment methods do you accept?"
answer="We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual plans.">
</faq-item>
<faq-item
question="Can I change plans later?"
answer="Absolutely! You can upgrade or downgrade your plan at any time. Changes will be prorated based on your billing cycle.">
</faq-item>
<faq-item
question="Is there a free trial available?"
answer="Yes! We offer a 14-day free trial with full access to all Professional plan features. No credit card required.">
</faq-item>
<faq-item
question="How does the onboarding process work?"
answer="After signing up, you'll get access to our interactive onboarding tour. Plus, we offer free onboarding sessions with our customer success team.">
</faq-item>
<faq-item
question="What happens if I need to cancel?"
answer="You can cancel anytime through your account settings. We'll process refunds for annual plans on a prorated basis.">
</faq-item>
</div>
</section>
<!-- Fortune Teller -->
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<fortune-teller></fortune-teller>
</section>
<!-- CTA -->
<section class="py-20 bg-primary text-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold mb-6">Ready to transform your business?</h2>
<p class="text-lg mb-10 max-w-2xl mx-auto">
Join thousands of businesses boosting productivity with CloudNimbus
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#pricing" class="bg-white text-primary hover:bg-gray-100 px-8 py-4 rounded-lg font-medium text-center transition duration-300">
Get Started
</a>
<a href="#demo" class="border border-white text-white hover:bg-primary-600 px-8 py-4 rounded-lg font-medium text-center transition duration-300">
Watch Demo
</a>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |