Create TikTok Page

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-black text-white font-sans">
      {/* Navigation */}
      <nav className="flex justify-between items-center p-4 border-b border-gray-800">
        <div className="text-2xl font-bold">TikTok</div>
        <div className="flex space-x-4">
          <button className="bg-white text-black px-4 py-2 rounded-full">Login</button>
          <button className="bg-red-600 text-white px-4 py-2 rounded-full">Sign Up</button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="flex flex-col items-center justify-center h-[80vh] bg-gradient-to-b from-black to-gray-900">
        <h1 className="text-6xl font-bold mb-4">Welcome to TikTok</h1>
        <p className="text-xl mb-8">Create, share, and discover short videos.</p>
        <button className="bg-red-600 text-white px-8 py-3 rounded-full text-lg">Download Now</button>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-black">
        <div className="container mx-auto 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-gray-800 p-6 rounded-lg">
              <img src="https://placehold.co/100x100" alt="Feature" className="mx-auto mb-4" />
              <h3 className="text-xl font-bold mb-2">Create Videos</h3>
              <p className="text-gray-400">Easily create and edit short videos with our powerful tools.</p>
            </div>
            <div className="bg-gray-800 p-6 rounded-lg">
              <img src="https://placehold.co/100x100" alt="Feature" className="mx-auto mb-4" />
              <h3 className="text-xl font-bold mb-2">Share Moments</h3>
              <p className="text-gray-400">Share your videos with friends and the world instantly.</p>
            </div>
            <div className="bg-gray-800 p-6 rounded-lg">
              <img src="https://placehold.co/100x100" alt="Feature" className="mx-auto mb-4" />
              <h3 className="text-xl font-bold mb-2">Discover Content</h3>
              <p className="text-gray-400">Discover trending videos and creators from around the globe.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-20 bg-gray-900">
        <div className="container mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-12">What Users Say</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-gray-800 p-6 rounded-lg">
              <p className="text-gray-400 mb-4">"TikTok has changed the way I share my creativity. It's addictive!"</p>
              <div className="flex items-center">
                <img src="https://placehold.co/50x50" alt="User" className="rounded-full mr-4" />
                <span className="font-bold">John Doe</span>
              </div>
            </div>
            <div className="bg-gray-800 p-6 rounded-lg">
              <p className="text-gray-400 mb-4">"I discovered so many amazing creators on TikTok. It's inspiring!"</p>
              <div className="flex items-center">
                <img src="https://placehold.co/50x50" alt="User" className="rounded-full mr-4" />
                <span className="font-bold">Jane Smith</span>
              </div>
            </div>
            <div className="bg-gray-800 p-6 rounded-lg">
              <p className="text-gray-400 mb-4">"The editing tools are so easy to use. I love creating content on TikTok."</p>
              <div className="flex items-center">
                <img src="https://placehold.co/50x50" alt="User" className="rounded-full mr-4" />
                <span className="font-bold">Michael Brown</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Download Section */}
      <section className="py-20 bg-black">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold mb-8">Join the TikTok Community</h2>
          <p className="text-xl mb-8">Download the app and start creating today.</p>
          <div className="flex justify-center space-x-4">
            <button className="bg-white text-black px-8 py-3 rounded-full text-lg">iOS</button>
            <button className="bg-white text-black px-8 py-3 rounded-full text-lg">Android</button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-10 bg-gray-900">
        <div className="container mx-auto px-4 text-center">
          <p className="text-gray-400">© 2025 TikTok. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;