<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Yumeji Studio</title>
        <link rel="icon" href="icon.ico" type="image/x-icon">
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="navbar.css">
        <link rel="stylesheet" href="footer.css">
    </head>

    <body>
        <div id="navbar-container"></div>
        <main class="main-content">
            <section class="hero-section" id="home">
                <h2 class="hero-title">Welcome to Yumeji Studio</h2>
                <p class="hero-description">Explore our innovative tools and
                    services. Build your future with us.</p>
            </section>

            <section class="features-section" id="features">
                <h3 class="features-title">Why Choose Us?</h3>
                <div class="features-container">
                    <a href="https://yumejistudio.com/services" target="_blank" class="linktoservices">
                    <div class="feature linktoservices">
                        <img src="tools.png" alt="Feature 1"
                            class="feature-icon">
                        <h4 class="feature-title">Cutting-Edge Tools</h4>
                        <p class="feature-description">Access state-of-the-art
                            solutions designed to empower your business.</p>
                    </div> </a>
                    
                    <div class="feature">
                        <img src="ux.png" alt="Feature 2" class="feature-icon">
                        <h4 class="feature-title">User-Friendly Interface</h4>
                        <p class="feature-description">Navigate our platform
                            effortlessly with intuitive design.</p>
                    </div>

                    <div class="feature">
                        <img src="24.png" alt="Feature 3" class="feature-icon">
                        <h4 class="feature-title">24/7 Support</h4>
                        <p class="feature-description">Get round-the-clock
                            assistance from our dedicated support team.</p>
                    </div>
                </div>
            </section>

            <hr class="divider">

            <section class="features-section2" id="who-are-we">
                <h3 class="features-title2">Who Are We?</h3>
                <div class="features-container2">
                    <div class="feature2">
                        <h4 class="feature-title2">Yumeji Studio</h4>
                        <p class="feature-description2">Yumeji Studio is a
                            passion project created by a solo developer. We aim
                            to create tools that empower people and businesses,
                            despite being a small, independent studio.</p>
                    </div>

                    <div class="feature2">
                        <h4 class="feature-title2">Support Through
                            Donations</h4>
                        <p class="feature-description2">As a studio that doesn’t
                            earn revenue yet, we rely on the generosity of our
                            community. Your donations help us keep going and
                            develop even better tools!</p>
                            <a href="https://ko-fi.com/yumejistudio" target="_blank"><button class="btns">Donate!</button></a>
                        </div>

                    <div class="feature2">
                        <h4 class="feature-title2">Always Free Tools</h4>
                        <p class="feature-description2">Our goal is to provide
                            powerful tools that are accessible to everyone,
                            regardless of their budget. While we may offer
                            premium versions for those seeking additional
                            features, we are committed to ensuring that the core
                            functionality of our tools remains available to all.
                            We believe in making technology accessible, without
                            compromising on quality or value.</p>
                    </div>

                    <div class="feature2">
                        <h4 class="feature-title2">Our Vision</h4>
                        <p class="feature-description2">While we are a small
                            team, we’re constantly growing. We’re working
                            towards building a full-fledged platform where
                            everyone can benefit from our work, with more tools
                            and resources coming soon!</p>
                    </div>

                    <div class="feature2">
                        <h4 class="feature-title2">Join the Community</h4>
                        <p class="feature-description2">Our community is the
                            heart of Yumeji Studio. We’re always looking for
                            feedback, ideas, and contributors to help make our
                            tools even better. Together, we can create something
                            amazing!</p>
                        <a href="https://discord.gg/AYnR9wQKUY" target="_blank"><button class="btns">Join!</button></a>
                    </div>
                    
                    <div class="feature2">
                        <h4 class="feature-title2">Patience and Progress</h4>
                        <p class="feature-description2">As an independent, small studio, some updates may take time. We appreciate your patience and understanding as we continue to grow, refine our tools, and enhance your experience with us.</p>
                    </div>
                </div>
            </section>

            <section class="testimonials-section" id="testimonials">
                <h3 class="testimonials-title">What Our Users Say</h3>
                <div class="testimonials-container">
                    <blockquote class="testimonial">
                        <p>"I have been working on this project for a while, I love what we do. Our tools are simply the best!"</p>
                        <footer>- CEO</footer>
                    </blockquote>
                </div>
            </section>

            <section class="contact-section" id="contact">
                <h3 class="contact-title">Get in Touch</h3>
                <form class="contact-form">
                    <input type="text" name="name" placeholder="Your Name"
                        class="form-input" required>
                    <input type="email" name="email" placeholder="Your Email"
                        class="form-input" required>
                    <textarea name="message" placeholder="Your Message"
                        class="form-textarea" required></textarea>
                    <button type="submit" class="form-button">Send
                        Message</button>
                </form>
            </section>
        </main>

        <div id="footer-container"></div>

        <script>
        function loadHTML(containerId, filePath) {
            fetch(filePath)
                .then(response => response.text())
                .then(data => {
                    document.getElementById(containerId).innerHTML = data;
                    if (containerId === 'navbar-container') {
                        loadNavbarScript();
                    }
                })
                .catch(error => console.error('Error loading HTML file:', error));
        }

        loadHTML('navbar-container', 'navbar.html');
        loadHTML('footer-container', 'footer.html');

        function loadNavbarScript() {
            const script = document.createElement('script');
            script.src = 'navbar.js';
            document.body.appendChild(script);
        }
    </script>
    </body>
</html>

