feat: ✨ overhault home page

src/index.webc

@@ -7,11 +7,50 @@
   const getAltText = (name) => name.charAt(0).toUpperCase() + name.slice(1) + ' Avatar';
 </script>
 
+<script>
+  const betaNote = document.querySelector('.beta-note');
+  const btn = betaNote.querySelector('.btn');
+  btn.addEventListener('click', (e) => {
+    e.preventDefault();
+    betaNote.style = 'display: none';
+  });
+</script>
+
 <main>
-  <header>
-    <h1>Welcome!</h1>
-    <p>Select your character:</p>
-  </header>
+  <section class="beta-note">
+    <p>
+      <strong>🏗️ Work in progress! 🚧</strong> Please note that while most of this site is close to
+      98% done, it is still being worked on and contents are subject to change.
+    </p>
+    <ref-button class="btn">Okie-dokie!</ref-button>
+  </section>
+
+  <section class="intro">
+    <h1>Sebin's Characters</h1>
+
+    <p>Hiya! 👋🏻 Welcome to my character reference page! 😊</p>
+    <p>
+      This is where you can learn all about my characters with detailed descriptions and lore about
+      each one.
+    </p>
+    <ul>
+      <li>
+        <strong>For Artists</strong> this site provides comprehensive reference material and
+        detailed descriptions for each of my characters to help depict them in the best way
+        possible.
+      </li>
+      <li>
+        <strong>Everyone else</strong> is free to explore the design and lore of my characters to
+        get to know them better!
+      </li>
+    </ul>
+    <p>
+      I put a lot of effort into giving all of them a home and I hope you'll find the information
+      provided enlightening and insightful. Have fun!
+    </p>
+  </section>
+
+  <h2 class="char-select">Select Your Character</h2>
 
   <div class="characters">
     <card webc:for="char of characters" :href="`/${char}/`">
@@ -25,53 +64,55 @@
       <p @text="getDescription(char)"></p>
     </card>
   </div>
-
-  <section class="beta-note">
-    <p class="head">🏗️ Work in progress! 🚧</p>
-    <p>Please note that this site is still being worked on and contents are subject to change.</p>
-  </section>
 </main>
 
 <style>
   main {
-    max-width: 130ch;
     margin: auto;
     padding: 1em;
   }
 
-  header {
+  .intro {
+    max-width: 65ch;
+    margin: auto;
+  }
+
+  .intro h1 {
+    font-size: clamp(2.125em, 10vw, 4em);
     text-align: center;
+  }
 
-    & h1 {
-      font-size: clamp(3.5em, 5vw, 7em);
-      margin-block: clamp(0.25em, 1.75vw, 0.375em);
-    }
-
-    & p {
-      font-size: clamp(1.25em, 1.5vw, 2.25em);
-      margin-block: clamp(0.25em, 10vw, 1em);
-    }
+  .char-select {
+    font-size: clamp(1.75em, 8vw, 3em);
+    text-align: center;
   }
 
   .characters {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
     gap: 1.5em;
+    width: 90vw;
+    max-width: 100ch;
+    margin: auto;
   }
 
   .beta-note {
-    max-width: 60ch;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1em;
+
+    background-color: var(--clr-box-background);
+
     margin: auto;
 
-    margin-block: 2em;
-    border: 0.125em solid white;
-    border-radius: 0.75em;
-    padding-inline: 1em;
+    border: 0.125em solid var(--clr-box-border);
+    border-radius: 1em;
+    padding: 1em;
   }
 
-  .beta-note .head {
-    font-family: var(--font-family-headings);
-    font-size: 1.5em;
-    font-weight: bold;
+  .beta-note > * {
+    margin-block: 0;
   }
 </style>