XT26Page.astro

---
import { ContactUsForm } from '@components/ContactUsForm'
import AssetImage from '@components/team/AssetImage.astro'
import Layout from '@layouts/Layout.astro'
import XT26Agenda from '@components/XT26Agenda.astro'
import speakers from '../data/xt26/speakers.json'

const subject = 'XT26 Request for Invite'
---

<Layout
  title='XT26 Fintech Conference'
  ogImage='/images/XT26/XT26-thumbnail.webp'
  ogTitle='XT26 Fintech Conference - June 18th, 2026 - London'
  ogDescription='An invite-only event for 250 senior engineering leaders from banking and fintech. No sales pitches. Just real-world experience shared by peers.'
>
  <!-- Hero Section -->
  <section
    class='relative w-full h-[100dvh] flex items-center justify-center bg-cover bg-center'
    style="background-image: url('/images/XT26/london-city.jpg');"
  >
    <div
      class='absolute inset-0 bg-gradient-to-b from-black/80 via-black/60 to-black/90'
    >
    </div>
    <div
      class='relative z-10 flex flex-col items-center justify-center text-center px-6 w-full max-w-5xl mx-auto'
    >
      <img
        src='/images/XT26/XT26-white-slide-centre.svg'
        alt='XT26 Logo'
        class='w-60 md:w-96 mb-8'
      />
      <p
        class='text-juxt text-sm md:text-base font-semibold tracking-[0.15em] uppercase mb-5'
      >
        A Fintech event brought to you by
      </p>
      <div class='flex items-center justify-center gap-4 md:gap-12 mb-8 max-w-full px-4'>
        <img
          src='/images/XT26/juxt-logo-on-dark.svg'
          alt='JUXT'
          class='h-5 sm:h-7 md:h-10'
        />
        <span class='text-juxt text-sm font-semibold uppercase shrink-0'>and</span>
        <img
          src='/images/XT26/grid-dynamics-logo-white.svg'
          alt='Grid Dynamics'
          class='h-5 sm:h-8 md:h-12'
        />
      </div>
      <div
        class='flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-10 text-white/90 mb-14'
      >
        <span class='text-xl md:text-2xl font-light tracking-wide'
          >June 18th, 2026</span
        >
        <span class='hidden sm:block w-px h-8 bg-white/30'></span>
        <span class='text-xl md:text-2xl font-light tracking-wide'
          >Tower Hill, London</span
        >
      </div>
      <a
        href='#attend'
        class='inline-block bg-juxt text-black px-10 py-5 text-sm font-semibold tracking-[0.2em] uppercase hover:bg-white transition-all duration-300'
      >
        Apply to Attend
      </a>
    </div>

    <!-- Scroll indicator -->
    <div
      class='absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 text-white/60'
    >
      <span class='text-xs tracking-[0.3em] uppercase'>Scroll</span>
      <div
        class='w-px h-12 bg-gradient-to-b from-white/60 to-transparent animate-pulse'
      >
      </div>
    </div>
  </section>

  <!-- Speakers Section -->
  <section id='speakers' class='bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900'>
    <div class='max-w-7xl mx-auto px-6 md:px-12 lg:px-20 py-24 md:py-32'>
      <div class='flex flex-col items-center text-center mb-16 md:mb-20'>
        <p
          class='text-juxt text-xs font-semibold tracking-[0.2em] uppercase mb-4'
        >
          Speakers
        </p>
        <h2
          class='text-4xl md:text-5xl lg:text-6xl font-extralight text-white'
        >
          Who's Speaking
        </h2>
      </div>

      <div
        class='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-14 w-full'
      >
        {
          speakers.map(({ name, role, company, image, linkedin }) => (
            <a
              href={linkedin && `https://www.linkedin.com/in/${linkedin}`}
              target='_blank'
              class={`speaker-card group flex flex-col items-center text-center ${
                linkedin ? 'cursor-pointer' : 'cursor-default'
              }`}
            >
              <div class='relative mb-5 w-full aspect-square overflow-hidden bg-gray-800'>
                <AssetImage
                  src={image}
                  alt={`Headshot of ${name}`}
                  class='w-full h-full object-cover group-hover:scale-105 transition-transform duration-500'
                />
              </div>
              <h3 class='font-semibold text-lg text-white leading-tight mb-1'>
                {name}
              </h3>
              {Array.isArray(role) ? (
                role.map((line) => (
                  <p class='text-sm text-gray-400 mb-0'>{line}</p>
                ))
              ) : (
                <p class='text-sm text-gray-400'>{role}</p>
              )}
              {company && (
                <p class='text-sm font-medium text-gray-300'>{company}</p>
              )}
            </a>
          ))
        }
      </div>
    </div>
  </section>

  <!-- Agenda Section -->
  <section id='agenda' class='bg-zinc-800 text-white'>
    <div class='max-w-7xl mx-auto px-6 md:px-12 lg:px-20 py-24 md:py-32'>
      <div class='flex flex-col items-center text-center mb-16 md:mb-20'>
        <p
          class='text-juxt text-xs font-semibold tracking-[0.2em] uppercase mb-4'
        >
          The Day
        </p>
        <h2
          class='text-4xl md:text-5xl lg:text-6xl font-extralight text-white mb-6'
        >
          Agenda
        </h2>
        <p class='text-gray-400 text-lg max-w-2xl font-light'>
          Nine talks, an expert panel, and an evening reception.
        </p>
      </div>

      <div class='w-full'>
        <XT26Agenda />
      </div>
      <div class='w-full flex justify-end'>
        <p class='text-sm text-gray-500 pt-4'>
          *Agenda and speakers are subject to change
        </p>
      </div>
    </div>
  </section>

  <!-- Gradient Divider -->
  <div class='bg-moonlight'>
    <div class='max-w-4xl mx-auto px-6'>
      <div
        class='h-px bg-gradient-to-r from-transparent via-juxt/50 to-transparent'
      >
      </div>
    </div>
  </div>

  <!-- Speaker Form Section -->
  <section id='attend' class='bg-moonlight'>
    <div class='max-w-7xl mx-auto px-6 md:px-12 lg:px-20 py-24 md:py-32'>
      <div class='max-w-2xl mx-auto'>
        <div class='flex flex-col items-center text-center mb-16'>
          <h2 class='text-4xl md:text-5xl font-extralight text-white mb-6'>
            Interested in Attending?
          </h2>
          <p class='text-gray-400 text-lg font-light max-w-md'>
            XT26 is an invite-only event. If you're interested in attending please fill out the form below.
          </p>
        </div>

        <ContactUsForm
          client:only
          subject={subject}
          eventName='XT26'
          variant='dark'
          transparentInputs
          submitLabelColor='#0b0e14'
          successTitle='Thank you for your interest'
          successMessage="We'll reach out if spots become available."
        />
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id='about' class='bg-white overflow-hidden'>
    <div class='max-w-7xl mx-auto px-6 md:px-12 lg:px-20 py-24 md:py-32'>
      <div class='grid lg:grid-cols-12 gap-12 lg:gap-16 items-center'>
        <!-- Image - takes 7 cols on desktop, shows first -->
        <div class='lg:col-span-7 lg:order-1 order-2 relative'>
          <div
            class='absolute -inset-6 bg-gradient-to-br from-juxt/5 to-transparent -z-10'
          >
          </div>
          <img
            src='/images/XT26/Juxt-2025-267.jpg'
            alt='XT25 Conference - speaker presenting to packed audience'
            class='w-full aspect-[4/3] object-cover'
          />
        </div>
        <!-- Text - takes 5 cols on desktop -->
        <div class='lg:col-span-5 lg:order-2 order-1'>
          <p
            class='text-juxt text-xs font-semibold tracking-[0.2em] uppercase mb-4'
          >
            About the Conference
          </p>
          <h2
            class='text-4xl md:text-5xl font-extralight text-gray-900 leading-tight mb-8'
          >
            An Invite-only Event for Engineering Leaders
          </h2>
          <div
            class='space-y-5 text-gray-500 text-base leading-relaxed font-light'
          >
            <p>
              It's our tenth year running the XT conference (2016-2026), and this year
              bringing together around 250 senior engineering leaders across
              banking, hedge funds, and financial services, in London's Tower Hill.
            </p>
            <p>
              This is <span class='text-gray-800 font-normal'>pure thought leadership</span>. Real-world experience shared by peers who are actually doing engineering at scale.
            </p>
            <p>
              The conference has grown organically each year, building a
              community of practitioners focused on solving hard technical
              problems in financial services.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Featured Talks Section -->
  <section id='highlights' class='bg-white'>
    <div class='max-w-7xl mx-auto px-6 md:px-12 lg:px-20 py-24 md:py-32'>
      <div class='flex flex-col items-center text-center mb-16 md:mb-20'>
        <p
          class='text-juxt text-xs font-semibold tracking-[0.2em] uppercase mb-4'
        >
          Past Highlights
        </p>
        <h2
          class='text-4xl md:text-5xl lg:text-6xl font-extralight text-gray-900 mb-6'
        >
          Featured Talks from XT25
        </h2>
      </div>

      <div class='grid lg:grid-cols-2 gap-12 lg:gap-16 items-start'>
        <!-- Featured Video -->
        <div>
          <div class='aspect-video w-full bg-gray-100'>
            <iframe
              class='w-full h-full'
              src='https://www.youtube.com/embed/A3yR4OlEBCA'
              title='Taking Control of Your Trading System - Peter Windle, HSBC'
              frameborder='0'
              allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
              referrerpolicy='strict-origin-when-cross-origin'
              allowfullscreen></iframe>
          </div>
        </div>

        <!-- More Talks Links -->
        <div class='space-y-0'>
          <a
            href='/blog/xt25-fintech-taming-complexity-in-distributed-systems/'
            class='group block border-b border-gray-200 py-6 hover:border-juxt transition-colors'
          >
            <span
              class='block text-lg font-medium text-gray-900 group-hover:text-juxt transition-colors mb-1'
            >
              Taming Complexity in Distributed Systems
            </span>
            <span class='text-gray-500 text-sm'>Donato Lucia, Revolut</span>
          </a>

          <a
            href='/blog/xt25-fintech-becoming-a-digital-retail-bank/'
            class='group block border-b border-gray-200 py-6 hover:border-juxt transition-colors'
          >
            <span
              class='block text-lg font-medium text-gray-900 group-hover:text-juxt transition-colors mb-1'
            >
              Becoming a Digital Retail Bank: What We've Learned
            </span>
            <span class='text-gray-500 text-sm'
              >Alexey Gabsatarov, Kroo Bank</span
            >
          </a>

          <a
            href='/blog/xt25-fintech-pragmatic-solutions-to-current-challenges/'
            class='group block border-b border-gray-200 py-6 hover:border-juxt transition-colors'
          >
            <span
              class='block text-lg font-medium text-gray-900 group-hover:text-juxt transition-colors mb-1'
            >
              Expert Panel: Pragmatic Solutions to Current Challenges
            </span>
            <span class='text-gray-500 text-sm'
              >Leaders from Citi, HSBC, QRT</span
            >
          </a>
        </div>
      </div>

      <div class='grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mt-16'>
        <div class='aspect-[4/3] overflow-hidden'>
          <img
            src='/images/XT26/Juxt-2025-324.jpg'
            alt='Networking at XT25'
            class='w-full h-full object-cover hover:scale-105 transition-transform duration-500'
          />
        </div>
        <div class='aspect-[4/3] overflow-hidden'>
          <img
            src='/images/XT26/Juxt-2025-521.jpg'
            alt='Fireside chat with Dave Morris and Jon Pither at XT25'
            class='w-full h-full object-cover hover:scale-105 transition-transform duration-500'
          />
        </div>
        <div class='aspect-[4/3] overflow-hidden'>
          <img
            src='/images/XT26/Juxt-2025-910.jpg'
            alt='Evening reception at XT25'
            class='w-full h-full object-cover hover:scale-105 transition-transform duration-500'
          />
        </div>
        <div class='aspect-[4/3] overflow-hidden'>
          <img
            src='/images/XT26/Juxt-2025-109.jpg'
            alt='Engaged audience at XT25'
            class='w-full h-full object-cover hover:scale-105 transition-transform duration-500'
          />
        </div>
      </div>
    </div>
  </section>
</Layout>