First batch of additions

src/components/Counter.astro

@@ -1,8 +1,10 @@
 ---
-const { count, title, sub } = Astro.props
+import { Icon } from 'astro-icon/components'
+const { icon = 'mdi:rocket', count, title, sub } = Astro.props
 ---
 
-<div class="animate text-center">
+<div class="counter text-center">
+  <Icon name={icon} />
   <p class="text-6xl font-bold">{count}</p>
   <p class="text-4xl font-semibold">{title}</p>
   <p class="text-2xl">{sub}</p>
@@ -12,4 +14,10 @@ const { count, title, sub } = Astro.props
   div > p:first-child {
     color: var(--action-color);
   }
+  :global(.counter [data-icon]) {
+    display: block;
+    margin: 0px auto 1rem auto;
+    height: auto;
+    width: 4rem;
+  }
 </style>

src/components/Hero.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components'
 
-const { src = '/astronaut-hero-img.webp' } = Astro.props
+const { src = '/retrowave-moon.png' } = Astro.props
 ---
 
 <section class="hero my-24">
@@ -9,12 +9,12 @@ const { src = '/astronaut-hero-img.webp' } = Astro.props
     <div class="grid grid-cols-1 items-center gap-24 lg:grid-cols-2">
       <div class="flex flex-col items-center gap-8 md:items-start">
         <h1 class="text-center text-6xl md:text-left lg:text-8xl">
-          <slot><span class="text-gradient">Accessible</span> Starter for Astro</slot>
+          <slot><span class="text-gradient">Modding</span> done with passion</slot>
         </h1>
         <div class="flex flex-col gap-3 min-[500px]:flex-row">
           <a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
-            <Icon name="ion:star-outline" />
-            Star on GitHub
+            <Icon name="ion:logo-github" />
+            View on GitHub
           </a>
           <a
             class="button has-icon color-secondary"

src/components/Navigation.astro

@@ -8,8 +8,8 @@ import logo from '../assets/img/logo.svg'
 <div id="main-navigation" class="is-desktop py-8">
   <div class="container">
     <a href="/" class="flex items-center gap-2 !no-underline">
-      <Image src={logo} alt="Your Logo" width="47" height="37" />
-      <span class="font-bold">Accessible Astro</span>
+      <Image src={logo} alt="MidnightDust Logo" width="47" height="37" />
+      <span class="font-bold">MidnightDust by Motschen</span>
     </a>
     <div class="wrapper">
       <nav class="desktop-menu" aria-label="Main navigation desktop">

src/components/SiteMeta.astro

@@ -3,7 +3,7 @@ import { ViewTransitions } from 'astro:transitions'
 
 const { title, description, url, image, author } = Astro.props
 
-let subtitle = 'Accessible Astro Starter'
+let subtitle = 'MidnightDust'
 ---
 
 <!-- general meta -->