Ultimate Dark Aesthetic: A Dive into Occult Design

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

const App = () => {
  return (
    <div className="App bg-black text-gray-300 font-ancient">
      <header className="App-header p-10">
        <h1 className="text-6xl font-bold text-red-600">◊✧Dark Sanctum✧◊</h1>
        <p className="italic text-xl">Entrance to the arcane and eldritch</p>
      </header>
      <main className="p-10">
        <section className="grid grid-cols-1 md:grid-cols-3 gap-10">
          {/* Occult Symbols Section */}
          <div className="symbol-section p-5 border-2 border-gray-700 rounded-lg">
            <img src="https://placehold.co/300x300?text=⚡☠⛧" alt="Occult Symbols" className="w-full h-auto"/>
            <p className="mt-4 text-center text-gray-400">Symbols of the arcane</p>
          </div>
          {/* Inverted Pentagram */}
          <div className="pentagram-section p-5 border-2 border-gray-700 rounded-lg">
            <img src="https://placehold.co/300x300?text=★⛧★" alt="Inverted Pentagram" className="w-full h-auto"/>
            <p className="mt-4 text-center text-gray-400">Inverted Pentagram</p>
          </div>
          {/* Ancient Runes */}
          <div className="rune-section p-5 border-2 border-gray-700 rounded-lg">
            <img src="https://placehold.co/300x300?text=ᚦᚨᚱ" alt="Ancient Runes" className="w-full h-auto"/>
            <p className="mt-4 text-center text-gray-400">Ancient Runes</p>
          </div>
        </section>
        {/* Additional mystical elements */}
        <div className="flicker-effect mt-10 text-center">
          <p className="text-3xl">Feel the dark energies flicker...</p>
        </div>
      </main>
      <footer className="p-10 text-center text-gray-500">
        <p>© 2025 Dark Sanctum. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;