Skip to content

Commit

Permalink
feat: add many assets and improve UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@WesselvanDam
WesselvanDam committed Sep 29, 2024
1 parent 13e113c commit 38732f7
Show file tree
Hide file tree
Showing 21 changed files with 274 additions and 108 deletions.
6 changes: 5 additions & 1 deletion src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@

/* Create a custom class for images including the following tailwind tags: rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 hover:shadow-xl */
.image {
@apply rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 hover:shadow-xl;
@apply rounded-2xl shadow-lg transform transition-transform duration-300 hover:scale-105 hover:shadow-xl; object-fit: cover;
}

.button {
@apply inline-block mt-4 px-6 py-2 bg-tyt_blue text-white font-semibold rounded-2xl hover:bg-tyt_yellow hover:scale-105 transition duration-300 transform shadow-lg hover:shadow-xl;
}
}
72 changes: 49 additions & 23 deletions src/app.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,51 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Thank You Token - A gesture of gratitude" />
<meta name="keywords" content="Thank You Token, gratitude, appreciation, gift, concept, token" />
<meta name="author" content="Wessel van Dam" />
<meta property="og:title" content="Thank You Token" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://thank-you-token.nl" />
<meta property="og:image" content="%sveltekit.assets%/img/header.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="https://thank-you-token.nl" />
<meta name="twitter:title" content="Thank You Token" />
<meta name="twitter:description" content="Thank You Token - A gesture of gratitude" />
<meta name="twitter:image" content="%sveltekit.assets%/img/header.jpg" />
<title>Thank You Token</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="A Thank You Token is a small object with little intrinsic value which you gift to someone after a meaningful interaction, as a way to express your gratitude." />
<meta
name="keywords"
content="Thank You Token, gratitude, appreciation, gift, concept, token, friendship, present, sustainable, circular" />
<meta name="author" content="Wessel van Dam" />
<meta property="og:title" content="Thank You Token" />
<meta
property="og:description"
content="A Thank You Token is a small object with little intrinsic value which you gift to someone after a meaningful interaction, as a way to express your gratitude." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://thank-you-token.nl" />
<meta property="og:image" content="%sveltekit.assets%/img/header.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="https://thank-you-token.nl" />
<meta name="twitter:title" content="Thank You Token" />
<meta
name="twitter:description"
content="A Thank You Token is a small object with little intrinsic value which you gift to someone after a meaningful interaction, as a way to express your gratitude." />
<meta name="twitter:image" content="%sveltekit.assets%/img/header.jpg" />
<meta
name="twitter:image:alt"
content="Thank You Token - A gesture of gratitude" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Thank You Token",
"url": "https://thank-you-token.nl",
"description": "A Thank You Token is a small object with little intrinsic value which you gift to someone after a meaningful interaction, as a way to express your gratitude.",
"image": "%sveltekit.assets%/img/header.jpg",
"author": {
"@type": "Person",
"name": "Wessel van Dam"
}
}
</script>
<title>Thank You Token</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
7 changes: 1 addition & 6 deletions src/lib/components/Header.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,7 @@

<div class="relative">
<img src="/img/header.jpg" alt="Header" class="w-full" />
<div
class="absolute inset-0 bg-gradient-to-r from-35% via-75% via-white/75 from-transparent to-white"
></div>
<div class="absolute top-1/2 w-2/5 -translate-y-1/2 right-0 -translate-x-1/4">
<img src="/img/logo-colour.png" alt="Logo" class="w-full"/>
<!-- <div class="w-full bg-tyt_yellow h-1 sm:h-2 md:h-3 lg:h-4 my-1 sm:my-2 md:my-3 lg:my-4"></div>
<p class="text-md sm:text-lg md:text-xl lg:text-2xl text-right italic">A Gesture of Gratitude</p> -->
<img src="/img/logo-colour-sub.png" alt="Logo" class="w-full" />
</div>
</div>
27 changes: 18 additions & 9 deletions src/lib/components/HowItWorks.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,42 +15,51 @@
new InstructionData(
"Have a meaningful interaction",
"A dinner date, a beach day with a friend, or just about anything you're grateful for",
"img/step1.png",
"img/interact.png",
"tyt_red"
),
new InstructionData(
"Give/receive a thank you token",
"Surprise or get surprised with a Thank You Token for/from the other",
"img/step2.png",
"img/receive.png",
"tyt_blue"
),
new InstructionData(
"Keep tokens at home & regift",
"Put received tokens on display, ready to be given away again at a later event!",
"img/step4.png",
"img/store.png",
"tyt_green"
),
new InstructionData(
"Record the token in our app",
"Write down the story behind this token in our web app",
"img/step3.png",
"img/app.png",
"tyt_yellow"
),
];
</script>

