<script setup lang="ts">
import { Skeleton } from "@/components/ui/skeleton";
</script>
<template>
  <section class="py-section">
    <div class="container mx-auto px-4">
      <div
        class="flex flex-col justify-between gap-y-8 lg:flex-row lg:items-center"
      >
        <div class="flex w-full flex-col gap-6 lg:w-1/2">
          <Skeleton class="h-8 w-1/2 rounded" />
          <Skeleton class="h-4 w-full" />
          <Skeleton class="h-4 w-[90%]" />
          <Skeleton class="h-4 w-[80%]" />

          <!-- Buttons -->
          <div class="flex flex-wrap gap-4">
            <Skeleton class="h-10 w-[180px] rounded-md" />
            <Skeleton class="h-10 w-[180px] rounded-md" />
          </div>
        </div>

        <div class="w-full lg:w-5/12">
          <Skeleton class="h-[320px] w-full rounded-2xl" />
        </div>
      </div>
    </div>
  </section>
</template>
