<!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>Our Services - 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">
        <link rel="stylesheet" href="cursor.css">
    </head>
    <body>
        <div id="navbar-container"></div>
        <main class="main-content">
            <section class="hero-section" id="home">
                <h2 class="hero-title">Yumeji Studio - Current Services</h2>
                <p class="hero-description">Explore our tools – more coming soon!</p>
            </section>
    <section class="features-section3" id="tools">
        <h3 class="features-title3">Our Tools</h3>
        <div class="features-container3">
        <a href="https://passgen.yumeji.studio" target="_blank" style="text-decoration: none;">
            <div class="feature3">
                <img src="tools1.png" alt="Tool 1" class="feature-icon3">
                <h4 class="feature-title3">Password generator</h4>
                <p class="feature-description3">Generate strong, secure passwords with ease. Our tool creates random, customizable passwords to enhance your online security, ensuring you never have to worry about weak or reused passwords again.</p>
            </div>
        </a>
        </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>