Criar Site Loja Roupas

const App = () => {
  return (
    <div className="min-h-screen bg-gradient-to-r from-pink-100 to-purple-100">
      {/* Hero Section */}
      <section className="flex flex-col items-center justify-center h-screen bg-cover bg-center" style={{ backgroundImage: `url('https://placehold.co/1200x800')` }}>
        <h1 className="text-6xl font-bold text-white mb-4">Welcome to Femina Fashion</h1>
        <p className="text-xl text-white mb-8">Discover the latest trends in women's fashion</p>
        <button className="bg-pink-500 text-white px-8 py-3 rounded-full hover:bg-pink-600">Shop Now</button>
      </section>

      {/* Featured Products */}
      <section className="py-16">
        <h2 className="text-4xl font-bold text-center mb-12">Featured Products</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 px-8">
          {[1, 2, 3].map((item) => (
            <div key={item} className="bg-white p-6 rounded-lg shadow-lg">
              <img src={`https://placehold.co/300x400`} alt="Product" className="w-full h-64 object-cover mb-4" />
              <h3 className="text-xl font-semibold mb-2">Product {item}</h3>
              <p className="text-gray-600 mb-4">$99.99</p>
              <button className="bg-purple-500 text-white px-6 py-2 rounded-full hover:bg-purple-600">Add to Cart</button>
            </div>
          ))}
        </div>
      </section>

      {/* About Us */}
      <section className="bg-white py-16">
        <div className="container mx-auto px-8">
          <h2 className="text-4xl font-bold text-center mb-12">About Us</h2>
          <p className="text-xl text-center text-gray-700">We are a leading fashion brand dedicated to bringing you the latest trends and styles in women's clothing. Our mission is to empower women through fashion.</p>
        </div>
      </section>

      {/* Testimonials */}
      <section className="bg-pink-50 py-16">
        <div className="container mx-auto px-8">
          <h2 className="text-4xl font-bold text-center mb-12">What Our Customers Say</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {[1, 2].map((item) => (
              <div key={item} className="bg-white p-6 rounded-lg shadow-lg">
                <p className="text-gray-700 mb-4">"I absolutely love the clothes from Femina Fashion! The quality is amazing and the styles are always on point."</p>
                <p className="text-gray-600">- Customer {item}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Blog */}
      <section className="py-16">
        <div className="container mx-auto px-8">
          <h2 className="text-4xl font-bold text-center mb-12">Latest from Our Blog</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[1, 2, 3].map((item) => (
              <div key={item} className="bg-white p-6 rounded-lg shadow-lg">
                <img src={`https://placehold.co/300x200`} alt="Blog" className="w-full h-48 object-cover mb-4" />
                <h3 className="text-xl font-semibold mb-2">Blog Post {item}</h3>
                <p className="text-gray-600 mb-4">Read our latest blog post on the latest fashion trends.</p>
                <button className="bg-purple-500 text-white px-6 py-2 rounded-full hover:bg-purple-600">Read More</button>
              </div>
            ))}
        </div>
        </div>
      </section>

      {/* Newsletter */}
      <section className="bg-purple-500 py-16">
        <div className="container mx-auto px-8 text-center">
          <h2 className="text-4xl font-bold text-white mb-4">Subscribe to Our Newsletter</h2>
          <p className="text-xl text-white mb-8">Get the latest updates on our products and promotions.</p>
          <div className="flex justify-center">
            <input type="email" placeholder="Enter your email" className="px-6 py-3 rounded-l-full focus:outline-none"/>
            <button className="bg-pink-500 text-white px-8 py-3 rounded-r-full hover:bg-pink-600">Subscribe</button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-800 py-12">
        <div className="container mx-auto px-8 text-center text-white">
          <p className="text-lg">© 2025 Femina Fashion. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;