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 - A Sparring Partner for Your Intuition</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'soft-mauve': '#D8BFD8', | |
| 'sage-green': '#9CAF88', | |
| 'warm-cream': '#FFFDD0', | |
| 'dusty-purple': '#967BB6', | |
| 'golden-yellow': '#FFD700', | |
| 'honey-amber': '#FFBF00', | |
| 'ivory': '#FFFFF0', | |
| 'soft-pearl': '#EAE0C8', | |
| 'sophisticated-plum': '#8E4585', | |
| 'dusty-rose': '#DCB4B4', | |
| 'terracotta': '#E2725B', | |
| 'burnt-orange': '#CC5500', | |
| 'muted-gold': '#B4975A', | |
| 'antique-bronze': '#8C7853', | |
| }, | |
| fontFamily: { | |
| serif: ['Cormorant Garamond', 'serif'], | |
| sans: ['Montserrat', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background: linear-gradient(135deg, #FFFFF0 0%, #EAE0C8 100%); | |
| color: #4A4A4A; | |
| } | |
| .ornamental-border { | |
| background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23B4975A' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .mode-card { | |
| background: linear-gradient(145deg, #FFFFF0, #EAE0C8); | |
| border: 1px solid #B4975A; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(to right, #8E4585, #967BB6); | |
| color: white; | |
| border-radius: 30px; | |
| padding: 12px 28px; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background: linear-gradient(to right, #967BB6, #8E4585); | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px -10px rgba(142, 69, 133, 0.5); | |
| } | |
| .nav-link { | |
| position: relative; | |
| padding-bottom: 5px; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #8E4585; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .theme-tag { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| background-color: rgba(157, 175, 136, 0.2); | |
| color: #4A4A4A; | |
| margin-right: 8px; | |
| margin-bottom: 8px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-ivory bg-opacity-90 backdrop-blur-sm border-b border-soft-pearl fixed w-full z-50"> | |
| <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"> | |
| <span class="text-sophisticated-plum font-serif text-2xl font-semibold">The Oracle's Gym</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="nav-link text-dusty-purple hover:text-sophisticated-plum">Dashboard</a> | |
| <a href="#" class="nav-link text-dusty-purple hover:text-sophisticated-plum">Case Files</a> | |
| <a href="#" class="nav-link text-dusty-purple hover:text-sophisticated-plum">Oracle's Outcome</a> | |
| <a href="#" class="nav-link text-dusty-purple hover:text-sophisticated-plum">Reading Replay</a> | |
| <a href="#" class="nav-link text-dusty-purple hover:text-sophisticated-plum">Master Journal</a> | |
| <button class="p-2 rounded-full text-muted-gold hover:bg-soft-mauve hover:bg-opacity-20"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="p-2 rounded-md text-dusty-purple"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-24 pb-16 px-4 sm:px-6 lg:px-8 ornamental-border"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-5xl font-serif font-bold text-sophisticated-plum mb-6">A Sparring Partner for Your Intuition</h1> | |
| <p class="text-xl text-dusty-purple max-w-3xl mx-auto mb-10">Refine your tarot reading skills with varied, complex scenarios and unique feedback to measure the relevance and depth of your interpretations.</p> | |
| <button class="btn-primary font-semibold text-lg">Begin Your Practice</button> | |
| </div> | |
| <!-- Practice Modes --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20"> | |
| <!-- Case Files Card --> | |
| <div class="mode-card p-6 card-hover" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-soft-mauve bg-opacity-20 flex items-center justify-center"> | |
| <i data-feather="file-text" class="text-sophisticated-plum w-8 h-8"></i> | |
| </div> | |
| </div> | |
| <h3 class="font-serif text-2xl text-sophisticated-plum text-center mb-4">Case Files</h3> | |
| <p class="text-dusty-purple text-center mb-6">Deep-dive practice with detailed scenarios and hidden insights to uncover.</p> | |
| <div class="text-center"> | |
| <button class="px-6 py-2 bg-sage-green bg-opacity-20 text-sage-green rounded-full text-sm font-medium">Explore Cases</button> | |
| </div> | |
| </div> | |
| <!-- Oracle's Outcome Card --> | |
| <div class="mode-card p-6 card-hover" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-honey-amber bg-opacity-20 flex items-center justify-center"> | |
| <i data-feather="eye" class="text-burnt-orange w-8 h-8"></i> | |
| </div> | |
| </div> | |
| <h3 class="font-serif text-2xl text-sophisticated-plum text-center mb-4">Oracle's Outcome</h3> | |
| <p class="text-dusty-purple text-center mb-6">Predictive practice with multiple paths to explore and consequences to reveal.</p> | |
| <div class="text-center"> | |
| <button class="px-6 py-2 bg-burnt-orange bg-opacity-20 text-burnt-orange rounded-full text-sm font-medium">Choose Paths</button> | |
| </div> | |
| </div> | |
| <!-- Reading Replay Card --> | |
| <div class="mode-card p-6 card-hover" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-dusty-rose bg-opacity-20 flex items-center justify-center"> | |
| <i data-feather="refresh-cw" class="text-terracotta w-8 h-8"></i> | |
| </div> | |
| </div> | |
| <h3 class="font-serif text-2xl text-sophisticated-plum text-center mb-4">Reading Replay</h3> | |
| <p class="text-dusty-purple text-center mb-6">Nuance practice with evolving narratives and delayed revelations.</p> | |
| <div class="text-center"> | |
| <button class="px-6 py-2 bg-terracotta bg-opacity-20 text-terracotta rounded-full text-sm font-medium">Replay Readings</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Cases --> | |
| <div class="mb-20"> | |
| <h2 class="font-serif text-3xl text-sophisticated-plum text-center mb-12">Featured Case Files</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Case 1 --> | |
| <div class="bg-ivory rounded-xl p-6 shadow-lg card-hover" data-aos="fade-up"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="px-3 py-1 bg-sage-green bg-opacity-20 text-sage-green rounded-full text-xs">Relationships</span> | |
| <span class="text-muted-gold text-sm">Intermediate</span> | |
| </div> | |
| <h3 class="font-serif text-xl text-sophisticated-plum mb-3">The Crossroads of Commitment</h3> | |
| <p class="text-dusty-purple text-sm mb-4">A couple faces a major decision about relocating for a job opportunity, but hidden fears about losing independence complicate the choice.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-muted-gold">12 cards drawn</span> | |
| <button class="text-xs text-sophisticated-plum font-medium flex items-center"> | |
| Read Case <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Case 2 --> | |
| <div class="bg-ivory rounded-xl p-6 shadow-lg card-hover" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="px-3 py-1 bg-golden-yellow bg-opacity-20 text-golden-yellow rounded-full text-xs">Career</span> | |
| <span class="text-muted-gold text-sm">Advanced</span> | |
| </div> | |
| <h3 class="font-serif text-xl text-sophisticated-plum mb-3">The Silent Partner</h3> | |
| <p class="text-dusty-purple text-sm mb-4">An entrepreneur discovers financial discrepancies in their business, but the real issue involves trust and hidden alliances.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-muted-gold">8 cards drawn</span> | |
| <button class="text-xs text-sophisticated-plum font-medium flex items-center"> | |
| Read Case <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Case 3 --> | |
| <div class="bg-ivory rounded-xl p-6 shadow-lg card-hover" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="px-3 py-1 bg-dusty-rose bg-opacity-20 text-dusty-rose rounded-full text-xs">Personal Growth</span> | |
| <span class="text-muted-gold text-sm">Intermediate</span> | |
| </div> | |
| <h3 class="font-serif text-xl text-sophisticated-plum mb-3">The Unopened Letter</h3> | |
| <p class="text-dusty-purple text-sm mb-4">A woman inherits a family home and discovers sealed letters that could reveal long-buried family secrets affecting her identity.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-muted-gold">5 cards drawn</span> | |
| <button class="text-xs text-sophisticated-plum font-medium flex items-center"> | |
| Read Case <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-soft-pearl bg-opacity-50 rounded-2xl p-8 md:p-12 mb-20"> | |
| <h2 class="font-serif text-3xl text-sophisticated-plum text-center mb-12">What Practitioners Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-ivory p-6 rounded-xl shadow-md" data-aos="fade-right"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-sage-green bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i data-feather="user" class="text-sage-green"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-serif text-sophisticated-plum">Elena M.</h4> | |
| <p class="text-xs text-muted-gold">Tarot Reader for 7 years</p> | |
| </div> | |
| </div> | |
| <p class="text-dusty-purple">"The Case Files have transformed my practice. The nuanced scenarios push me to look beyond surface interpretations and truly connect with the cards' deeper messages."</p> | |
| </div> | |
| <div class="bg-ivory p-6 rounded-xl shadow-md" data-aos="fade-left"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-dusty-rose bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i data-feather="user" class="text-dusty-rose"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-serif text-sophisticated-plum">Marcus T.</h4> | |
| <p class="text-xs text-muted-gold">Professional Reader</p> | |
| </div> | |
| </div> | |
| <p class="text-dusty-purple">"Oracle's Outcome is brilliant for honing predictive skills. Seeing the consequences of different paths has dramatically improved my accuracy in real readings."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="text-center mb-20" data-aos="zoom-in"> | |
| <h2 class="font-serif text-3xl text-sophisticated-plum mb-6">Ready to Enhance Your Intuitive Practice?</h2> | |
| <p class="text-xl text-dusty-purple max-w-3xl mx-auto mb-10">Join experienced tarot readers worldwide who are refining their skills with The Oracle's Gym.</p> | |
| <button class="btn-primary font-semibold text-lg mr-4">Start Free Trial</button> | |
| <button class="px-8 py-3 border border-sophisticated-plum text-sophisticated-plum rounded-full font-medium">View Demo</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-sophisticated-plum text-ivory py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="font-serif text-xl mb-4">The Oracle's Gym</h3> | |
| <p class="text-soft-mauve text-sm">A sparring partner for your intuition since 2023</p> | |
| </div> | |
| <div> | |
| <h4 class="font-serif mb-4">Practice Modes</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-soft-mauve hover:text-white text-sm">Case Files</a></li> | |
| <li><a href="#" class="text-soft-mauve hover:text-white text-sm">Oracle's Outcome</a></li> | |
| <li><a href="#" class="text-soft-mauve hover:text-white text-sm">Reading Replay</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-serif mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-soft-mauve hover:text-white text-sm">Master Journal</a></li> | |
| <li><a href="#" class="text-soft-mauve hover:text-white text-sm">Card Meanings</a></li> | |
| <li><a href="#" class="text-soft-mauve hover:text-white text-sm">Spread Library</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-serif mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-soft-mauve hover:text-white"><i data-feather="instagram"></i></a> | |
| <a href="#" class="text-soft-mauve hover:text-white"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-soft-mauve hover:text-white"><i data-feather="facebook"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-soft-mauve border-opacity-20 mt-8 pt-8 text-sm text-soft-mauve text-center"> | |
| <p>© 2023 The Oracle's Gym. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Simple animation for practice mode cards | |
| document.querySelectorAll('.card-hover').forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| anime({ | |
| targets: card, | |
| scale: 1.02, | |
| duration: 300, | |
| easing: 'easeInOutQuad' | |
| }); | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| anime({ | |
| targets: card, | |
| scale: 1, | |
| duration: 300, | |
| easing: 'easeInOutQuad' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |