-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1209 from ThatConference/cs/link-tree
feat: refactor hero for index and that
- Loading branch information
Showing
23 changed files
with
498 additions
and
164 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
52 changes: 52 additions & 0 deletions
52
src/_components/events/thatconference/_components/EventCard.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 → | ||
| </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> |
42 changes: 42 additions & 0 deletions
42
src/_components/events/thatconference/_components/Layout.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' | ||
| } | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
f23e4a0There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: