996 lines
36 KiB
HTML
996 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<title>Sonic Cloud - Music Streaming Platform for Artists & Fans</title>
|
|
<meta name="description" content="Upload, discover, and stream music on Sonic Cloud. Create playlists, manage albums, explore genres, and connect musicians with listeners worldwide.">
|
|
<meta name="keywords" content="music streaming, independent artists, music platform, upload songs, create playlists, discover music, album management">
|
|
<meta name="author" content="Sonic Cloud Team">
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="canonical" href="https://sonic-cloud.com">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="Sonic Cloud - Music Streaming Platform for Artists & Fans">
|
|
<meta property="og:description" content="Upload, discover, and stream music. Create playlists, manage albums, explore genres, and connect musicians with listeners worldwide.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="Sonic Cloud">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Sonic Cloud - Music Streaming Platform for Artists & Fans">
|
|
<meta name="twitter:description" content="Upload, discover, and stream music. Create playlists, manage albums, explore genres, and connect musicians with listeners on Sonic Cloud.">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--color-primary: #7c3aed;
|
|
--color-primary-light: #a855f7;
|
|
--color-secondary: #3b82f6;
|
|
--color-accent: #06b6d4;
|
|
--color-success: #10b981;
|
|
--color-neutral-50: #f8fafc;
|
|
--color-neutral-100: #f1f5f9;
|
|
--color-neutral-200: #e2e8f0;
|
|
--color-neutral-300: #cbd5e1;
|
|
--color-neutral-400: #94a3b8;
|
|
--color-neutral-500: #64748b;
|
|
--color-neutral-600: #475569;
|
|
--color-neutral-700: #334155;
|
|
--color-neutral-800: #1e293b;
|
|
--color-neutral-900: #0f172a;
|
|
--gradient-soundwave: linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #06b6d4 100%);
|
|
--shadow-glow: 0 0 20px rgba(124, 58, 237, 0.4);
|
|
--shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: var(--color-neutral-900);
|
|
color: var(--color-neutral-50);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: rgba(15, 23, 42, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid rgba(124, 58, 237, 0.2);
|
|
}
|
|
|
|
.nav-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 1.5rem;
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
background: var(--gradient-soundwave);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--color-neutral-300);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.25s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--color-primary-light);
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-neutral-50);
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding-top: 80px;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--gradient-soundwave);
|
|
opacity: 0.1;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
max-width: 900px;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.5rem, 8vw, 5rem);
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
margin-bottom: 1.5rem;
|
|
background: var(--gradient-soundwave);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: clamp(1rem, 2vw, 1.25rem);
|
|
color: var(--color-neutral-300);
|
|
margin-bottom: 2rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 1rem 2rem;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.25s;
|
|
cursor: pointer;
|
|
border: none;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--gradient-soundwave);
|
|
color: white;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
box-shadow: var(--shadow-glow-blue);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
border: 2px solid var(--color-primary);
|
|
color: var(--color-primary-light);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
}
|
|
|
|
.social-proof {
|
|
font-size: 0.875rem;
|
|
color: var(--color-neutral-400);
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats {
|
|
padding: 6rem 0;
|
|
background: var(--color-neutral-800);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
background: var(--color-neutral-900);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(124, 58, 237, 0.2);
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
border-color: var(--color-primary);
|
|
box-shadow: var(--shadow-glow);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
background: var(--gradient-soundwave);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 0.5rem 0;
|
|
color: var(--color-neutral-200);
|
|
}
|
|
|
|
.stat-desc {
|
|
font-size: 0.875rem;
|
|
color: var(--color-neutral-400);
|
|
}
|
|
|
|
/* Features Section */
|
|
.features {
|
|
padding: 6rem 0;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: clamp(2rem, 5vw, 3rem);
|
|
font-weight: 800;
|
|
margin-bottom: 1rem;
|
|
background: var(--gradient-soundwave);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.section-header p {
|
|
font-size: 1.125rem;
|
|
color: var(--color-neutral-400);
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--color-neutral-800);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
border: 1px solid transparent;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--gradient-soundwave);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: var(--color-neutral-50);
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--color-neutral-400);
|
|
line-height: 1.75;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.feature-benefit {
|
|
font-size: 0.875rem;
|
|
color: var(--color-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* How It Works Section */
|
|
.how-it-works {
|
|
padding: 6rem 0;
|
|
background: var(--color-neutral-800);
|
|
}
|
|
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.step {
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.step-number {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background: var(--gradient-soundwave);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
margin: 0 auto 1.5rem;
|
|
box-shadow: var(--shadow-glow);
|
|
}
|
|
|
|
.step h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: var(--color-neutral-50);
|
|
}
|
|
|
|
.step p {
|
|
color: var(--color-neutral-400);
|
|
line-height: 1.75;
|
|
}
|
|
|
|
/* FAQ Section */
|
|
.faq {
|
|
padding: 6rem 0;
|
|
}
|
|
|
|
.faq-categories {
|
|
display: grid;
|
|
gap: 3rem;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.faq-category h3 {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.faq-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.faq-item {
|
|
background: var(--color-neutral-800);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(124, 58, 237, 0.2);
|
|
}
|
|
|
|
.faq-question {
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 1.5rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--color-neutral-50);
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: background 0.25s;
|
|
}
|
|
|
|
.faq-question:hover {
|
|
background: var(--color-neutral-700);
|
|
}
|
|
|
|
.faq-icon {
|
|
transition: transform 0.25s;
|
|
}
|
|
|
|
.faq-item.active .faq-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.faq-answer {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.35s ease;
|
|
}
|
|
|
|
.faq-item.active .faq-answer {
|
|
max-height: 500px;
|
|
}
|
|
|
|
.faq-answer-content {
|
|
padding: 0 1.5rem 1.5rem;
|
|
color: var(--color-neutral-400);
|
|
line-height: 1.75;
|
|
}
|
|
|
|
/* Final CTA Section */
|
|
.final-cta {
|
|
padding: 6rem 0;
|
|
background: var(--color-neutral-800);
|
|
text-align: center;
|
|
}
|
|
|
|
.final-cta h2 {
|
|
font-size: clamp(2rem, 5vw, 3.75rem);
|
|
font-weight: 800;
|
|
margin-bottom: 1.5rem;
|
|
background: var(--gradient-soundwave);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.final-cta p {
|
|
font-size: 1.25rem;
|
|
color: var(--color-neutral-400);
|
|
margin-bottom: 2rem;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background: var(--color-neutral-900);
|
|
padding: 4rem 0 2rem;
|
|
border-top: 1px solid rgba(124, 58, 237, 0.2);
|
|
}
|
|
|
|
.footer-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 3rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.footer-section h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: var(--color-neutral-50);
|
|
}
|
|
|
|
.footer-links {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--color-neutral-400);
|
|
text-decoration: none;
|
|
transition: color 0.25s;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--color-primary-light);
|
|
}
|
|
|
|
.footer-bottom {
|
|
text-align: center;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--color-neutral-800);
|
|
color: var(--color-neutral-500);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1024px) {
|
|
.nav-links {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(15, 23, 42, 0.98);
|
|
flex-direction: column;
|
|
padding: 2rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.nav-links.active {
|
|
display: flex;
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hero-cta {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.features-grid,
|
|
.stats-grid,
|
|
.steps {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.6s ease-out forwards;
|
|
}
|
|
|
|
/* Smooth Scroll */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav>
|
|
<div class="nav-container">
|
|
<div class="logo">Sonic Cloud</div>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#how-it-works">How It Works</a></li>
|
|
<li><a href="#faq">FAQ</a></li>
|
|
<li><a href="#cta" class="btn btn-primary">Start Listening</a></li>
|
|
</ul>
|
|
<button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-content fade-in">
|
|
<h1>Your Music. Your Way. Everywhere.</h1>
|
|
<p>Stream millions of songs, create personalized playlists, and discover your next favorite artist on the platform built for music lovers.</p>
|
|
<div class="hero-cta">
|
|
<a href="#cta" class="btn btn-primary">Start Listening</a>
|
|
<a href="#features" class="btn btn-secondary">Explore Library</a>
|
|
</div>
|
|
<p class="social-proof">Join thousands of artists and listeners sharing their passion for music</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="stats">
|
|
<div class="container">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-value">40+</div>
|
|
<div class="stat-label">API Endpoints</div>
|
|
<div class="stat-desc">Powering every aspect of your music experience</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">20+</div>
|
|
<div class="stat-label">UI Components</div>
|
|
<div class="stat-desc">Beautiful, intuitive interface elements</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">10</div>
|
|
<div class="stat-label">Data Models</div>
|
|
<div class="stat-desc">Comprehensive music platform architecture</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">13</div>
|
|
<div class="stat-label">Page Types</div>
|
|
<div class="stat-desc">From discovery to artist profiles</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="features" id="features">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Everything You Need for Music</h2>
|
|
<p>Powerful features for artists and listeners alike</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎧</div>
|
|
<h3>Unlimited Streaming</h3>
|
|
<p>Stream high-quality audio with advanced waveform visualization. Play, pause, and skip through your favorite tracks with seamless playback controls.</p>
|
|
<div class="feature-benefit">Enjoy crystal-clear sound anytime, anywhere</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📝</div>
|
|
<h3>Smart Playlists</h3>
|
|
<p>Create unlimited playlists, organize your music library, and curate the perfect soundtrack for every moment. Share your collections with friends or keep them private.</p>
|
|
<div class="feature-benefit">Organize your music exactly how you want it</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🧭</div>
|
|
<h3>Discover New Music</h3>
|
|
<p>Explore trending tracks, browse new releases, and dive into genre-specific collections. Our discovery engine helps you find your next obsession.</p>
|
|
<div class="feature-benefit">Never run out of fresh music to explore</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">👤</div>
|
|
<h3>Artist Profiles</h3>
|
|
<p>Follow your favorite artists, explore their complete discography, and get instant access to albums, singles, and EPs. Support verified musicians directly.</p>
|
|
<div class="feature-benefit">Connect directly with the artists you love</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔗</div>
|
|
<h3>Share What You Love</h3>
|
|
<p>Generate shareable links for any song, album, or playlist. Track engagement with click analytics and spread the music you're passionate about.</p>
|
|
<div class="feature-benefit">Spread great music effortlessly</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">💿</div>
|
|
<h3>Rich Album Experience</h3>
|
|
<p>Browse beautifully organized albums with cover art, track listings, and release details. Experience music the way artists intended it.</p>
|
|
<div class="feature-benefit">Immerse yourself in complete album journeys</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works Section -->
|
|
<section class="how-it-works" id="how-it-works">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>How It Works</h2>
|
|
<p>Get started in minutes, enjoy music forever</p>
|
|
</div>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-number">1</div>
|
|
<h3>Create Your Account</h3>
|
|
<p>Sign up in seconds with just an email and username. No credit card required to start listening.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">2</div>
|
|
<h3>Explore & Discover</h3>
|
|
<p>Browse trending tracks, search for your favorite artists, or dive into genre collections to find new music.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">3</div>
|
|
<h3>Build Your Library</h3>
|
|
<p>Create playlists, save albums, and follow artists to build a personalized music experience.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">4</div>
|
|
<h3>Enjoy Everywhere</h3>
|
|
<p>Stream your music with advanced playback controls, waveform visualization, and seamless audio quality.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Section -->
|
|
<section class="faq" id="faq">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Frequently Asked Questions</h2>
|
|
<p>Everything you need to know about Sonic Cloud</p>
|
|
</div>
|
|
<div class="faq-categories">
|
|
<!-- Getting Started -->
|
|
<div class="faq-category">
|
|
<h3>Getting Started</h3>
|
|
<div class="faq-items">
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span>How do I create an account on Sonic Cloud?</span>
|
|
<span class="faq-icon">▼</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
Visit /register and provide your email, a unique username (3-20 characters), and a password (minimum 8 characters). You can optionally add a display name. Once registered, you'll receive a JWT token that logs you in automatically for 7 days.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span>How do I start listening to music?</span>
|
|
<span class="faq-icon">▼</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
After creating an account, go to the homepage or discovery page. You can browse trending songs, new releases, or search by genre. Click any song to start playing it in the fixed audio player at the bottom of the screen.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span>Is Sonic Cloud free to use?</span>
|
|
<span class="faq-icon">▼</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
Yes, Sonic Cloud is currently a free platform for both listeners and artists. You can create an account, listen to music, create playlists, and upload songs without any subscription fees.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<div class="faq-category">
|
|
<h3>Features</h3>
|
|
<div class="faq-items">
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span>How do I create and manage playlists?</span>
|
|
<span class="faq-icon">▼</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
Once logged in, click the 'Create Playlist' button in your profile or playlists page. Give it a title, optional description, and choose whether it's public or private. Add songs by clicking the add button on any song card.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span>How does music discovery work?</span>
|
|
<span class="faq-icon">▼</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
Sonic Cloud offers multiple discovery methods: Trending Songs ranked by play count, New Releases for recently uploaded tracks, Genre Browsing to filter by categories, and Search to find specific songs, artists, or albums by name.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span>How do I share songs, playlists, or albums?</span>
|
|
<span class="faq-icon">▼</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
Click the share button on any song, playlist, or album page. The system generates a unique shareable link that you can copy and send to anyone. The platform tracks how many times your share links are clicked.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- For Artists -->
|
|
<div class="faq-category">
|
|
<h3>For Artists</h3>
|
|
<div class="faq-items">
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span>How do I become an artist on Sonic Cloud?</span>
|
|
<span class="faq-icon">▼</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
After creating a user account, go to /artist/create to set up your artist profile. Provide your artist name, bio, avatar, and optional website URL. Once created, you can start uploading songs immediately.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span>How do I upload songs?</span>
|
|
<span class="faq-icon">▼</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
Go to /upload (must be an artist). Fill in the upload form with: song title, audio file URL, duration, cover image URL (optional), album selection, genre tags, description, lyrics, and public/private toggle.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span>How do I track my song performance?</span>
|
|
<span class="faq-icon">▼</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
Each song displays its total play count, which increments every time someone plays it. Visit your artist profile to see play counts across all your songs. Share link analytics show how many times your shared content is clicked.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Final CTA Section -->
|
|
<section class="final-cta" id="cta">
|
|
<div class="container">
|
|
<h2>Ready to Experience Music Your Way?</h2>
|
|
<p>Join thousands of artists and listeners on the platform that puts music first. Start streaming in seconds.</p>
|
|
<div class="hero-cta">
|
|
<a href="/register" class="btn btn-primary">Start Listening Free</a>
|
|
<a href="/artist/create" class="btn btn-secondary">Become an Artist</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h3>Sonic Cloud</h3>
|
|
<p style="color: var(--color-neutral-400); margin-top: 0.5rem;">
|
|
Where Music Takes Flight
|
|
</p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Platform</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="/">Discover</a></li>
|
|
<li><a href="/discover/trending">Trending</a></li>
|
|
<li><a href="/discover/new-releases">New Releases</a></li>
|
|
<li><a href="/discover/genres">Genres</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>For Artists</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="/artist/create">Become an Artist</a></li>
|
|
<li><a href="/upload">Upload Music</a></li>
|
|
<li><a href="/docs">Documentation</a></li>
|
|
<li><a href="/docs/API_REFERENCE.md">API Reference</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Support</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="#faq">FAQ</a></li>
|
|
<li><a href="/docs/PROJECT_DOCUMENTATION.md">Help Center</a></li>
|
|
<li><a href="/docs/QUICK_REFERENCE.md">Quick Reference</a></li>
|
|
<li><a href="/profile">My Profile</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2025 Sonic Cloud. Built with Next.js 16, TypeScript, and Tailwind CSS 4.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Mobile Menu Toggle
|
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
|
const navLinks = document.getElementById('navLinks');
|
|
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
navLinks.classList.toggle('active');
|
|
});
|
|
|
|
// FAQ Accordion
|
|
const faqItems = document.querySelectorAll('.faq-item');
|
|
|
|
faqItems.forEach(item => {
|
|
const question = item.querySelector('.faq-question');
|
|
|
|
question.addEventListener('click', () => {
|
|
const isActive = item.classList.contains('active');
|
|
|
|
// Close all items
|
|
faqItems.forEach(i => i.classList.remove('active'));
|
|
|
|
// Open clicked item if it wasn't active
|
|
if (!isActive) {
|
|
item.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Smooth scroll for navigation links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
// Close mobile menu if open
|
|
navLinks.classList.remove('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Intersection Observer for fade-in animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.animation = 'fadeIn 0.6s ease-out forwards';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all sections except hero
|
|
document.querySelectorAll('section:not(.hero)').forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
|
|
// Observe individual cards for staggered animation
|
|
document.querySelectorAll('.stat-card, .feature-card, .step, .faq-category').forEach((card, index) => {
|
|
card.style.opacity = '0';
|
|
setTimeout(() => {
|
|
observer.observe(card);
|
|
}, index * 50);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |