<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenWorlds Learning Center</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="learning-page">
    <nav class="navbar">
        <div class="container">
            <div class="brand-wrap">
                <img src="assets/openworlds-logo.png" alt="OpenWorlds logo" class="ow-logo">
                <div class="nav-brand">OpenWorlds</div>
            </div>
            <ul class="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html#about">About</a></li>
                <li><a href="index.html#contact">Contact</a></li>
                <li><a href="learning.html">Learning</a></li>
                <li><a href="careers.html">Careers</a></li>
                <li><a href="community.html">Community</a></li>
            </ul>
        </div>
    </nav>

    <header class="topbar">
        <div class="container learning-hero">
            <div>
                <div class="hero-badge"><i class="fas fa-graduation-cap"></i> Learning Center</div>
                <h1>Learn coding for everyone.</h1>
                <p>OpenWorlds Learning is a public, beginner-friendly place for anyone to learn coding, web development, game logic, backend systems, AI tools, and the skills needed to build modern digital products.</p>
            </div>
            <div class="hero-callout">
                <h3>What you'll learn</h3>
                <ul>
                    <li><i class="fas fa-check"></i> HTML, CSS, JavaScript</li>
                    <li><i class="fas fa-check"></i> Frontend, backend, and full stack</li>
                    <li><i class="fas fa-check"></i> Game development and UGC systems</li>
                    <li><i class="fas fa-check"></i> AI tools, APIs, and deployment</li>
                </ul>
            </div>
        </div>
    </header>

    <main class="learning-content">
        <div class="container">
            <div class="section-heading narrow-heading">
                <p class="eyebrow">Choose your path</p>
                <h2>Start wherever you are.</h2>
            </div>

            <div class="path-grid">
                <article class="path-card">
                    <div class="path-icon"><i class="fas fa-seedling"></i></div>
                    <h3>Start from Zero</h3>
                    <p>Learn the basics of coding, problem solving, and how websites and apps work.</p>
                </article>
                <article class="path-card">
                    <div class="path-icon"><i class="fas fa-palette"></i></div>
                    <h3>Frontend</h3>
                    <p>Explore HTML, CSS, JavaScript, responsive design, UI/UX, and modern frontend tools.</p>
                </article>
                <article class="path-card">
                    <div class="path-icon"><i class="fas fa-database"></i></div>
                    <h3>Backend</h3>
                    <p>Learn APIs, databases, authentication, server logic, cloud deployment, and app architecture.</p>
                </article>
                <article class="path-card">
                    <div class="path-icon"><i class="fas fa-code-branch"></i></div>
                    <h3>Full Stack</h3>
                    <p>Connect the frontend and backend to build complete products from idea to deployment.</p>
                </article>
                <article class="path-card">
                    <div class="path-icon"><i class="fas fa-gamepad"></i></div>
                    <h3>Game Dev</h3>
                    <p>Build interactivity, game loops, UGC systems, creative tooling, and player-centered experiences.</p>
                </article>
                <article class="path-card">
                    <div class="path-icon"><i class="fas fa-brain"></i></div>
                    <h3>AI & Tools</h3>
                    <p>Use AI to automate work, improve development, and learn how modern coding workflows evolve.</p>
                </article>
            </div>

            <div class="filter-bar">
                <button class="filter-btn active" data-filter="all">All</button>
                <button class="filter-btn" data-filter="code">Code</button>
                <button class="filter-btn" data-filter="frontend">Frontend</button>
                <button class="filter-btn" data-filter="backend">Backend</button>
                <button class="filter-btn" data-filter="games">Games</button>
                <button class="filter-btn" data-filter="ai">AI</button>
            </div>

            <div class="lesson-grid">
                <article class="lesson-card" data-category="code">
                    <div class="tag">Code</div>
                    <h3>HTML & CSS for Beginners</h3>
                    <p>Learn how to structure webpages, style layouts, and build clean, responsive interfaces from scratch.</p>
                    <div class="lesson-meta">
                        <span>Level: Beginner</span>
                        <span>8 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="code">
                    <div class="tag">Code</div>
                    <h3>JavaScript Fundamentals</h3>
                    <p>Understand variables, functions, conditions, arrays, loops, logic, and the core building blocks of interactivity.</p>
                    <div class="lesson-meta">
                        <span>Level: Beginner</span>
                        <span>10 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="frontend">
                    <div class="tag">Frontend</div>
                    <h3>Responsive Web Design</h3>
                    <p>Learn how to build pages that look great on desktops, tablets, and mobile screens using modern layouts.</p>
                    <div class="lesson-meta">
                        <span>Level: Beginner</span>
                        <span>7 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="frontend">
                    <div class="tag">Frontend</div>
                    <h3>JavaScript for User Interfaces</h3>
                    <p>Go beyond basics and learn DOM manipulation, events, UI updates, forms, and user interactions.</p>
                    <div class="lesson-meta">
                        <span>Level: Intermediate</span>
                        <span>9 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="backend">
                    <div class="tag">Backend</div>
                    <h3>Node.js & APIs</h3>
                    <p>Build simple servers, create API routes, handle requests, and connect apps to real data and services.</p>
                    <div class="lesson-meta">
                        <span>Level: Intermediate</span>
                        <span>11 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="backend">
                    <div class="tag">Backend</div>
                    <h3>Databases & SQL</h3>
                    <p>Learn how data is stored, queried, and managed with SQL, databases, tables, relationships, and models.</p>
                    <div class="lesson-meta">
                        <span>Level: Intermediate</span>
                        <span>8 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="backend">
                    <div class="tag">Backend</div>
                    <h3>Authentication & Security</h3>
                    <p>Understand how login systems, sessions, tokens, authorization, validation, and safe app design work.</p>
                    <div class="lesson-meta">
                        <span>Level: Intermediate</span>
                        <span>6 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="games">
                    <div class="tag">Games</div>
                    <h3>Game Logic & Interactivity</h3>
                    <p>Learn how movement, collisions, scoring, states, and event-driven systems work in playable experiences.</p>
                    <div class="lesson-meta">
                        <span>Level: Beginner</span>
                        <span>7 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="games">
                    <div class="tag">Games</div>
                    <h3>UGC & Creator Systems</h3>
                    <p>Explore how user-generated systems are built, moderated, and scaled inside collaborative platforms.</p>
                    <div class="lesson-meta">
                        <span>Level: Intermediate</span>
                        <span>6 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="ai">
                    <div class="tag">AI</div>
                    <h3>AI for Developers</h3>
                    <p>Learn how AI tools can support coding, testing, prompt writing, automation, and creative problem solving.</p>
                    <div class="lesson-meta">
                        <span>Level: Beginner</span>
                        <span>5 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="ai">
                    <div class="tag">AI</div>
                    <h3>Prompt Engineering Basics</h3>
                    <p>Learn how to ask better questions, structure prompts, and get useful responses from AI assistants.</p>
                    <div class="lesson-meta">
                        <span>Level: Beginner</span>
                        <span>4 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="lesson-card" data-category="code">
                    <div class="tag">Code</div>
                    <h3>Git & GitHub Essentials</h3>
                    <p>Learn version control, collaboration, branching, pull requests, and how developers work on real projects.</p>
                    <div class="lesson-meta">
                        <span>Level: Beginner</span>
                        <span>5 lessons</span>
                    </div>
                    <a class="lesson-link" href="#">Start lesson <i class="fas fa-arrow-right"></i></a>
                </article>
            </div>
        </div>
    </main>

    <section class="learning-why">
        <div class="container">
            <div class="section-heading narrow-heading">
                <p class="eyebrow">Why OpenWorlds Learning?</p>
                <h2>Built for curious people.</h2>
            </div>

            <div class="why-grid">
                <div class="why-card">
                    <i class="fas fa-user-graduate"></i>
                    <h3>Beginner friendly</h3>
                    <p>Start with foundational concepts and build up step by step without feeling overwhelmed.</p>
                </div>
                <div class="why-card">
                    <i class="fas fa-rocket"></i>
                    <h3>Practical learning</h3>
                    <p>Each path is focused on building useful skills for real projects and real products.</p>
                </div>
                <div class="why-card">
                    <i class="fas fa-code"></i>
                    <h3>All coding paths</h3>
                    <p>Learn web development, backend systems, game logic, AI tools, and creator-focused development.</p>
                </div>
                <div class="why-card">
                    <i class="fas fa-users"></i>
                    <h3>Community focus</h3>
                    <p>OpenWorlds connects learning with creator culture, collaboration, and product building.</p>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <div class="brand-wrap">
                        <img src="assets/openworlds-logo.png" alt="OpenWorlds logo" class="ow-logo">
                        <h4>OpenWorlds</h4>
                    </div>
                    <p>Empowering creators worldwide</p>
                </div>
                <div class="footer-section">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="learning.html">Learning</a></li>
                        <li><a href="careers.html">Careers</a></li>
                        <li><a href="community.html">Community</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Follow Us</h4>
                    <div class="social-links">
                        <a href="https://discord.gg/TRJ8ZmBKDS"><i class="fab fa-discord"></i></a>
                        <a href="https://www.youtube.com/@Official-OpenWorlds"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 OpenWorlds. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>
