Homepage stuff

Author: jlukic

docs/src/content/lessons/111-introduction/example/component.js

@@ -11,7 +11,6 @@ const currentTime = defineComponent({
 
 const greetUser = defineComponent({
   tagName: 'greet-user',
-  css: '',
   template: `Hello {user} the time is {> currentTime}`,
   settings: { user: '' },
   subTemplates: { currentTime }

docs/src/content/lessons/111-introduction/index.mdx

@@ -24,7 +24,7 @@ Components can be used directly in the browser without compilation as well as wi
 
 ### It's Time To Begin
 
-The key to scaling design frameworks is consistent APIs. Web components allow you to encapsulate functionality into a custom element that can be used by front end developers in the same way they use other tags in the page.
+The key to scaling design frameworks is consistent APIs. Web components allow you to encapsulate functionality into a custom element that can be used by front end developers in the same way they use other html tags when creating new pages.
 
 ```javascript
 defineComponent({

docs/src/layouts/Homepage.css

@@ -115,7 +115,6 @@
     position: relative;
     display: block;
     color: var(--standard-80);
-
     min-height: 300px;
   }
 
@@ -124,6 +123,7 @@
     flex-direction: row;
     gap: 2rem;
     margin-top: -5rem;
+    text-wrap: pretty;
 
     .card {
       background-color: oklch(0.13 0.02 238.07);
@@ -136,6 +136,11 @@
       text-align: center;
       color: var(--white);
 
+      img {
+        display: block;
+        height: 165px;
+        margin: -60px auto 1rem;
+      }
       ui-icon {
         font-size: 48px;
         margin-bottom: 0.5rem;
@@ -145,7 +150,7 @@
         font-size: 24px;
         line-height: 1.2;
         font-weight: bold;
-        color: var(--primary-text-color);
+        color: #eab59f;
       }
       p {
         color: var(--text-color);

docs/src/pages/index.astro

@@ -26,17 +26,20 @@ import Homepage from '../layouts/Homepage.astro';
       <ui-container>
         <div class="cards">
           <div class="card">
-            <ui-icon layers></ui-icon>
+            <img src="https://vaccinebutler.com/images/hero2.png">
+            <!-- <ui-icon layers></ui-icon> -->
             <div class="header"> Write Components, Not Framework Code</div>
             <p>Build UI with pure web components that work anywhere. No framework lock-in means your components are truly portable and future-proof.</p>
           </div>
           <div class="card">
-            <ui-icon zap></ui-icon>
+            <img src="https://vaccinebutler.com/images/hero.png">
+            <!-- <ui-icon zap></ui-icon> -->
             <div class="header">Powerful Built-in Reactivity</div>
             <p>A signals-based reactive system that efficiently updates only what changed. Build complex reactive UIs without the complexity of state management libraries.</p>
           </div>
           <div class="card">
-            <ui-icon box></ui-icon>
+            <img src="https://vaccinebutler.com/images/hero2.png">
+            <!-- <ui-icon box></ui-icon> -->
             <div class="header">Rich Templating That Just Works</div>
             <p>Familiar template syntax with conditionals, loops, and slots built-in. Write declarative templates that feel natural while leveraging the full power of web components.</p>
           </div>