Purple Portfolio Hero with Designer Focus

<section
  class="relative min-h-screen w-full bg-[#6D28D9] text-white overflow-hidden font-sans selection:bg-black selection:text-white"
  style="font-family: 'Inter', sans-serif;">
  <!-- Scripts and Dependencies -->
  <script src="https://unpkg.com/lucide@latest"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <!-- Background Image Layer -->
  <div class="absolute inset-0 z-0 flex justify-center items-end pointer-events-none">
    <img
      src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/848d89a4-9074-40a7-8a7a-5d6d38723d55_1600w.png"
      alt="Designer Portrait"
      class="h-[70vh] lg:h-[95vh] w-auto object-cover opacity-60 saturate-0 mix-blend-luminosity"
      style="mask-image: linear-gradient(to bottom, black 40%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%); object-position: center top;"
    >
  </div>

  <!-- Navigation -->
  <nav class="relative z-50 flex justify-between items-center p-6 lg:px-12 lg:py-10 text-sm font-normal tracking-wide">
    <div class="flex gap-8 items-center mix-blend-plus-lighter">
      <span class="font-bold text-lg tracking-tighter lg:mr-12">JB.</span>
      <div class="hidden lg:flex gap-8 items-center opacity-80">
        <a href="#" class="hover:opacity-100 transition-opacity">Work</a>
        <a href="#" class="hover:opacity-100 transition-opacity">About</a>
        <a href="#" class="hover:opacity-100 transition-opacity">Process</a>
      </div>
    </div>

    <div class="flex gap-8 items-center">
      <div
        class="hidden md:flex items-center gap-2 mix-blend-plus-lighter border border-white/20 px-3 py-1.5 rounded-full bg-white/5">
        <div class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></div>
        <span class="text-[10px] font-semibold uppercase tracking-widest">Available now</span>
      </div>
      <a href="#" class="hover:opacity-70 transition-opacity font-medium">Contact</a>
      <button class="lg:hidden p-2 text-white">
        <i data-lucide="menu" class="w-6 h-6"></i>
      </button>
    </div>
  </nav>

  <!-- Main Hero Grid -->
  <div class="relative z-10 w-full lg:min-h-[calc(100vh-120px)] grid grid-cols-1 lg:grid-cols-4 pointer-events-none">

    <!-- Left Column: Branding & Mobile Hero -->
    <div class="h-full border-r border-white/5 flex flex-col justify-between pointer-events-auto px-6 lg:px-10 pb-12">
      <!-- Desktop Hero Part 1 -->
      <div class="hidden lg:block pt-12">
        <h1
          class="font-extrabold tracking-tighter text-white mix-blend-overlay opacity-90 leading-[0.8] whitespace-nowrap"
          style="font-size: 16vw; letter-spacing: -0.06em;">
          UI UX
        </h1>
      </div>

      <!-- Mobile Hero -->
      <div class="lg:hidden mt-12 mb-20">
        <h1 class="font-extrabold tracking-tighter text-white mix-blend-overlay opacity-90 leading-[0.85]"
          style="font-size: 22vw; letter-spacing: -0.06em;">
          UI UX<br>AI
        </h1>
      </div>

      <!-- Introduction Text -->
      <div class="max-w-xs mt-auto">
        <div class="flex items-center gap-3 mb-6">
          <span class="h-[1px] w-8 bg-white/40"></span>
          <span class="text-[10px] font-bold uppercase tracking-[0.2em] opacity-60">Lead Designer</span>
        </div>
        <p class="text-lg font-light leading-relaxed opacity-90">
          Crafting intuitive digital ecosystems and AI-driven interfaces for the next generation of fintech scaling.
        </p>
        <div class="mt-8 flex items-center gap-4">
          <div
            class="w-10 h-10 bg-white text-black rounded-full flex items-center justify-center cursor-pointer hover:scale-110 transition-transform shadow-xl">
            <i data-lucide="arrow-right" class="w-4 h-4"></i>
          </div>
          <span class="text-xs font-semibold tracking-wider uppercase opacity-60">View Projects</span>
        </div>
      </div>
    </div>

    <!-- Center Columns (Spacers with Grid Lines) -->
    <div class="hidden lg:block h-full border-r border-white/5"></div>
    <div class="hidden lg:block h-full border-r border-white/5"></div>

    <!-- Right Column: Stats & Part 2 -->
    <div class="h-full relative pointer-events-auto flex flex-col justify-between px-6 lg:px-10 pb-12">
      <!-- Desktop Hero Part 2 -->
      <div class="hidden lg:block pt-12 text-right">
        <h1 class="font-extrabold tracking-tighter text-white mix-blend-overlay opacity-90 leading-[0.8]"
          style="font-size: 16vw; letter-spacing: -0.06em;">
          AI
        </h1>
      </div>

      <!-- Stats Block -->
      <div class="mt-auto lg:mb-12 flex flex-col items-end">
        <div class="text-right">
          <div class="text-6xl font-light tracking-tighter mb-2">07<span class="text-2xl opacity-30 ml-1">/YRS</span>
          </div>
          <div class="h-[1px] w-24 bg-white/20 ml-auto mb-4"></div>
          <p class="text-[10px] font-bold uppercase tracking-widest opacity-60">Professional Experience</p>
        </div>

        <div class="mt-12 flex flex-col items-end gap-3">
          <div class="flex gap-4 items-center opacity-60">
            <iconify-icon icon="simple-icons:figma" width="20"></iconify-icon>
            <iconify-icon icon="simple-icons:framer" width="20"></iconify-icon>
            <iconify-icon icon="simple-icons:webflow" width="20"></iconify-icon>
          </div>
          <span class="text-[10px] font-bold uppercase tracking-widest opacity-40">Core Tech Stack</span>
        </div>
      </div>

      <!-- Bottom CTA Card -->
      <div
        class="hidden lg:flex w-full h-24 bg-white/5 backdrop-blur-xl border border-white/10 rounded-sm items-center px-8 justify-between hover:bg-white/10 transition-colors cursor-pointer group mt-8">
        <div class="flex flex-col">
          <span class="text-xs font-bold opacity-40 uppercase tracking-widest mb-1">Latest Resume</span>
          <span class="text-sm font-medium">Download CV 2024</span>
        </div>
        <i data-lucide="download" class="w-5 h-5 opacity-60 group-hover:translate-y-0.5 transition-transform"></i>
      </div>
    </div>
  </div>

  <script>
    // Initialize Lucide icons for this component
    if (typeof lucide !== 'undefined') {
      lucide.createIcons();
    }
  </script>
</section>