Merge pull request #158 from roll-over/add-style-welcome-page

Add style welcome page

frontend/src/app.pcss

@@ -1,3 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

frontend/src/routes/+page.svelte

@@ -12,17 +12,30 @@
 	});
 </script>
 
-<div class="flex h-full flex-col items-center justify-center">
-	<div>THIS IS PREFETCHED: {$prefetchedQuery.data?.data}</div>
-	<div>THI IS FETCHED ONLY ON CLIENT: {$clientQuery.data?.data}</div>
-	<div class="my-4 h-1 w-full rounded-full bg-slate-200" />
-	<h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl">
-		Home
-	</h1>
-	<a
-		href="/hello"
-		class="mb-2 mr-2 rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300"
-	>
-		Hello
+<div class="flex h-full bg-white flex-col items-center justify-center">
+
+	<div class="text-black">
+		<div>THIS IS PREFETCHED: {$prefetchedQuery.data?.data}</div>
+		<div>THI IS FETCHED ONLY ON CLIENT: {$clientQuery.data?.data}</div>
+	</div>
+
+	<div class="my-4 h-1 w-full rounded-full bg-slate-200"></div>
+
+	<div class="w-full p-5 flex flex-col items-center bg-no-repeat bg-center" style="background-image: url(/src/img/background.svg)">
+		<img class="pb-7" src="/src/img/diversity-icon.svg" alt="diversity-icon.svg"/>
+		<h1 class="font-title font-400 pb-2 text-6xl leading-none tracking-tight text-gray-900 md:text-6xl">
+			Hello!
+		</h1>
+		<p class="font-title text-black text-2xl pb-7">
+			Fill out a short form to get started!
+		</p>
+	</div>
+	<div class="flex">
+		<a href="/hello"
+			class="font-body button-color text-2xl text-black rounded-lg bg-pattens-blue flex justify-center items-center flex-shrink-0 pt-3.5 pb-3.5 pr-24 pl-24 font-400 hover:bg-summer-sky focus:outline-none focus:ring-4 focus:bg-focus-blue">
+		go to survey!
+		<img class="pl-16" src="/src/img/arrow-right.svg" alt="diversity-icon.svg"/>
 	</a>
+	</div>
+
 </div>

frontend/tailwind.config.ts

@@ -4,7 +4,19 @@ import plugin from 'tailwindcss/plugin';
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
-		extend: {}
+		fontFamily: {
+      title: ['Comfortaa'],
+			body: ['Montserrat'],
+    },
+		extend: {
+			colors: {
+				'pattens-blue': '#CBE6F7',
+				'dodger-blue': '#2B93E1',
+				'alice-blue': '#EAF4FD',
+				'summer-sky': '#4DA9E9',
+				'focus-blue': '#1985E2',
+				},
+		}
 	},
 	plugins: [
 		plugin(({ addVariant }) => {