#145 relayout home page

modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte

@@ -6,12 +6,15 @@
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import { postsStore } from '$libs/stores';
 
+	export let title = 'Workshops';
+	export let ctaLabel = 'View all';
+
 	let courses: AirtablePost[] = [];
 
 	postsStore.subscribeByTag('course', (posts) => (courses = posts));
 </script>
 
-<PanelHeader title="Essential Workshops" ctaLabel="View all" ctaLink="/" />
+<PanelHeader {title} {ctaLabel} ctaLink="/" />
 {#if courses.length}
 	<Posts posts={courses} linkTarget="_blank" />
 {:else}

modules/gui/src/components/FooterLinks/FooterLinks.svelte

@@ -12,7 +12,7 @@
 					here.
 				</p>
 				<div class="w-3/4">
-					<img src="/static/images/footer-grid-element.svg" alt="grid" />
+					<img src="/images/footer-grid-element.svg" alt="grid" />
 				</div>
 			</div>
 

modules/gui/src/components/Packages/Packages.svelte

@@ -5,9 +5,13 @@
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
 	import { onMount } from 'svelte';
+
+	// TODO: replace with getting foundation essentials
 	import { getTopPackages } from '$libs/api/mock';
 	import { installPackage } from '@api';
 
+	export let title = 'Packages';
+
 	let packages: GUIPackage[] = [];
 
 	const getCTALabel = (state: PackageStates): string => {
@@ -27,7 +31,7 @@
 </script>
 
 <header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
-	<span>TOP PACKAGES</span>
+	<span>{title}</span>
 	<a href="/packages" class="font-sono text-sm underline">View all packages</a>
 </header>
 <ul class="grid grid-cols-3 bg-black">

modules/gui/src/components/PageHeader/PageHeader.svelte

@@ -1,3 +1,12 @@
-<figure class="mb-8 font-machina text-6xl uppercase text-primary">
-	<slot />
+<script lang="ts">
+	export let coverUrl: string = '';
+</script>
+
+<figure class="relative mb-8 h-32 w-full font-machina uppercase">
+	{#if coverUrl}
+		<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
+	{/if}
+	<div class="absolute bottom-0 z-10 text-6xl leading-[32px] text-primary">
+		<slot />
+	</div>
 </figure>

modules/gui/src/routes/+page.svelte

@@ -2,27 +2,22 @@
 <script lang="ts">
 	import '$appcss';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-	import FeaturedPackages from '$components/FeaturedPackages/FeaturedPackages.svelte';
-	import GettingStarted from '$components/GettingStarted/GettingStarted.svelte';
-	import TopPackages from '$components/TopPackages/TopPackages.svelte';
+	import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
+	import Packages from '$components/Packages/Packages.svelte';
 	import News from '$components/News/News.svelte';
 	import CategorizedPackages from '$components/CategorizedPackages/CategorizedPackages.svelte';
 </script>
 
 <div>
-	<PageHeader>Discover</PageHeader>
-	<section>
-		<FeaturedPackages />
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">Discover</PageHeader>
+	<section class="mt-8 mb-8">
+		<Packages title="FOUNDATIN ESSENTIALS" />
 	</section>
-	<section class="mt-8">
-		<GettingStarted />
-	</section>
-	<section class="mt-8">
-		<TopPackages />
-	</section>
-	<section class="mt-8">
-		<CategorizedPackages />
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">TUTORIALS</PageHeader>
+	<section class="mt-8 mb-8">
+		<EssentialWorkshops title="WORKSHOPS TO GET STARTED" ctaLabel="Read more articles >" />
 	</section>
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">OPEN-SOURCE NEWS</PageHeader>
 	<section class="mt-8">
 		<News />
 	</section>