Event Landing Page Updates

src/_components/SponsorSimple.svelte

@@ -57,10 +57,10 @@
 			<div class="relative overflow-hidden">
 				<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
 					<div class="my-12 flex flex-col items-start sm:items-center">
-						<h1
+						<h2
 							class="text-2xl font-extrabold uppercase text-thatBlue-700 antialiased sm:text-3xl lg:text-4xl xl:text-5xl">
 							Our Featured Camp Sponsors
-						</h1>
+						</h2>
 					</div>
 
 					<div class="flex grid-cols-6 flex-col gap-8 sm:grid">

src/_components/activities/UpNextEvent.svelte

@@ -15,17 +15,18 @@
 		.slice(0, 9);
 </script>
 
-<section class="bg-thatBlue-700 py-12 lg:py-16">
+<section class="bg-thatBlue-700 py-12 lg:py-24">
 	<div class="relative mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
 		<div class="space-y-12">
 			<div class="space-y-5 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none">
-				<h2 class="text-3xl font-extrabold leading-9 tracking-tight text-white sm:text-4xl">
-					Featured Activities
+				<h2
+					class="text mb-8 mt-8 text-4xl font-bold leading-8 tracking-tight text-white sm:text-5xl sm:leading-10">
+					Session Spotlights
 				</h2>
+
 				<p class="text-xl leading-7 text-gray-300">
-					Do you have a ticket?
 					<span class="pl:2 text-that-orange hover:text-thatOrange-500">
-						<a href={`/activities/${event.slug}`}>View the full schedule.</a>
+						<a href={`schedule`}>View the full schedule.</a>
 					</span>
 				</p>
 			</div>
@@ -38,10 +39,6 @@
 						</li>
 					{/each}
 				{/if}
-
-				<!-- <li class="h-full w-full" in:fade>
-					<FeaturedActivityAdd eventId={event.id} />
-				</li> -->
 			</ul>
 
 			<div class="flex justify-end">

src/_components/members/MemberCard.svelte

@@ -16,7 +16,7 @@
 	const srcset = buildImageSrc(userProfileImage, ['128', '500']);
 </script>
 
-<a data-sveltekit-prefetch href="/members/{profileSlug}">
+<a href="/members/{profileSlug}">
 	<div
 		class="h-full transform rounded-lg bg-white text-center shadow transition duration-500 ease-in-out hover:scale-105 hover:bg-gray-100">
 		<div class="flex flex-col p-4">

src/_components/navigation/thatConference/EventNav.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <div class=" bg-white py-12">
-	<div class="mx-auto flex max-w-screen-xl items-center justify-between">
+	<div class="mx-auto flex max-w-screen-2xl items-center justify-between">
 		<!-- logo -->
 		<div class="flex items-center">
 			<div class="cursor">
@@ -27,6 +27,7 @@
 			<div class="ml-8 flex space-x-4 text-lg font-bold">
 				<NavLink href={buildUrl('speakers')}>Speakers</NavLink>
 				<NavLink href={buildUrl('schedule')}>Schedule</NavLink>
+				<NavLink href={buildUrl('attendees')}>Attendees</NavLink>
 				<NavLink href={buildUrl('sponsors')}>Sponsors</NavLink>
 				<NavLink href={buildAnchorLink('dates')}>Dates</NavLink>
 				<NavLink href={buildUrl('travel')}>Travel</NavLink>

src/_components/navigation/thatConference/MobileEventNav.svelte

@@ -78,6 +78,7 @@
 					<NavLink href={buildUrl('tickets')}>Tickets</NavLink>
 					<NavLink href={buildUrl('speakers')}>Speakers</NavLink>
 					<NavLink href={buildUrl('schedule')}>Schedule</NavLink>
+					<NavLink href={buildUrl('attendees')}>Attendees</NavLink>
 					<NavLink href={buildUrl('sponsors')}>Sponsors</NavLink>
 					<NavLink href={buildAnchorLink('dates')}>Dates</NavLink>
 					<NavLink href={buildAnchorLink('faq')}>FAQ</NavLink>

