feat: new hero layout

ThatConference · Mar 16, 2022 · 55ad5e6 · 55ad5e6
1 parent 4484b5d
commit 55ad5e6
Show file tree

Hide file tree

Showing 23 changed files with 498 additions and 164 deletions.
diff --git a/src/_components/blog/latest.svelte b/src/_components/blog/latest.svelte
@@ -10,10 +10,10 @@
 <div class="relative py-16 sm:py-24">
 	<div class="relative">
 		<div class="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
-			<h2 class="text-base font-semibold uppercase tracking-wider text-thatOrange-400">
-				THAT BLOG
-			</h2>
-			<p class="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+			<h2 class="font-extrabold uppercase tracking-wider text-thatRed-500">THAT BLOG</h2>
+			<p
+				class="mt-2 text-4xl font-semibold leading-10 tracking-tight text-thatBlue-700 sm:text-5xl sm:leading-none"
+			>
 				The Latest Announcements, Updates and Words
 			</p>
 			<p class="my-24 mx-auto max-w-prose text-xl text-gray-500">

diff --git a/src/_components/events/thatconference/Upcoming.svelte b/src/_components/events/thatconference/Upcoming.svelte
@@ -0,0 +1,52 @@
+<script>
+	export let events;
+
+	import Card from './_components/EventCard.svelte';
+	import Layout from './_components/Layout.svelte';
+
+	import Trees from '$elements/svgs/Trees.svelte';
+</script>
+
+<div class="relative overflow-hidden ">
+	<div class="-mt-32 flex translate-y-32 flex-col items-center">
+		<Trees classes="h-64 w-64 text-thatRed-500" />
+	</div>
+
+	<div class="backgroundImage bg-cover bg-center">
+		<div class="mx-auto max-w-screen-xl px-4 sm:px-6">
+			<Layout>
+				<div class="flex grid-cols-2 flex-col place-content-around gap-24 lg:grid">
+					{#each events as event}
+						<div class="p-8">
+							<Card {event} />
+						</div>
+					{/each}
+				</div>
+			</Layout>
+		</div>
+	</div>
+</div>
+
+<!--
+	isCallForOnSpeakersOpen: false
+	isCallForSpeakersOpen: false
+
+	show button
+	ticketsOnSaleFrom: "2022-01-01T06:00:17.238Z"
+	ticketsOnSaleUntil: "2022-05-26T22:00:54.718Z"
+
+	button... 
+	callForOnSpeakersOpenDate: "2021-11-01T05:00:38.229Z"
+	callForOnSpeakersCloseDate: "2022-01-01T05:59:26.205Z"
+
+	button ...
+	callForSpeakersOpenDate: "2021-07-28T17:00:13.647Z"
+	callForSpeakersCloseDate: "2021-11-01T04:59:31.504Z"
+
+-->
+<style>
+	.backgroundImage {
+		background-image: linear-gradient(rgba(31, 42, 99, 0.8), rgba(31, 42, 99, 0.8)),
+			url('/images/keynote-highlight.jpg');
+	}
+</style>
diff --git a/src/_components/events/thatconference/_components/EventCard.svelte b/src/_components/events/thatconference/_components/EventCard.svelte
@@ -0,0 +1,52 @@
+<script>
+	export let event;
+	import { Action as ActionLink } from '$elements/links';
+
+	import dayjs from 'dayjs';
+</script>
+
+<div class="flex flex-col justify-center">
+	<div class="relative py-3 sm:mx-auto sm:max-w-xl">
+		<div
+			class="absolute inset-0 -skew-y-6 transform bg-gradient-to-r from-that-orange to-that-red shadow-lg sm:-rotate-6 sm:skew-y-0 sm:rounded-3xl"
+		/>
+		<div class="relative bg-white px-4 py-6 shadow-lg sm:rounded-3xl sm:p-14">
+			<div class="mx-auto max-w-md">
+				<div class="text-4xl font-bold uppercase text-thatBlue-700">
+					<h1>
+						{`${event.venues[0].city}, ${event.venues[0].state}`}
+					</h1>
+					<h2>Conference</h2>
+				</div>
+
+				<div class="font-extrabold text-that-red">
+					{dayjs(event.startDate).format('MMMM D, YYYY')} - {dayjs(event.endDate).format(
+						'MMMM D, YYYY'
+					)}
+				</div>
+
+				<div class="divide-y divide-gray-200">
+					<div class="space-y-4 py-8 text-base leading-6 text-gray-700 sm:text-lg sm:leading-7">
+						<div>
+							Keynotes, Workshops, Sessions, Open Spaces, a pig roast, and even a Waterpark party.
+							Hurry camp starts soon!
+						</div>
+
+						<div class="pt-2 text-base font-bold leading-6 sm:text-lg sm:leading-7">
+							<span class="font-extrabold text-that-red">Tickets are on sale.</span>
+							<p>
+								<a href={`/activities/${event.slug}`} class="hover:text-thatBlue-700">
+									See the full schedule &rarr;
+								</a>
+							</p>
+						</div>
+					</div>
+
+					<div class="flex flex-col justify-center pt-12">
+						<ActionLink href={`/events/${event.slug}`}>Conference Details and Tickets</ActionLink>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/_components/events/thatconference/_components/Layout.svelte b/src/_components/events/thatconference/_components/Layout.svelte
@@ -0,0 +1,42 @@
+<div class="py-24">
+	<div class="flex flex-col items-center justify-center">
+		<h2 class="py-4 font-extrabold uppercase tracking-wider text-white">
+			By Developers For Developers
+		</h2>
+		<header>
+			<h1
+				class="text-center text-4xl font-semibold leading-10 tracking-tight text-white sm:text-5xl sm:leading-none"
+			>
+				In-Person THAT Conferences
+			</h1>
+		</header>
+	</div>
+
+	<div class="pt-24">
+		<slot />
+	</div>
+
+	<div class="flex flex-col items-center justify-center">
+		<div class="pt-24">
+			<a href="https://www.youtube.com/watch?v=_aO4uBrJGFU" target="_blank">
+				<div
+					class="transform rounded-lg border-2 border-thatBlue-400 py-6 px-12 transition duration-500 ease-in-out hover:scale-105"
+				>
+					<div class="flex space-x-4">
+						<div class="col-span-3 flex flex-col items-center justify-center">
+							<img
+								class="lazyload h-12 w-auto"
+								src="/images/play.svg"
+								alt="THAT Robot Play Button"
+							/>
+						</div>
+						<div class="flex flex-col text-white">
+							<p class="font-bold">How Fun Is THAT?</p>
+							<p>Watch our Highlight Reel</p>
+						</div>
+					</div>
+				</div>
+			</a>
+		</div>
+	</div>
+</div>
diff --git a/src/_components/newsletter/Wide.svelte b/src/_components/newsletter/Wide.svelte
@@ -21,8 +21,7 @@
 	>
 		<div class="lg:w-0 lg:flex-1">
 			<h2
-				class="text-3xl font-extrabold leading-9 tracking-tight text-white
-          sm:text-4xl sm:leading-10"
+				class="text-4xl font-semibold leading-10 tracking-tight text-white sm:text-5xl sm:leading-none"
 				id="newsletter-headline"
 			>
 				Stay in the know

diff --git a/src/_components/social/SocialLink.svelte b/src/_components/social/SocialLink.svelte
@@ -9,9 +9,6 @@
 		github,
 		youtubePlay,
 		twitch,
-		dribbble,
-		medium,
-		stackOverflow,
 		slack
 	} from '$components/svelte-awesome-icons';
 
