| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Fuwalo Beta - Download Now</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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| purple: '#CBB4FF', |
| blue: '#B8E0FF', |
| pink: '#FFD6EC', |
| discord: '#5865F2', |
| }, |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| }, |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: white; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, #A58CD5 0%, #6A578D 100%); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, #7B61FF 0%, #00A3FF 100%); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .screenshot { |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
| border-radius: 40px; |
| border: 12px solid white; |
| } |
| |
| .floating-img { |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0%, 100% { |
| transform: translateY(0) rotate(-1deg); |
| } |
| 50% { |
| transform: translateY(-20px) rotate(1deg); |
| } |
| } |
| |
| .carousel-item { |
| transition: transform 0.5s ease; |
| } |
| |
| .navbar { |
| background-color: rgba(248, 244, 252, 0.8); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| } |
| |
| .mobile-menu { |
| display: none; |
| } |
| |
| .mobile-menu.active { |
| display: block; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| width: 100%; |
| background-color: rgba(255, 255, 255, 0.95); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| padding: 1rem; |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
| z-index: 50; |
| } |
| |
| .mobile-menu ul { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
| |
| .mobile-menu li { |
| padding: 0.5rem 0; |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
| } |
| |
| .mobile-menu a { |
| display: block; |
| width: 100%; |
| padding: 0.5rem; |
| text-align: center; |
| color: #374151; |
| font-weight: 500; |
| } |
| |
| .mobile-menu a:hover { |
| color: #7B61FF; |
| } |
| |
| .download-btn { |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| |
| .download-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); |
| } |
| |
| .download-btn i { |
| transition: transform 0.3s ease; |
| } |
| |
| .download-btn:hover i { |
| transform: scale(1.1); |
| } |
| |
| .platform-card { |
| transition: all 0.3s ease; |
| border: 2px solid transparent; |
| } |
| |
| .platform-card:hover { |
| border-color: #7B61FF; |
| transform: translateY(-5px); |
| } |
| |
| .qr-code { |
| transition: all 0.3s ease; |
| } |
| |
| .qr-code:hover { |
| transform: scale(1.05); |
| } |
| |
| .feature-badge { |
| position: absolute; |
| top: -10px; |
| right: -10px; |
| background: linear-gradient(135deg, #7B61FF, #00A3FF); |
| color: white; |
| border-radius: 50%; |
| width: 24px; |
| height: 24px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 12px; |
| font-weight: bold; |
| } |
| |
| .download-section { |
| background: linear-gradient(135deg, rgba(165, 140, 213, 0.1) 0%, rgba(106, 87, 141, 0.1) 100%); |
| } |
| </style> |
| </head> |
|
|
| <body class="antialiased"> |
| |
| <nav class="navbar py-4 sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-music text-purple-500 text-3xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">Fuwalo</span> |
| </div> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-center space-x-4"> |
| <a href="#features" |
| class="text-gray-700 hover:text-purple-500 px-3 py-2 rounded-md text-sm font-medium">Features</a> |
| <a href="#screenshots" |
| class="text-gray-700 hover:text-purple-500 px-3 py-2 rounded-md text-sm font-medium">Screenshots</a> |
| <a href="#download" |
| class="text-gray-700 hover:text-purple-500 px-3 py-2 rounded-md text-sm font-medium">Download</a> |
| <a href="#community" |
| class="text-gray-700 hover:text-purple-500 px-3 py-2 rounded-md text-sm font-medium">Community</a> |
| </div> |
| </div> |
| <div class="md:hidden"> |
| <button type="button" |
| class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-purple-500 focus:outline-none" |
| aria-controls="mobile-menu" aria-expanded="false"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="mobile-menu" id="mobile-menu"> |
| <ul> |
| <li><a href="#features">Features</a></li> |
| <li><a href="#screenshots">Screenshots</a></li> |
| <li><a href="#download">Download</a></li> |
| <li><a href="#community">Community</a></li> |
| <li> |
| <a href="https://discord.gg/vPjNSTeVVk" |
| class="bg-discord text-white px-4 py-2 rounded-md inline-block"> |
| <i class="fab fa-discord mr-2"></i>Join Discord |
| </a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero-gradient pt-32 pb-24"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="flex flex-col md:flex-row items-center gap-12"> |
| <div class="md:w-1/2 space-y-8 text-center md:text-left"> |
| <h1 class="text-5xl md:text-6xl font-bold text-white"> |
| Fuwalo Beta <br> |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-100">Now Available!</span> |
| </h1> |
| <p class="text-xl text-white opacity-90">Experience the future of piano learning and multiplayer fun. Download the beta now and be among the first to play!</p> |
|
|
| <div class="flex flex-col sm:flex-row gap-4"> |
| <a href="#download" class="bg-white text-purple-600 px-8 py-4 rounded-full font-semibold hover:bg-opacity-95 shadow-lg transition-all duration-300 transform hover:scale-105"> |
| <i class="fas fa-download mr-2"></i> Download Now |
| </a> |
| <a href="https://discord.gg/vPjNSTeVVk" class="bg-discord text-white px-8 py-4 rounded-full font-semibold hover:bg-opacity-95 shadow-lg transition-all duration-300 transform hover:scale-105"> |
| <i class="fab fa-discord mr-2"></i> Join Our Discord |
| </a> |
| </div> |
| </div> |
|
|
| <div class="md:w-1/2"> |
| <img src="https://i.ibb.co/1GQvPYfG/Frame.png" |
| class="floating-img w-full max-w-xl rounded-2xl shadow-2xl transform rotate-3"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-20 bg-white"> |
| <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">Why You'll Love Fuwalo</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">A revolutionary way to experience piano, whether you're a beginner or a seasoned player.</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div |
| class="bg-gradient-to-br from-softpink to-lightlavender rounded-2xl p-8 transition-all duration-300 card-hover relative"> |
| <div class="feature-badge">NEW</div> |
| <div class="bg-purple-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6"> |
| <i class="fas fa-graduation-cap text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Interactive Lessons</h3> |
| <p class="text-gray-600">From basics to advanced techniques with our interactive lessons and real-time feedback.</p> |
| </div> |
|
|
| |
| <div |
| class="bg-gradient-to-br from-lightlavender to-mutedmauve rounded-2xl p-8 transition-all duration-300 card-hover relative"> |
| <div class="feature-badge">BETA</div> |
| <div class="bg-blue-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6"> |
| <i class="fas fa-music text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 mb-3">MIDI Playback</h3> |
| <p class="text-gray-600">Play MIDI files with our high-quality piano sound engine.</p> |
| </div> |
|
|
| |
| <div |
| class="bg-gradient-to-br from-mutedmauve to-mediumpurple rounded-2xl p-8 transition-all duration-300 card-hover"> |
| <div class="bg-pink-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6"> |
| <i class="fas fa-gamepad text-pink-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Mini-Games</h3> |
| <p class="text-gray-600">Fun challenges and games to improve your skills while having a blast.</p> |
| </div> |
|
|
| |
| <div |
| class="bg-gradient-to-br from-mediumpurple to-softpink rounded-2xl p-8 transition-all duration-300 card-hover"> |
| <div class="bg-gradient-to-r from-purple-200 to-pink-200 w-16 h-16 rounded-2xl flex items-center justify-center mb-6"> |
| <i class="fas fa-share-alt text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Record & Share</h3> |
| <p class="text-gray-600">Capture your performances and share them with the Fuwalo community.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="screenshots" class="py-20 bg-gray-50"> |
| <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">App Screenshots</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Take a peek at what Fuwalo looks like.</p> |
| </div> |
|
|
| <div class="relative overflow-hidden"> |
| <div class="flex transition-transform duration-300" id="carousel"> |
| <div class="carousel-item flex-shrink-0 w-full"> |
| <div class="flex flex-col md:flex-row items-center justify-center gap-8"> |
| <img src="https://i.ibb.co/R44mWst9/Screenshot-2025-06-08-194205.png" alt="Lesson Screen" class="screenshot w-64"> |
| <img src="https://i.ibb.co/9kLXgc0T/Screenshot-2025-06-08-002030.png" alt="Multiplayer Screen" class="screenshot w-64"> |
| <img src="https://i.ibb.co/1GQvPYfG/Frame.png" alt="Profile Screen" class="screenshot w-64"> |
| </div> |
| </div> |
| <div class="carousel-item flex-shrink-0 w-full"> |
| <div class="flex flex-col md:flex-row items-center justify-center gap-8"> |
| <img src="https://i.ibb.co/kVvPtVD0/62519b4d-51f5-469d-8816-5dc34232f96d.png" |
| alt="Game Mode" class="screenshot w-64"> |
| <img src="https://i.ibb.co/bgBpqqpm/Capture.png" alt="Song Library" class="screenshot w-64"> |
| <img src="https://i.ibb.co/0RKZ6YLk/raw.png" alt="Settings" class="screenshot w-64"> |
| </div> |
| </div> |
| </div> |
|
|
| <button id="prevBtn" |
| class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-3 shadow-md"> |
| <i class="fas fa-chevron-left text-gray-700"></i> |
| </button> |
| <button id="nextBtn" |
| class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-3 shadow-md"> |
| <i class="fas fa-chevron-right text-gray-700"></i> |
| </button> |
|
|
| <div class="flex justify-center mt-6 space-x-2"> |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400" |
| data-index="0"></button> |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400" |
| data-index="1"></button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="download" class="py-20 download-section"> |
| <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">Download Fuwalo Beta</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Get early access to all features and help shape the future of Fuwalo!</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| |
| <div class="bg-white rounded-2xl p-8 shadow-lg platform-card"> |
| <div class="flex flex-col md:flex-row items-center gap-8"> |
| <div class="text-center md:text-left"> |
| <div class="bg-green-100 w-20 h-20 rounded-2xl flex items-center justify-center mb-6 mx-auto md:mx-0"> |
| <i class="fab fa-android text-green-600 text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Android</h3> |
| <p class="text-gray-600 mb-6">Minimum requirement: Android 8.0+</p> |
| <a href="https://example.com/fuwalo-beta.apk" download |
| class="download-btn bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full inline-flex items-center"> |
| <i class="fas fa-download mr-2"></i> Download APK (45MB) |
| </a> |
| </div> |
| <div class="qr-code bg-white p-4 rounded-lg shadow-md"> |
| <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://example.com/fuwalo-beta.apk" |
| alt="Android Download QR Code" class="w-32 h-32"> |
| <p class="text-xs text-gray-500 mt-2">Scan to download</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-2xl p-8 shadow-lg platform-card"> |
| <div class="flex flex-col md:flex-row items-center gap-8"> |
| <div class="text-center md:text-left"> |
| <div class="bg-blue-100 w-20 h-20 rounded-2xl flex items-center justify-center mb-6 mx-auto md:mx-0"> |
| <i class="fab fa-apple text-blue-600 text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">iOS</h3> |
| <p class="text-gray-600 mb-6">Requires iOS 14.0+</p> |
| <div class="space-y-3"> |
| <button disabled |
| class="download-btn bg-gray-400 cursor-not-allowed text-white font-bold py-3 px-6 rounded-full inline-flex items-center"> |
| <i class="fas fa-mobile-alt mr-2"></i> iOS Version Coming Soon |
| </button> |
| <p class="text-xs text-gray-500">Currently unavailable - check back later!</p> |
| </div> |
| </div> |
| <div class="qr-code bg-white p-4 rounded-lg shadow-md"> |
| <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=itms-services://?action=download-manifest&url=https://example.com/fuwalo-beta.plist" |
| alt="iOS Download QR Code" class="w-32 h-32"> |
| <p class="text-xs text-gray-500 mt-2">Scan to install</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-16 bg-white rounded-2xl p-8 shadow-lg"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-6 text-center">Installation Guide</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <h4 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| <span class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">1</span> |
| Android Instructions |
| </h4> |
| <ol class="list-decimal list-inside text-gray-600 space-y-2 pl-4"> |
| <li>Download the APK file</li> |
| <li>Open the downloaded file</li> |
| <li>If prompted, allow installation from unknown sources</li> |
| <li>Follow the on-screen instructions</li> |
| <li>Open Fuwalo and enjoy!</li> |
| </ol> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| <span class="bg-gray-100 text-gray-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">2</span> |
| iOS Coming Soon |
| </h4> |
| <p class="text-gray-600"> |
| We're working hard to bring Fuwalo to iOS users. |
| Check back soon or join our Discord for updates! |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-white"> |
| <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">What's in the Beta?</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Experience these exciting features right now</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gradient-to-br from-purple-50 to-blue-50 rounded-2xl p-8 transition-all duration-300 card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-purple-100 text-purple-600 rounded-full w-10 h-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-check"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900">MIDI Playback</h3> |
| </div> |
| <p class="text-gray-600">Play MIDI files with our high-quality piano sound engine.</p> |
| </div> |
|
|
| <div class="bg-gradient-to-br from-blue-50 to-pink-50 rounded-2xl p-8 transition-all duration-300 card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-blue-100 text-blue-600 rounded-full w-10 h-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-check"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900">Song Upload</h3> |
| </div> |
| <p class="text-gray-600">Upload your own MIDI files from device or online sources.</p> |
| </div> |
|
|
| <div class="bg-gradient-to-br from-pink-50 to-purple-50 rounded-2xl p-8 transition-all duration-300 card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-pink-100 text-pink-600 rounded-full w-10 h-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-check"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900">Falling Notes</h3> |
| </div> |
| <p class="text-gray-600">Learn with visual falling notes piano tutorial system.</p> |
| </div> |
|
|
| <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-8 transition-all duration-300 card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-purple-100 text-purple-600 rounded-full w-10 h-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-check"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900">Virtual Piano</h3> |
| </div> |
| <p class="text-gray-600">Full 88-key piano with velocity-sensitive touch response.</p> |
| </div> |
|
|
| <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-8 transition-all duration-300 card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-blue-100 text-blue-600 rounded-full w-10 h-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-check"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900">Local Storage</h3> |
| </div> |
| <p class="text-gray-600">Save and organize your favorite songs locally.</p> |
| </div> |
|
|
| <div class="bg-gradient-to-br from-pink-50 to-blue-50 rounded-2xl p-8 transition-all duration-300 card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-pink-100 text-pink-600 rounded-full w-10 h-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-check"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900">Feedback System</h3> |
| </div> |
| <p class="text-gray-600">Directly influence future updates with your feedback.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="community" class="py-20" style="background: linear-gradient(135deg, #6A578D 0%, #B29CBF 100%);"> |
| <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-white mb-4">Join Our Community</h2> |
| <p class="text-xl text-white opacity-90 max-w-3xl mx-auto">Connect with other piano enthusiasts, get updates, and share your progress.</p> |
| </div> |
|
|
| <div class="flex flex-col md:flex-row items-center justify-center gap-8"> |
| <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl p-8 w-full max-w-md"> |
| <h3 class="text-xl font-bold text-white mb-6">Stay Updated</h3> |
| <p class="text-white opacity-90 mb-6">Enter your email to get notified about updates and receive exclusive content.</p> |
|
|
| <form class="flex"> |
| <input type="email" placeholder="Your email address" |
| class="flex-grow px-4 py-3 rounded-l-full focus:outline-none"> |
| <button |
| class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white font-bold px-6 py-3 rounded-r-full"> |
| Subscribe |
| </button> |
| </form> |
| </div> |
|
|
| <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl p-8 w-full max-w-md"> |
| <h3 class="text-xl font-bold text-white mb-6">Connect With Us</h3> |
| <p class="text-white opacity-90 mb-6">Join our Discord server or follow us on social media.</p> |
|
|
| <div class="flex justify-center space-x-6"> |
| <a href="https://discord.gg/vPjNSTeVVk" class="bg-white bg-opacity-30 hover:bg-opacity-40 rounded-full p-3 text-white"> |
| <i class="fab fa-discord text-xl"></i> |
| </a> |
| <a href="#" class="bg-white bg-opacity-30 hover:bg-opacity-40 rounded-full p-3 text-white"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="bg-white bg-opacity-30 hover:bg-opacity-40 rounded-full p-3 text-white"> |
| <i class="fab fa-instagram text-xl"></i> |
| </a> |
| <a href="#" class="bg-white bg-opacity-30 hover:bg-opacity-40 rounded-full p-3 text-white"> |
| <i class="fab fa-youtube text-xl"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-deeppurple text-white py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div class="md:col-span-2"> |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-music text-purple-400 text-2xl mr-2"></i> |
| <span class="text-xl font-bold">Fuwalo</span> |
| </div> |
| <p class="text-gray-400 mb-4">Your piano playground for learning, playing, and connecting with music lovers worldwide.</p> |
| <div class="flex space-x-4"> |
| <a href="/blog" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="https://x.com/fuwalo_ai" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="https://discord.gg/xDeDbSNDhq" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-discord"></i> |
| </a> |
| </div> |
| </div> |
|
|
| <div> |
| <h3 class="text-white font-semibold mb-4">Product</h3> |
| <ul class="space-y-2"> |
| <li><a href="#features" class="text-gray-400 hover:text-white">Features</a></li> |
| <li><a href="#download" class="text-gray-400 hover:text-white">Download</a></li> |
| <li><a href="#screenshots" class="text-gray-400 hover:text-white">Screenshots</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Roadmap</a></li> |
| </ul> |
| </div> |
|
|
| <div> |
| <h3 class="text-white font-semibold mb-4">Company</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">About</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
|
|
| <div> |
| <h3 class="text-white font-semibold mb-4">Legal</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</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 Fuwalo. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm">FAQ</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| let currentSlide = 0; |
| const slides = document.querySelectorAll('.carousel-item'); |
| const indicators = document.querySelectorAll('.carousel-indicator'); |
| |
| function goToSlide(index) { |
| currentSlide = index; |
| const offset = -currentSlide * 100; |
| document.getElementById('carousel').style.transform = `translateX(${offset}%)`; |
| |
| indicators.forEach((indicator, i) => { |
| if (i === currentSlide) { |
| indicator.classList.add('bg-gray-600'); |
| indicator.classList.remove('bg-gray-300'); |
| } else { |
| indicator.classList.add('bg-gray-300'); |
| indicator.classList.remove('bg-gray-600'); |
| } |
| }); |
| } |
| |
| document.getElementById('nextBtn').addEventListener('click', () => { |
| currentSlide = (currentSlide + 1) % slides.length; |
| goToSlide(currentSlide); |
| }); |
| |
| document.getElementById('prevBtn').addEventListener('click', () => { |
| currentSlide = (currentSlide - 1 + slides.length) % slides.length; |
| goToSlide(currentSlide); |
| }); |
| |
| indicators.forEach(indicator => { |
| indicator.addEventListener('click', () => { |
| goToSlide(parseInt(indicator.dataset.index)); |
| }); |
| }); |
| |
| |
| indicators[0].classList.add('bg-gray-600'); |
| indicators[0].classList.remove('bg-gray-300'); |
| |
| |
| const mobileMenuButton = document.querySelector('.mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| const expanded = mobileMenuButton.getAttribute('aria-expanded') === 'true' || false; |
| mobileMenuButton.setAttribute('aria-expanded', !expanded); |
| mobileMenu.classList.toggle('active'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| targetElement.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| |
| |
| if (mobileMenu.classList.contains('active')) { |
| mobileMenu.classList.remove('active'); |
| mobileMenuButton.setAttribute('aria-expanded', 'false'); |
| } |
| } |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hygee/fuw" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
| </html> |
