build(website): Add Footer component and update styles

Author: CarLeonDev

website/astro.config.mjs

@@ -32,6 +32,7 @@ export default defineConfig({
       },
       components: {
         Head: "./src/components/Head.astro",
+        Footer: "./src/components/Footer.astro",
         SocialIcons: "./src/components/SocialIcons.astro",
         Search: "./src/components/Search.astro",
         SiteTitle: "./src/components/SiteTitle.astro",

website/src/components/Footer.astro

@@ -0,0 +1,28 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+import Default from "@astrojs/starlight/components/Footer.astro";
+
+const year = new Date().getFullYear();
+---
+
+<>
+  {
+    Astro.props.entry.data.hero ? (
+      <>
+        <footer class="hero-footer flex flex-col items-center justify-center text-sm font-medium text-center">
+          <p>Released under the MIT License.</p>
+          <p>
+            Copyright &copy; <span id="footer-year">{year}</span> Reactter.
+          </p>
+        </footer>
+
+        <script is:inline>
+          document.getElementById("footer-year").innerText = new
+          Date().getFullYear();
+        </script>
+      </>
+    ) : (
+      <Default {...Astro.props} />
+    )
+  }
+</>

website/src/components/SiteTitle.astro

@@ -32,7 +32,7 @@ const href = Astro.props.locale ?? "/";
   }
   <span
     class:list={{
-      "bg-gradient-to-b from-accent-500 to-accent-200 bg-clip-text text-transparent": true,
+      "text-accent-300": true,
       "sr-only": config.logo?.replacesTitle,
     }}
   >

website/src/content/docs/index.mdx

@@ -3,19 +3,20 @@ title: Reactter
 description: A light, powerful and quick Reactive State Management, Dependency Injection and Event Handler for Dart/Flutter.
 template: splash
 hero:
-  title: <h1 class="text-5xl sm:text-6xl bg-gradient-to-b from-accent-600 to-accent-300 bg-clip-text text-transparent">Reactter</h1>
+  title: <h1 class="text-5xl sm:text-6xl bg-gradient-to-b from-accent-400 to-accent-300 md:bg-gradient-to-l md:from-accent-300 md:to-accent-400 bg-clip-text text-transparent">Reactter</h1>
   tagline:
-    <p class="text-xl sm:text-2xl">
+    <h3 class="font-normal text-xl sm:text-2xl md:text-3xl sm:mt-2 sm:mb-1 text-gray-200">
       A
-      <span class="font-bold bg-gradient-to-b from-slate-100 to-slate-400 bg-clip-text text-transparent">lightweight</span>,
-      <span class="font-bold bg-gradient-to-b from-slate-100 to-slate-400 bg-clip-text text-transparent">powerful</span>, and
-      <span class="font-bold bg-gradient-to-b from-slate-100 to-slate-400 bg-clip-text text-transparent">reactive</span>
-    </p>
-    <p class="text-2xl sm:text-3xl">
-      <span class="font-semibold bg-gradient-to-b from-accent-500 to-accent-200 bg-clip-text text-transparent">State Management</span>,
-      <span class="font-semibold bg-gradient-to-b from-accent-500 to-accent-200 bg-clip-text text-transparent">Dependency Injection</span> and
-      <span class="font-semibold bg-gradient-to-b from-accent-500 to-accent-200 bg-clip-text text-transparent">Event Handler</span> for Dart/Flutter.
-    </p>
+      <span class="font-semibold text-accent-100">lightweight</span>,
+      <span class="font-semibold text-accent-100">powerful</span>, and
+      <span class="font-semibold text-accent-100">reactive</span>
+    </h3>
+    <h2 class="font-normal text-2xl sm:text-3xl md:text-4xl text-gray-200">
+      <span class="font-semibold text-accent-300">State Management</span>,
+      <span class="font-semibold text-accent-300">Dependency Injection</span> and
+      <span class="font-semibold text-accent-300">Event Handler</span> for
+      <span class="font-semibold text-accent-100">Dart</span>/<span class="font-semibold text-accent-100">Flutter</span>.
+    </h2>
   image:
     html: <div id="hero_logo"></div>
   actions:
@@ -28,6 +29,7 @@ hero:
       icon: external
       attrs:
         target: _blank
+  footer: TEST
 ---
 
 import { CardGrid } from "@astrojs/starlight/components";
@@ -81,5 +83,4 @@ import Card from "@/components/Card.astro";
       Reduce code significantly and simplify your app.
     </Card>
   </CardGrid>
-</div>
-
+</div>

website/src/styles/custom.css

@@ -11,7 +11,7 @@
 }
 
 body {
-  background-color: hsl(from var(--sl-color-accent-low) h s 05% / 100%);
+  background-color: hsl(from var(--sl-color-accent-low) h s 08% / 100%);
 }
 
 [data-has-hero] header {
@@ -48,21 +48,24 @@ body {
   background-position: center;
   width: 100%;
   height: 100%;
+  max-width: 300px;
 }
 
 [data-has-hero] .hero #hero_logo::after {
   content: "";
-  background: inherit;
-  width: 100%;
-  height: 100%;
   position: absolute;
-  filter: drop-shadow(0px 0px) blur(80px);
+  width: 100%;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  background: linear-gradient(45deg, var(--sl-color-accent) 15%, var(--sl-color-accent-low) 75%);
+  filter: blur(72px);
   z-index: -1;
 }
 
 [data-has-hero] .page {
-  background: 
-    linear-gradient(215deg, transparent 0%, rgb(from var(--sl-color-accent-low) r g b / 0.5) 45%, rgb(from var(--sl-color-accent-low) r g b / 0.5) 55%,  transparent 100%);
+  background:
+    radial-gradient(var(--sl-color-accent-low),transparent 50%) no-repeat -60vw -40vh / 105vw 200vh,
+    radial-gradient(var(--sl-color-accent), var(--sl-color-accent-low), transparent 60%) no-repeat 50% calc(100% + 21rem) / 62rem 32rem;
 }
 
 [data-has-hero] .action.primary {

website/tailwind.config.mjs

@@ -34,7 +34,7 @@ export default {
         gray,
       },
       fontFamily: {
-        sans: ['"Atkinson Hyperlegible"'],
+        sans: ['"Inter"'],
         mono: ['"IBM Plex Mono"'],
       },
     },