فيسبوك ذهبي

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gradient-to-b from-yellow-400 to-yellow-600 min-h-screen">
      <header className="text-center py-10">
        <h1 className="text-6xl font-bold text-white">Golden Facebook</h1>
        <p className="text-xl text-white mt-4">Connect with friends and the world around you on Golden Facebook.</p>
      </header>

      <main className="container mx-auto px-4">
        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <img src="https://placehold.co/300x200" alt="Placeholder" className="w-full h-48 object-cover rounded-t-lg" />
            <h2 className="text-2xl font-bold mt-4">News Feed</h2>
            <p className="text-gray-700 mt-2">Stay updated with the latest posts from your friends.</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <img src="https://placehold.co/300x200" alt="Placeholder" className="w-full h-48 object-cover rounded-t-lg" />
            <h2 className="text-2xl font-bold mt-4">Messenger</h2>
            <p className="text-gray-700 mt-2">Chat with your friends in real-time.</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <img src="https://placehold.co/300x200" alt="Placeholder" className="w-full h-48 object-cover rounded-t-lg" />
            <h2 className="text-2xl font-bold mt-4">Events</h2>
            <p className="text-gray-700 mt-2">Discover and join events happening around you.</p>
          </div>
        </section>

        <section className="mt-16">
          <h2 className="text-4xl font-bold text-white text-center">Join Golden Facebook Today</h2>
          <p className="text-xl text-white text-center mt-4">Sign up to connect with friends and the world around you.</p>
          <div className="flex justify-center mt-8">
            <button className="bg-white text-yellow-600 px-8 py-3 rounded-full font-bold hover:bg-yellow-100 transition duration-300">Sign Up</button>
          </div>
        </section>
      </main>

      <footer className="bg-yellow-700 text-white text-center py-6 mt-16">
        <p>&copy; 2025 Golden Facebook. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;