Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Crossberry App by Surya Prakash</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom animations */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 min-h-screen text-white overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="glass-effect fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold gradient-text">Crossberry</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition">Home</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition">Features</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition">About</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition">Contact</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="p-2 rounded-md hover:bg-white/10 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-indigo-900/95"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-white/10">Home</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-white/10">Features</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-white/10">About</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-white/10">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="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 mb-6 leading-tight"> | |
| Crossberry App by <span class="gradient-text">Surya Prakash</span> | |
| </h1> | |
| <p class="text-lg md:text-xl mb-8 text-gray-200"> | |
| 3 years of development experience packed into one powerful application. | |
| Click below to start exploring! | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="https://crossberry.vercel.app" class="bg-white text-indigo-900 hover:bg-gray-100 px-6 py-3 rounded-full font-semibold transition transform hover:scale-105 inline-block text-center"> | |
| Open Crossberry | |
| </a> | |
| <button class="glass-effect border border-white hover:bg-white/20 px-6 py-3 rounded-full font-semibold transition transform hover:scale-105"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative floating"> | |
| <div class="w-64 h-64 md:w-80 md:h-80 bg-white/10 rounded-full absolute -top-10 -left-10"></div> | |
| <div class="w-64 h-64 md:w-80 md:h-80 bg-white/5 rounded-full absolute -bottom-10 -right-10"></div> | |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Welcome" | |
| class="relative w-64 h-64 md:w-80 md:h-80 object-cover rounded-2xl shadow-2xl border-4 border-white/20"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white/5"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Why Choose Us?</h2> | |
| <p class="max-w-2xl mx-auto text-gray-300">We offer the best experience with our premium services</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="glass-effect p-8 rounded-xl hover:shadow-lg transition"> | |
| <div class="w-16 h-16 bg-indigo-500/20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-rocket text-2xl text-indigo-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Fast Performance</h3> | |
| <p class="text-gray-300">Lightning-fast loading times and smooth performance for the best user experience.</p> | |
| </div> | |
| <div class="glass-effect p-8 rounded-xl hover:shadow-lg transition"> | |
| <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-2xl text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Secure Platform</h3> | |
| <p class="text-gray-300">Your data is protected with enterprise-grade security measures.</p> | |
| </div> | |
| <div class="glass-effect p-8 rounded-xl hover:shadow-lg transition"> | |
| <div class="w-16 h-16 bg-pink-500/20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-headset text-2xl text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">24/7 Support</h3> | |
| <p class="text-gray-300">Our dedicated team is always ready to help you with any questions.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">What People Say</h2> | |
| <p class="max-w-2xl mx-auto text-gray-300">Hear from our satisfied customers</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="glass-effect p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-400">Marketing Director</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic">"The welcome experience was incredible! The team made me feel right at home from the very first moment."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="glass-effect p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Michael Chen</h4> | |
| <p class="text-sm text-gray-400">Tech Entrepreneur</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic">"I've never felt more welcomed on any platform. The onboarding process was seamless and intuitive."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-indigo-600 to-purple-600"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Get Started?</h2> | |
| <p class="text-xl mb-8 text-indigo-100">Join thousands of happy users today. It's free to sign up!</p> | |
| <form class="max-w-md mx-auto"> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-full focus:outline-none text-gray-900"> | |
| <button type="submit" class="bg-white text-indigo-900 hover:bg-gray-100 px-6 py-3 rounded-full font-semibold transition transform hover:scale-105"> | |
| Sign Up Now | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black/20 py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 gradient-text">Crossberry</h3> | |
| <p class="text-gray-400">Developed by Surya Prakash with 3 years of experience.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect With Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/10 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm">© 2023 Welcome. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-indigo-600 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Back to top button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Animate elements when they come into view | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.glass-effect'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.3; | |
| if (elementPosition < screenPosition) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| // Set initial state for animation | |
| document.querySelectorAll('.glass-effect').forEach(el => { | |
| el.style.opacity = '0'; | |
| el.style.transform = 'translateY(20px)'; | |
| el.style.transition = 'all 0.6s ease'; | |
| }); | |
| window.addEventListener('load', animateOnScroll); | |
| window.addEventListener('scroll', animateOnScroll); | |
| </script> | |
| </body> | |
| </html> |