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/utils/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<?php
// Set page metadata
$page_title = "Create Divine Music";
$page_description = "Create beautiful music with AI-powered tools. Join the divine music creation community and inspire the world with your art.";

// Include the new header
include 'includes/header_new.php';
?>

<!-- Hero Section -->
<section class="hero">
    <div class="hero-content">
        <h1 class="hero-title">Create Divine Music</h1>
        <p class="hero-subtitle">
            Transform your musical vision into reality with AI-powered tools. 
            Join a community of artists creating music that honors God and inspires the world.
        </p>
        <div class="hero-actions">
            <?php if (isset($_SESSION['user_id'])): ?>
                <a href="/create_music.php" class="btn btn-primary btn-lg">
                    <i class="fas fa-plus-circle"></i>
                    Create New Track
                </a>
                <a href="/library.php" class="btn btn-secondary btn-lg">
                    <i class="fas fa-music"></i>
                    My Library
                </a>
            <?php else: ?>
                <a href="/auth/register.php" class="btn btn-primary btn-lg">
                    <i class="fas fa-user-plus"></i>
                    Start Creating
                </a>
                <a href="/auth/login.php" class="btn btn-secondary btn-lg">
                    <i class="fas fa-sign-in-alt"></i>
                    Sign In
                </a>
            <?php endif; ?>
        </div>
    </div>
    
    <!-- Animated background elements -->
    <div class="hero-bg-elements">
        <div class="bg-element bg-element-1"></div>
        <div class="bg-element bg-element-2"></div>
        <div class="bg-element bg-element-3"></div>
    </div>
</section>

<!-- Features Section -->
<section class="section">
    <div class="container">
        <div class="section-header text-center">
            <h2>Why Choose SoundStudioPro?</h2>
            <p>Experience the perfect blend of technology and divine inspiration</p>
        </div>
        
        <div class="grid grid-3">
            <div class="card feature-card">
                <div class="feature-icon">
                    <i class="fas fa-magic"></i>
                </div>
                <h3>AI-Powered Creation</h3>
                <p>Transform your ideas into complete musical compositions with advanced AI technology that understands your vision.</p>
            </div>
            
            <div class="card feature-card">
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>Divine Community</h3>
                <p>Connect with fellow artists who share your passion for creating music that honors God and inspires others.</p>
            </div>
            
            <div class="card feature-card">
                <div class="feature-icon">
                    <i class="fas fa-cloud"></i>
                </div>
                <h3>Cloud Library</h3>
                <p>Store, organize, and access your music from anywhere. Your divine creations are always safe and accessible.</p>
            </div>
        </div>
    </div>
</section>

<!-- How It Works Section -->
<section class="section section-sm" style="background: var(--bg-secondary);">
    <div class="container">
        <div class="section-header text-center">
            <h2>How It Works</h2>
            <p>Create your masterpiece in just a few simple steps</p>
        </div>
        
        <div class="steps-container">
            <div class="step">
                <div class="step-number">1</div>
                <div class="step-content">
                    <h3>Describe Your Vision</h3>
                    <p>Tell us about the music you want to create - style, mood, instruments, and inspiration.</p>
                </div>
            </div>
            
            <div class="step">
                <div class="step-number">2</div>
                <div class="step-content">
                    <h3>AI Generates Your Music</h3>
                    <p>Our advanced AI transforms your description into a complete musical composition.</p>
                </div>
            </div>
            
            <div class="step">
                <div class="step-number">3</div>
                <div class="step-content">
                    <h3>Share & Inspire</h3>
                    <p>Share your creation with the community and inspire others with your divine music.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Community Section -->
<section class="section">
    <div class="container">
        <div class="section-header text-center">
            <h2>Join Our Divine Community</h2>
            <p>Connect with artists who share your passion for creating music that honors God</p>
        </div>
        
        <div class="community-stats">
            <div class="stat-card">
                <div class="stat-number">1,000+</div>
                <div class="stat-label">Artists</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">5,000+</div>
                <div class="stat-label">Tracks Created</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">50,000+</div>
                <div class="stat-label">Listeners</div>
            </div>
        </div>
        
        <div class="text-center mt-xl">
            <a href="/community.php" class="btn btn-accent btn-lg">
                <i class="fas fa-comments"></i>
                Explore Community
            </a>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section section-sm" style="background: var(--gradient-divine);">
    <div class="container">
        <div class="cta-content text-center">
            <h2>Ready to Create Divine Music?</h2>
            <p>Join thousands of artists creating music that inspires and honors God</p>
            <div class="cta-actions">
                <?php if (isset($_SESSION['user_id'])): ?>
                    <a href="/create_music.php" class="btn btn-primary btn-lg">
                        <i class="fas fa-plus-circle"></i>
                        Start Creating Now
                    </a>
                <?php else: ?>
                    <a href="/auth/register.php" class="btn btn-primary btn-lg">
                        <i class="fas fa-user-plus"></i>
                        Join for Free
                    </a>
                    <a href="/auth/login.php" class="btn btn-secondary btn-lg">
                        <i class="fas fa-sign-in-alt"></i>
                        Sign In
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<style>
/* Hero section enhancements */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

.bg-element {
    position: absolute;
    border-radius: 50%;
    background: var(--gradient-primary);
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
}

.bg-element-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.bg-element-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.bg-element-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* Section headers */
.section-header {
    margin-bottom: var(--space-2xl);
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: var(--space-md);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header p {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

/* Feature cards */
.feature-card {
    text-align: center;
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: var(--transition-normal);
}

.feature-card:hover::before {
    left: 100%;
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-primary);
    box-shadow: var(--shadow-medium);
}

.feature-card h3 {
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Steps */
.steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.step {
    text-align: center;
    position: relative;
}

.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 40px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: var(--gradient-primary);
    z-index: 1;
}

.step-number {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-medium);
}

.step-content h3 {
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.step-content p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Community stats */
.community-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin: var(--space-xl) 0;
}

.stat-card {
    text-align: center;
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-heavy);
    border-color: var(--border-accent);
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-sm);
}

.stat-label {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* CTA section */
.cta-content h2 {
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.cta-content p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.cta-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive design */
@media (max-width: 768px) {
    .steps-container {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .step:not(:last-child)::after {
        display: none;
    }
    
    .community-stats {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .feature-card {
        padding: var(--space-lg);
    }
    
    .stat-card {
        padding: var(--space-lg);
    }
    
    .stat-number {
        font-size: 2rem;
    }
}
</style>

<?php
// Include the new footer
include 'includes/footer_new.php';
?>