AeThex-Connect/astro-site/src/components/Pricing.astro

---
// Pricing section
const tiers = [
  {
    name: 'Free',
    price: '$0',
    period: 'forever',
    features: [
      '5 friends maximum',
      'Basic text messaging',
      'Subdomain identity',
      '100 MB storage',
      'Community support',
    ],
    cta: 'Get Started',
    highlight: false,
  },
  {
    name: 'Premium',
    price: '$100',
    period: 'per year',
    features: [
      'Blockchain .aethex domain (NFT)',
      'Unlimited friends',
      'HD voice & video (1080p)',
      '10 GB storage',
      'Priority support',
      'Custom profile branding',
    ],
    cta: 'Go Premium',
    highlight: true,
  },
  {
    name: 'Enterprise',
    price: 'Custom',
    period: 'contact us',
    features: [
      'Everything in Premium',
      'White-label platform',
      'Custom domain',
      'Unlimited storage',
      '99.9% SLA guarantee',
      'Dedicated account manager',
    ],
    cta: 'Contact Sales',
    highlight: false,
  },
];
---

<section id="pricing" class="pricing">
  <div class="container">
    <div class="section-header">
      <h2>Choose Your <span class="gradient-text">Tier</span></h2>
      <p>Start free, upgrade when you're ready.</p>
    </div>

    <div class="pricing-grid">
      {tiers.map(tier => (
        <div class:list={['pricing-card', { highlight: tier.highlight }]}>
          {tier.highlight && <div class="popular-badge">Most Popular</div>}
          <div class="tier-name">{tier.name}</div>
          <div class="tier-price">
            {tier.price}
            <span class="tier-period">/{tier.period}</span>
          </div>
          <ul class="tier-features">
            {tier.features.map(feature => (
              <li>✓ {feature}</li>
            ))}
          </ul>
          <a href="#download" class:list={['tier-cta', { primary: tier.highlight }]}>
            {tier.cta}
          </a>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .pricing {
    padding: 6rem 2rem;
    background: linear-gradient(180deg, #0a0a0f 0%, #000000 100%);
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .section-header {
    text-align: center;
    margin-bottom: 4rem;
  }

  .section-header h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .gradient-text {
    background: linear-gradient(135deg, #00d9ff 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .section-header p {
    font-size: 1.25rem;
    color: #b0b0b0;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
  }

  .pricing-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s;
  }

  .pricing-card.highlight {
    border-color: #00d9ff;
    background: rgba(0, 217, 255, 0.05);
    transform: scale(1.05);
  }

  .pricing-card:hover {
    transform: translateY(-8px) scale(1.02);
  }

  .pricing-card.highlight:hover {
    transform: translateY(-8px) scale(1.07);
  }

  .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #00d9ff 0%, #00b8d9 100%);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .tier-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .tier-price {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #00d9ff;
  }

  .tier-period {
    font-size: 1rem;
    color: #707070;
  }

  .tier-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
  }

  .tier-features li {
    padding: 0.5rem 0;
    color: #b0b0b0;
  }

  .tier-cta {
    display: block;
    width: 100%;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .tier-cta:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .tier-cta.primary {
    background: linear-gradient(135deg, #00d9ff 0%, #00b8d9 100%);
    color: #000;
    border: none;
  }

  .tier-cta.primary:hover {
    box-shadow: 0 8px 24px rgba(0, 217, 255, 0.4);
  }

  @media (max-width: 768px) {
    .section-header h2 {
      font-size: 2rem;
    }
    .pricing-card.highlight {
      transform: scale(1);
    }
  }
</style>