Docs: update landing page

landing/src/components/CTA.astro

@@ -14,7 +14,12 @@ const url = Astro.props.url;
   </IconBox>
   <h2 class="text-md font-medium">{title}</h2>
   <Button variant="outline" size="sm">
-    <a href={url} class="flex flex-row items-center justify-center">
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="flex flex-row items-center justify-center"
+    >
       <p class="text-medium px-2 text-sm">{buttonText}</p>
       <ArrowRight strokeWidth={1} className="h-5 w-5 md:h-6 md:w-6" />
     </a>

landing/src/components/DebugCasesSection.astro

@@ -39,7 +39,7 @@ const debugCases = [
   <ContentWrapper
     className="font-aeonik text-primary flex flex-col items-center justify-center gap-10 sm:gap-14 md:gap-16 lg:gap-20"
   >
-    <h1 class="text-center text-2xl font-bold">Debug case</h1>
+    <h2 class="text-center text-2xl font-bold">Debug case</h2>
 
     <div
       class="flex flex-row flex-wrap justify-around gap-6 sm:gap-12 md:gap-14 lg:gap-16"

landing/src/components/FeaturesSection.astro

@@ -41,12 +41,12 @@ const mainFeatures = [
 
 <section
   id="features"
-  class="flex w-full scroll-m-10 flex-col items-center justify-center bg-white py-16 md:py-20 lg:py-28"
+  class="flex w-full scroll-m-5 flex-col items-center justify-center bg-white py-16 md:py-20 lg:py-28"
 >
   <ContentWrapper
     className="font-aeonik text-primary flex flex-col items-center justify-center gap-10 sm:gap-14 md:gap-16 lg:gap-20"
   >
-    <h1 class="text-center text-2xl font-bold">Main features</h1>
+    <h2 class="text-center text-2xl font-bold">Main features</h2>
 
     <div
       class="grid grid-cols-1 grid-rows-4 gap-y-6 md:grid-cols-2 md:grid-rows-2 md:gap-x-10 md:gap-y-10 lg:gap-x-14 lg:gap-y-14"

landing/src/components/GettingStartedSection.astro

@@ -12,14 +12,14 @@ const tabData = [
 
 <section
   id="gettingstarted"
-  class="bg-primary relative flex w-full scroll-m-10 flex-col items-center justify-center overflow-hidden py-16 max-md:mb-10 sm:py-20 md:py-36"
+  class="bg-primary relative flex w-full scroll-m-5 flex-col items-center justify-center overflow-hidden py-16 max-md:mb-10 sm:py-20 md:py-36"
 >
   <ContentWrapper
     className="font-aeonik z-20 flex w-full flex-col items-center justify-center gap-10 sm:gap-14 md:gap-16 lg:gap-20"
   >
-    <h1 class="text-primary-foreground text-center text-2xl font-bold">
+    <h2 class="text-primary-foreground text-center text-2xl font-bold">
       Getting started
-    </h1>
+    </h2>
 
     <Tabs class="relative h-full w-full" tabData={tabData} client:idle>
       <MixInstallTab slot="mix" client:idle />

landing/src/components/HeroSection.astro

@@ -14,16 +14,19 @@ import { Button } from "@/components/ui/button";
       class="animate-fade-in-down z-10 flex w-full flex-col items-center justify-center gap-8 sm:h-1/2"
     >
       <div class="flex flex-col items-center justify-center gap-5 md:gap-6">
-        <div
-          class="flex flex-row items-center justify-center gap-3 text-sm font-normal sm:gap-4 md:gap-5 lg:gap-6"
-        >
-          <p>Created by</p>
-          <img
-            src="/live-debugger/assets/logo-swm.svg"
-            alt="Software Mansion"
-            class="h-10 w-auto md:h-12"
-          />
-        </div>
+        <a href="https://swmansion.com/" target="_blank" rel="noopener">
+          <div
+            class="flex flex-row items-center justify-center gap-3 text-sm font-normal sm:gap-4 md:gap-5 lg:gap-6"
+          >
+            <p>Created by</p>
+            <img
+              src="/live-debugger/assets/logo-swm.svg"
+              alt="Software Mansion"
+              class="h-10 w-auto md:h-12"
+            />
+          </div>
+        </a>
+
         <div class="flex flex-col items-center justify-center gap-4 md:gap-5">
           <h1
             class="max-w-[500px] text-center text-4xl font-bold md:text-5xl lg:text-6xl"
@@ -36,12 +39,16 @@ import { Button } from "@/components/ui/button";
         </div>
       </div>
       <div class="mt-5 flex gap-4 px-2 max-sm:w-full max-sm:flex-col">
-        <Button variant="secondary"
-          ><p class="text-medium text-sm tracking-normal">Get started</p>
-        </Button>
-        <Button variant="defaultWithOutline"
-          ><p class="text-medium px-2 text-sm">See it in action</p>
-        </Button>
+        <a href="#gettingstarted">
+          <Button variant="secondary"
+            ><p class="text-medium text-sm">Get started</p>
+          </Button>
+        </a>
+        <a href="#videosection">
+          <Button variant="defaultWithOutline"
+            ><p class="text-medium px-2 text-sm">See it in action</p>
+          </Button>
+        </a>
       </div>
     </div>
 

landing/src/components/RoadmapSection.astro

@@ -53,12 +53,12 @@ const accordionData = [
 
 <section
   id="roadmap"
-  class="flex w-full scroll-m-10 flex-col items-center justify-center bg-white py-16 sm:py-20 md:py-32"
+  class="flex w-full flex-col items-center justify-center bg-white py-16 sm:py-20 md:py-32"
 >
   <ContentWrapper
     className="font-aeonik text-primary flex flex-col items-center justify-center gap-12 sm:gap-14 md:gap-16 lg:gap-18"
   >
-    <h1 class="text-primary text-center text-2xl font-bold">Roadmap</h1>
+    <h2 class="text-primary text-center text-2xl font-bold">Roadmap</h2>
 
     <Accordion data={accordionData} client:idle />
 

landing/src/components/VideoSection.astro

@@ -4,14 +4,14 @@ import ContentWrapper from "../components/ContentWrapper.tsx";
 
 <section
   id="videosection"
-  class="bg-primary relative flex w-full scroll-m-10 flex-col items-center justify-center overflow-hidden py-16 sm:py-16 md:py-20 lg:py-30"
+  class="bg-primary relative flex w-full flex-col items-center justify-center overflow-hidden py-16 sm:py-16 md:py-20 lg:py-30"
 >
   <ContentWrapper
     className="font-aeonik text-primary flex w-full flex-col items-center justify-center gap-6 sm:gap-10 md:gap-12 lg:gap-20"
   >
-    <h1 class="text-primary-foreground z-10 text-center text-2xl font-bold">
+    <h2 class="text-primary-foreground z-10 text-center text-2xl font-bold">
       See it in action
-    </h1>
+    </h2>
 
     <div class="z-10 h-auto w-full">
       <iframe

landing/src/components/WhatsNewSection.astro

@@ -6,7 +6,7 @@ import { SquareCheckBig } from "lucide-react";
 
 const newsBlocks = [
   {
-    title: "Better successor LiveView discovery",
+    title: "Better LiveView successor discovery",
     description:
       "Improved tracking of LiveView processes when they’re replaced due to actions like page reloads or errors, ensuring smoother debugging transitions.",
     icon: SquareCheckBig,
@@ -28,7 +28,7 @@ const newsBlocks = [
 
 <section
   id="whatsnew"
-  class="bg-bg-additional flex w-full scroll-m-10 items-center justify-center py-15 sm:py-20 md:py-28 lg:py-32"
+  class="bg-bg-additional flex w-full items-center justify-center py-15 sm:py-20 md:py-28 lg:py-32"
 >
   <ContentWrapper
     className="font-aeonik text-primary flex w-full flex-col items-center justify-center gap-12 sm:gap-14 md:gap-16 lg:gap-18"
@@ -37,10 +37,10 @@ const newsBlocks = [
       <Badge variant="ternary"
         ><p class="text-2xs font-medium">LiveDebugger v0.4.0</p></Badge
       >
-      <h1 class="text-primary text-center text-2xl font-bold">What’s new</h1>
-      <p class="font-regular text-xs">
+      <h2 class="text-primary text-center text-2xl font-bold">What’s new</h2>
+      <h3 class="font-regular text-xs">
         Highlights from the August 2025 update.
-      </p>
+      </h3>
     </div>
 
     <div class="aspect-video h-full w-full">

landing/src/components/ui/Footer.tsx

@@ -80,9 +80,9 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
                     alt="Software Mansion"
                     className="h-7 w-auto md:h-8 lg:h-9"
                   />
-                  <h1 className="mb-3 text-center text-[24px] font-bold sm:text-[28px] lg:text-[36px]">
+                  <h2 className="mb-3 text-center text-[24px] font-bold sm:text-[28px] lg:text-[36px]">
                     We are Software Mansion
-                  </h1>
+                  </h2>
                 </div>
 
                 <h2 className="w-full text-center text-xs font-thin md:w-1/2">
@@ -100,10 +100,10 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
                   <a
                     href="https://swmansion.com/"
                     target="_blank"
-                    rel="noopener noreferrer"
+                    rel="noopener"
                   >
                     <Button variant="secondary" size="sm">
-                      <p className="text-medium text-2xs">Learn more</p>
+                      <p className="text-medium text-sm">Learn more</p>
                     </Button>
                   </a>
                 </div>
@@ -115,7 +115,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
                     key={logo.name}
                     href={logo.href}
                     target="_blank"
-                    rel="noopener noreferrer"
+                    rel="noopener"
                     className="flex h-12 w-auto transform items-center justify-center rounded-full transition-all duration-300 ease-in-out hover:scale-105 hover:opacity-60 md:h-15"
                   >
                     <img

landing/src/components/ui/Header.tsx

@@ -101,7 +101,7 @@ const Header = React.forwardRef<HTMLElement, HeaderProps>(
         )}
         {...props}
       >
-        <div className="mx-auto flex h-20 w-full max-w-[1360px] items-center justify-between px-7 py-12 sm:px-8">
+        <div className="mx-auto flex h-20 w-full max-w-[1360px] items-center justify-between px-7 sm:px-8">
           <a href="#hero" className="mr-6 flex items-center gap-2">
             <Logo className="size-36 sm:size-42 md:size-45" />
           </a>

landing/src/components/ui/blockWrapper.tsx

@@ -73,9 +73,7 @@ function BlockWrapper({
           {children}
         </IconBox>
       </div>
-      <div className="text-primary text-md font-aeonik font-medium">
-        {header}
-      </div>
+      <h3 className="text-primary text-md font-aeonik font-medium">{header}</h3>
       <div className="text-secondary font-aeonik text-sm font-normal">
         {description}
       </div>

landing/src/components/ui/card.tsx

@@ -29,9 +29,9 @@ const TextContent: React.FC<Omit<CardProps, "imageUrl" | "className">> = ({
         </Badge>
       </>
     )}
-    <div className="text-primary font-aeonik self-stretch text-xl leading-tight font-bold lg:leading-[50px]">
+    <h3 className="text-primary font-aeonik self-stretch text-xl leading-tight font-bold lg:leading-[50px]">
       {header}
-    </div>
+    </h3>
     <div className="text-primary font-aeonik text-md self-stretch font-normal">
       {description}
     </div>

landing/src/components/ui/tabs.tsx

@@ -41,7 +41,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "inline-flex w-full items-center justify-center pb-4 whitespace-nowrap",
+        "inline-flex w-full cursor-pointer items-center justify-center pb-4 whitespace-nowrap",
         "font-aeonik text-md font-medium",
         "transition-all disabled:pointer-events-none disabled:opacity-50",
         "text-primary-foreground border-b-2",

landing/src/layouts/Layout.astro

@@ -15,7 +15,11 @@ const { title } = Astro.props;
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/live-debugger/favicon.svg" />
-    <title>{title}</title>
+    <title>LiveDebugger: LiveView debugging made simple</title>
+    <meta
+      name="description"
+      content="A must-have tool for Elixir developers. See your LiveComponents tree, inspect assigns, trace and filter callback executions, and more."
+    />
   </head>
   <body>
     <Header client:load />

landing/src/styles/theme.css

@@ -1,7 +1,8 @@
 @theme {
   --breakpoint-sm: 600px;
   --breakpoint-md: 1025px;
-  --breakpoint-lg: 1441px;
+  --breakpoint-lg: 1550px;
+  /* --breakpoint-lg: 1441px; */
   --breakpoint-xl: initial;
   --breakpoint-2xl: initial;