src/_components/newsletter/Wide.svelte

@@ -2,10 +2,9 @@
 	import HubspotForm from './HubspotForm.svelte';
 </script>
 
-<section class="bg-thatBlue-700 py-12 lg:py-16">
+<section class="overflow-clip bg-thatBlue-700 py-12 lg:py-36">
 	<div
-		class="relative mx-auto max-w-screen-xl px-4 sm:px-6 lg:flex lg:items-center
-      lg:px-8">
+		class="relative isolate mx-auto max-w-screen-xl px-4 sm:px-6 lg:flex lg:items-center lg:px-8">
 		<div class="lg:w-0 lg:flex-1">
 			<h2
 				class="text-4xl font-semibold leading-10 tracking-tight text-white sm:text-5xl sm:leading-none"
@@ -21,5 +20,28 @@
 		<div class="mt-8 lg:ml-8 lg:mt-0">
 			<HubspotForm formId={'newsletter-wide'} />
 		</div>
+		<svg
+			viewBox="0 0 1024 1024"
+			class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2"
+			aria-hidden="true">
+			<circle
+				cx="512"
+				cy="512"
+				r="512"
+				fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
+				fill-opacity="0.7" />
+			<defs>
+				<radialGradient
+					id="759c1415-0410-454c-8f7c-9a820de03641"
+					cx="0"
+					cy="0"
+					r="1"
+					gradientUnits="userSpaceOnUse"
+					gradientTransform="translate(512 512) rotate(90) scale(512)">
+					<stop stop-color="#7775D6" />
+					<stop offset="1" stop-color="#E935C1" stop-opacity="0" />
+				</radialGradient>
+			</defs>
+		</svg>
 	</div>
 </section>

src/_dataSources/api.that.tech/events/queries.js

@@ -122,7 +122,7 @@ const eventFieldsFragment = `
 			...productBaseFields
 		}
 
-		sessions {
+		sessions(pageSize: 150) {
 			sessions {
 				...coreSessionFields
 				speakers {
@@ -131,7 +131,8 @@ const eventFieldsFragment = `
 			}
 		}
 
