gw-svelte/src/lib/components/PricingPlanCard.svelte

<script lang="ts">
  import Icon from '$lib/components/Icon.svelte';

  export let plan: {
    title: string;
    price: string;
    period: string;
    features: string[];
    isPopular: boolean;
    mobileOrder: number;
  };
  export let variant: 'pricing' | 'service' = 'service';
</script>

<article
  class="plan-card"
  class:plan-card--popular={plan.isPopular}
  class:plan-card--pricing={variant === 'pricing'}
  class:plan-card--service={variant === 'service'}
  style="--mobile-order:{plan.mobileOrder};"
>
  {#if plan.isPopular}
    <span class="plan-card__ribbon">
      <Icon name="fas fa-star" className="plan-card__ribbon-icon" />
      Popular
    </span>
  {/if}
  <div class="plan-card__header">
    <div class="plan-card__eyebrow">
      <span class="plan-card__eyebrow-badge">
        <Icon name={variant === 'pricing' ? 'fas fa-paw' : 'fas fa-leaf'} className="plan-card__eyebrow-icon" />
      </span>
      <span>{plan.isPopular ? 'Goodwalk favourite' : variant === 'pricing' ? 'Flexible routine' : 'Tailored support'}</span>
    </div>
    <h3>{plan.title}</h3>
    <div class="plan-card__price">{plan.price}</div>
    <p class="plan-card__period">{plan.period}</p>
  </div>
  <div class="plan-card__body">
    <p class="plan-card__feature-label">
      <Icon name="fas fa-circle-check" className="plan-card__feature-label-icon" />
      What's included
    </p>
    <ul class="plan-card__features">
      {#each plan.features as feature}
        <li>
          <Icon
            name={variant === 'pricing' ? 'fas fa-check' : 'fas fa-paw'}
            className="plan-card__feature-icon"
          />
          <span>{feature}</span>
        </li>
      {/each}
    </ul>
  </div>
  <a class="btn btn-yellow plan-card__cta" href="#newlead">Book a Meet &amp; Greet</a>
</article>

<style>
  /* ── Base ── */
  .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    border: 1.5px solid rgba(17, 20, 24, 0.09);
    padding: 38px 26px 30px;
    overflow: visible;
    transition:
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s ease,
      border-color 0.22s ease,
      filter 0.22s ease;
  }

  .plan-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 88px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  .plan-card--popular {
    border: 2px solid var(--yellow);
    box-shadow:
      inset 0 0 0 1px rgba(242, 191, 47, 0.45),
      0 14px 34px rgba(17, 20, 24, 0.06);
  }

  /* ── Service variant ── */
  .plan-card--service {
    align-items: stretch;
    height: 100%;
    background: linear-gradient(180deg, rgba(251, 251, 251, 0.98) 0%, rgba(247, 248, 246, 1) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.045),
      0 8px 40px rgba(0, 0, 0, 0.06);
  }

  /* ── Pricing variant ── */
  .plan-card--pricing {
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(251, 251, 251, 0.98) 0%, rgba(247, 248, 246, 1) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.045),
      0 14px 34px rgba(17, 20, 24, 0.05);
  }

  .plan-card--pricing.plan-card--popular {
    background:
      radial-gradient(circle at top, rgba(255, 209, 0, 0.12), rgba(255, 209, 0, 0) 40%),
      linear-gradient(180deg, rgba(251, 251, 251, 0.98) 0%, rgba(247, 248, 246, 1) 100%);
  }

  .plan-card__header,
  .plan-card__body {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  /* ── Ribbon ── */
  .plan-card__ribbon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -40%);
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gw-green), var(--green-mid));
    color: #fff;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(17, 20, 24, 0.08);
    white-space: nowrap;
  }

  :global(.plan-card__ribbon-icon) {
    color: var(--yellow);
    font-size: 10px;
  }

  .plan-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .plan-card__eyebrow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gw-green), var(--green-mid));
    color: #fff;
    box-shadow: 0 10px 22px rgba(33, 48, 33, 0.14);
  }

  :global(.plan-card__eyebrow-icon) {
    color: var(--yellow);
    font-size: 14px;
  }

  /* ── Heading ── */
  .plan-card h3 {
    margin: 0;
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.2;
    color: #16181d;
  }

  /* ── Price ── */
  .plan-card__price {
    font-family: var(--font-head);
    line-height: 1;
  }

  .plan-card--service .plan-card__price {
    margin-top: 20px;
    font-size: 44px;
    color: var(--gw-green);
  }

  .plan-card--pricing .plan-card__price {
    margin-top: 22px;
    font-size: 52px;
    line-height: 0.95;
    letter-spacing: -0.05em;
    color: #16181d;
  }

  /* ── Period ── */
  .plan-card__period {
    margin: 8px 0 0;
    font-size: 14px;
    text-transform: uppercase;
  }

  .plan-card--service .plan-card__period {
    color: #5d6166;
    font-weight: 600;
    letter-spacing: 0.06em;
  }

  .plan-card--pricing .plan-card__period {
    color: #5e6167;
    letter-spacing: 0.08em;
  }

  .plan-card__body {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(17, 20, 24, 0.07);
  }

  .plan-card__feature-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: #59606d;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  :global(.plan-card__feature-label-icon) {
    color: var(--gw-green);
    font-size: 12px;
  }

  /* ── Features ── */
  .plan-card__features {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .plan-card--service .plan-card__features {
    flex: 1 1 auto;
  }

  /* Service: bullet style */
  .plan-card--service .plan-card__features li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    color: #34363a;
    font-size: 15px;
    line-height: 1.5;
  }

  .plan-card--service .plan-card__features li + li {
    margin-top: 12px;
  }

  :global(.plan-card--service .plan-card__feature-icon) {
    margin-top: 3px;
    color: var(--yellow-soft);
    font-size: 12px;
  }

  /* Pricing: divider style */
  .plan-card--pricing .plan-card__features {
    width: 100%;
  }

  .plan-card--pricing .plan-card__features li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    padding: 15px 0;
    border-top: 1px solid rgba(17, 20, 24, 0.08);
    color: #34363a;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
  }

  .plan-card--pricing .plan-card__features li:first-child {
    padding-top: 0;
    border-top: none;
  }

  :global(.plan-card--pricing .plan-card__feature-icon) {
    margin-top: 3px;
    color: var(--gw-green);
    font-size: 12px;
  }

  /* ── CTA ── */
  .plan-card__cta {
    display: flex;
    width: fit-content;
    margin: 28px auto 0;
    font-family: var(--font-head);
  }

  /* ── Hover ── */
  @media (hover: hover) {
    .plan-card--service:hover {
      transform: translateY(-2px);
      border-color: rgba(17, 20, 24, 0.14);
      box-shadow:
        inset 0 0 0 1px rgba(17, 20, 24, 0.055),
        0 10px 40px rgba(0, 0, 0, 0.08);
      filter: brightness(1.015);
    }

    .plan-card--pricing:hover {
      transform: translateY(-2px);
      border-color: rgba(17, 20, 24, 0.14);
      box-shadow:
        inset 0 0 0 1px rgba(17, 20, 24, 0.06),
        0 18px 38px rgba(17, 20, 24, 0.08);
      filter: brightness(1.012);
    }

    .plan-card--popular:hover {
      border-color: var(--yellow);
    }
  }

  .plan-card:active {
    transform: translateY(-2px) scale(0.992);
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .plan-card {
      order: var(--mobile-order, 0);
      width: min(100%, 420px);
      margin-inline: auto;
      padding: 36px 22px 28px;
    }

    .plan-card__body {
      margin-top: 22px;
      padding-top: 16px;
    }

    .plan-card--pricing .plan-card__price {
      font-size: 46px;
    }

    .plan-card__cta {
      display: none;
    }
  }
</style>