feat: landing update

src/components/content-section.astro

@@ -14,12 +14,14 @@ const { title, id } = Astro.props;
   <div class="flex flex-col items-center gap-4">
     <slot name="eyebrow" />
     <h2
-      class="gradient-text text-center font-extrabold tracking-tight text-6xl"
+      class="gradient-text text-center font-extrabold tracking-tight text-5xl 2xl:text-6xl"
     >
       {title}
     </h2>
   </div>
-  <p class="max-w-xl text-center font-extrabold text-2xl">
+  <p
+    class="max-w-xl text-center font-extrabold text-xl 2xl:max-w-2xl 2xl:text-2xl"
+  >
     <slot name="lead" />
   </p>
   <slot />

src/components/header.astro

@@ -8,21 +8,26 @@ const navItems: Array<NavItem> = [
   { title: "FAQs", url: "#faqs" },
   { title: "AstroCommunity", url: "https://git.astronvim.com/AstroCommunity" },
   { title: "Documentation", url: "https://docs.astronvim.com" },
+  {
+    title: "Github",
+    icon: "tabler:brand-github",
+    url: "https://git.astronvim.com",
+  },
   { title: "Socials", icon: "tabler:at", url: "#socials" },
 ];
 ---
 
 <header
   id="page-header"
-  class="absolute bottom-0 z-20 flex w-full items-center justify-between border-b border-transparent px-8 py-4 text-white"
+  class="sticky top-0 z-20 flex w-full items-center justify-between border-b border-default bg-default px-8 py-4 text-default"
 >
   <a
     class="flex items-center gap-3 hover:!text-default"
     href="#"
     aria-label="AstroNvim"
   >
-    <img src="/logo/astronvim.svg" alt="AstroNvim logo" class="h-10" />
-    <h1 class="hidden h-6 font-bold md:block">AstroNvim</h1>
+    <img src="/logo/astronvim.svg" alt="AstroNvim logo" class="h-5" />
+    <h1 class="hidden h-4 font-bold leading-none md:block">AstroNvim</h1>
   </a>
   <div>
     <div class="flex items-center gap-6">
@@ -91,7 +96,6 @@ const navItems: Array<NavItem> = [
   const menuModalId = "menu-modal";
 
   const header = document.querySelector("#page-header") as HTMLElement;
-  const page = document.documentElement;
   const menu = document.querySelector(`#${menuModalId} ul`);
   const openNavButton = document.querySelector("#open-nav-button");
   const closeNavButton = document.querySelector("#close-nav-button");
@@ -112,11 +116,6 @@ const navItems: Array<NavItem> = [
   openNavButton.addEventListener("click", openMenu);
   closeNavButton.addEventListener("click", closeMenu);
 
-  document.addEventListener("scroll", () => {
-    const d = page.clientHeight - page.scrollTop - header.offsetHeight;
-    header.classList.toggle("fixed-header", d < 0);
-  });
-
   menu.addEventListener("click", (event) => {
     if ((event.target as HTMLElement).tagName === "A") {
       closeMenu();
@@ -133,10 +132,6 @@ const navItems: Array<NavItem> = [
 </noscript>
 
 <style>
-  .fixed-header {
-    @apply fixed bottom-auto top-0;
-    @apply border-default bg-default text-default;
-  }
   .modal.is-open {
     @apply block;
   }

src/components/intro.astro

@@ -1,35 +1,41 @@
 ---
 import { Icon } from "astro-icon/components";
 import ContentSection from "~/components/content-section.astro";
+import astrodarkImage from "~/assets/themes/astrodark.png";
+import { Image } from "astro:assets";
+
+const sizes = "(min-width: 1344px) 1278px, 90vw";
 ---
 
-<ContentSection title="Configure less, code more" id="intro">
-  <img
-    slot="eyebrow"
-    src="/logo/astronvim.svg"
-    alt="AstroNvim logo"
-    class="h-32"
-  />
-  <Fragment slot="lead">
-    AstroNvim is an aesthetic and feature-rich Neovim configuration that focuses
-    on
-    <span class="text-primary">extensibility</span> and
-    <span class="text-primary">usability</span>.
-  </Fragment>
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+<div class="relative">
+  <ContentSection title="Configure less, code more" id="intro">
+    <img
+      slot="eyebrow"
+      src="/logo/astronvim.svg"
+      alt="AstroNvim logo"
+      class="h-24"
+    />
+    <Fragment slot="lead">
+      AstroNvim is an aesthetic and feature-rich Neovim configuration that
+      focuses on
+      <span class="text-primary">extensibility</span> and
+      <span class="text-primary">usability</span>.
+    </Fragment>
     <a
       href="https://docs.astronvim.com"
-      class="flex items-center justify-center gap-3 bg-primary px-6 py-4 text-[--color-background] hover:bg-secondary hover:text-[--color-background]"
+      class="flex items-center justify-center gap-2 bg-primary px-6 py-3 font-medium text-[--color-background] hover:bg-secondary hover:text-[--color-background]"
     >
       <Icon name="tabler:rocket" class="h-8 text-lg" />
-      <span>Get Started</span>
-    </a>
-    <a
-      href="https://git.astronvim.com"
-      class="flex items-center justify-center gap-3 border-2 border-current px-6 py-4"
-    >
-      <Icon name="tabler:brand-github" class="h-8 text-lg" />
-      <span>Read the source</span>
+      <span>Get started</span>
     </a>
-  </div>
-</ContentSection>
+    <div class="mx-auto max-w-7xl pt-8">
+      <Image
+        class="relative w-full rounded-lg border border-default"
+        id="overview-image"
+        src={astrodarkImage}
+        sizes={sizes}
+        alt="AstroNvim Overview"
+      />
+    </div>
+  </ContentSection>
+</div>

src/pages/index.astro

@@ -1,15 +1,13 @@
 ---
 import Layout from "~/layouts/layout.astro";
 import Header from "~/components/header.astro";
-import Splash from "~/components/splash.astro";
 import Intro from "~/components/intro.astro";
 import Features from "~/components/features.astro";
 import FAQ from "~/components/faq.astro";
 ---
 
 <Layout title="AstroNvim">
   <Header />
-  <Splash />
   <div class="space-y-24 px-8 py-32">
     <Intro />
     <Features />