-		followers {
+		followers(pageSize: 100) {
+			cursor
 			members {
 				...memberFields
 			}
@@ -515,6 +516,24 @@ export const QUERY_EVENTS_VENUE_PRODUCTS = `
 	}
 `;
 
+export const QUERY_EVENT_FOLLOWERS = `
+	${userFragment}
+	query QUERY_EVENT_FOLLOWERS ($slug: String!, $cursor: String) {
+		events {
+			event (findBy: {slug: $slug}) {
+				get {
+					followers(pageSize: 100, cursor: $cursor) {
+						cursor 
+						members {
+							...memberFields
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
 export default (fetch) => {
 	const client = fetch ? gFetch(fetch) : gFetch();
 
@@ -679,6 +698,16 @@ export default (fetch) => {
 			});
 	}
 
+	function queryEventFollowers(eventSlug, cursor) {
+		const variables = { slug: eventSlug, cursor };
+
+		return client.query({ query: QUERY_EVENT_FOLLOWERS, variables }).then(({ data, errors }) => {
+			if (errors) log({ errors, tag: 'QUERY_EVENT_FOLLOWERS' });
+
+			return data?.events?.event?.get.followers;
+		});
+	}
+
 	return {
 		queryEvents,
 		queryEventsByCommunity,
@@ -693,6 +722,7 @@ export default (fetch) => {
 		queryActiveEventsByCommunitiesForJobs,
 		queryActiveEventsForProducts,
 		queryEventsForVenueAndProducts,
-		queryEventSpeakers
+		queryEventSpeakers,
+		queryEventFollowers
 	};
 };

src/_elements/FeaturedActivity.svelte

@@ -20,16 +20,17 @@
 	const profileImage = host.profileImage ? host.profileImage : config.defaultProfileImage;
 
 	const userProfileImage = profileImage || config.defaultProfileImage;
-	const srcset = buildImageSrc(userProfileImage, ['128', '500']);
+	const srcset = buildImageSrc(userProfileImage, ['160', '224']);
 </script>
 
 <a data-sveltekit-prefetch href="/activities/{id}">
 	<div
 		class="h-full w-full transform rounded-lg bg-that-blue px-6 py-10 text-center shadow transition duration-500 ease-in-out hover:scale-105 hover:bg-thatBlue-400 xl:px-10 xl:text-left">
 		<div class="space-y-6 xl:space-y-10">
-			<div>
+			<div
+				class="mx-auto h-40 w-40 rounded-full bg-gradient-to-t from-thatRed-500 to-thatOrange-500 xl:h-56 xl:w-56">
 				<img
-					class="lazyload mx-auto h-40 w-40 rounded-full xl:h-56 xl:w-56"
+					class="lazyload h-40 w-40 rounded-full p-1 xl:h-56 xl:w-56"
 					data-sizes="auto"
 					data-src={srcset.src}
 					data-srcset={srcset.srcset}

src/routes/(root)/members/[member]/+layout.js

@@ -17,8 +17,8 @@ export async function load({ params, parent, fetch }) {
 		}
 	}
 	let queries = getQueries(member);
-
 	let [profile, followers, myFollowers = []] = await Promise.all(queries);
+
 	if (!profile) throw error(404);
 
 	return {

src/routes/(that conferences)/_components/Attendees.svelte

@@ -0,0 +1,43 @@
+<script>
+	export let followers = [];
+	import MemberCard from '$components/members/MemberCard.svelte';
+	import StandardLink from '$elements/links/Standard.svelte';
+
+	let randomFollowers = followers
+		.slice()
+		.sort(() => Math.random() - 0.5)
+		.slice(0, 15);
+</script>
+
+<div class="relative mx-auto max-w-screen-xl px-8">
+	<header class="pb-24">
+		<h3 class="font-extrabold uppercase tracking-wider text-thatRed-500">
+			Connecting the Community
+		</h3>
+		<h2
+			class="text mb-8 mt-8 text-4xl font-bold leading-8 tracking-tight text-thatBlue-700 sm:text-5xl sm:leading-10">
+			Your_Tribe++;
+		</h2>
+		<p class="mt-6 text-2xl text-gray-500">
+			Come for the content, leave with a community. At THAT Conference one of our core principles is
+			to better connect our community. We do this through our online activities, our events, and the
+			platform we built to serve you.
+		</p>
+	</header>
+
+	<div>
+		<ul
+			class="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4
+        lg:grid-cols-5">
+			{#each randomFollowers as m (m.id)}
+				<li class="col-span-1">
+					<MemberCard {...m} />
+				</li>
+			{/each}
+		</ul>
+	</div>
+
+	<div class="flex justify-end py-24 font-extrabold text-red-500">
+		<StandardLink href="attendees">Meet The Campers</StandardLink>
+	</div>
+</div>

src/routes/(that conferences)/_components/Dates.svelte

@@ -14,18 +14,25 @@
 	}
 </script>
 
-<div id="dates" class="my-24">
-	<div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 ">
+<div id="dates">
+	<div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 		<div class="lg:grid lg:grid-cols-1 lg:items-start lg:gap-32">
 			<!-- left side -->
 			<div class="mt-8 flex flex-col space-y-12">
 				<div class="flex items-center space-x-12">
-					<div class="w-full">
+					<header class="pb-24">
+						<h3 class="font-extrabold uppercase tracking-wider text-thatRed-500">
+							A Good Scout is Always Prepared
+						</h3>
 						<h2
-							class="text-center text-2xl font-extrabold uppercase text-thatBlue-700 antialiased sm:text-left sm:text-3xl lg:text-4xl xl:text-5xl">
-							Key Dates You Need To Know
+							class="text mb-8 mt-8 text-4xl font-bold leading-8 tracking-tight text-thatBlue-700 sm:text-5xl sm:leading-10">
+							Mark Your Calendar <span class="text-that-red">!important </span>
 						</h2>
-					</div>
+						<p class="mt-6 text-2xl text-gray-500">
+							THAT Conference will be here before you know it. All of our planning milestone date
+							are listed below and like any good software project, change from time to time.
+						</p>
+					</header>
 
 					<div class="hidden sm:block">
 						<img

src/routes/(that conferences)/_components/ImageGallery.svelte

@@ -35,15 +35,15 @@
 	}
 </script>
 
-<div id="gallery" class="relative my-24 overflow-hidden">
+<div id="gallery" class="relative overflow-hidden">
 	<div class="grid grid-cols-5 gap-2 text-white">
 		{#each displayItems as item, i}
 			{#if i % 2 === 0}
 				<div class="h-full w-full place-self-center py-6">
 					<div class="h-full w-full duration-500 ease-in-out hover:scale-105">
 						<a href={item.url} target="_blank" rel="external noreferrer">
 							<img
-								class="lazyload h-full w-full object-none object-center blur-sm "
+								class="lazyload h-full w-full object-none object-center blur-sm"
 								src={item.src}
 								alt=""
 								class:rounded-r-2xl={i === 0}

src/routes/(that conferences)/_components/Keynoters.svelte

@@ -0,0 +1,69 @@
+<script>
+	export let keynoters = [];
+</script>
+
+<div class="relative">
+	<div class="mx-auto max-w-2xl lg:max-w-7xl">
+		<header class="pb-24">
+			<h3 class="font-extrabold uppercase tracking-wider text-thatRed-500">
+				This Year's Keynoters
+			</h3>
+			<h2 class="hText mb-8 mt-8">Your_Inner_Geek = Inspired;</h2>
+			<p class="mt-6 text-2xl text-gray-500">
+				Ship dates, bugs, that project manager who just won't stop looking over your shoulder. We
+				get it. As fellow practitioners, we know what it's like to be in the trenches and sometimes
+				it's easy to forget why the semicolons matter. That's why we start everyday with a keynote,
+				to help us recenter and find our inner geek.
+			</p>
+		</header>
+
+		<div class="keynoteGrid mt-16">
+			{#each keynoters as keynoter}
+				<div>
+					<div class="flex flex-col items-center pb-8">
+						<span class="hText">{keynoter.speakers[0].firstName}</span>
+
+						<span class="text-5xl font-thin">{keynoter.speakers[0].lastName}</span>
+					</div>
+					<div class="kgItem grid">
+						<div class="overflow-hidden">
+							<div class="kgItemHover">
+								<a href={`/members/${keynoter.speakers[0].profileSlug}`}>
+									<img
+										class="object-fit w-full object-scale-down"
+										src={keynoter.speakers[0].profileImage}
+										alt={keynoter.speakers[0].firstName + ' ' + keynoter.speakers[0].lastName} />
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+
+		<div>
+			<p class="mt-16 text-center text-lg">
+				Watch <a class="a-decorate" href="schedule">in-person</a> or live on
+				<a class="a-decorate" href="https://youtube.com/c/thatconference">YouTube</a>.
+			</p>
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.hText {
+		@apply text-4xl font-bold leading-8 tracking-tight text-thatBlue-700 sm:text-5xl sm:leading-10;
+	}
+
+	.kgItem {
+		@apply h-96 place-self-stretch bg-gradient-to-t from-thatRed-500 to-thatOrange-500 p-4 shadow-xl;
+	}
+
+	.kgItemHover {
+		@apply transform transition duration-500 ease-in-out hover:scale-105;
+	}
+
+	.keynoteGrid {
+		@apply flex flex-col items-center gap-4 lg:grid lg:grid-cols-3;
+	}
+</style>

src/routes/(that conferences)/_components/Partners.svelte

@@ -4,6 +4,6 @@
 	import SponsorSimple from '$components/SponsorSimple.svelte';
 </script>
 
-<div id="sponsors" class="mx-auto max-w-7xl pb-12">
+<div id="sponsors" class="mx-auto max-w-7xl">
 	<SponsorSimple eventId={event.id} />
 </div>