小学生プログラミング教室

import React from 'react';

export default function App() {
  return (
    <div className="min-h-screen bg-gradient-to-r from-blue-100 to-purple-100">
      {/* Navigation */}
      <nav className="p-6 bg-white shadow-md">
        <div className="container mx-auto flex justify-between items-center">
          <h1 className="text-2xl font-bold text-blue-600">Wonder Studio</h1>
          <ul className="flex space-x-6">
            <li><a href="#home" className="text-gray-700 hover:text-blue-600">Home</a></li>
            <li><a href="#about" className="text-gray-700 hover:text-blue-600">About</a></li>
            <li><a href="#courses" className="text-gray-700 hover:text-blue-600">Courses</a></li>
            <li><a href="#contact" className="text-gray-700 hover:text-blue-600">Contact</a></li>
          </ul>
        </div>
      </nav>

      {/* Hero Section */}
      <section id="home" className="py-20 bg-blue-50">
        <div className="container mx-auto text-center">
          <h2 className="text-5xl font-bold text-blue-900 mb-6">Welcome to Wonder Studio</h2>
          <p className="text-xl text-gray-700 mb-8">Empowering young minds with programming and abacus skills.</p>
          <a href="#courses" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Explore Courses</a>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-blue-900 text-center mb-10">About Us</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <img src="https://placehold.co/600x400" alt="About Us" className="rounded-lg shadow-lg" />
            </div>
            <div className="flex flex-col justify-center">
              <p className="text-gray-700 mb-4">Wonder Studio is dedicated to nurturing the creativity and analytical skills of children through programming and abacus classes. Our experienced instructors ensure a fun and engaging learning environment.</p>
              <p className="text-gray-700">Join us and watch your child's potential unfold!</p>
            </div>
          </div>
        </div>
      </section>

      {/* Courses Section */}
      <section id="courses" className="py-20 bg-blue-50">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-blue-900 text-center mb-10">Our Courses</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-2xl font-bold text-blue-900 mb-4">Programming Basics</h3>
              <p className="text-gray-700 mb-4">Introduction to programming concepts with fun projects.</p>
              <a href="#" className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Learn More</a>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-2xl font-bold text-blue-900 mb-4">Advanced Coding</h3>
              <p className="text-gray-700 mb-4">Dive deeper into coding with advanced techniques.</p>
              <a href="#" className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Learn More</a>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-2xl font-bold text-blue-900 mb-4">Abacus Mastery</h3>
              <p className="text-gray-700 mb-4">Master the ancient art of abacus for mental math.</p>
              <a href="#" className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Learn More</a>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-blue-900 text-center mb-10">Contact Us</h2>
          <form className="max-w-lg mx-auto">
            <div className="mb-6">
              <label className="block text-gray-700 mb-2" htmlFor="name">Name</label>
              <input type="text" id="name" className="w-full px-4 py-2 border rounded-lg" />
            </div>
            <div className="mb-6">
              <label className="block text-gray-700 mb-2" htmlFor="email">Email</label>
              <input type="email" id="email" className="w-full px-4 py-2 border rounded-lg" />
            </div>
            <div className="mb-6">
              <label className="block text-gray-700 mb-2" htmlFor="message">Message</label>
              <textarea id="message" className="w-full px-4 py-2 border rounded-lg" rows="4"></textarea>
            </div>
            <button type="submit" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Send Message</button>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-white py-10">
        <div className="container mx-auto text-center">
          <p className="text-gray-700">&copy; 2025 Wonder Studio. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}