Jules-Sns/ecommerce-app/pages/checkout.vue

<template>
  <main class="container mx-auto px-4 py-8 md:py-12">
    <div class="mb-8">
      <h1 class="text-4xl font-black leading-tight tracking-[-0.033em]">Checkout</h1>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <div class="lg:col-span-2 space-y-6">
        <!-- Shipping Information -->
        <div class="flex flex-col rounded-xl bg-component-light dark:bg-component-dark shadow-sm">
          <details class="flex flex-col p-6 group" open="">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-6">
              <h3 class="text-xl font-semibold">Shipping Information</h3>
              <div class="text-text-secondary-light dark:text-text-secondary-dark group-open:rotate-180 transition-transform">
                <span class="material-symbols-outlined">expand_more</span>
              </div>
            </summary>
            <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
              <label class="flex flex-col col-span-2">
                <p class="text-sm font-medium pb-2">Full Name</p>
                <input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-2 focus:ring-primary/50 border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark focus:border-primary h-12 placeholder:text-text-secondary-light dark:placeholder:text-text-secondary-dark px-4 text-base font-normal leading-normal" placeholder="Enter your full name" value="" />
              </label>
              <label class="flex flex-col col-span-2">
                <p class="text-sm font-medium pb-2">Address</p>
                <input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-2 focus:ring-primary/50 border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark focus:border-primary h-12 placeholder:text-text-secondary-light dark:placeholder:text-text-secondary-dark px-4 text-base font-normal leading-normal" placeholder="1234 Main St" value="" />
              </label>
              <label class="flex flex-col">
                <p class="text-sm font-medium pb-2">City</p>
                <input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-2 focus:ring-primary/50 border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark focus:border-primary h-12 placeholder:text-text-secondary-light dark:placeholder:text-text-secondary-dark px-4 text-base font-normal leading-normal" placeholder="San Francisco" value="" />
              </label>
              <label class="flex flex-col">
                <p class="text-sm font-medium pb-2">State / Province</p>
                <input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-2 focus:ring-primary/50 border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark focus:border-primary h-12 placeholder:text-text-secondary-light dark:placeholder:text-text-secondary-dark px-4 text-base font-normal leading-normal" placeholder="CA" value="" />
              </label>
              <label class="flex flex-col">
                <p class="text-sm font-medium pb-2">Zip / Postal Code</p>
                <input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-2 focus:ring-primary/50 border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark focus:border-primary h-12 placeholder:text-text-secondary-light dark:placeholder:text-text-secondary-dark px-4 text-base font-normal leading-normal" placeholder="94107" value="" />
              </label>
              <label class="flex flex-col">
                <p class="text-sm font-medium pb-2">Country</p>
                <input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-2 focus:ring-primary/50 border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark focus:border-primary h-12 placeholder:text-text-secondary-light dark:placeholder:text-text-secondary-dark px-4 text-base font-normal leading-normal" placeholder="United States" value="" />
              </label>
            </div>
          </details>
        </div>
        <!-- Payment Method -->
        <div class="flex flex-col rounded-xl bg-component-light dark:bg-component-dark shadow-sm">
          <details class="flex flex-col p-6 group">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-6">
              <h3 class="text-xl font-semibold">Payment Method</h3>
              <div class="text-text-secondary-light dark:text-text-secondary-dark group-open:rotate-180 transition-transform">
                <span class="material-symbols-outlined">expand_more</span>
              </div>
            </summary>
            <p class="text-text-secondary-light dark:text-text-secondary-dark text-sm font-normal leading-normal mt-2">Please enter your payment details below.</p>
            <!-- Payment options would be added here -->
          </details>
        </div>
      </div>
      <!-- Order Summary -->
      <aside class="lg:col-span-1">
        <div class="sticky top-28 bg-component-light dark:bg-component-dark p-6 rounded-xl shadow-sm">
          <h3 class="text-xl font-semibold mb-6">Order Summary</h3>
          <div class="space-y-4">
            <div class="flex items-center gap-4">
              <div class="w-16 h-16 rounded-lg bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB2G4bdtTdqZ5qDnzccbWEkJPyPJWtObX4PMO_KPswJFkA6rRbAadJl_ExWmyTa91TXAMbjlKtjbTiACoSE0ZN4v9HeuUJ2uLPYa6aOTazikKHZN5FLxawOuI0GD7eqDCbsOGnFh98OJjj2H9SN0KBKt-XE7E96Ei2kXWARnpVQ4fVOsRzhfVleasErhkJD4GtjvMYuRu0ntDbZ7g3iPLOnWrqmHhquNGreBgQ3lNlEQRnDZ3s5p1GZ6Uyc7D_L1y-vc9HjlyPVDqR0');"></div>
              <div class="flex-1">
                <p class="font-medium">Wireless Headphones</p>
                <p class="text-sm text-text-secondary-light dark:text-text-secondary-dark">Qty: 1</p>
              </div>
              <p class="font-medium">$199.00</p>
            </div>
            <div class="flex items-center gap-4">
              <div class="w-16 h-16 rounded-lg bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCBLtMIuLHA-oWhz6gFA7EBDEso49y7mlkw9H4LmLJcwakw5mquqjy1UTLg7O8JKkNuc4Rh9Sf27929WDGqSV75umgU3a81WzF6-eoN5DCEXhAhcDVy1c7FlikkgdoWB4ICTFT0IEt-aiTI-ZrN_bUxXZsHeuUAg0f5LGP1CLffcmzr3QI97p6PXNFnJmZg0ZgqDChqhaEFpDps4ZgAdJIb00e7MZ_tolc3nWT2Oryftjt_bMVRjaGW7O3veJH_SsXnA1nqbc3u2PRr');"></div>
              <div class="flex-1">
                <p class="font-medium">Minimalist Backpack</p>
                <p class="text-sm text-text-secondary-light dark:text-text-secondary-dark">Qty: 1</p>
              </div>
              <p class="font-medium">$79.99</p>
            </div>
          </div>
          <div class="border-t border-border-light dark:border-border-dark my-6"></div>
          <div class="space-y-3 text-sm">
            <div class="flex justify-between">
              <span class="text-text-secondary-light dark:text-text-secondary-dark">Subtotal</span>
              <span>$278.99</span>
            </div>
            <div class="flex justify-between">
              <span class="text-text-secondary-light dark:text-text-secondary-dark">Shipping</span>
              <span>$5.00</span>
            </div>
            <div class="flex justify-between">
              <span class="text-text-secondary-light dark:text-text-secondary-dark">Taxes</span>
              <span>$22.32</span>
            </div>
          </div>
          <div class="border-t border-border-light dark:border-border-dark my-6"></div>
          <div class="flex justify-between items-center font-bold text-lg">
            <span>Total</span>
            <span>$306.31</span>
          </div>
          <button class="w-full mt-8 h-12 bg-primary text-white rounded-lg font-bold text-base hover:bg-primary/90 transition-colors flex items-center justify-center gap-2">
            <span class="material-symbols-outlined">lock</span>
            <span>Place Order</span>
          </button>
          <p class="text-xs text-center mt-3 text-text-secondary-light dark:text-text-secondary-dark">SSL Secure Transaction</p>
        </div>
      </aside>
    </div>
  </main>
</template>