<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - PlayHub</title>
    <style>
        :root {
            --primary: #6c5ce7;
            --primary-light: #a29bfe;
            --secondary: #fd79a8;
            --dark: #1f222d;
            --light: #f5f6fa;
            --gray: #636e72;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }
        
        header {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 10px;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            position: relative;
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
            font-size: 32px;
        }
        
        /* Navigation Styles */
        .nav-container {
            display: flex;
            align-items: center;
        }
        
        .nav-links {
            display: flex;
            gap: 25px;
            transform: translateX(-50%);
        }
        
        .nav-links a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s;
            position: relative;
        }
        
        .nav-links a:hover, .nav-links a.active {
            color: white;
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: white;
            transition: width 0.3s;
        }
        
        .nav-links a:hover::after, .nav-links a.active::after {
            width: 100%;
        }
        
        .user-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .search-bar {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            padding: 8px 15px;
            border-radius: 30px;
            color: white;
            display: flex;
            align-items: center;
            transition: all 0.3s;
            width: 200px;
        }
        
        .search-bar input {
            background: transparent;
            border: none;
            color: white;
            outline: none;
            width: 100%;
            font-size: 14px;
        }
        
        .search-bar input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        
        .search-bar i {
            margin-right: 8px;
            opacity: 0.7;
        }
        
        .search-bar:focus-within {
            background: rgba(255, 255, 255, 0.3);
        }
        
        /* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 10px;
            z-index: 1001;
        }
        
        /* Mobile Menu Styles */
        @media (max-width: 992px) {
            .mobile-menu-toggle {
                display: block;
            }
            
            .nav-container {
                position: fixed;
                top: 0;
                right: -100%;
                width: 80%;
                max-width: 350px;
                height: 100vh;
                background: linear-gradient(135deg, var(--primary), var(--primary-light));
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                padding: 80px 30px 30px;
                transition: right 0.3s ease-in-out;
                z-index: 1000;
                box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            }
            
            .nav-container.active {
                right: 0;
            }
            
            .nav-links {
                flex-direction: column;
                width: 100%;
                gap: 15px;
                margin-bottom: 30px;
            }
            
            .nav-links a {
                font-size: 18px;
                padding: 10px 0;
            }
            
            .user-actions {
                flex-direction: column;
                width: 100%;
                gap: 20px;
            }
            
            .search-bar {
                width: 100%;
            }
            
            .mobile-menu-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 999;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s, visibility 0.3s;
            }
            
            .mobile-menu-overlay.active {
                opacity: 1;
                visibility: visible;
            }
        }
        
        .hero {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            padding: 80px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
        }
        
        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .hero p {
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .main-content {
            padding: 60px 0;
        }
        
        .section {
            margin-bottom: 60px;
        }
        
        .about-content {
            background-color: white;
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .about-content h2 {
            color: var(--primary);
            margin: 30px 0 15px;
            font-size: 22px;
        }
        
        .about-content p {
            margin-bottom: 15px;
            color: var(--gray);
        }
        
        footer {
            background-color: var(--dark);
            color: white;
            padding: 60px 0 0;
        }
        
        .footer-content {
            display: grid;
            justify-items: center;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            font-size: 18px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            border-radius: 3px;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: #b2bec3;
            text-decoration: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .footer-links a:hover {
            color: white;
            transform: translateX(5px);
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-link {
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            text-decoration: none;
            justify-content: center;
            align-items: center;
            color: white;
            transition: all 0.3s;
        }
        
        .social-link:hover {
            background-color: var(--primary);
            transform: translateY(-3px);
        }
        
        .copyright {
            text-align: center;
            padding: 20px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #b2bec3;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 32px;
            }
            
            .about-content {
                padding: 25px;
            }
        }
        
        @media (max-width: 576px) {
            .about-content h2 {
                font-size: 20px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <a href="/" class="logo">
                    <i class="fas fa-gamepad"></i>
                    PlayHub
                </a>
                
                <!-- Mobile Menu Toggle Button -->
                <button class="mobile-menu-toggle" id="mobile-menu-toggle">
                    <i class="fas fa-bars"></i>
                </button>
                
                <!-- Mobile Menu Overlay -->
                <div class="mobile-menu-overlay" id="mobile-menu-overlay"></div>
                
                <!-- Navigation Container -->
                <div class="nav-container" id="nav-container">
                    <nav class="nav-links">
                        <a href="/">Home</a>
                        <a href="index.html#popular-games">Popular</a>
                        <a href="index.html#categories">Categories</a>
                        <a href="index.html#new-releases">New Releases</a>
                        <a href="#">Favorites</a>
                    </nav>
                    
                    <div class="user-actions">
                        <div class="search-bar">
                            <i class="fas fa-search"></i>
                            <input type="text" placeholder="Search games..." id="search-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>About PlayHub</h1>
                <p>Discover the story behind the ultimate HTML5 gaming platform</p>
            </div>
        </div>
    </section>
    
    <main class="main-content">
        <div class="container">
            <section class="section">
                <div class="about-content">
                    <h2>Our Story</h2>
                    <p>Founded in 2020, PlayHub began as a small project by a group of gaming enthusiasts who wanted to create a platform where people could enjoy high-quality HTML5 games without downloads or installations. What started as a hobby quickly grew into one of the most popular gaming platforms on the web.</p>
                    
                    <h2>Our Mission</h2>
                    <p>At PlayHub, our mission is simple: to provide free, accessible, and fun gaming experiences to everyone. We believe that games should be available to all, regardless of device or location. That's why we've focused on HTML5 technology, allowing our games to run smoothly on any modern browser.</p>
                    
                    <h2>What Makes Us Different</h2>
                    <p>Unlike other gaming platforms, PlayHub is completely free with no hidden costs. We carefully curate our game collection to ensure the highest quality and most enjoyable experiences. Our team works tirelessly to add new games regularly and improve the platform based on user feedback.</p>
                    </div>
                </div>
            </section>
        </div>
    </main>
    
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>PlayHub</h3>
                    <p>Your ultimate destination for free HTML5 games. Play instantly without downloads.</p>
                    <div class="social-links">
                        <a href="https://www.facebook.com" class="social-link" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>
                        <a href="https://www.twitter.com" class="social-link" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
                        <a href="https://www.instagram.com/" class="social-link" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
                        <a href="https://www.youtube.com/" class="social-link" target="_blank" rel="noopener noreferrer"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
               
                <div class="footer-column">
                    <h3>Important Links</h3>
                    <ul class="footer-links">
                        <li><a href="/"><i class="fas fa-chevron-right"></i> Home</a></li>
                        <li><a href="/privacy"><i class="fas fa-chevron-right"></i> Privacy Policy</a></li>
                        <li><a href="/terms" class="active"><i class="fas fa-chevron-right"></i> Terms of Service</a></li>
                        <li><a href="/about"><i class="fas fa-chevron-right"></i> About Us</a></li>
                        <li><a href="/contact"><i class="fas fa-chevron-right"></i> Contact Us</a></li>
                    </ul>
                </div>
               
                <div class="footer-column">
                    <h3>Categories</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Action</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Adventure</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Puzzle</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Racing</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Sports</a></li>
                    </ul>
                </div>
            </div>
           
            <div class="copyright">
                &copy; 2025 PlayHub. All rights reserved.
            </div>
        </div>
    </footer>
    
    <script>
        // Mobile Menu Toggle Functionality
        const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
        const navContainer = document.getElementById('nav-container');
        const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
        
        mobileMenuToggle.addEventListener('click', function() {
            navContainer.classList.toggle('active');
            mobileMenuOverlay.classList.toggle('active');
            
            // Change icon based on menu state
            if (navContainer.classList.contains('active')) {
                this.innerHTML = '<i class="fas fa-times"></i>';
            } else {
                this.innerHTML = '<i class="fas fa-bars"></i>';
            }
        });
        
        // Close menu when clicking overlay
        mobileMenuOverlay.addEventListener('click', function() {
            navContainer.classList.remove('active');
            this.classList.remove('active');
            mobileMenuToggle.innerHTML = '<i class="fas fa-bars"></i>';
        });
    </script>
</body>
</html>