 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/soundstudiopro.com/private_html/ |
<?php
session_start();
// Include security tracking
require_once 'includes/security_tracking.php';
// Handle AJAX requests
$is_ajax = isset($_GET['ajax']) && $_GET['ajax'] == '1';
// Set page variables for header
$page_title = 'SoundStudioPro - The Future of AI Music Creation';
$page_description = 'Advanced AI music generation platform with professional tools, community features, and enterprise-grade capabilities.';
$current_page = 'advanced_homepage';
// Include header only for full page loads
if (!$is_ajax) {
include 'includes/header.php';
}
// Global player is included via footer.php
?>
<div class="container" id="pageContainer">
<div class="main-content">
<style>
/* Advanced Homepage Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #1a202c;
background: #0a0a0a;
min-height: 100vh;
overflow-x: hidden;
padding-bottom: 120px;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 4px;
}
/* Advanced Hero Section */
.advanced-hero {
position: relative;
min-height: 100vh;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.advanced-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 107, 107, 0.05) 0%, transparent 50%);
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-20px) rotate(1deg); }
66% { transform: translateY(10px) rotate(-1deg); }
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 1200px;
padding: 0 2rem;
}
.hero-badge {
display: inline-block;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
padding: 0.8rem 2rem;
border-radius: 50px;
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 2rem;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.hero-title {
font-size: 6rem;
font-weight: 800;
background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 2rem;
line-height: 1.1;
text-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
}
.hero-subtitle {
font-size: 2.4rem;
color: #e2e8f0;
margin-bottom: 4rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
line-height: 1.4;
}
.hero-actions {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-advanced {
padding: 1.5rem 3rem;
border: none;
border-radius: 50px;
font-size: 1.8rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 1rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-primary-advanced {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.btn-primary-advanced:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
}
.btn-secondary-advanced {
background: rgba(255, 255, 255, 0.1);
color: #e2e8f0;
border: 2px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.btn-secondary-advanced:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
}
/* AI Model Showcase */
.ai-showcase {
padding: 8rem 0;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
position: relative;
}
.ai-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(102,126,234,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.3;
}
.section-title {
font-size: 4.8rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
font-size: 2rem;
color: #e2e8f0;
text-align: center;
margin-bottom: 6rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.ai-models-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.ai-model-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 3rem;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.ai-model-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(45deg, #667eea, #764ba2);
}
.ai-model-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: rgba(102, 126, 234, 0.3);
}
.model-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.model-icon {
width: 60px;
height: 60px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
color: white;
}
.model-info h3 {
font-size: 2.4rem;
font-weight: 700;
color: #e2e8f0;
margin-bottom: 0.5rem;
}
.model-version {
font-size: 1.4rem;
color: #667eea;
font-weight: 600;
}
.model-features {
list-style: none;
margin-bottom: 2rem;
}
.model-features li {
padding: 0.8rem 0;
color: #cbd5e0;
font-size: 1.6rem;
display: flex;
align-items: center;
gap: 1rem;
}
.model-features li::before {
content: '✓';
color: #667eea;
font-weight: bold;
font-size: 1.8rem;
}
.model-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.stat-item {
text-align: center;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.stat-number {
font-size: 2.4rem;
font-weight: 700;
color: #667eea;
display: block;
}
.stat-label {
font-size: 1.2rem;
color: #a0aec0;
margin-top: 0.5rem;
}
/* Professional Features */
.pro-features {
padding: 8rem 0;
background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 3rem;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-card:hover::before {
opacity: 1;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: rgba(102, 126, 234, 0.3);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
font-size: 3.2rem;
color: white;
}
.feature-card h3 {
font-size: 2.4rem;
font-weight: 700;
color: #e2e8f0;
margin-bottom: 1.5rem;
}
.feature-card p {
font-size: 1.6rem;
color: #cbd5e0;
line-height: 1.6;
}
/* Community Section */
.community-section {
padding: 8rem 0;
background: linear-gradient(135deg, #0f3460 0%, #533483 100%);
}
.community-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto 6rem;
padding: 0 2rem;
}
.stat-card {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 3rem 2rem;
text-align: center;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.stat-number-large {
font-size: 4.8rem;
font-weight: 800;
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
margin-bottom: 1rem;
}
.stat-label-large {
font-size: 1.8rem;
color: #e2e8f0;
font-weight: 600;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-title {
font-size: 4rem;
}
.hero-subtitle {
font-size: 2rem;
}
.section-title {
font-size: 3.6rem;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.ai-models-grid {
grid-template-columns: 1fr;
}
.features-grid {
grid-template-columns: 1fr;
}
.community-stats {
grid-template-columns: repeat(2, 1fr);
}
}
/* Loading Animation */
.loading-content {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(102, 126, 234, 0.3);
border-top: 3px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<!-- Advanced Hero Section -->
<section class="advanced-hero">
<div class="hero-content">
<div class="hero-badge">
🚀 Advanced AI Music Platform
</div>
<h1 class="hero-title">
The Future of<br>
<span style="background: linear-gradient(45deg, #f093fb, #f5576c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
Music Creation
</span>
</h1>
<p class="hero-subtitle">
Professional AI music generation with advanced analytics, community features, and enterprise-grade capabilities.
Create, collaborate, and monetize your music like never before.
</p>
<div class="hero-actions">
<a href="/index.php#create" class="btn-advanced btn-primary-advanced">
🎵 Create Your First Track
</a>
<a href="#ai-showcase" class="btn-advanced btn-secondary-advanced">
🔬 Explore AI Models
</a>
</div>
</div>
</section>
<!-- AI Model Showcase -->
<section id="ai-showcase" class="ai-showcase">
<div class="container">
<h2 class="section-title">Advanced AI Models</h2>
<p class="section-subtitle">
Experience the latest in AI music generation technology with multiple specialized models
</p>
<div class="ai-models-grid">
<!-- V3 Model -->
<div class="ai-model-card">
<div class="model-header">
<div class="model-icon">🎵</div>
<div class="model-info">
<h3>V3 Advanced</h3>
<div class="model-version">Current Production Model</div>
</div>
</div>
<ul class="model-features">
<li>High-quality music generation</li>
<li>Multiple music types support</li>
<li>Advanced parameter control</li>
<li>Professional audio quality</li>
<li>Real-time processing</li>
</ul>
<div class="model-stats">
<div class="stat-item">
<span class="stat-number">99.8%</span>
<span class="stat-label">Success Rate</span>
</div>
<div class="stat-item">
<span class="stat-number">30s</span>
<span class="stat-label">Avg. Generation</span>
</div>
</div>
</div>
<!-- V4 Model -->
<div class="ai-model-card">
<div class="model-header">
<div class="model-icon">🚀</div>
<div class="model-info">
<h3>V4 Pro</h3>
<div class="model-version">Coming Soon</div>
</div>
</div>
<ul class="model-features">
<li>Enhanced audio quality</li>
<li>Advanced vocal synthesis</li>
<li>Multi-instrument support</li>
<li>Professional mastering</li>
<li>Extended duration support</li>
</ul>
<div class="model-stats">
<div class="stat-item">
<span class="stat-number">99.9%</span>
<span class="stat-label">Success Rate</span>
</div>
<div class="stat-item">
<span class="stat-number">60s+</span>
<span class="stat-label">Extended Duration</span>
</div>
</div>
</div>
<!-- Specialized Models -->
<div class="ai-model-card">
<div class="model-header">
<div class="model-icon">🎤</div>
<div class="model-info">
<h3>Specialized Models</h3>
<div class="model-version">Professional Tools</div>
</div>
</div>
<ul class="model-features">
<li>Vocal removal & isolation</li>
<li>Lyrics generation</li>
<li>Audio enhancement</li>
<li>Multi-format export</li>
<li>Professional mastering</li>
</ul>
<div class="model-stats">
<div class="stat-item">
<span class="stat-number">5+</span>
<span class="stat-label">Music Types</span>
</div>
<div class="stat-item">
<span class="stat-number">10+</span>
<span class="stat-label">Export Formats</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Professional Features -->
<section class="pro-features">
<div class="container">
<h2 class="section-title">Professional Platform Features</h2>
<p class="section-subtitle">
Everything you need to create, collaborate, and monetize your music
</p>
<div class="features-grid">
<!-- Analytics Dashboard -->
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Advanced Analytics</h3>
<p>Track your music performance with detailed analytics, play counts, engagement metrics, and revenue insights.</p>
</div>
<!-- Community -->
<div class="feature-card">
<div class="feature-icon">👥</div>
<h3>Artist Community</h3>
<p>Connect with fellow artists, share your music, collaborate on projects, and build your fanbase.</p>
</div>
<!-- Global Player -->
<div class="feature-card">
<div class="feature-icon">🎧</div>
<h3>Global Music Player</h3>
<p>Professional music streaming across the entire platform with advanced playback controls and playlist management.</p>
</div>
<!-- Library -->
<div class="feature-card">
<div class="feature-icon">📚</div>
<h3>Advanced Library</h3>
<p>Organize your music with smart playlists, tags, and advanced search capabilities for professional workflow.</p>
</div>
<!-- API -->
<div class="feature-card">
<div class="feature-icon">🔌</div>
<h3>Comprehensive API</h3>
<p>Integrate our AI music generation into your applications with our powerful and well-documented API.</p>
</div>
<!-- Security -->
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h3>Enterprise Security</h3>
<p>Advanced security features including threat detection, user protection, and comprehensive audit logs.</p>
</div>
</div>
</div>
</section>
<!-- Community Section -->
<section class="community-section">
<div class="container">
<h2 class="section-title">Thriving Music Community</h2>
<p class="section-subtitle">
Join thousands of artists creating the future of music
</p>
<div class="community-stats">
<div class="stat-card">
<span class="stat-number-large">50K+</span>
<span class="stat-label-large">Active Artists</span>
</div>
<div class="stat-card">
<span class="stat-number-large">1M+</span>
<span class="stat-label-large">Tracks Created</span>
</div>
<div class="stat-card">
<span class="stat-number-large">10M+</span>
<span class="stat-label-large">Total Plays</span>
</div>
<div class="stat-card">
<span class="stat-number-large">$500K+</span>
<span class="stat-label-large">Artist Earnings</span>
</div>
</div>
<div class="hero-actions" style="margin-top: 4rem;">
<a href="/community.php" class="btn-advanced btn-primary-advanced">
🌟 Join the Community
</a>
<a href="/artists.php" class="btn-advanced btn-secondary-advanced">
👥 Discover Artists
</a>
</div>
</div>
</section>
<!-- Loading State -->
<div id="loadingContent" class="loading-content" style="display: none;">
<div class="loading-spinner"></div>
</div>
<script>
// Advanced homepage interactions
document.addEventListener('DOMContentLoaded', function() {
// Smooth scrolling for anchor 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'
});
}
});
});
// Intersection Observer for 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.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe all cards for animation
document.querySelectorAll('.ai-model-card, .feature-card, .stat-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
// Advanced hover effects
document.querySelectorAll('.ai-model-card, .feature-card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px) scale(1.02)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0) scale(1)';
});
});
});
</script>
<?php
// Include footer only for full page loads
if (!$is_ajax) {
include 'includes/footer.php';
}
?>