@@ -55,18 +52,6 @@
 			socialIcon = twitch;
 			ariaLabel = 'Twitch';
 			break;
-		case 'DRIBBBLE':
-			socialIcon = dribbble;
-			ariaLabel = 'Dribble';
-			break;
-		case 'MEDIUM':
-			socialIcon = medium;
-			ariaLabel = 'Medium';
-			break;
-		case 'STACK_OVERFLOW':
-			socialIcon = stackOverflow;
-			ariaLabel = 'Stack Overflow';
-			break;
 		case 'SLACK':
 			socialIcon = slack;
 			ariaLabel = 'Slack';

diff --git a/src/_dataSources/api.that.tech/community/queries.js b/src/_dataSources/api.that.tech/community/queries.js
@@ -104,6 +104,47 @@ export const QUERY_NEXT_COMMUNITY_ACTIVITIES = `
 	}
 `;
 
+export const QUERY_ACTIVE_THAT_EVENTS = `
+	query QUERY_ACTIVE_THAT_EVENTS {
+		communities {
+			community(findBy: {slug: "THAT"}) {
+				get {
+					events (filter: ACTIVE) {
+						id
+						name
+						description
+						type
+						isActive
+						slug
+						logo
+						startDate
+						endDate
+						year
+						isVotingOpen
+						voteOpenDate
+						voteCloseDate
+						isCallForSpeakersOpen
+						isCallForOnSpeakersOpen
+						callForSpeakersOpenDate
+						callForSpeakersCloseDate
+						callForOnSpeakersOpenDate
+						callForOnSpeakersCloseDate
+						ticketsOnSaleFrom
+						ticketsOnSaleUntil
+						venues {
+							name
+							address
+							city
+							state
+							zip
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
 export default (fetch) => {
 	const client = fetch ? gFetch(fetch) : gFetch();
 
@@ -165,12 +206,22 @@ export default (fetch) => {
 			});
 	};
 
+	const queryActiveThatEvents = () => {
+		const variables = {};
+		return client.query({ query: QUERY_ACTIVE_THAT_EVENTS, variables }).then(({ data, errors }) => {
+			if (errors) log({ errors, tag: 'QUERY_ACTIVE_THAT_EVENTS' });
+
+			return data.communities?.community?.get?.events;
+		});
+	};
+
 	return {
 		queryAllCommunities,
 		queryNextAllCommunities,
 		queryCommunityBySlug,
 		queryCommunityActivities,
 		queryNextCommunityActivities,
-		queryCommunityFollowers
+		queryCommunityFollowers,
+		queryActiveThatEvents
 	};
 };
diff --git a/src/_dataSources/local/socials.js b/src/_dataSources/local/socials.js
@@ -0,0 +1,42 @@
+export default [
+	{
+		href: 'https://github.com/thatconference',
+		network: 'GITHUB',
+		ariaLabel: 'Github Repo'
+	},
+	{
+		href: 'https://twitter.com/thatconference',
+		network: 'TWITTER',
+		ariaLabel: 'Twitter'
+	},
+	{
+		href: 'https://facebook.com/thatconference',
+		network: 'FACEBOOK',
+		ariaLabel: 'Facebook'
+	},
+	{
+		href: 'https://instagram.com/thatconference',
+		network: 'INSTAGRAM',
+		ariaLabel: 'Instagram'
+	},
+	{
+		href: 'https://linkedin.com/company/that-conference',
+		network: 'LINKEDIN',
+		ariaLabel: 'LinkedIn'
+	},
+	{
+		href: 'https://youtube.com/c/thatconference',
+		network: 'YOUTUBE',
+		ariaLabel: 'YouTube'
+	},
+	{
+		href: 'https://that.live',
+		network: 'TWITCH',
+		ariaLabel: 'Twitch'
+	},
+	{
+		href: '/signup/',
+		network: 'SLACK',
+		ariaLabel: 'Join Us on Slack'
+	}
+];
diff --git a/src/_elements/links/Action.svelte b/src/_elements/links/Action.svelte
@@ -8,10 +8,10 @@
 	{reload}
 	{href}
 	class="cursor-pointer rounded-md border-2 border-transparent bg-thatBlue-500 px-8 py-3
-    text-base font-medium leading-6 text-white shadow transition duration-150
-    ease-in-out hover:bg-thatBlue-400 focus:border-thatBlue-700 focus:outline-none
-    focus:ring-that-blue md:py-4
-    md:px-10 md:text-lg"
+    text-center text-base font-medium leading-6 text-white shadow transition
+    duration-150 ease-in-out hover:bg-thatBlue-400 focus:border-thatBlue-700
+    focus:outline-none focus:ring-that-blue
+    md:py-4 md:px-10 md:text-lg"
 >
 	<span>
 		<slot />

diff --git a/src/routes/_root/components/cta.svelte b/src/routes/_root/components/cta.svelte
@@ -4,11 +4,11 @@
       lg:justify-between lg:px-8"
 	>
 		<h2
-			class="text-3xl font-extrabold leading-9 tracking-tight text-white sm:text-4xl sm:leading-10"
+			class="text-3xl font-semibold leading-10 tracking-tight text-white sm:text-4xl sm:leading-none"
 		>
 			Are you ready to expand your network?
 			<br />
-			<span class="text-that-orange">Get started today, it's free.</span>
+			<span class="text-that-orange">Signup today, it's free.</span>
 		</h2>
 		<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
 			<div class="inline-flex rounded-md shadow">

diff --git a/src/routes/_root/components/events.svelte b/src/routes/_root/components/events.svelte
@@ -33,38 +33,39 @@
 
 <section class="bg-white py-12 lg:py-16">
 	<div class="relative mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
-		<h1 class="text-4xl font-extrabold tracking-tight text-thatBlue-800 sm:text-5xl md:text-6xl">
-			<span class="block text-center sm:text-left ">Upcoming Events</span>
+		<h1
+			class="text-4xl font-semibold leading-10 tracking-tight text-thatBlue-700 sm:text-5xl sm:leading-none"
+		>
+			Upcoming Events
 		</h1>
 
 		<div class="mt-12 space-y-12">
 			<div class="flex w-full flex-col">
-				<h2 class="text-3xl font-extrabold leading-9 tracking-tight sm:text-4xl">
-					<span class="pl-2 text-that-orange">Virtual Events</span>
+				<h2 class="text-3xl font-semibold leading-9 tracking-tight sm:text-4xl">
+					<span class="pl-2 text-that-orange">THAT Conferences</span>
 				</h2>
 			</div>
-
 			<ul
 				class="space-y-12 lg:grid lg:grid-cols-2 lg:items-start lg:gap-y-8
-          lg:gap-x-12 lg:space-y-0"
+					lg:gap-x-12 lg:space-y-0"
 			>
-				{#each online as event}
+				{#each hybrid as event}
 					<li>
 						<Event {event} />
 					</li>
 				{/each}
 			</ul>
-
 			<div class="flex w-full flex-col">
-				<h2 class="text-3xl font-extrabold leading-9 tracking-tight sm:text-4xl">
-					<span class="pl-2 text-that-orange">THAT Conferences</span>
+				<h2 class="text-3xl font-semibold leading-9 tracking-tight sm:text-4xl">
+					<span class="pl-2 text-that-orange">Virtual Events</span>
 				</h2>
 			</div>
+
 			<ul
 				class="space-y-12 lg:grid lg:grid-cols-2 lg:items-start lg:gap-y-8
           lg:gap-x-12 lg:space-y-0"
 			>
-				{#each hybrid as event}
+				{#each online as event}
 					<li>
 						<Event {event} />
 					</li>