3D女性代码创作

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App bg-gradient-to-r from-pink-500 to-purple-900 min-h-screen">
      <header className="App-header p-8">
        <h1 className="text-6xl font-bold text-white">3D Woman Influence</h1>
        <p className="text-xl text-gray-200 mt-4">Empowering the Future of Women in Tech</p>
      </header>

      <section className="about-us py-20 px-8">
        <h2 className="text-4xl font-semibold text-white mb-8">About Us</h2>
        <p className="text-xl text-gray-200 leading-relaxed">Our mission is to inspire and support women in the tech industry through innovative 3D visualization and storytelling.</p>
      </section>

      <section className="projects py-20 px-8 bg-white bg-opacity-10">
        <h2 className="text-4xl font-semibold text-white mb-8">Our Projects</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="project-card p-6 bg-white bg-opacity-20 rounded-lg">
            <img src="https://placehold.co/300X300" alt="Project 1" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-2xl font-semibold text-white mt-4">Project 1</h3>
            <p className="text-gray-200 mt-2">Innovative 3D modeling for women in tech.</p>
          </div>
          <div className="project-card p-6 bg-white bg-opacity-20 rounded-lg">
            <img src="https://placehold.co/300X300" alt="Project 2" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-2xl font-semibold text-white mt-4">Project 2</h3>
            <p className="text-gray-200 mt-2">Interactive 3D storytelling workshops.</p>
          </div>
          <div className="project-card p-6 bg-white bg-opacity-20 rounded-lg">
            <img src="https://placehold.co/300X300" alt="Project 3" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-2xl font-semibold text-white mt-4">Project 3</h3>
            <p className="text-gray-200 mt-2">Virtual reality experiences for tech education.</p>
          </div>
        </div>
      </section>

      <section className="team py-20 px-8">
        <h2 className="text-4xl font-semibold text-white mb-8">Our Team</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="team-member p-6 bg-white bg-opacity-20 rounded-lg">
            <img src="https://placehold.co/300X300" alt="Team Member 1" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-2xl font-semibold text-white mt-4">Jane Doe</h3>
            <p className="text-gray-200 mt-2">CEO & Founder</p>
          </div>
          <div className="team-member p-6 bg-white bg-opacity-20 rounded-lg">
            <img src="https://placehold.co/300X300" alt="Team Member 2" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-2xl font-semibold text-white mt-4">John Smith</h3>
            <p className="text-gray-200 mt-2">Lead Developer</p>
          </div>
          <div className="team-member p-6 bg-white bg-opacity-20 rounded-lg">
            <img src="https://placehold.co/300X300" alt="Team Member 3" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-2xl font-semibold text-white mt-4">Emily Johnson</h3>
            <p className="text-gray-200 mt-2">Creative Director</p>
          </div>
        </div>
      </section>

      <section className="testimonials py-20 px-8 bg-white bg-opacity-10">
        <h2 className="text-4xl font-semibold text-white mb-8">Testimonials</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div className="testimonial p-6 bg-white bg-opacity-20 rounded-lg">
            <p className="text-gray-200 italic">"An inspiring platform that truly supports women in tech."</p>
            <p className="text-gray-200 mt-4">- Sarah Lee</p>
          </div>
          <div className="testimonial p-6 bg-white bg-opacity-20 rounded-lg">
            <p className="text-gray-200 italic">"The 3D visualization workshops changed how I see technology."</p>
            <p className="text-gray-200 mt-4">- Angela Martinez</p>
          </div>
        </div>
      </section>

      <section className="contact py-20 px-8">
        <h2 className="text-4xl font-semibold text-white mb-8">Contact Us</h2>
        <form className="max-w-2xl mx-auto">
          <div className="mb-4">
            <label className="block text-white mb-2">Name</label>
            <input type="text" className="w-full p-2 bg-white bg-opacity-20 border border-gray-300 rounded text-white" />
          </div>
          <div className="mb-4">
            <label className="block text-white mb-2">Email</label>
            <input type="email" className="w-full p-2 bg-white bg-opacity-20 border border-gray-300 rounded text-white" />
          </div>
          <div className="mb-4">
            <label className="block text-white mb-2">Message</label>
            <textarea rows="4" className="w-full p-2 bg-white bg-opacity-20 border border-gray-300 rounded text-white"></textarea>
          </div>
          <button type="submit" className="bg-pink-600 text-white px-6 py-2 rounded hover:bg-pink-700">Send Message</button>
        </form>
      </section>

      <footer className="py-10 px-8 bg-black bg-opacity-20">
        <p className="text-center text-gray-200">© 2025 3D Woman Influence. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;