YouTube频道指南

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

const App = () => {
  return (
    <div className='App bg-gray-900 text-white min-h-screen'>
      {/* Navbar */}
      <nav className='bg-gray-800 p-4'>
        <div className='container mx-auto flex justify-between items-center'>
          <h1 className='text-2xl font-bold'>YouTube Channel</h1>
          <ul className='flex space-x-4'>
            <li><a href='#home' className='hover:text-gray-400'>Home</a></li>
            <li><a href='#videos' className='hover:text-gray-400'>Videos</a></li>
            <li><a href='#about' className='hover:text-gray-400'>About</a></li>
            <li><a href='#contact' className='hover:text-gray-400'>Contact</a></li>
          </ul>
        </div>
      </nav>

      {/* Hero Section */}
      <section id='home' className='hero bg-gray-700 py-20'>
        <div className='container mx-auto text-center'>
          <h2 className='text-4xl font-bold mb-4'>Welcome to Our Channel</h2>
          <p className='text-xl mb-8'>Discover the best content on the planet!</p>
          <a href='#videos' className='bg-red-600 px-6 py-3 rounded-lg hover:bg-red-700'>Explore Videos</a>
        </div>
      </section>

      {/* Video Section */}
      <section id='videos' className='video-section py-16'>
        <div className='container mx-auto'>
          <h2 className='text-3xl font-bold mb-8 text-center'>Latest Videos</h2>
          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
            {[...Array(6)].map((_, i) => (
              <div key={i} className='bg-gray-800 rounded-lg overflow-hidden'>
                <img src='https://placehold.co/600X400' alt='Video Thumbnail' className='w-full' />
                <div className='p-4'>
                  <h3 className='text-xl font-semibold mb-2'>Video Title {i + 1}</h3>
                  <p className='text-gray-400'>Description of the video goes here.</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id='about' className='about-section bg-gray-700 py-16'>
        <div className='container mx-auto text-center'>
          <h2 className='text-3xl font-bold mb-8'>About Us</h2>
          <p className='text-xl mb-8'>We are a passionate group of content creators dedicated to bringing you the best videos on the web.</p>
          <div className='flex justify-center space-x-8'>
            <img src='https://placehold.co/150X150' alt='Team Member 1' className='rounded-full' />
            <img src='https://placehold.co/150X150' alt='Team Member 2' className='rounded-full' />
            <img src='https://placehold.co/150X150' alt='Team Member 3' className='rounded-full' />
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id='contact' className='contact-section py-16'>
        <div className='container mx-auto text-center'>
          <h2 className='text-3xl font-bold mb-8'>Contact Us</h2>
          <form className='max-w-lg mx-auto'>
            <input type='text' placeholder='Your Name' className='w-full p-3 mb-4 rounded-lg bg-gray-800' />
            <input type='email' placeholder='Your Email' className='w-full p-3 mb-4 rounded-lg bg-gray-800' />
            <textarea placeholder='Your Message' className='w-full p-3 mb-4 rounded-lg bg-gray-800' rows='5'></textarea>
            <button type='submit' className='bg-red-600 px-6 py-3 rounded-lg hover:bg-red-700'>Send Message</button>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className='bg-gray-800 py-8'>
        <div className='container mx-auto text-center'>
          <p className='text-gray-400'>© 2025 YouTube Channel. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;