Docs: update landing page (fonts)

landing/astro.config.mjs

@@ -15,4 +15,30 @@ export default defineConfig({
 
   site: "https://docs.swmansion.com",
   base: "/live-debugger",
+  experimental: {
+    fonts: [
+      {
+        cssVariable: "--font-aeonik",
+        name: "Aeonik",
+        provider: "local",
+        variants: [
+          {
+            src: ["./public/fonts/aeonik/aeonik-light.otf"],
+            style: "normal",
+            weight: 300,
+          },
+          {
+            src: ["./public/fonts/aeonik/aeonik-regular.otf"],
+            style: "normal",
+            weight: 400,
+          },
+          {
+            src: ["./public/fonts/aeonik/aeonik-medium.otf"],
+            style: "normal",
+            weight: 600,
+          },
+        ],
+      },
+    ],
+  },
 });

landing/src/components/CTA.astro

@@ -14,7 +14,7 @@ const url2 = Astro.props.url2;
   <IconBox variant="secondary">
     <slot />
   </IconBox>
-  <h2 class="text-md font-medium">{title}</h2>
+  <h2 class="text-lg font-medium">{title}</h2>
   <div class="flex w-full flex-col items-center gap-3">
     <Button variant="outline" size="wfull">
       <a
@@ -23,7 +23,7 @@ const url2 = Astro.props.url2;
         rel="noopener noreferrer"
         class="flex flex-row items-center justify-center"
       >
-        <p class="text-medium px-2 text-sm">{buttonText}</p>
+        <p class="text-md px-2">{buttonText}</p>
         <ArrowRight strokeWidth={1} className="h-5 w-5 md:h-6 md:w-6" />
       </a>
     </Button>
@@ -38,7 +38,7 @@ const url2 = Astro.props.url2;
               rel="noopener noreferrer"
               class="flex flex-row items-center justify-center"
             >
-              <p class="text-medium px-2 text-sm">{buttonText2}</p>
+              <p class="text-md px-2">{buttonText2}</p>
               <ArrowRight strokeWidth={1} className="h-5 w-5 md:h-6 md:w-6" />
             </a>
           </Button>

landing/src/components/FeaturesSection.astro

