FAQ Accordion with Testimonial & CTAs

<div class="grid gap-10 md:grid-cols-2 lg:gap-16 items-start">
      <!-- Left column -->
      <div class="">
        <h2 class="text-4xl font-semibold tracking-tight sm:text-5xl">
          Questions,<span class="ml-2 bg-gradient-to-r from-violet-400 via-fuchsia-400 to-sky-400 bg-clip-text text-transparent">Answers</span>
        </h2>
        <p class="mt-4 max-w-xl text-white/70">
          Get quick answers to your most pressing questions.
        </p>

        <!-- Testimonial card -->
        <div class="mt-8 rounded-2xl bg-white/[0.06] ring-1 ring-white/10 backdrop-blur-md p-5 md:p-6 shadow-[0_10px_30px_-10px_rgba(0,0,0,0.6)]">
          <div class="flex items-center gap-4">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e7518623-5aeb-4f28-bace-436a99f814d4_320w.jpg" alt="Avatar" class="h-12 w-12 rounded-full ring-2 ring-white/10 object-cover" style="">
            <div>
              <p class="text-sm font-medium">Ryan Harper</p>
              <p class="text-xs text-white/60">Harper Education</p>
            </div>
          </div>
          <div class="mt-3 flex items-center gap-1 text-amber-300">
            <!-- 4/5 stars -->
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg class="h-4 w-4 text-white/25" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
          </div>
          <p class="mt-3 text-sm leading-6 text-white/80">
            Exceptional creativity and attention to detail! The final product not only looks great but also enhances user engagement.
          </p>
        </div>

        <!-- CTAs -->
        <div class="mt-6 flex flex-wrap items-center gap-4">
          <a href="#work" class="group inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm ring-1 ring-white/10 hover:bg-white/10 nav-link">
            See All Projects
            <svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6" class=""></path></svg>
          </a>
          <button id="faq-contact-btn" class="inline-flex items-center gap-2 rounded-xl bg-white text-black px-4 py-3 text-sm font-medium hover:bg-white/90">
            Contact Now
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7" class=""></path></svg>
          </button>
        </div>
      </div>

      <!-- Right column: Accordion -->
      <div class="space-y-4" id="faq-list">
        <!-- Item -->
        <div class="rounded-2xl bg-white/5 ring-1 ring-white/10 transition hover:ring-white/20" data-accordion="">
          <button class="flex w-full items-center justify-between p-6 text-left" data-accordion-trigger="" aria-expanded="false">
            <span class="text-base font-medium text-white/90">What services do you offer?</span>
            <span class="grid size-9 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 transition" data-plus="">
              <svg class="transition-transform w-[16px] h-[16px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transform: rotate(0deg); width: 16px; height: 16px; color: rgb(243, 244, 246);" data-icon-replaced="true">
                <path d="M12 5v14M5 12h14" class=""></path>
              </svg>
            </span>
          </button>
          <div class="grid px-6 pb-6 transition-[grid-template-rows,opacity] duration-300 ease-out [grid-template-rows:0fr] opacity-0" data-accordion-panel="" style="opacity: 0; grid-template-rows: 0fr;">
            <div class="min-h-0 overflow-hidden text-white/70">
              I provide UI/UX design, product strategy, interactive prototypes, and developer-ready design systems tailored to your brand.
            </div>
          </div>
        </div>

        <div class="rounded-2xl bg-white/5 ring-1 ring-white/10 transition hover:ring-white/20" data-accordion="">
          <button class="flex w-full items-center justify-between p-6 text-left" data-accordion-trigger="" aria-expanded="false">
            <span class="text-base font-medium text-white/90">How do I start working with you?</span>
            <span class="grid size-9 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 transition" data-plus="">
              <svg class="h-4 w-4 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transform: rotate(0deg);">
                <path d="M12 5v14M5 12h14" class=""></path>
              </svg>
            </span>
          </button>
          <div class="grid px-6 pb-6 transition-[grid-template-rows,opacity] duration-300 ease-out [grid-template-rows:0fr] opacity-0" data-accordion-panel="" style="opacity: 0; grid-template-rows: 0fr;">
            <div class="min-h-0 overflow-hidden text-white/70">
              Send a brief about your goals. I'll review it, share a quick plan, timeline, and a flat estimate, then we kick off with a discovery call.
            </div>
          </div>
        </div>

        <div class="rounded-2xl bg-white/5 ring-1 ring-white/10 transition hover:ring-white/20" data-accordion="">
          <button class="flex w-full items-center justify-between p-6 text-left" data-accordion-trigger="" aria-expanded="false">
            <span class="text-base font-medium text-white/90">What design tools do you use?</span>
            <span class="grid size-9 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 transition" data-plus="">
              <svg class="h-4 w-4 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transform: rotate(0deg);">
                <path d="M12 5v14M5 12h14" class=""></path>
              </svg>
            </span>
          </button>
          <div class="grid px-6 pb-6 transition-[grid-template-rows,opacity] duration-300 ease-out [grid-template-rows:0fr] opacity-0" data-accordion-panel="" style="opacity: 0; grid-template-rows: 0fr;">
            <div class="min-h-0 overflow-hidden text-white/70">
              Figma for UI and prototypes, plus code-friendly systems (Tailwind) to keep handoff fast and consistent.
            </div>
          </div>
        </div>

        <div class="rounded-2xl bg-white/5 ring-1 ring-white/10 transition hover:ring-white/20" data-accordion="">
          <button class="flex w-full items-center justify-between p-6 text-left" data-accordion-trigger="" aria-expanded="false">
            <span class="text-base font-medium text-white/90">How long does a project take?</span>
            <span class="grid size-9 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 transition" data-plus="">
              <svg class="h-4 w-4 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transform: rotate(0deg);">
                <path d="M12 5v14M5 12h14" class=""></path>
              </svg>
            </span>
          </button>
          <div class="grid px-6 pb-6 transition-[grid-template-rows,opacity] duration-300 ease-out [grid-template-rows:0fr] opacity-0" data-accordion-panel="" style="opacity: 0; grid-template-rows: 0fr;">
            <div class="min-h-0 overflow-hidden text-white/70">
              Small pages: 1–2 weeks. Full products: 3–6 weeks depending on scope, feedback speed, and integrations.
            </div>
          </div>
        </div>

        <div class="rounded-2xl bg-white/5 ring-1 ring-white/10 transition hover:ring-white/20" data-accordion="">
          <button class="flex w-full items-center justify-between p-6 text-left" data-accordion-trigger="" aria-expanded="false">
            <span class="text-base font-medium text-white/90">Do you provide revisions?</span>
            <span class="grid size-9 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 transition" data-plus="">
              <svg class="h-4 w-4 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transform: rotate(0deg);">
                <path d="M12 5v14M5 12h14" class=""></path>
              </svg>
            </span>
          </button>
          <div class="grid px-6 pb-6 transition-[grid-template-rows,opacity] duration-300 ease-out [grid-template-rows:0fr] opacity-0" data-accordion-panel="" style="opacity: 0; grid-template-rows: 0fr;">
            <div class="min-h-0 overflow-hidden text-white/70">
              Yes — each phase includes structured review rounds to refine details without delaying delivery.
            </div>
          </div>
        </div>

        <div class="rounded-2xl bg-white/5 ring-1 ring-white/10 transition hover:ring-white/20" data-accordion="">
          <button class="flex w-full items-center justify-between p-6 text-left" data-accordion-trigger="" aria-expanded="false">
            <span class="text-base font-medium text-white/90">What industries do you work with?</span>
            <span class="grid size-9 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 transition" data-plus="">
              <svg class="h-4 w-4 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transform: rotate(0deg);">
                <path d="M12 5v14M5 12h14" class=""></path>
              </svg>
            </span>
          </button>
          <div class="grid px-6 pb-6 transition-[grid-template-rows,opacity] duration-300 ease-out [grid-template-rows:0fr] opacity-0" data-accordion-panel="" style="opacity: 0; grid-template-rows: 0fr;">
            <div class="min-h-0 overflow-hidden text-white/70">
              SaaS, education, e-commerce, and creator tools — with a focus on clean, fast interfaces.
            </div>
          </div>
        </div>

        <div class="rounded-2xl bg-white/5 ring-1 ring-white/10 transition hover:ring-white/20" data-accordion="">
          <button class="flex w-full items-center justify-between p-6 text-left" data-accordion-trigger="" aria-expanded="false">
            <span class="text-base font-medium text-white/90">Do you offer development services?</span>
            <span class="grid size-9 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 transition" data-plus="">
              <svg class="h-4 w-4 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transform: rotate(0deg);">
                <path d="M12 5v14M5 12h14" class=""></path>
              </svg>
            </span>
          </button>
          <div class="grid px-6 pb-6 transition-[grid-template-rows,opacity] duration-300 ease-out [grid-template-rows:0fr] opacity-0" data-accordion-panel="" style="opacity: 0; grid-template-rows: 0fr;">
            <div class="min-h-0 overflow-hidden text-white/70">
              I partner with trusted engineers when needed; otherwise I deliver dev-ready designs and components.
            </div>
          </div>
        </div>
      </div>
    </div>