Code Detail

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

function App() {
  return (
    <div className="App bg-gray-900 text-white min-h-screen">
      <header className="text-center py-10">
        <h1 className="text-5xl font-bold">The Three-Body Problem</h1>
        <p className="text-xl mt-2">A Deep Dive into Liu Cixin's Masterpiece</p>
      </header>

      <section className="container mx-auto px-4">
        <div className="grid md:grid-cols-3 gap-8">
          <div className="bg-gray-800 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold">Cultural Revolution</h2>
            <p className="mt-4">The story begins during China's Cultural Revolution, setting the stage for the scientific and ideological conflicts that follow.</p>
            <img src="https://placehold.co/300x200" alt="Cultural Revolution" className="mt-4 rounded-lg" />
          </div>

          <div className="bg-gray-800 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold">Trisolaris</h2>
            <p className="mt-4">Trisolaris, a planet with three suns, is discovered, and its inhabitants face existential threats due to their unstable environment.</p>
            <img src="https://placehold.co/300x200" alt="Trisolaris" className="mt-4 rounded-lg" />
          </div>

          <div className="bg-gray-800 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold">Sophon</h2>
            <p className="mt-4">Sophons, supercomputers made from unfolded protons, play a crucial role in the Trisolarans' plans against Earth.</p>
            <img src="https://placehold.co/300x200" alt="Sophon" className="mt-4 rounded-lg" />
          </div>
        </div>
      </section>

      <section className="container mx-auto px-4 mt-12">
        <div className="grid md:grid-cols-2 gap-8">
          <div className="bg-gray-800 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold">Wallfacer Project</h2>
            <p className="mt-4">The Wallfacer Project is initiated, selecting individuals to devise secret strategies to counter the Trisolaran threat.</p>
            <img src="https://placehold.co/300x200" alt="Wallfacer Project" className="mt-4 rounded-lg" />
          </div>

          <div className="bg-gray-800 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold">Dark Forest Theory</h2>
            <p className="mt-4">The Dark Forest Theory posits that the universe is a dangerous place, and civilizations must remain hidden to survive.</p>
            <img src="https://placehold.co/300x200" alt="Dark Forest Theory" className="mt-4 rounded-lg" />
          </div>
        </div>
      </section>

      <section className="container mx-auto px-4 mt-12">
        <div className="grid md:grid-cols-3 gap-8">
          <div className="bg-gray-800 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold">Doomsday Battle</h2>
            <p className="mt-4">The Doomsday Battle is a pivotal moment where humanity faces the Trisolaran fleet in a desperate struggle for survival.</p>
            <img src="https://placehold.co/300x200" alt="Doomsday Battle" className="mt-4 rounded-lg" />
          </div>

          <div className="bg-gray-800 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold">Deterrence Era</h2>
            <p className="mt-4">The Deterrence Era begins, where humanity uses the threat of mutual destruction to maintain a fragile peace with Trisolaris.</p>
            <img src="https://placehold.co/300x200" alt="Deterrence Era" className="mt-4 rounded-lg" />
          </div>

          <div className="bg-gray-800 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold">Broadcast Era</h2>
            <p className="mt-4">The Broadcast Era marks the end of the Deterrence Era, leading to new challenges and revelations for both Earth and Trisolaris.</p>
            <img src="https://placehold.co/300x200" alt="Broadcast Era" className="mt-4 rounded-lg" />
          </div>
        </div>
      </section>

      <footer className="text-center py-6 mt-12 bg-gray-800">
        <p>© 2025 The Three-Body Problem Knowledge Cards. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;