Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Oracle's Gym</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| mauve: '#B784A7', | |
| sage: '#8A9B68', | |
| cream: '#F5F0E6', | |
| plum: '#6A4C6B', | |
| terracotta: '#E2725B', | |
| antique: '#D4AF37', | |
| }, | |
| fontFamily: { | |
| serif: ['Cormorant Garamond', 'serif'], | |
| sans: ['Montserrat', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .art-nouveau-border { | |
| border: 8px solid transparent; | |
| border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0,0 C20,10 30,30 50,50 C70,70 80,90 100,100 L100,0 Z' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3C/svg%3E") 20% round; | |
| } | |
| .watercolor-bg { | |
| background-image: radial-gradient(circle, rgba(247,237,226,0.8) 0%, rgba(245,240,230,0.4) 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .sigil { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50,10 C60,30 80,30 90,50 C80,70 60,70 50,90 C40,70 20,70 10,50 C20,30 40,30 50,10 Z' fill='none' stroke='%23D4AF37' stroke-width='0.5'/%3E%3C/svg%3E"); | |
| background-size: 100px 100px; | |
| opacity: 0.1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-cream font-sans text-plum min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white bg-opacity-70 backdrop-blur-md shadow-sm fixed w-full z-10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="moon" class="text-antique h-8 w-8"></i> | |
| <span class="ml-2 font-serif text-2xl font-medium">The Oracle's Gym</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#" class="text-plum hover:text-terracotta px-3 py-2 text-sm font-medium">Dashboard</a> | |
| <a href="#" class="text-plum hover:text-terracotta px-3 py-2 text-sm font-medium">Journal</a> | |
| <a href="#" class="text-plum hover:text-terracotta px-3 py-2 text-sm font-medium">Settings</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-plum hover:text-terracotta focus:outline-none"> | |
| <i data-feather="menu" class="h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative pt-24 pb-20 px-4 sm:px-6 lg:pt-32 lg:pb-28 lg:px-8 sigil"> | |
| <div class="absolute inset-0"> | |
| <div class="watercolor-bg h-full w-full"></div> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl tracking-tight font-serif font-bold text-plum sm:text-5xl md:text-6xl" data-aos="fade-down"> | |
| <span class="block">A sparring partner</span> | |
| <span class="block text-antique">for your intuition</span> | |
| </h1> | |
| <p class="mt-3 max-w-md mx-auto text-base text-plum sm:text-lg md:mt-5 md:text-xl md:max-w-3xl" data-aos="fade-up" data-aos-delay="200"> | |
| Refine your tarot skills with complex scenarios, meaningful feedback, and a personalized journal to track your growth. | |
| </p> | |
| <div class="mt-10 sm:flex sm:justify-center" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-cream bg-plum hover:bg-mauve md:py-4 md:text-lg md:px-10"> | |
| Begin Your Practice | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Practice Modes --> | |
| <div class="py-12 bg-cream"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-antique font-semibold tracking-wide uppercase" data-aos="fade-down">Practice Modes</h2> | |
| <p class="mt-2 font-serif text-3xl leading-8 font-extrabold tracking-tight text-plum sm:text-4xl" data-aos="fade-down" data-aos-delay="100"> | |
| Three ways to deepen your craft | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> | |
| <!-- Case Files --> | |
| <div class="relative bg-white p-6 rounded-lg art-nouveau-border card-hover" data-aos="fade-up"> | |
| <div class="absolute -top-6 left-6 rounded-full bg-plum p-3"> | |
| <i data-feather="book-open" class="text-cream h-6 w-6"></i> | |
| </div> | |
| <h3 class="font-serif text-lg font-medium text-plum mb-2">Case Files</h3> | |
| <p class="mt-2 text-base text-plum"> | |
| Deep-dive practice with complex scenarios and hidden insights to uncover. | |
| </p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-base font-medium text-terracotta hover:text-antique"> | |
| Explore cases | |
| <i data-feather="arrow-right" class="inline h-4 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Oracle's Outcome --> | |
| <div class="relative bg-white p-6 rounded-lg art-nouveau-border card-hover" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="absolute -top-6 left-6 rounded-full bg-plum p-3"> | |
| <i data-feather="eye" class="text-cream h-6 w-6"></i> | |
| </div> | |
| <h3 class="font-serif text-lg font-medium text-plum mb-2">Oracle's Outcome</h3> | |
| <p class="mt-2 text-base text-plum"> | |
| Predictive practice with multiple paths and narrative consequences to reveal. | |
| </p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-base font-medium text-terracotta hover:text-antique"> | |
| Choose a path | |
| <i data-feather="arrow-right" class="inline h-4 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Reading Replay --> | |
| <div class="relative bg-white p-6 rounded-lg art-nouveau-border card-hover" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="absolute -top-6 left-6 rounded-full bg-plum p-3"> | |
| <i data-feather="refresh-cw" class="text-cream h-6 w-6"></i> | |
| </div> | |
| <h3 class="font-serif text-lg font-medium text-plum mb-2">Reading Replay</h3> | |
| <p class="mt-2 text-base text-plum"> | |
| Nuance practice with evolving scenarios that update over time. | |
| </p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-base font-medium text-terracotta hover:text-antique"> | |
| Revisit readings | |
| <i data-feather="arrow-right" class="inline h-4 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Journal Preview --> | |
| <div class="relative py-16 bg-plum overflow-hidden"> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-antique font-semibold tracking-wide uppercase" data-aos="fade-down">Your Practice</h2> | |
| <p class="mt-2 font-serif text-3xl leading-8 font-extrabold tracking-tight text-cream sm:text-4xl" data-aos="fade-down" data-aos-delay="100"> | |
| Master Journal | |
| </p> | |
| <p class="mt-4 max-w-2xl text-lg text-cream lg:mx-auto" data-aos="fade-down" data-aos-delay="200"> | |
| Track your progress, revisit interpretations, and watch your intuitive skills grow. | |
| </p> | |
| </div> | |
| <div class="mt-12"> | |
| <div class="bg-cream rounded-lg shadow-xl overflow-hidden md:flex max-w-4xl mx-auto" data-aos="fade-up"> | |
| <div class="md:flex-shrink-0 md:w-1/3 bg-gradient-to-b from-mauve to-plum flex items-center justify-center p-8"> | |
| <i data-feather="book" class="text-cream h-20 w-20"></i> | |
| </div> | |
| <div class="p-8"> | |
| <div class="uppercase tracking-wide text-sm text-antique font-semibold">Featured Reading</div> | |
| <h3 class="mt-2 font-serif text-xl font-medium text-plum">The Artist's Dilemma</h3> | |
| <p class="mt-2 text-plum"> | |
| "Should I pursue the safe commission or the risky passion project?" | |
| </p> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="calendar" class="h-5 w-5 text-terracotta"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-plum">May 15, 2023</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="text-base font-medium text-terracotta hover:text-antique"> | |
| View in journal | |
| <i data-feather="arrow-right" class="inline h-4 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> | |
| <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-plum hover:text-terracotta">About</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-plum hover:text-terracotta">FAQ</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-plum hover:text-terracotta">Contact</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-plum hover:text-terracotta">Privacy</a> | |
| </div> | |
| </nav> | |
| <div class="mt-8 flex justify-center space-x-6"> | |
| <a href="#" class="text-plum hover:text-terracotta"> | |
| <i data-feather="instagram" class="h-6 w-6"></i> | |
| </a> | |
| <a href="#" class="text-plum hover:text-terracotta"> | |
| <i data-feather="twitter" class="h-6 w-6"></i> | |
| </a> | |
| <a href="#" class="text-plum hover:text-terracotta"> | |
| <i data-feather="facebook" class="h-6 w-6"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-center text-base text-plum"> | |
| © 2023 The Oracle's Gym. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <script>AOS.init();</script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |