 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/.cursor-server/data/User/History/5afbe2f/ |
<?php
session_start();
// Handle AJAX requests
$is_ajax = isset($_GET['ajax']) && $_GET['ajax'] == '1';
// Include database configuration
require_once 'config/database.php';
// Set page variables for header
$page_title = 'About Us - SoundStudioPro';
$page_description = 'Discover the story behind SoundStudioPro - a platform born from a lifelong passion for music and the dream to empower creators worldwide.';
$current_page = 'about';
// Include header only for full page loads
if (!$is_ajax) {
include 'includes/header.php';
} else {
// For AJAX requests, wrap content in the proper container structure
echo '<div class="container" id="pageContainer">';
}
// Global player is included via footer.php
?>
<style>
/* About Us Page Styles */
.about-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
min-height: 60vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.about-hero::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="music-notes" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><text x="10" y="15" font-family="Arial" font-size="12" fill="rgba(255,255,255,0.1)">♪</text></pattern></defs><rect width="100" height="100" fill="url(%23music-notes)"/></svg>');
opacity: 0.3;
}
.about-hero-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
max-width: 800px;
margin: 0 auto;
padding: 4rem 2rem;
}
.about-hero h1 {
font-size: 4rem;
font-weight: 800;
margin-bottom: 1rem;
text-shadow: 0 4px 8px rgba(0,0,0,0.3);
animation: fadeInUp 1s ease;
}
.about-hero p {
font-size: 1.4rem;
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
animation: fadeInUp 1s ease 0.2s both;
}
.about-content {
padding: 6rem 0;
background: #0a0a0a;
color: #ffffff;
}
.story-section {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
margin-bottom: 6rem;
}
.story-text {
animation: fadeInLeft 1s ease;
}
.story-text h2 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 2rem;
background: linear-gradient(135deg, #667eea, #f093fb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.story-text p {
font-size: 1.2rem;
line-height: 1.8;
margin-bottom: 1.5rem;
color: #cccccc;
}
.story-text .highlight {
color: #667eea;
font-weight: 600;
}
.story-image {
text-align: center;
animation: fadeInRight 1s ease;
}
.story-image .icon {
font-size: 8rem;
color: #667eea;
margin-bottom: 2rem;
animation: float 3s ease-in-out infinite;
}
.mission-section {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(240, 147, 251, 0.1) 100%);
padding: 6rem 0;
margin: 4rem 0;
border-radius: 20px;
}
.mission-content {
max-width: 1000px;
margin: 0 auto;
text-align: center;
padding: 0 2rem;
}
.mission-content h2 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 2rem;
background: linear-gradient(135deg, #667eea, #f093fb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mission-content p {
font-size: 1.3rem;
line-height: 1.8;
color: #cccccc;
margin-bottom: 3rem;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 4rem;
}
.value-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.value-card:hover {
transform: translateY(-5px);
border-color: #667eea;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}
.value-card .icon {
font-size: 3rem;
color: #667eea;
margin-bottom: 1rem;
}
.value-card h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #ffffff;
}
.value-card p {
color: #cccccc;
line-height: 1.6;
}
.journey-section {
padding: 6rem 0;
}
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #667eea, #f093fb);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: 4rem;
animation: fadeInUp 0.8s ease;
}
.timeline-item:nth-child(odd) {
text-align: right;
padding-right: 3rem;
}
.timeline-item:nth-child(even) {
text-align: left;
padding-left: 3rem;
}
.timeline-item::before {
content: '';
position: absolute;
top: 1rem;
width: 20px;
height: 20px;
background: #667eea;
border-radius: 50%;
border: 4px solid #0a0a0a;
}
.timeline-item:nth-child(odd)::before {
right: -1.5rem;
}
.timeline-item:nth-child(even)::before {
left: -1.5rem;
}
.timeline-content {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 2rem;
backdrop-filter: blur(10px);
}
.timeline-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #667eea;
}
.timeline-content .year {
font-size: 0.9rem;
color: #888888;
margin-bottom: 1rem;
}
.timeline-content p {
color: #cccccc;
line-height: 1.6;
}
.cta-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 6rem 0;
text-align: center;
color: white;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}
.cta-content h2 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 2rem;
}
.cta-content p {
font-size: 1.3rem;
line-height: 1.6;
margin-bottom: 3rem;
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.cta-btn {
padding: 1.5rem 3rem;
border: none;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
}
.cta-btn.primary {
background: white;
color: #667eea;
}
.cta-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.cta-btn.secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-btn.secondary:hover {
background: white;
color: #667eea;
transform: translateY(-2px);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* Responsive Design */
@media (max-width: 768px) {
.about-hero h1 {
font-size: 2.5rem;
}
.story-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.timeline::before {
left: 2rem;
}
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) {
text-align: left;
padding-left: 4rem;
padding-right: 0;
}
.timeline-item:nth-child(odd)::before,
.timeline-item:nth-child(even)::before {
left: 1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
</style>
<!-- About Hero Section -->
<section class="about-hero">
<div class="about-hero-content">
<h1>Our Story</h1>
<p>A journey of passion, perseverance, and the power of music to bring people together</p>
</div>
</section>
<!-- Main Content -->
<section class="about-content">
<!-- Childhood Story -->
<div class="story-section">
<div class="story-grid">
<div class="story-text">
<h2>A Child's Dream</h2>
<p>From the moment I could walk, I was <span class="highlight">drawn to music like a moth to flame</span>. As a child, I would spend hours listening to every sound, every rhythm, every melody that crossed my path.</p>
<p>My parents still tell stories of how I would <span class="highlight">hum along to commercials</span>, tap rhythms on any surface I could find, and beg them to let me stay up just a little longer to hear one more song on the radio.</p>
<p>Music wasn't just entertainment to me – it was <span class="highlight">pure magic</span>. It had the power to make me laugh, cry, dance, and dream. It was my first language, my first love, my first escape into a world where anything was possible.</p>
</div>
<div class="story-image">
<div class="icon">🎵</div>
<p style="color: #cccccc; font-style: italic;">"Music was my first language"</p>
</div>
</div>
</div>
<!-- The Struggle -->
<div class="story-section">
<div class="story-grid">
<div class="story-image">
<div class="icon">💪</div>
<p style="color: #cccccc; font-style: italic;">"Every obstacle was a stepping stone"</p>
</div>
<div class="story-text">
<h2>The Fight to Create</h2>
<p>But creating music wasn't easy. I faced <span class="highlight">countless obstacles</span> – expensive equipment, complex software, limited access to professional tools, and the constant feeling that creating music was reserved for the privileged few.</p>
<p>I watched friends with incredible talent give up on their musical dreams because they couldn't afford the tools they needed. I saw brilliant artists struggle to share their work with the world because the barriers were too high.</p>
<p>That's when I realized I had to do something. I couldn't just <span class="highlight">accept that music creation was out of reach</span> for so many people. I had to fight to change that.</p>
</div>
</div>
</div>
<!-- Mission Section -->
<div class="mission-section">
<div class="mission-content">
<h2>Our Mission</h2>
<p>To democratize music creation and empower every person on this planet to share their unique voice with the world. We believe that <span class="highlight">everyone has a song inside them</span>, waiting to be heard.</p>
<div class="values-grid">
<div class="value-card">
<div class="icon">🎨</div>
<h3>Creativity for All</h3>
<p>We believe that music creation should be accessible to everyone, regardless of their background, resources, or technical skills.</p>
</div>
<div class="value-card">
<div class="icon">❤️</div>
<h3>Spread Love</h3>
<p>Music has the power to heal, unite, and inspire. We're here to help you spread love through your creations.</p>
</div>
<div class="value-card">
<div class="icon">🌍</div>
<h3>Global Community</h3>
<p>We're building a worldwide community of creators who support, inspire, and learn from each other.</p>
</div>
</div>
</div>
</div>
<!-- Journey Timeline -->
<div class="journey-section">
<div class="story-section">
<h2 style="text-align: center; font-size: 3rem; margin-bottom: 4rem; background: linear-gradient(135deg, #667eea, #f093fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Our Journey</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h3>The Dream Begins</h3>
<div class="year">Childhood</div>
<p>First discovered the magic of music and knew it would be my life's passion.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>The Struggle</h3>
<div class="year">Teenage Years</div>
<p>Faced the harsh reality that music creation tools were expensive and inaccessible to most people.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>The Vision</h3>
<div class="year">Early Adulthood</div>
<p>Realized that I had to create a platform that would make music creation accessible to everyone.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>The Fight</h3>
<div class="year">Development</div>
<p>Spent countless hours, faced numerous setbacks, but never gave up on the dream of democratizing music creation.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>SoundStudioPro</h3>
<div class="year">Today</div>
<p>Finally created the platform that brings music creation to everyone, spreading love and creativity worldwide.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="cta-section">
<div class="cta-content">
<h2>Join Our Mission</h2>
<p>Be part of a movement that's changing the world through music. Create, share, and spread love with your unique voice.</p>
<div class="cta-buttons">
<a href="/#create" class="cta-btn primary">
<i class="fas fa-plus"></i> Start Creating
</a>
<a href="/artists.php" class="cta-btn secondary">
<i class="fas fa-users"></i> Meet Our Community
</a>
</div>
</div>
</section>
<script>
// Add scroll 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 animated elements
document.addEventListener('DOMContentLoaded', function() {
const animatedElements = document.querySelectorAll('.story-text, .story-image, .value-card, .timeline-item');
animatedElements.forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
observer.observe(el);
});
});
</script>
<?php
// Include footer (AJAX navigation removed - always include footer)
include 'includes/footer.php';
?>