added component templates and structure

src/base.css

@@ -0,0 +1,16 @@
+* {
+    margin: 0;
+}
+
+body {
+    background-image: url($lib/assets/img/bg.webp);
+    background-size: 256px;
+
+    color: #fefefe;
+
+    
+}
+
+.window {
+    border: solid 2px rgba(222,222,108,1);
+}

src/lib/components/billboard.svelte

@@ -0,0 +1,25 @@
+<script>
+    import star from "$lib/assets/img/star.gif"
+    // import quote from randomquote function
+</script>
+
+<div class="window">
+    <div id="quote">
+        <img src="{star}" alt=""/>
+        <p>meowwww</p>
+        <img src="{star}" alt=""/>
+    </div>
+</div>
+
+<style>
+    #quote {
+        display: flex;
+        line-height: 32px;
+        margin: 8px 0 8px 0;
+
+        justify-content: center;
+    }
+    img {
+        margin: 0 8px 0 8px;
+    }
+</style>

src/lib/components/title.svelte

@@ -0,0 +1,9 @@
+<p>welcome to...</p>
+<h1>BANII.CAFE</h1>
+
+<style>
+    h1 {
+        background: linear-gradient(90deg,#dede6c,#dede6c 25%,#00d4ff00);
+        color: black;
+    }
+</style>

src/routes/+layout.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.ico';
+	//TODO - make function to handle what stylesheet is used
+	import "../base.css"
 
 	let { children } = $props();
 </script>

src/routes/+page.svelte

@@ -1,2 +1,10 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+    import Title from "$lib/components/title.svelte";
+    import Billboard from "$lib/components/billboard.svelte";
+</script>
+
+<header>
+    <Title/>
+    <Billboard/>
+</header>
+