Restructure homepage layout and components for improved user experience

astro.config.mjs

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

src/components/PageTitle.astro

@@ -0,0 +1,13 @@
+---
+/**
+ * PageTitle override
+ *
+ * The homepage renders its own <h1> inside its custom Hero markup, so Starlight's default
+ * page title (the h1#_top normally shown above the content) is suppressed there.
+ */
+import Default from "@astrojs/starlight/components/PageTitle.astro";
+
+const isHomepage = Astro.url.pathname === "/";
+---
+
+{!isHomepage && <Default {...Astro.props} />}

src/headerNav.ts

@@ -5,4 +5,9 @@ export interface HeaderNavItem {
 
 // Header navigation items rendered to the left of the social icons.
 // Add or reorder entries here to change the header nav.
-export const headerNavItems: HeaderNavItem[] = [{ label: "Blog", href: "/blog/" }];
+export const headerNavItems: HeaderNavItem[] = [
+  { label: "Components", href: "/components/" },
+  { label: "Device List", href: "https://devices.esphome.io/" },
+  { label: "Docs", href: "/guides/getting_started_hassio/" },
+  { label: "Blog", href: "/blog/" },
+];

src/pages/index.astro

@@ -0,0 +1,51 @@
+---
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+---
+
+<StarlightPage
+  frontmatter={{
+    title: "ESPHome",
+    description: "Smart Home Made Simple.",
+    template: "splash",
+    head: [{ tag: "title", content: "ESPHome - Smart Home Made Simple" }],
+  }}
+  hasSidebar={false}
+>
+  <div class="custom-hero">
+    <p>HERO</p>
+  </div>
+</StarlightPage>
+
+<style>
+  html:not([data-has-sidebar]) {
+    --sl-content-width: 100%;
+  }
+
+  :global(.content-panel) {
+    padding: 0;
+    border: none;
+  }
+
+  :global(footer) {
+    --sl-content-width: 75rem;
+
+    width: 100%;
+    max-width: var(--sl-content-width);
+    margin: 0 auto;
+    padding: 0 var(--sl-content-pad-x);
+  }
+
+  .custom-hero {
+    text-align: center;
+    padding: 4rem 1rem;
+  }
+  .cta-button {
+    display: inline-block;
+    background: var(--sl-color-accent);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    margin-top: 1rem;
+  }
+</style>

src/styles/custom.css

@@ -82,72 +82,6 @@ dialog::backdrop {
   filter: invert(1) hue-rotate(180deg);
 }
 
-/* Feature grid styles */
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-  margin: 2rem 0;
-}
-
-.feature-card {
-  padding: 1.5rem;
-  border-radius: 8px;
-  background-color: var(--sl-color-gray-6);
-}
-
-.feature-icon {
-  width: 48px;
-  height: 48px;
-  margin-bottom: 1rem;
-}
-
-.feature-icon svg {
-  width: 100%;
-  height: 100%;
-  fill: currentColor;
-}
-
-.feature-text {
-  font-weight: 600;
-  font-size: 1.1rem;
-  margin-bottom: 0.5rem;
-}
-
-/* Getting started grid */
-.getting-started-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  margin: 2rem 0;
-}
-
-.getting-started-heading {
-  font-weight: 600;
-  font-size: 1.2rem;
-  margin-bottom: 0.75rem;
-}
-
-/* Button styles */
-.btn {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  text-decoration: none;
-  font-weight: 500;
-  margin-top: 1rem;
-}
-
-.btn-primary {
-  background-color: var(--sl-color-accent);
-  color: #fff;
-}
-
-.btn-primary:hover {
-  background-color: var(--sl-color-accent-high);
-  color: #fff;
-}
-
 /* Sidebar nav item spacing */
 .sidebar-content ul li summary {
   padding-block: 0.5em;
@@ -327,18 +261,6 @@ article.preview {
   background: repeating-conic-gradient(#999 0% 25%, transparent 10% 50%) 50% / 10px 10px;
 }
 
-/* Better hero image */
-html[data-has-hero] .hero img {
-  width: auto;
-  max-width: 100%;
-}
-
-@media (min-width: 800px) {
-  html[data-has-hero] .hero {
-    grid-template-columns: 5fr 4fr;
-  }
-}
-
 /* ---------- 404 page ---------- */
 
 .error-404 {