breakapart smart components being used in each route

packages/gui/src/components/Badges/Badges.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="Badges"/>

packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="BigBlackSpace"/>

packages/gui/src/components/CliBanner/CliBanner.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="CLI Hero"/>

packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="EssentialWorkshops"/>

packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="FeaturedCourses"/>

packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="FeaturedPackages"/>

packages/gui/src/components/GettingStarted/GettingStarted.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="GettingStarted"/>

packages/gui/src/components/InstalledPackages/InstalledPackages.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="InstalledPackages"/>

packages/gui/src/components/PackageBanner/PackageBanner.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="PackageBanner"/>

packages/gui/src/components/PackageReviews/PackageReviews.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+
+<Placeholder label="PackageReviews"/>

packages/gui/src/components/Preflight/Preflight.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="Preflight"/>

packages/gui/src/components/ProfileBanner/ProfileBanner.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="ProfileBanner"/>

packages/gui/src/components/SearchPackages/SearchPackages.svelte

@@ -0,0 +1,31 @@
+<script>
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+
+<div class="bg-black border border-gray">
+    <section class="flex">
+        <h2>Filter Packages</h2>
+        <input type="search" class="text-white bg-black border border-gray"/>
+    </section>
+    <ul class="grid grid-cols-3 gap-8 mt-8">
+        <li>
+            <a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
+        </li>
+    </ul>
+</div>

packages/gui/src/routes/+layout.svelte

@@ -11,7 +11,7 @@
     });
 </script>
 
-<div>
+<div id="main-layout">
     <nav class="">
         <NavBar/>
     </nav>
@@ -22,12 +22,14 @@
             </header>
         {/if}
         <figure></figure>
-        <slot></slot>
+        <div>
+            <slot></slot>
+        </div>
     </section>
 </div>
 
 <style>
-    div {
+    #main-layout {
         width: 100vh;
         height: 100vh;
     }
@@ -44,6 +46,7 @@
     }
     figure {
         position: absolute;
+        z-index: 0;
         top: 180px;
         left: 0px;
         right: 0px;
@@ -58,4 +61,12 @@
         height: 50px;
         border-bottom: #CCC 1px solid;
     }
+
+    slot {
+        z-index: 1;
+    }
+
+    div {
+        position: relative;
+    }
 </style>

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

@@ -2,20 +2,20 @@
 <script lang="ts">
     import "$appcss";
     import { backLink } from '$libs/stores';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-
+    import FeaturedPackages from "$components/FeaturedPackages/FeaturedPackages.svelte";
+    import GettingStarted from "$components/GettingStarted/GettingStarted.svelte";
     backLink.set('');
 </script>
 
 
 <div>
     <PageHeader>Discover</PageHeader>
-    <header>
+    <section>
-        <Placeholder label="featured packages"/>
+        <FeaturedPackages/>
-    </header>
+    </section>
     <section class="mt-8">
-        <Placeholder label="Getting started with tea"/>
+        <GettingStarted/>
     </section>
 </div>
 

packages/gui/src/routes/cli/+page.svelte

@@ -1,7 +1,8 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import CliBanner from "$components/CliBanner/CliBanner.svelte";
+    import BigBlackSpace from "$components/BigBlackSpace/BigBlackSpace.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -10,11 +11,11 @@
 <div>
     <PageHeader>INSTALL TEA</PageHeader>
 
-    <header>
+    <section>
-        <Placeholder label="big tea icon version with copy curl"/>
+        <CliBanner/>
-    </header>
+    </section>
 
     <section class="mt-8">
-        <Placeholder label="big black blank space"/>
+        <BigBlackSpace/>
     </section>
 </div>

packages/gui/src/routes/documentation/+page.svelte

@@ -1,7 +1,8 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import FeaturedCourses from "$components/FeaturedCourses/FeaturedCourses.svelte";
+    import EssentialWorkshops from "$components/EssentialWorkshops/EssentialWorkshops.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -10,11 +11,11 @@
 <div>
     <PageHeader>Documentation</PageHeader>
 
-    <header>
+    <section>
-        <Placeholder label="featured courses"/>
+        <FeaturedCourses/>
-    </header>
+    </section>
 
     <section class="mt-8">
-        <Placeholder label="Essential workshops"/>
+        <EssentialWorkshops/>
     </section>
 </div>

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

@@ -1,7 +1,7 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import SearchPackages from "$components/SearchPackages/SearchPackages.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -9,27 +9,5 @@
 
 <div>
     <PageHeader>Packages</PageHeader>
-    <section>
+    <SearchPackages/>
-        <Placeholder label="filter packages"/>
-    </section>
-    <ul class="grid grid-cols-3 gap-8 mt-8">
-        <li>
-            <a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
-        </li>
-    </ul>
 </div>

packages/gui/src/routes/packages/[slug]/+page.svelte

@@ -1,9 +1,9 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
-    import { page } from '$app/stores';
     import { backLink } from '$libs/stores';
+    import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
+    import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
     backLink.set('/packages');
 
     /** @type {import('./$types').PageData} */
@@ -13,9 +13,9 @@
 <div>
     <PageHeader>{data.title}</PageHeader>
     <section>
-        <Placeholder label="package cover w/ copy link" />
+        <PackageBanner/>
     </section>
     <section class="mt-8">
-        <Placeholder label="reviews" />
+        <PackageReviews/>
     </section>
 </div>

packages/gui/src/routes/profile/+page.svelte

@@ -2,6 +2,10 @@
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
     import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import ProfileBanner from "$components/ProfileBanner/ProfileBanner.svelte";
+    import Preflight from "$components/Preflight/Preflight.svelte";
+    import Badges from "$components/Badges/Badges.svelte";
+    import InstalledPackages from "$components/InstalledPackages/InstalledPackages.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -10,21 +14,21 @@
 <div>
     <PageHeader>PROFILE</PageHeader>
 
-    <header>
+    <section>
-        <Placeholder label="github username and wallet address"/>
+        <ProfileBanner/>
-    </header>
+    </section>
 
     <section class="mt-8 grid grid-cols-2 gap-8">
         <div>
-            <Placeholder label="pre-flight"/>
+            <Preflight/>
         </div>
         <div>
-            <Placeholder label="badges"/>
+            <Badges/>
         </div>
     </section>
 
     <section class="mt-8">
-        <Placeholder label="my installs"/>
+        <InstalledPackages/>
     </section>
 
 </div>