Responsive Portfolio Showcase Section

<div class="sm:pl-6 sm:pr-6 lg:pl-8 lg:pr-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
  <div class="mb-16 grid lg:grid-cols-2 gap-8 items-start">
    <h2 class="sm:text-5xl md:text-6xl text-4xl font-semibold text-white tracking-tight">Selected Work</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">
        A collection of projects that showcase design thinking, strategic vision, and attention to detail.
      </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">
              View all projects
            </button>
    </div>
  </div>

  <div class="grid lg:grid-cols-3 gap-0 border-t border-white/10">
    <!-- Project 1 -->
    <div class="divide-y divide-white/10 lg:border-r border-white/10">
      <div class="p-8">
        <div class="relative mb-6 rounded-xl overflow-hidden">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/657e9b8d-e126-435c-a3d5-84ef43f36d93_800w.jpg" alt="E-commerce Platform Design" class="w-full h-48 object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        </div>
        <div class="flex items-center gap-4 mb-6">

          <div class="">
            <div class="text-white font-medium">E-commerce Platform</div>
            <div class="text-sm text-neutral-400">Web Design</div>
          </div>
        </div>
        <p class="leading-relaxed text-neutral-300">Redesigned an e-commerce platform to improve UX and drive conversion
          through design thinking.</p>
      </div>
      <div class="p-8">
        <div class="relative mb-6 rounded-xl overflow-hidden">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fe4689df-36fb-4278-afbf-5fd919271db8_800w.jpg" alt="Fitness Tracker App Design" class="w-full h-48 object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        </div>
        <div class="flex items-center gap-4 mb-6">

          <div class="">
            <div class="text-white font-medium">Fitness Tracker App</div>
            <div class="text-sm text-neutral-400">Mobile App</div>
          </div>
        </div>
        <p class="text-neutral-300 leading-relaxed">
          iOS and Android app design for a comprehensive fitness tracking platform with social features and AI coaching
          capabilities.
        </p>
      </div>
    </div>

    <!-- Project 2 -->
    <div class="divide-y divide-white/10 lg:border-r border-white/10">
      <div class="p-8">
        <div class="relative mb-6 rounded-xl overflow-hidden">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b758b514-4dcf-4403-99ef-56e8a8ac1346_800w.jpg" alt="Tech Startup Branding" class="w-full h-48 object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        </div>
        <div class="flex items-center gap-4 mb-6">

          <div class="">
            <div class="text-white font-medium">Tech Startup Branding</div>
            <div class="text-sm text-neutral-400">Brand Identity</div>
          </div>
        </div>
        <p class="text-neutral-300 leading-relaxed">
          Brand identity and digital presence for a sustainable clean energy startup, emphasizing innovation and
          environmental responsibility.
        </p>
      </div>
      <div class="p-8">
        <div class="relative mb-6 rounded-xl overflow-hidden">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3296078e-c9ed-4815-ac9d-652df0aa5b32_800w.jpg" alt="Design System Components" class="w-full h-48 object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        </div>
        <div class="flex items-center gap-4 mb-6">

          <div class="">
            <div class="text-white font-medium">Design System</div>
            <div class="text-sm text-neutral-400">UI Framework</div>
          </div>
        </div>
        <p class="text-neutral-300 leading-relaxed">
          Comprehensive design system for a fintech company, creating scalable components and design tokens for
          consistent user experiences.
        </p>
      </div>
    </div>

    <!-- Project 3 -->
    <div class="divide-y divide-white/10">
      <div class="pt-8 pr-8 pb-8 pl-8">
        <div class="relative mb-6 rounded-xl overflow-hidden">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/15dcd313-d05a-4be3-9ae5-cff2235d88bd_800w.jpg" alt="SaaS Dashboard Interface" class="w-full h-48 object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        </div>
        <div class="flex items-center gap-4 mb-6">

          <div class="">
            <div class="text-white font-medium">SaaS Dashboard</div>
            <div class="text-sm text-neutral-400">Web Application</div>
          </div>
        </div>
        <p class="text-neutral-300 leading-relaxed">
          Modern dashboard design for a business analytics platform, featuring complex data visualization and intuitive
          user workflows.
        </p>
      </div>
      <div class="p-8">
        <div class="relative mb-6 rounded-xl overflow-hidden">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/17e789bf-f3aa-4172-b9fa-854b9665ed5d_800w.jpg" alt="UX Strategy Planning" class="w-full h-48 object-cover" style="">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        </div>
        <div class="flex gap-4 mb-6 items-center">

          <div class="">
            <div class="text-white font-medium">UX Strategy</div>
            <div class="text-sm text-neutral-400">Consultation</div>
          </div>
        </div>
        <p class="text-neutral-300 leading-relaxed">
          Strategic UX consultation and design optimization for a healthcare platform, improving patient engagement and
          clinical workflows.
        </p>
      </div>
    </div>
  </div>
</div>