Aura Creative Pricing Section with Toggle

<div class="museum-frame"
  style="--bg-cream: #FAF8F3; --ink-black: #1A1818; --accent-gold: #C5A059; --font-display: 'Bodoni Moda', serif; --font-sans: 'Inter', sans-serif; background-color: var(--bg-cream); color: var(--ink-black); font-family: var(--font-sans); width: 100%; max-width: 1280px; min-height: 960px; border: 3px solid var(--ink-black); position: relative; display: flex; flex-direction: column; overflow-y: auto; border-radius: 20px; margin: 0 auto;">
  <script src="https://cdn.tailwindcss.com"></script>
  <link
    href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400&family=Inter:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">

  <div class="content-padding" style="padding: 4rem 5rem;">
    <header class="flex justify-between items-start mb-8">
      <div style="text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; line-height: 1.4;">
        Paris, FR<br>
                ESTABLISHED 2025
      </div>
      <nav class="flex gap-8">
        <a href="#"
          style="text-decoration: none; color: var(--ink-black); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;">Archive</a>
        <a href="#"
          style="text-decoration: none; color: var(--ink-black); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;">Studio</a>
        <a href="#"
          style="text-decoration: none; color: var(--ink-black); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;">Connect</a>
      </nav>
    </header>

    <main>
      <section class="text-center mb-16">
        <h1
          style="font-family: var(--font-display); font-size: clamp(4rem, 15vw, 8rem); font-weight: 700; line-height: 0.8; text-transform: uppercase; background-image: url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&w=1600&q=80'); background-size: cover; -webkit-background-clip: text; background-clip: text; color: transparent;">
          AURA</h1>
      </section>

      <div id="pricing-module" class="text-center mb-12">
        <h2 style="font-family: var(--font-display); font-size: 2.5rem; font-weight: 400;">Creative Partnership</h2>
        <div
          style="display: inline-flex; align-items: center; gap: 1rem; background: #f0ede6; padding: 6px; border-radius: 100px; margin-top: 2rem;">
          <button class="toggle-btn active" onclick="togglePricing('monthly')" style="padding: 10px 24px; border-radius: 100px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.3s; border: none; background: var(--ink-black); color: white;">Monthly</button>
          <button class="toggle-btn" onclick="togglePricing('annual')" style="padding: 10px 24px; border-radius: 100px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.3s; border: none; background: transparent; color: #666;">Yearly — 15% Savings</button>
        </div>
        <script>
          function togglePricing(type) {
                        const btns = document.querySelectorAll('.toggle-btn');
                        btns.forEach(btn => {
                            btn.style.background = 'transparent';
                            btn.style.color = '#666';
                        });
                        event.target.style.background = '#1A1818';
                        event.target.style.color = 'white';
                        
                        const prices = {
                            monthly: ['€55', '€145', '€390'],
                            annual: ['€45', '€120', '€330']
                        };
                        document.querySelectorAll('.price-value').forEach((el, i) => {
                            el.innerText = prices[type][i];
                        });
                    }
        </script>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-24">
        <div
          style="border: 1px solid rgba(26,24,24,0.1); padding: 3rem 2rem; border-radius: 16px; display: flex; flex-direction: column; transition: 0.3s;"
          onmouseover="this.style.borderColor='var(--ink-black)'"
          onmouseout="this.style.borderColor='rgba(26,24,24,0.1)'">
          <h3 style="font-family: var(--font-display); font-size: 1.5rem; font-style: italic; margin-bottom: 1rem;">Base
          </h3>
          <div style="font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem;">
            <span class="price-value">€55</span><span style="font-size: 1rem; font-weight: 400; opacity: 0.6;">/mo</span>
          </div>
          <ul style="list-style: none; margin-bottom: 2.5rem; flex-grow: 1;">
            <li
              style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
              <span style="color: var(--accent-gold); margin-right: 10px;">—</span>Curated Asset Library</li>
            <li
              style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
              <span style="color: var(--accent-gold); margin-right: 10px;">—</span>Weekly Design Briefs</li>
            <li
              style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
              <span style="color: var(--accent-gold); margin-right: 10px;">—</span>Community Access</li>
          </ul>
          <a href="#"
            style="background: var(--ink-black); color: white; padding: 1rem; text-align: center; text-decoration: none; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem;">Initialize</a>
        </div>

        <div
          style="border: 2px solid var(--ink-black); background: white; padding: 3rem 2rem; border-radius: 16px; display: flex; flex-direction: column; transform: translateY(-10px);">
          <h3 style="font-family: var(--font-display); font-size: 1.5rem; font-style: italic; margin-bottom: 1rem;">Pro
          </h3>
          <div style="font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem;">
            <span class="price-value">€145</span><span style="font-size: 1rem; font-weight: 400; opacity: 0.6;">/mo</span>
          </div>
          <ul style="list-style: none; margin-bottom: 2.5rem; flex-grow: 1;">
            <li
              style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
              <span style="color: var(--accent-gold); margin-right: 10px;">—</span>All Base Features</li>
            <li
              style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
              <span style="color: var(--accent-gold); margin-right: 10px;">—</span>Bi-weekly Portfolio Review</li>
            <li
              style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
              <span style="color: var(--accent-gold); margin-right: 10px;">—</span>Commercial Licensing</li>
            <li
              style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
              <span style="color: var(--accent-gold); margin-right: 10px;">—</span>Priority Beta Access</li>
          </ul>
          <a href="#"
            style="background: var(--ink-black); color: white; padding: 1rem; text-align: center; text-decoration: none; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem;">Select
            Professional</a>
        </div>

        <div
          style="border: 1px solid rgba(26,24,24,0.1); padding: 3rem 2rem; border-radius: 16px; display: flex; flex-direction: column; transition: 0.3s;"
          onmouseover="this.style.borderColor='var(--ink-black)'"
          onmouseout="this.style.borderColor='rgba(26,24,24,0.1)'">
          <h3 style="font-family: var(--font-display); font-size: 1.5rem; font-style: italic; margin-bottom: 1rem;">
            Elite</h3>
          <div style="font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem;">
            <span class="price-value">€390</span><span style="font-size: 1rem; font-weight: 400; opacity: 0.6;">/mo</span>
          </div>
          <ul style="list-style: none; margin-bottom: 2.5rem; flex-grow: 1;">
            <li
              style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
              <span style="color: var(--accent-gold); margin-right: 10px;">—</span>All Pro Features</li>
            <li
              style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
              <span style="color: var(--accent-gold); margin-right: 10px;">—</span>1-on-1 Monthly Mentorship</li>
            <li
              style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
              <span style="color: var(--accent-gold); margin-right: 10px;">—</span>Quarterly Print Box</li>
          </ul>
          <a href="#"
            style="background: var(--ink-black); color: white; padding: 1rem; text-align: center; text-decoration: none; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem;">Select
            Elite</a>
        </div>
      </div>
    </main>
  </div>

  <footer
    style="background: var(--ink-black); color: var(--bg-cream); padding: 5rem; text-align: center; margin-top: auto;">
    <div style="font-family: var(--font-display); font-size: 2.5rem; margin-bottom: 2rem; letter-spacing: 0.1em;">AURA
      CREATIVE</div>

    <div class="flex flex-wrap justify-center gap-12 mb-12">
      <a href="#"
        style="color: var(--bg-cream); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;">Method</a>
      <a href="#"
        style="color: var(--bg-cream); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;">Artists</a>
      <a href="#"
        style="color: var(--bg-cream); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;">Logistics</a>
      <a href="#"
        style="color: var(--bg-cream); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;">Essays</a>
    </div>

    <div class="flex justify-center gap-8 mb-12">
      <a href="#"
        style="color: var(--bg-cream); text-decoration: none; font-size: 0.9rem; border: 1px solid rgba(250, 248, 243, 0.2); padding: 10px 24px; border-radius: 100px;">Instagram</a>
      <a href="#"
        style="color: var(--bg-cream); text-decoration: none; font-size: 0.9rem; border: 1px solid rgba(250, 248, 243, 0.2); padding: 10px 24px; border-radius: 100px;">Behance</a>
    </div>

    <div
      style="font-size: 0.75rem; opacity: 0.4; letter-spacing: 0.05em; border-top: 1px solid rgba(250, 248, 243, 0.1); padding-top: 2rem;">
      © 2025 AURA CREATIVE & DESIGN LAB. ALL RIGHTS RESERVED. <br>
            PRIVACY &nbsp; | &nbsp; TERMS &nbsp; | &nbsp; COMPLIANCE
    </div>
  </footer>
</div>