| | <!DOCTYPE html> |
| | <html lang="en" class="dark"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>CrimsonCode - Powerful SaaS Solution</title> |
| | <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> |
| | tailwind.config = { |
| | darkMode: 'class', |
| | theme: { |
| | extend: { |
| | colors: { |
| | primary: '#EF4444', |
| | secondary: '#0D9488' |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | <style> |
| | .hero-gradient { |
| | background: linear-gradient(135deg, rgba(15,23,42,1) 0%, rgba(30,41,59,1) 100%); |
| | } |
| | .feature-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 20px 25px -5px rgba(239, 68, 68, 0.1), 0 10px 10px -5px rgba(239, 68, 68, 0.04); |
| | } |
| | .pricing-card:hover { |
| | transform: scale(1.03); |
| | box-shadow: 0 25px 50px -12px rgba(13, 148, 136, 0.25); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-900 text-gray-100 min-h-screen"> |
| | |
| | <nav class="border-b border-gray-800 py-4"> |
| | <div class="container mx-auto px-6 flex justify-between items-center"> |
| | <div class="flex items-center"> |
| | <i data-feather="zap" class="text-primary mr-2"></i> |
| | <span class="text-xl font-bold">Crimson<span class="text-primary">Code</span></span> |
| | </div> |
| | <div class="hidden md:flex space-x-8"> |
| | <a href="#" class="hover:text-primary transition">Features</a> |
| | <a href="#" class="hover:text-primary transition">Solutions</a> |
| | <a href="#" class="hover:text-primary transition">Pricing</a> |
| | <a href="#" class="hover:text-primary transition">Resources</a> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <button class="px-4 py-2 rounded-md hover:bg-gray-800 transition">Login</button> |
| | <button class="bg-primary px-4 py-2 rounded-md hover:bg-red-600 transition">Get Started</button> |
| | </div> |
| | <button class="md:hidden"> |
| | <i data-feather="menu"></i> |
| | </button> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="hero-gradient py-20"> |
| | <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
| | <div class="md:w-1/2 mb-10 md:mb-0"> |
| | <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6"> |
| | Transform Your <span class="text-primary">Business</span> With Our SaaS |
| | </h1> |
| | <p class="text-xl text-gray-400 mb-8"> |
| | The most powerful, feature-rich platform to take your operations to the next level. |
| | </p> |
| | <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| | <button class="bg-primary hover:bg-red-600 px-8 py-3 rounded-md font-semibold transition"> |
| | Start Free Trial |
| | </button> |
| | <button class="border border-gray-700 hover:border-primary px-8 py-3 rounded-md font-semibold transition"> |
| | <i data-feather="play" class="inline mr-2"></i> Watch Demo |
| | </button> |
| | </div> |
| | <div class="mt-8 flex items-center"> |
| | <div class="flex -space-x-2 mr-4"> |
| | <img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full border-2 border-gray-800" alt="User"> |
| | <img src="http://static.photos/people/200x200/2" class="w-10 h-10 rounded-full border-2 border-gray-800" alt="User"> |
| | <img src="http://static.photos/people/200x200/3" class="w-10 h-10 rounded-full border-2 border-gray-800" alt="User"> |
| | </div> |
| | <p class="text-gray-400"> |
| | Trusted by <span class="text-white">10,000+</span> businesses worldwide |
| | </p> |
| | </div> |
| | </div> |
| | <div class="md:w-1/2"> |
| | <div class="relative"> |
| | <div class="absolute -top-10 -left-10 w-32 h-32 bg-primary rounded-full opacity-20 blur-xl"></div> |
| | <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-secondary rounded-full opacity-20 blur-xl"></div> |
| | <img src="http://static.photos/technology/1024x576/5" alt="Dashboard" class="relative rounded-xl border border-gray-800 shadow-2xl"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gray-900"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2> |
| | <p class="text-xl text-gray-400 max-w-2xl mx-auto"> |
| | Everything you need to succeed, all in one place |
| | </p> |
| | </div> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | |
| | <div class="feature-card bg-gray-800 p-8 rounded-xl transition duration-300"> |
| | <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="activity" class="text-primary w-6 h-6"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Real-time Analytics</h3> |
| | <p class="text-gray-400"> |
| | Get instant insights with our powerful analytics dashboard that updates in real-time. |
| | </p> |
| | </div> |
| | |
| | <div class="feature-card bg-gray-800 p-8 rounded-xl transition duration-300"> |
| | <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="lock" class="text-primary w-6 h-6"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Enterprise Security</h3> |
| | <p class="text-gray-400"> |
| | Military-grade encryption keeps your data safe with our security-first approach. |
| | </p> |
| | </div> |
| | |
| | <div class="feature-card bg-gray-800 p-8 rounded-xl transition duration-300"> |
| | <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="repeat" class="text-primary w-6 h-6"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Automation</h3> |
| | <p class="text-gray-400"> |
| | Automate repetitive tasks with our powerful workflow engine to save time and resources. |
| | </p> |
| | </div> |
| | |
| | <div class="feature-card bg-gray-800 p-8 rounded-xl transition duration-300"> |
| | <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="users" class="text-primary w-6 h-6"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Team Collaboration</h3> |
| | <p class="text-gray-400"> |
| | Work seamlessly with your team with built-in collaboration tools and shared workspaces. |
| | </p> |
| | </div> |
| | |
| | <div class="feature-card bg-gray-800 p-8 rounded-xl transition duration-300"> |
| | <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="code" class="text-primary w-6 h-6"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">API Access</h3> |
| | <p class="text-gray-400"> |
| | Full API access allows you to integrate with your existing systems and workflows. |
| | </p> |
| | </div> |
| | |
| | <div class="feature-card bg-gray-800 p-8 rounded-xl transition duration-300"> |
| | <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="cloud" class="text-primary w-6 h-6"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Cloud Hosted</h3> |
| | <p class="text-gray-400"> |
| | Our globally distributed infrastructure ensures maximum uptime and performance. |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gray-800"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2> |
| | <p class="text-xl text-gray-400 max-w-2xl mx-auto"> |
| | Choose the plan that fits your needs. No hidden fees, cancel anytime. |
| | </p> |
| | </div> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
| | |
| | <div class="pricing-card bg-gray-900 p-8 rounded-xl border border-gray-700 transition duration-300"> |
| | <h3 class="text-xl font-bold mb-2">Basic</h3> |
| | <p class="text-gray-400 mb-6">Perfect for individuals and small teams</p> |
| | <div class="mb-6"> |
| | <span class="text-4xl font-bold">$19</span> |
| | <span class="text-gray-400">/month</span> |
| | </div> |
| | <ul class="space-y-3 mb-8"> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>10,000 Monthly Requests</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>Basic Analytics</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>Email Support</span> |
| | </li> |
| | </ul> |
| | <button class="w-full py-3 rounded-md border border-gray-700 hover:border-primary transition"> |
| | Get Started |
| | </button> |
| | </div> |
| | |
| | <div class="pricing-card bg-gray-900 p-8 rounded-xl border-2 border-primary transition duration-300 transform scale-105 relative"> |
| | <div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-primary text-white text-xs font-bold px-3 py-1 rounded-full"> |
| | POPULAR |
| | </div> |
| | <h3 class="text-xl font-bold mb-2">Pro</h3> |
| | <p class="text-gray-400 mb-6">For growing businesses and teams</p> |
| | <div class="mb-6"> |
| | <span class="text-4xl font-bold">$49</span> |
| | <span class="text-gray-400">/month</span> |
| | </div> |
| | <ul class="space-y-3 mb-8"> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>50,000 Monthly Requests</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>Advanced Analytics</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>Priority Support</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>API Access</span> |
| | </li> |
| | </ul> |
| | <button class="w-full bg-primary hover:bg-red-600 py-3 rounded-md transition"> |
| | Get Started |
| | </button> |
| | </div> |
| | |
| | <div class="pricing-card bg-gray-900 p-8 rounded-xl border border-gray-700 transition duration-300"> |
| | <h3 class="text-xl font-bold mb-2">Enterprise</h3> |
| | <p class="text-gray-400 mb-6">For large organizations</p> |
| | <div class="mb-6"> |
| | <span class="text-4xl font-bold">$99</span> |
| | <span class="text-gray-400">/month</span> |
| | </div> |
| | <ul class="space-y-3 mb-8"> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>Unlimited Requests</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>Premium Analytics</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>24/7 Dedicated Support</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> |
| | <span>Custom Integrations</span> |
| | </li> |
| | </ul> |
| | <button class="w-full py-3 rounded-md border border-gray-700 hover:border-primary transition"> |
| | Get Started |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gray-900"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted by Industry Leaders</h2> |
| | <p class="text-xl text-gray-400 max-w-2xl mx-auto"> |
| | Don't just take our word for it. Here's what our customers say. |
| | </p> |
| | </div> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-gray-800 p-8 rounded-xl"> |
| | <div class="flex items-center mb-6"> |
| | <img src="http://static.photos/people/200x200/10" class="w-12 h-12 rounded-full mr-4" alt="User"> |
| | <div> |
| | <h4 class="font-bold">Sarah Johnson</h4> |
| | <p class="text-gray-400 text-sm">CTO at TechCorp</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-300 italic"> |
| | "CrimsonCode has transformed how we operate. The automation features alone have saved us thousands of hours annually." |
| | </p> |
| | <div class="flex mt-4"> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-gray-800 p-8 rounded-xl"> |
| | <div class="flex items-center mb-6"> |
| | <img src="http://static.photos/people/200x200/12" class="w-12 h-12 rounded-full mr-4" alt="User"> |
| | <div> |
| | <h4 class="font-bold">Michael Chen</h4> |
| | <p class="text-gray-400 text-sm">Product Manager at Innovate</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-300 italic"> |
| | "The real-time analytics dashboard gives us insights we never had before. It's like we were operating blind before." |
| | </p> |
| | <div class="flex mt-4"> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-gray-800 p-8 rounded-xl"> |
| | <div class="flex items-center mb-6"> |
| | <img src="http://static.photos/people/200x200/14" class="w-12 h-12 rounded-full mr-4" alt="User"> |
| | <div> |
| | <h4 class="font-bold">Emma Rodriguez</h4> |
| | <p class="text-gray-400 text-sm">CEO at GrowthLabs</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-300 italic"> |
| | "From implementation to daily use, the experience has been seamless. Our team adopted it immediately with no learning curve." |
| | </p> |
| | <div class="flex mt-4"> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> |
| | <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gradient-to-r from-gray-800 to-gray-900"> |
| | <div class="container mx-auto px-6 text-center"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business?</h2> |
| | <p class="text-xl text-gray-400 max-w-2xl mx-auto mb-8"> |
| | Join thousands of businesses that are already achieving remarkable results with our platform. |
| | </p> |
| | <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| | <button class="bg-primary hover:bg-red-600 px-8 py-4 rounded-md font-semibold transition"> |
| | Start Your Free Trial |
| | </button> |
| | <button class="border border-gray-700 hover:border-primary px-8 py-4 rounded-md font-semibold transition"> |
| | Contact Sales |
| | </button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-900 border-t border-gray-800 py-12"> |
| | <div class="container mx-auto px-6"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| | <div> |
| | <div class="flex items-center mb-4"> |
| | <i data-feather="zap" class="text-primary mr-2"></i> |
| | <span class="text-xl font-bold">Crimson<span class="text-primary">Code</span></span> |
| | </div> |
| | <p class="text-gray-400"> |
| | The most powerful SaaS platform for modern businesses. |
| | </p> |
| | <div class="flex space-x-4 mt-6"> |
| | <a href="#" class="text-gray-400 hover:text-primary transition"> |
| | <i data-feather="twitter"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-primary transition"> |
| | <i data-feather="facebook"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-primary transition"> |
| | <i data-feather="linkedin"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-primary transition"> |
| | <i data-feather="github"></i> |
| | </a> |
| | </div> |
| | </div> |
| | <div> |
| | <h4 class="text-lg font-bold mb-4">Product</h4> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Features</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Pricing</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Solutions</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Updates</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h4 class="text-lg font-bold mb-4">Resources</h4> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Documentation</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Blog</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Webinars</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Support</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h4 class="text-lg font-bold mb-4">Company</h4> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">About Us</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Careers</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Press</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary transition">Contact</a></li> |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| | <p class="text-gray-400 mb-4 md:mb-0"> |
| | © 2023 CrimsonCode. All rights reserved. |
| | </p> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-gray-400 hover:text-primary transition">Privacy Policy</a> |
| | <a href="#" class="text-gray-400 hover:text-primary transition">Terms of Service</a> |
| | <a href="#" class="text-gray-400 hover:text-primary transition">Cookies</a> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | feather.replace(); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const featureCards = document.querySelectorAll('.feature-card'); |
| | const pricingCards = document.querySelectorAll('.pricing-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, index) => { |
| | card.style.opacity = '0'; |
| | card.style.transform = 'translateY(20px)'; |
| | card.style.transition = `all 0.5s ease ${index * 0.1}s`; |
| | observer.observe(card); |
| | }); |
| | |
| | pricingCards.forEach((card, index) => { |
| | card.style.opacity = '0'; |
| | card.style.transform = 'translateY(20px)'; |
| | card.style.transition = `all 0.5s ease ${index * 0.1}s`; |
| | observer.observe(card); |
| | }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