@@ -73,7 +73,7 @@ const mainFeatures = [
         href="https://hexdocs.pm/live_debugger/features.html"
         class="flex flex-row items-center justify-center gap-1 px-2"
       >
-        <p class="text-normal text-sm">Explore all</p>
+        <p class="text-normal text-md">Explore all</p>
         <ArrowRight strokeWidth={1} className="h-5 w-5 md:h-6 md:w-6" />
       </a></Button
     >

landing/src/components/HeroSection.astro

@@ -29,24 +29,24 @@ import { Button } from "@/components/ui/button";
 
         <div class="flex flex-col items-center justify-center gap-4 md:gap-5">
           <h1
-            class="max-w-[600px] text-center text-4xl font-bold text-balance md:text-5xl lg:text-6xl"
+            class="max-w-[600px] text-center text-3xl font-bold text-balance md:text-5xl lg:text-6xl"
           >
             LiveView debugging made simple
           </h1>
-          <h2 class="text-md text-secondary-strong text-center">
+          <h2 class="text-secondary-strong text-center text-lg">
             See what’s happening inside your apps with&nbsp;LiveDebugger
           </h2>
         </div>
       </div>
       <div class="mt-5 flex gap-4 px-2 max-sm:w-full max-sm:flex-col">
         <a href="#gettingstarted">
           <Button variant="secondary"
-            ><p class="text-medium text-sm">Get started</p>
+            ><p class="text-medium text-md">Get started</p>
           </Button>
         </a>
         <a href="#videosection">
           <Button variant="defaultWithOutline"
-            ><p class="text-medium px-2 text-sm">See it in action</p>
+            ><p class="text-medium text-md px-2">See it in action</p>
           </Button>
         </a>
       </div>

landing/src/components/RoadmapSection.astro

@@ -67,7 +67,7 @@ const accordionData = [
       title="Have a feature idea? Let us know!"
       buttonText="Submit a Github issue"
       url="https://github.com/software-mansion/live-debugger/issues/new/choose"
-      buttonText2="Fill out feedback survey"
+      buttonText2="Fill out LiveDebugger survey"
       url2="https://docs.google.com/forms/d/e/1FAIpQLSftsztVznsYRt6G-rv6Wk-ZppS4SkgM-5r6o38YxZYieatPLQ/viewform?usp=sharing&ouid=114462502893566863638"
     >
       <Lightbulb

landing/src/components/VideoSection.astro

@@ -36,5 +36,3 @@ import ContentWrapper from "../components/ContentWrapper.tsx";
     />
   </div>
 </section>
-
-<!-- class="font-aeonik text-primary flex flex-col items-center justify-center gap-6 max-sm:px-8 sm:w-[552px] sm:max-w-[552px] sm:gap-10 md:w-[936px] md:max-w-[936px] md:gap-12 lg:w-[1360px] lg:max-w-[1360px] lg:gap-20" -->

landing/src/components/WhatsNewSection.astro

@@ -35,10 +35,10 @@ const newsBlocks = [
   >
     <div class="flex flex-col items-center justify-center gap-4">
       <Badge variant="ternary"
-        ><p class="text-2xs font-medium">LiveDebugger v0.4.0</p></Badge
+        ><p class="text-sm font-medium">LiveDebugger v0.4.0</p></Badge
       >
       <h2 class="text-primary text-center text-2xl font-bold">What’s new</h2>
-      <h3 class="font-regular text-xs">
+      <h3 class="font-regular text-lg">
         Highlights from the August 2025 update.
       </h3>
     </div>

landing/src/components/getting-started-tabs-content/CodeBlock.tsx

@@ -43,7 +43,7 @@ export function CodeBlock({ codeString }: CodeBlockProps) {
         onClick={handleCopy}
       >
         <div className="flex items-center gap-2.5 px-2 align-middle">
-          <p className="text-medium text-sm">{isCopied ? "Copied!" : "Copy"}</p>
+          <p className="text-medium text-md">{isCopied ? "Copied!" : "Copy"}</p>
           {!isCopied && (
             <Copy strokeWidth={2} className="h-4 w-4 md:h-5 md:w-5" />
           )}

landing/src/components/ui/AccordionWrapper.tsx

@@ -15,7 +15,7 @@ interface RoadmapAccordionProps {
 const itemContent = (bulletpoints: string[]) => (
   <ul className="w-full list-disc space-y-2 py-1.5 pl-7">
     {bulletpoints.map((point, index) => (
-      <li key={index} className="text-secondary-strong text-lg font-normal">
+      <li key={index} className="text-secondary-strong text-md font-normal">
         {point}
       </li>
     ))}

landing/src/components/ui/Footer.tsx

@@ -82,12 +82,12 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
                         alt="Software Mansion"
                         className="h-7 w-auto md:h-8 lg:h-9"
                       />
-                      <h2 className="mb-3 text-center text-[24px] font-bold sm:text-[28px] lg:text-[36px]">
+                      <h2 className="mb-3 text-center text-2xl font-bold sm:text-[28px] lg:text-[36px]">
                         We are Software Mansion
                       </h2>
                     </div>
 
-                    <h2 className="w-full text-center text-xs font-thin md:w-3/5">
+                    <h2 className="w-full text-center text-lg font-normal md:w-3/5">
                       You might know us from Elixir Stream Week, Global Elixir
                       Meetups, or from projects like Popcorn and Membrane. But
                       that’s not all we do.
@@ -104,7 +104,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
                     rel="noopener"
                   >
                     <Button variant="secondary" size="footer">
-                      <p className="text-medium px-3 text-sm">Learn more</p>
+                      <p className="text-medium text-md px-3">Learn more</p>
                     </Button>
                   </a>
                 </div>
@@ -129,7 +129,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
               </div>
 
               <div className="flex flex-col items-center gap-4 md:gap-6">
-                <p className="text-2xs font-thin">Check our socials</p>
+                <p className="text-md font-normal">Check our socials</p>
 
                 <div className="flex items-center gap-1">
                   {socials.map(({ icon, href }) => (
@@ -150,7 +150,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
                     </a>
                   ))}
                 </div>
-                <p className="text-2xs mt-3 font-thin">
+                <p className="text-md mt-3 font-normal">
                   &copy; Software Mansion 2025.
                 </p>
               </div>

landing/src/layouts/Layout.astro

@@ -1,6 +1,6 @@
 ---
 import "../styles/global.css";
-import "../styles/aeonik.css";
+import { Font } from "astro:assets";
 import { Header } from "@/components/ui/Header";
 import { Footer } from "@/components/ui/Footer";
 
@@ -20,8 +20,9 @@ const { title } = Astro.props;
       name="description"
       content="A must-have tool for Elixir developers. See your LiveComponents tree, inspect assigns, trace and filter callback executions, and more."
     />
+    <Font cssVariable="--font-aeonik" preload />
   </head>
-  <body>
+  <body class="font-primary">
     <Header client:load />
     <slot />
     <Footer client:load />