Responsive Design Packages Pricing Table

<div class="sm:pl-6 sm:pr-6 lg:pl-8 lg:pr-8 max-w-7xl mr-auto ml-auto pt-4 pr-4 pb-4 pl-4">
        <div class="mb-16 grid lg:grid-cols-2 gap-8 items-start">
          <h2 class="text-5xl sm:text-6xl md:text-7xl font-semibold tracking-tight text-white">
            Design Packages
          </h2>
          <div class="flex flex-col items-start lg:items-end gap-6">
            <p class="text-lg text-neutral-300 max-w-xl text-left lg:text-right">
              Flexible design solutions crafted to meet your project needs. From quick fixes to complete brand transformations.
            </p>
            <button class="inline-flex items-center justify-center px-6 py-3 rounded-full bg-white text-black text-sm font-medium hover:bg-neutral-200 transition-colors">
              Schedule consultation
            </button>
          </div>
        </div>

        <div class="grid lg:grid-cols-3 gap-0 border-t border-white/10">
          <!-- Essential -->
          <div class="divide-y divide-white/10 lg:border-r border-white/10">
            <div class="sm:p-16 lg:p-24 text-center pt-12 pr-12 pb-12 pl-12">
              
              <h3 class="text-4xl sm:text-5xl font-semibold tracking-tight text-white">Essential</h3>
              <p class="leading-relaxed text-lg text-neutral-300 max-w-sm mt-6 mr-auto ml-auto">
                Perfect for startups and small businesses looking to establish their digital presence with clean, functional design.
              </p>
              <div class="mt-24">
                <div class="text-5xl sm:text-6xl font-semibold tracking-tight text-white">$2,500</div>
                <div class="text-lg text-neutral-400 mt-4">one-time project</div>
              </div>
            </div>
            <div class="p-12 sm:p-16 lg:p-24 text-left">
              <div class="text-sm text-neutral-400 mb-4">Includes:</div>
              <ul class="space-y-3 text-sm text-neutral-300">
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  Logo design &amp; brand identity
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  5-page website design
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  Mobile-responsive design
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  2 rounds of revisions
                </li>
              </ul>
            </div>
          </div>

          <!-- Professional -->
          <div class="divide-y divide-white/10 lg:border-r border-white/10 relative">
            <div class="p-12 sm:p-16 lg:p-24 text-center">
              
              
              <h3 class="text-4xl sm:text-5xl font-semibold tracking-tight text-white">Professional</h3>
              <p class="text-lg text-neutral-300 leading-relaxed max-w-sm mx-auto mt-6">
                Comprehensive design solutions for growing businesses that need sophisticated user experiences and brand consistency.
              </p>
              <div class="mt-24">
                <div class="text-5xl sm:text-6xl font-semibold tracking-tight text-white">$7,500</div>
                <div class="text-lg text-neutral-400 mt-4">one-time project</div>
              </div>
            </div>
            <div class="p-12 sm:p-16 lg:p-24 text-left">
              <div class="text-sm text-neutral-400 mb-4">Everything in Essential, plus:</div>
              <ul class="space-y-3 text-sm text-neutral-300">
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  Complete design system
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  UI/UX for web application
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  Interactive prototypes
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  User research &amp; testing
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  4 rounds of revisions
                </li>
              </ul>
            </div>
          </div>

          <!-- Enterprise -->
          <div class="divide-y divide-white/10">
            <div class="sm:p-16 lg:p-24 text-center pt-12 pr-12 pb-12 pl-12">
              
              <h3 class="text-4xl sm:text-5xl font-semibold tracking-tight text-white">Enterprise</h3>
              <p class="leading-relaxed text-lg text-neutral-300 max-w-sm mt-6 mr-auto ml-auto">Full-service design partnership for companies requiring complex solutions and ongoing design support.</p>
              <div class="mt-24">
                <div class="text-5xl sm:text-6xl font-semibold tracking-tight text-white">Custom</div>
                <div class="text-lg text-neutral-400 mt-4">contact for quote</div>
              </div>
            </div>
            <div class="p-12 sm:p-16 lg:p-24 text-left">
              <div class="text-sm text-neutral-400 mb-4">Everything in Professional, plus:</div>
              <ul class="space-y-3 text-sm text-neutral-300">
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  Multi-platform design system
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  Mobile app design (iOS &amp; Android)
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  Design team training
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  Ongoing design support
                </li>
                <li class="flex items-center gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white flex-shrink-0">
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                  Unlimited revisions
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>