تشغيل ازرار التطبيق

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className='App'>
        {/* Hero Section */}
        <section className='flex flex-col items-center justify-center bg-gradient-to-b from-blue-800 to-blue-600 text-white py-20'>
          <h1 className='text-6xl font-bold mb-4'>Welcome to Our Platform</h1>
          <p className='text-xl mb-8'>Join us and explore the future!</p>
          <button className='bg-white text-blue-800 px-8 py-3 rounded-full font-semibold hover:bg-blue-100 transition duration-300'>Get Started</button>
        </section>

        {/* Features Section */}
        <section className='py-20 px-4'>
          <h2 className='text-4xl font-bold text-center mb-12'>Features</h2>
          <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
            <div className='bg-white p-8 rounded-lg shadow-lg text-center'>
              <img src='https://placehold.co/100x100' alt='Feature 1' className='mx-auto mb-4' />
              <h3 className='text-2xl font-bold mb-4'>Feature One</h3>
              <p className='text-gray-600'>Discover the first feature that will change your life.</p>
            </div>
            <div className='bg-white p-8 rounded-lg shadow-lg text-center'>
              <img src='https://placehold.co/100x100' alt='Feature 2' className='mx-auto mb-4' />
              <h3 className='text-2xl font-bold mb-4'>Feature Two</h3>
              <p className='text-gray-600'>Explore the second feature that will enhance your experience.</p>
            </div>
            <div className='bg-white p-8 rounded-lg shadow-lg text-center'>
              <img src='https://placehold.co/100x100' alt='Feature 3' className='mx-auto mb-4' />
              <h3 className='text-2xl font-bold mb-4'>Feature Three</h3>
              <p className='text-gray-600'>Experience the third feature that will redefine your expectations.</p>
            </div>
          </div>
        </section>

        {/* Testimonials Section */}
        <section className='bg-gray-100 py-20 px-4'>
          <h2 className='text-4xl font-bold text-center mb-12'>Testimonials</h2>
          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8'>
            <div className='bg-white p-8 rounded-lg shadow-lg'>
              <p className='text-gray-600 mb-4'>"This platform has transformed the way I work. Highly recommended!"</p>
              <div className='flex items-center'>
                <img src='https://placehold.co/50x50' alt='User 1' className='rounded-full mr-4' />
                <div>
                  <h4 className='font-bold'>John Doe</h4>
                  <p className='text-gray-500'>CEO, Company One</p>
                </div>
              </div>
            </div>
            <div className='bg-white p-8 rounded-lg shadow-lg'>
              <p className='text-gray-600 mb-4'>"Incredible features and excellent support. A game-changer!"</p>
              <div className='flex items-center'>
                <img src='https://placehold.co/50x50' alt='User 2' className='rounded-full mr-4' />
                <div>
                  <h4 className='font-bold'>Jane Smith</h4>
                  <p className='text-gray-500'>CTO, Company Two</p>
                </div>
              </div>
            </div>
            <div className='bg-white p-8 rounded-lg shadow-lg'>
              <p className='text-gray-600 mb-4'>"The best decision I've made for my business. Thank you!"</p>
              <div className='flex items-center'>
                <img src='https://placehold.co/50x50' alt='User 3' className='rounded-full mr-4' />
                <div>
                  <h4 className='font-bold'>Mike Johnson</h4>
                  <p className='text-gray-500'>Founder, Company Three</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Pricing Section */}
        <section className='py-20 px-4'>
          <h2 className='text-4xl font-bold text-center mb-12'>Pricing</h2>
          <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
            <div className='bg-white p-8 rounded-lg shadow-lg text-center'>
              <h3 className='text-2xl font-bold mb-4'>Basic</h3>
              <p className='text-gray-600 mb-4'>Perfect for individuals</p>
              <p className='text-4xl font-bold mb-4'>$9.99</p>
              <button className='bg-blue-800 text-white px-8 py-3 rounded-full font-semibold hover:bg-blue-700 transition duration-300'>Choose Plan</button>
            </div>
            <div className='bg-white p-8 rounded-lg shadow-lg text-center'>
              <h3 className='text-2xl font-bold mb-4'>Pro</h3>
              <p className='text-gray-600 mb-4'>Great for small teams</p>
              <p className='text-4xl font-bold mb-4'>$19.99</p>
              <button className='bg-blue-800 text-white px-8 py-3 rounded-full font-semibold hover:bg-blue-700 transition duration-300'>Choose Plan</button>
            </div>
            <div className='bg-white p-8 rounded-lg shadow-lg text-center'>
              <h3 className='text-2xl font-bold mb-4'>Enterprise</h3>
              <p className='text-gray-600 mb-4'>For large organizations</p>
              <p className='text-4xl font-bold mb-4'>$49.99</p>
              <button className='bg-blue-800 text-white px-8 py-3 rounded-full font-semibold hover:bg-blue-700 transition duration-300'>Choose Plan</button>
            </div>
          </div>
        </section>

        {/* Blog Section */}
        <section className='bg-gray-100 py-20 px-4'>
          <h2 className='text-4xl font-bold text-center mb-12'>From Our Blog</h2>
          <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
            <div className='bg-white p-8 rounded-lg shadow-lg'>
              <img src='https://placehold.co/300x200' alt='Blog 1' className='mb-4' />
              <h3 className='text-2xl font-bold mb-4'>Blog Post One</h3>
              <p className='text-gray-600'>Discover the latest trends in technology and how they can benefit your business.</p>
            </div>
            <div className='bg-white p-8 rounded-lg shadow-lg'>
              <img src='https://placehold.co/300x200' alt='Blog 2' className='mb-4' />
              <h3 className='text-2xl font-bold mb-4'>Blog Post Two</h3>
              <p className='text-gray-600'>Learn about the best practices for digital transformation in 2025.</p>
            </div>
            <div className='bg-white p-8 rounded-lg shadow-lg'>
              <img src='https://placehold.co/300x200' alt='Blog 3' className='mb-4' />
              <h3 className='text-2xl font-bold mb-4'>Blog Post Three</h3>
              <p className='text-gray-600'>Explore the future of AI and its impact on various industries.</p>
            </div>
          </div>
        </section>

        {/* Contact Section */}
        <section className='py-20 px-4'>
          <h2 className='text-4xl font-bold text-center mb-12'>Contact Us</h2>
          <form className='max-w-2xl mx-auto'>
            <div className='grid grid-cols-1 md:grid-cols-2 gap-8'>
              <input type='text' placeholder='Your Name' className='p-4 rounded-lg border border-gray-300' />
              <input type='email' placeholder='Your Email' className='p-4 rounded-lg border border-gray-300' />
            </div>
            <textarea placeholder='Your Message' className='w-full p-4 rounded-lg border border-gray-300 mt-8' rows='5'></textarea>
            <button type='submit' className='bg-blue-800 text-white px-8 py-3 rounded-full font-semibold hover:bg-blue-700 transition duration-300 mt-8'>Send Message</button>
          </form>
        </section>

        {/* Footer Section */}
        <footer className='bg-blue-800 text-white py-12'>
          <div className='container mx-auto px-4'>
            <div className='grid grid-cols-1 md:grid-cols-4 gap-8'>
              <div>
                <h3 className='text-2xl font-bold mb-4'>Our Company</h3>
                <p className='text-gray-300'>Leading the way in innovative solutions for the future.</p>
              </div>
              <div>
                <h3 className='text-2xl font-bold mb-4'>Quick Links</h3>
                <ul>
                  <li className='mb-2'><a href='#' className='text-gray-300 hover:text-white'>Home</a></li>
                  <li className='mb-2'><a href='#' className='text-gray-300 hover:text-white'>Features</a></li>
                  <li className='mb-2'><a href='#' className='text-gray-300 hover:text-white'>Pricing</a></li>
                  <li className='mb-2'><a href='#' className='text-gray-300 hover:text-white'>Contact</a></li>
                </ul>
              </div>
              <div>
                <h3 className='text-2xl font-bold mb-4'>Resources</h3>
                <ul>
                  <li className='mb-2'><a href='#' className='text-gray-300 hover:text-white'>Blog</a></li>
                  <li className='mb-2'><a href='#' className='text-gray-300 hover:text-white'>Documentation</a></li>
                  <li className='mb-2'><a href='#' className='text-gray-300 hover:text-white'>Support</a></li>
                </ul>
              </div>
              <div>
                <h3 className='text-2xl font-bold mb-4'>Legal</h3>
                <ul>
                  <li className='mb-2'><a href='#' className='text-gray-300 hover:text-white'>Privacy Policy</a></li>
                  <li className='mb-2'><a href='#' className='text-gray-300 hover:text-white'>Terms of Service</a></li>
                  <li className='mb-2'><a href='#' className='text-gray-300 hover:text-white'>Copyright © 2025</a></li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    );
  }
}

export default App;