<section class="py-8">
<section class="py-8 flex flex-col items-center">
<Heading text="How it works" />
<div class="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4 gap-8 px-4">
{#each howItWorksData as data}
<div class="flex flex-col items-center border-2 border-{data.color} rounded-2xl transform transition-transform duration-300 hover:scale-105 hover:shadow-lg">
<div
class="flex flex-col items-center bg-{data.color} bg-opacity-5 rounded-2xl transform transition-transform duration-300 hover:scale-105 hover:shadow-lg"
>
<img
src={data.image}
alt={data.title}
class="bg-slate-200 w-full rounded-t-2xl min-h-48"
class="w-full rounded-t-2xl min-h-48"
style="object-fit: cover;"
/>
<h2 class="text-md sm:text-lg md:text-xl px-4 py-4 font">{data.title}</h2>
<p class="text-center px-4 text-sm sm:text-md md:text-lg">{data.description}</p>
<div class="flex-grow rounded-2xl bg-{data.color} bg-opacity-15 pb-2">
<h2 class="text-md sm:text-lg md:text-xl px-4 py-4 font"
>{data.title}</h2
>
<p class="text-center px-4 text-sm sm:text-md md:text-lg"
>{data.description}</p
>
</div>
</div>
{/each}
</div>
Expand Down
50 changes: 34 additions & 16 deletions src/lib/components/HowToGive.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,40 @@
<script>
import Heading from "$lib/utils/Heading.svelte";
import Section from "$lib/utils/Section.svelte";
</script>

<section
class="flex flex-col sm:flex-row py-8 w-screen justify-center"
<Section
imageSrc="img/flyer-mock.jpg"
imageAlt="Click for our flyer!"
headingText="How to give one"
imageRight
>
<div class="sm:w-1/2 text-start p-4">
<Heading text="How to give one" />
<p>
There's no need to wrap the token in gift wrapping: just give it along
with some kind words and our Thank You Token <strong>flyer</strong>, which
helps explain the concept to those unfamiliar with it and contains a link to the
<a href="https://app.thank-you-token.nl" class="underline text-tyt_blue">web app</a>.
There's no need to wrap the token in gift wrapping: just give it along with
some kind words and our Thank You Token <strong>flyer</strong>, which helps
explain the concept to those unfamiliar with it and contains a link to the
<a
href="https://app.thank-you-token.nl"
class="underline text-tyt_blue"
target="_blank">web app</a
>.
</p>
</div>
<img
src="flyter.jpg"
alt="Click for our flyer!"
class="bg-slate-100 m-4 sm:w-1/3 image"
/>
</section>
<a href="/flyer.pdf" target="_blank" class="button float-right">
<svg
xmlns="http://www.w3.org/2000/svg"
class="inline-block mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
width="20"
height="20"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V3"
/>
</svg>
Download the Flyer
</a>
</Section>
45 changes: 23 additions & 22 deletions src/lib/components/Introduction.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
<script>
import Heading from "$lib/utils/Heading.svelte";
</script>
<section class="py-8 px-4 bg-tyt_blue text-white w-full flex flex-col items-center">
<Heading text="A gesture of gratitude"/>
<div class= "text-justify max-w-screen-md">
<p>
A philosophical conversation over a fancy dinner, a comforting pep-talk
during a walk in the park, or a long overdue reunion with old friends:
life is full of <strong>memorable moments</strong> with people that matter to you. Such
interactions can easily be taken for granted, while it may be difficult or
daunting to <strong>show your gratitude</strong> with words or gifts.
<br><br>
The <strong>Thank You Token</strong> is a concept I came up with to thank the important people in my life. I don't like
gift-giving, as gifts often are unwanted and because of its environmental
impact, and at the same time I find it difficult to convert my grateful
feelings into words. The idea of a simple token of appreciation, holding
<strong>little intrinsic value</strong> but all the <strong>more sentimental value</strong>, helps me in
thanking close friends and family.</p
<section
class="py-8 md:py-12 lg:py-16 px-4 bg-tyt_blue text-white text-justify rounded-b-2xl w-full"
>
<div
class="max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg mx-auto flex flex-col sm:flex-row items-center gap-4 sm:gap-6 md:gap-8 lg:gap-10 xl:gap-12"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 499.81 494.77"
fill="white"
class="flex-shrink-0 w-16 sm:w-20 md:w-24 lg:w-28 xl:w-32"
>
<p class="text-end">
— Wessel
<g>
<path
d="m199.93,460.17c-23.27,23.07-51.17,34.6-83.7,34.6s-59.54-11.53-82.22-34.6C11.34,437.1,0,409.39,0,377.06s11.34-61.32,34.01-83.99c22.67-22.67,50.28-34.01,82.81-34.01s60.33,11.49,83.4,34.46c23.07,22.97,34.6,50.72,34.6,83.25s-11.63,60.33-34.9,83.4Z"
/>
<polygon points="117.41 0 .05 235.61 234.78 235.61 117.41 0" />
<rect x="265.09" y="259.55" width="234.72" height="234.72" />
</g>
</svg>
<p class="text-lg sm:text-xl md:text-2xl lg:text-3xl">
A <i>Thank You Token</i> is a small object with little intrinsic value that
you gift to someone after a meaningful interaction, as a way to express your
gratitude.
</p>
</div>
</section>
43 changes: 31 additions & 12 deletions src/lib/components/WebApp.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,34 @@
<script>
import Heading from "$lib/utils/Heading.svelte";
import Section from "$lib/utils/Section.svelte";
</script>


<section class="flex flex-col sm:flex-row bg-tyt_green py-8 w-screen justify-center">
<img src="stone_token.jpg" alt="A screenshot of the web app" class="bg-slate-100 m-4 sm:w-1/3 image">
<div class="sm:w-1/2 text-start p-4 text-white">
<Heading text="How does the web app work?" />
<p>
In the app, you can write down the story behind each received/given token
along with a picture, which is stored securely in your own Google Drive.
</p>
</div>
</section>
<Section
color="tyt_green"
imageSrc="img/web-app-mock.jpg"
imageAlt="A mockup of the web app"
headingText="How does the web app work?"
>
<p>
In the app, you can write down the story behind each received/given token
along with a picture, which is stored securely in your own Google Drive.
This way, you can always look back at the stories behind your tokens.
</p>
<a
href="https://app.thank-you-token.nl"
class="button float-right"
target="_blank"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="inline-block mr-2"
fill="currentColor"
viewBox="0 0 48 48"
width="24px"
height="24px"
><path
d="M 40.960938 4.9804688 A 2.0002 2.0002 0 0 0 40.740234 5 L 28 5 A 2.0002 2.0002 0 1 0 28 9 L 36.171875 9 L 22.585938 22.585938 A 2.0002 2.0002 0 1 0 25.414062 25.414062 L 39 11.828125 L 39 20 A 2.0002 2.0002 0 1 0 43 20 L 43 7.2460938 A 2.0002 2.0002 0 0 0 40.960938 4.9804688 z M 12.5 8 C 8.3826878 8 5 11.382688 5 15.5 L 5 35.5 C 5 39.617312 8.3826878 43 12.5 43 L 32.5 43 C 36.617312 43 40 39.617312 40 35.5 L 40 26 A 2.0002 2.0002 0 1 0 36 26 L 36 35.5 C 36 37.446688 34.446688 39 32.5 39 L 12.5 39 C 10.553312 39 9 37.446688 9 35.5 L 9 15.5 C 9 13.553312 10.553312 12 12.5 12 L 22 12 A 2.0002 2.0002 0 1 0 22 8 L 12.5 8 z"
/>
</svg>
Go to the web app
</a>
</Section>
34 changes: 17 additions & 17 deletions src/lib/components/WhatMakesAToken.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<script>
import Heading from "$lib/utils/Heading.svelte";
import Section from "$lib/utils/Section.svelte";
</script>

<section class="flex flex-col sm:flex-row bg-tyt_red py-8 w-screen justify-center">
<img src="stone_token.jpg" alt="An example of a token" class="bg-slate-100 m-4 sm:w-1/3 image">
<div class="sm:w-1/2 text-start p-4 text-white">
<Heading text="What makes a token?" />
<p>
A Thank You Token <strong>could be anything</strong>, but it typically has
little intrinsic value and is preferably decorated (for example by painting)
with our logo to make it stand out. Ideally,
<strong>you shouldn't need to buy something</strong>
to make a token. Simple wooden blocks, smooth rocks, and even bottle caps work,
as do DIY crafts such as origami and paper mache. Ultimately, the purpose of the
token is the <strong>sentimental value</strong> it carries - the look should not
matter too much.
</p>
</div>
</section>
<Section
color="tyt_red"
imageSrc="img/tokens.jpg"
imageAlt="An example of a token"
headingText="What makes a token?"
>
<p>
A Thank You Token <strong>could be anything</strong>, but it typically has
little intrinsic value and is preferably decorated with our logo to make it
stand out. Ideally, <strong>you shouldn't need to buy something</strong> to
make a token. Simple wooden blocks, small rocks, and even bottle caps work,
as do DIY crafts such as origami and paper mache. Ultimately, the purpose of
the token is the <strong>sentimental value</strong> it carries — the look should
not matter too much.
</p>
</Section>
36 changes: 34 additions & 2 deletions src/lib/utils/Heading.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,37 @@
<script lang="ts">
export let text: string;
import { onMount } from 'svelte';
export let text: string;
let isVisible = false;
let headingContainer: HTMLHeadingElement;
onMount(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
isVisible = entry.isIntersecting;
});
});
if (headingContainer) {
observer.observe(headingContainer);
}
return () => {
observer.disconnect();
};
});
</script>

<h1 class="text-3xl md:text-5xl pb-8">{text}</h1>
<div class="flex">
<h1 bind:this={headingContainer} class="text-3xl md:text-4xl lg:text-5xl pb-8 group heading-container">
{text}
<span class="block max-w-0 transition-all duration-500 h-1 bg-tyt_yellow delay-200" class:is-visible={isVisible}></span>
</h1>
</div>

<style>
.is-visible {
max-width: 100%;
}
</style>
Loading

0 comments on commit 38732f7

Please sign in to comment.