Skip to content

xt26: design refresh (speakers, agenda, hero CTA) #258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jonpither wants to merge 2 commits into
base: main
Choose a base branch
from
Open

xt26: design refresh (speakers, agenda, hero CTA) #258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14b004f
xt26: design refresh — square B&W speakers, dark agenda, orange CTA
jonpither May 19, 2026
77e7260
Trigger Netlify deploy preview rebuild
jonpither May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions src/components/XT26Agenda.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,19 +114,18 @@ const agenda = [
<div>
<div
class:list={[
'grid grid-cols-1 sm:grid-cols-5',
{ 'bg-white': !isSpecialEvent }
'grid grid-cols-1 sm:grid-cols-5 sm:divide-x sm:divide-juxt',
{ 'bg-zinc-900': isSpecialEvent }
]}
style={isSpecialEvent ? 'background-color: #c7e5b8;' : ''}
>
<p class='px-5 pt-5 sm:p-5 font-semibold text-lg align-text-top text-center text-gray-800 sm:border-r-2 sm:border-black'>
<p class='px-5 pt-5 sm:p-5 font-semibold text-lg align-text-top text-white'>
{time}
</p>
<div class='px-5 pb-5 sm:p-5 sm:col-span-4'>
<h2 class='font-bold text-xl text-black'>{title}</h2>
<h2 class='font-light text-lg text-juxt uppercase'>{title}</h2>
{subTitle &&
(Array.isArray(subTitle) ? subTitle : [subTitle]).map((s) => (
<p class='font-light text-sm text-gray-700'>{s}</p>
<p class='font-light text-lg text-white'>{s}</p>
))}
</div>
</div>
Expand Down
41 changes: 16 additions & 25 deletions src/components/XT26Page.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const subject = 'XT26 Request for Invite'
</div>
<a
href='#attend'
class='inline-block border border-white/40 text-white px-10 py-5 text-sm tracking-[0.2em] uppercase hover:bg-white hover:text-black transition-all duration-300'
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>
Expand Down Expand Up @@ -97,34 +97,27 @@ const subject = 'XT26 Request for Invite'
</div>

<div
class='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-12 w-full'
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 flex flex-col items-center text-center ${
class={`speaker-card group flex flex-col items-center text-center ${
linkedin ? 'cursor-pointer' : 'cursor-default'
}`}
>
<div class='relative mb-2 w-56 h-56'>
<div
class='w-56 h-56 border-[5px] border-juxt rounded-full overflow-hidden bg-blue-300'
>
<AssetImage
src={image}
alt={`Headshot of ${name}`}
class='w-full h-full object-cover'
/>
</div>
<div class='absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent rounded-full pointer-events-none' />
<div class='absolute bottom-0.5 left-0 right-0 flex justify-center pointer-events-none'>
<h3 class='font-bold text-lg text-white leading-tight'>
{name}
</h3>
</div>
<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 grayscale group-hover:grayscale-0 transition-all 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>
Expand All @@ -143,7 +136,7 @@ const subject = 'XT26 Request for Invite'
</section>

<!-- Agenda Section -->
<section id='agenda' class='bg-gray-50'>
<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
Expand All @@ -152,18 +145,16 @@ const subject = 'XT26 Request for Invite'
The Day
</p>
<h2
class='text-4xl md:text-5xl lg:text-6xl font-extralight text-gray-900 mb-6'
class='text-4xl md:text-5xl lg:text-6xl font-extralight text-white mb-6'
>
Agenda
</h2>
<p class='text-gray-500 text-lg max-w-2xl font-light'>
<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 bg-white rounded-lg overflow-hidden p-6 sm:p-10 md:p-14 shadow-sm'
>
<div class='w-full'>
<XT26Agenda />
</div>
<div class='w-full flex justify-end'>
Expand Down
Loading