|
|
<!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> |
