Kibella Moda Evangelica 克隆网站

import React from 'react';

const App = () => {
  return (
    <div className='bg-gray-100 min-h-screen'>
      {/* Navigation */}
      <nav className='bg-white shadow-lg'>
        <div className='container mx-auto px-6 py-4 flex justify-between items-center'>
          <h1 className='text-xl font-bold text-gray-800'>Kibella Moda Evangelica</h1>
          <ul className='flex space-x-4'>
            <li><a href='#' className='text-gray-700 hover:text-gray-900'>Home</a></li>
            <li><a href='#' className='text-gray-700 hover:text-gray-900'>Shop</a></li>
            <li><a href='#' className='text-gray-700 hover:text-gray-900'>About</a></li>
            <li><a href='#' className='text-gray-700 hover:text-gray-900'>Contact</a></li>
          </ul>
        </div>
      </nav>

      {/* Hero Section */}
      <div className='bg-cover bg-center h-96' style={{backgroundImage: 'url(https://placehold.co/1200x600)'}}>
        <div className='flex items-center justify-center h-full bg-black bg-opacity-50'>
          <h2 className='text-6xl font-bold text-white'>Welcome to Kibella</h2>
        </div>
      </div>

      {/* Featured Products */}
      <div className='container mx-auto px-6 py-8'>
        <h3 className='text-3xl font-bold text-gray-800 mb-6'>Featured Products</h3>
        <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
          <div className='bg-white shadow-lg rounded-lg'>
            <img src='https://placehold.co/300x300' alt='Product' className='rounded-t-lg' />
            <div className='p-4'>
              <h4 className='text-xl font-semibold text-gray-800'>Product 1</h4>
              <p className='text-gray-600 mt-2'>$29.99</p>
            </div>
          </div>
          {/* Repeat for other products */}
        </div>
      </div>

      {/* About Section */}
      <div className='bg-gray-800 text-white py-12'>
        <div className='container mx-auto px-6'>
          <h3 className='text-4xl font-bold mb-6'>About Us</h3>
          <p className='text-gray-300 leading-relaxed'>We are dedicated to providing the best fashion products for evangelical believers around the world. Our mission is to inspire and empower through stylish yet modest designs.</p>
        </div>
      </div>

      {/* Contact Section */}
      <div className='container mx-auto px-6 py-8'>
        <h3 className='text-3xl font-bold text-gray-800 mb-6'>Contact Us</h3>
        <form className='max-w-lg mx-auto'>
          <input type='text' placeholder='Your Name' className='w-full p-3 mb-4 border border-gray-300 rounded-lg' />
          <input type='email' placeholder='Your Email' className='w-full p-3 mb-4 border border-gray-300 rounded-lg' />
          <textarea placeholder='Your Message' rows='4' className='w-full p-3 mb-4 border border-gray-300 rounded-lg'></textarea>
          <button type='submit' className='bg-gray-800 text-white px-6 py-2 rounded-lg hover:bg-gray-700'>Send</button>
        </form>
      </div>

      {/* Footer */}
      <footer className='bg-gray-900 text-white py-6'>
        <div className='container mx-auto px-6 text-center'>
          <p>&copy; 2025 Kibella Moda Evangelica. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;