junobuild · peterpeterparker · Dec 4, 2025 · Dec 4, 2025 · Dec 4, 2025
diff --git a/blog/2023-08-13-preparing-your-app-for-production-icons-metadata-and-beyond.md b/blog/2023-08-13-preparing-your-app-for-production-icons-metadata-and-beyond.md
@@ -61,7 +61,10 @@ There are two other aspects that are of utmost importance:
     <meta charset="utf-8" />
 
     <title>Juno</title>
-    <meta content="Run ideas in your container" name="description" />
+    <meta
+      content="Build serverless apps with self-hosting control"
+      name="description"
+    />
 
     <link href="https://juno.build" rel="canonical" />
   </head>
@@ -96,7 +99,10 @@ Among the plethora of available tags, we typically employ only the following fiv
     <!-- Here same HTML tags as previous chapter -->
 
     <meta content="Juno" property="og:title" />
-    <meta content="Run ideas in your container" property="og:description" />
+    <meta
+      content="Build serverless apps with self-hosting control"
+      property="og:description"
+    />
     <meta content="website" property="og:type" />
     <meta content="https://juno.build" property="og:url" />
     <meta
@@ -136,7 +142,10 @@ It's crucial to keep in mind that tweets are limited to 280 characters without p
 
     <meta content="summary_large_image" name="twitter:card" />
     <meta content="Juno" name="twitter:title" />
-    <meta content="Run ideas in your container" name="twitter:description" />
+    <meta
+      content="Build serverless apps with self-hosting control"
+      name="twitter:description"
+    />
     <meta
       content="https://juno.build/images/social-image.jpg"
       name="twitter:image"

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -42,7 +42,7 @@ codeTheme.styles = [
 
 const config: Config = {
   title: "Juno",
-  tagline: "Run ideas in your container",
+  tagline: "Build serverless apps with self-hosting control",
   url: "https://juno.build",
   baseUrl: "/",
   onBrokenLinks: "throw",
@@ -134,7 +134,7 @@ const config: Config = {
             "Web3, blockchain platform, decentralized applications, Web3 development, passwordless authentication, datastore, file storage, hosting, serverless functions, analytics, open source"
         }
       ],
-      image: "img/social_image_v11.jpg",
+      image: "img/social_image_v12.jpg",
       navbar: {
         logo: {
           alt: "Juno Logo",

diff --git a/showcase.json b/showcase.json
@@ -61,7 +61,7 @@
     "title": "Juno",
     "url": "https://juno.build",
     "description": "Isn't it meta that Juno is built with Juno?",
-    "img": "https://juno.build/img/social_image_v11.jpg",
+    "img": "https://juno.build/img/social_image_v12.jpg",
     "github": "https://github.com/junobuild/juno"
   },
   {

diff --git a/src/components/Features/index.tsx b/src/components/Features/index.tsx
@@ -10,10 +10,14 @@ export default function Features(): JSX.Element {
           <CloudIllustration />
         </picture>
         <aside>
-          <h2>Move Fast. Ship Smart.</h2>
+          <h2>
+            Complete stack.
+            <br />
+            Zero overhead.
+          </h2>
           <p>
-            Develop modern apps with zero backend setup. Build, test and deploy
-            your way.
+            Key-value datastore, storage, auth, analytics, and serverless
+            functions running in secure containers. No infrastructure to manage.
           </p>
         </aside>
       </div>

diff --git a/src/components/Features/styles.module.scss b/src/components/Features/styles.module.scss
@@ -35,7 +35,7 @@
 
     @media screen and (min-width: 768px) {
       margin: 0;
-      max-width: 24rem;
+      max-width: 28rem;
       text-align: inherit;
     }
 
@@ -48,7 +48,7 @@
     margin: 0.75rem 0 0;
     text-align: center;
 
-    max-width: 580px;
+    max-width: 620px;
 
     @media screen and (min-width: 768px) {
       text-align: inherit;

diff --git a/src/components/Head/index.tsx b/src/components/Head/index.tsx
@@ -6,24 +6,30 @@ export default function Home({ children }): JSX.Element {
 
   return (
     <Head>
-      <title>{`${siteConfig.title} | Run ideas in your container`}</title>
+      <title>{`${siteConfig.title} | Build serverless apps with self-hosting control`}</title>
       <meta
-        content="Juno is an open-source serverless platform that helps developers build and ship secure projects at scale."
+        content="Juno is an open-source serverless platform to build, deploy, and run apps in WASM containers with complete ownership and zero DevOps."
         name="description"
       />
       <meta content="Juno" property="og:title" />
-      <meta content="Run ideas in your container" property="og:description" />
+      <meta
+        content="Build serverless apps with self-hosting control"
+        property="og:description"
+      />
       <meta content="website" property="og:type" />
       <meta content="https://juno.build" property="og:url" />
       <meta
-        content="https://juno.build/img/social_image_v11.jpg"
+        content="https://juno.build/img/social_image_v12.jpg"
         property="og:image"
       />
       <meta content="summary_large_image" name="twitter:card" />
       <meta content="Juno" name="twitter:title" />
-      <meta content="Run ideas in your container" name="twitter:description" />
       <meta
-        content="https://juno.build/img/social_image_v11.jpg"
+        content="Build serverless apps with self-hosting control"
+        name="twitter:description"
+      />
+      <meta
+        content="https://juno.build/img/social_image_v12.jpg"
         name="twitter:image"
       />
       <meta content="@JunoBuild" name="twitter:creator" />

diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
@@ -17,7 +17,7 @@ export default function Hero(): JSX.Element {
 
     const timeout = setTimeout(() => {
       typed = new Typed(el.current, {
-        strings: ["Run", "Ship", "Build", "Launch", "Host"],
+        strings: ["Run", "Ship", "Build", "Launch"],
         typeSpeed: 50,
         backSpeed: 50,
         backDelay: 3500,
@@ -43,13 +43,13 @@ export default function Hero(): JSX.Element {
           {!typedLoaded && (
             <span className={`${styles.bold} ${styles.typed}`}>Build</span>
           )}{" "}
-          ideas in
+          serverless apps
           <br />
-          your <span className={styles.bold}>container</span>
+          with self-hosting <span className={styles.bold}>control</span>
         </h1>
         <p className={`${styles.item} ${styles.subtitle}`}>
           Juno is an open-source serverless platform to build, deploy, and run
-          modern apps with the privacy and control of self-hosting.
+          apps in WASM containers with complete ownership and zero DevOps.
         </p>
         <p className={`${styles.item}`}></p>
         <div className={`${styles.item} ${styles.actions}`}>

diff --git a/src/components/Hero/styles.module.scss b/src/components/Hero/styles.module.scss
@@ -1,6 +1,4 @@
 .heroBanner {
-  padding: 0 1rem;
-
   z-index: 1;
   background: transparent;
 
@@ -12,6 +10,7 @@
 
   @media screen and (min-width: 768px) {
     min-height: 520px;
+    padding: 0 1rem;
   }
 }
 
@@ -23,10 +22,11 @@
   align-items: center;
 
   p {
-    max-width: 760px;
+    max-width: 680px;
     text-align: center;
 
     @media screen and (min-width: 960px) {
+      max-width: 760px;
       font-size: 18px;
       line-height: 32px;
     }
@@ -56,12 +56,12 @@
 
   text-align: center;
 
-  max-width: 380px;
+  max-width: 520px;
 
   letter-spacing: -0.15rem;
   word-spacing: -0.5rem;
   line-height: 1.1;
-  font-size: 2.35rem;
+  font-size: 2rem;
   font-weight: inherit;
 
   @media screen and (min-width: 480px) {
@@ -70,10 +70,11 @@
 
   @media screen and (min-width: 768px) {
     max-width: 720px;
-    font-size: 4rem;
+    font-size: 3rem;
   }
   @media screen and (min-width: 960px) {
-    font-size: 5rem;
+    max-width: 830px;
+    font-size: 4rem;
   }
 }
 
@@ -96,24 +97,6 @@
   font-weight: bold;
 }
 
-.typed {
-  font-family: "Pixelify Sans", sans-serif;
-
-  font-size: 2.75rem;
-
-  @media screen and (min-width: 480px) {
-    font-size: 2.95rem;
-  }
-
-  @media screen and (min-width: 768px) {
-    font-size: 4.6rem;
-  }
-
-  @media screen and (min-width: 960px) {
-    font-size: 5.85rem;
-  }
-}
-
 .llms {
   display: inline-flex;
   justify-content: center;

diff --git a/src/components/Outro/index.tsx b/src/components/Outro/index.tsx
@@ -7,7 +7,7 @@ export default function Outro(): JSX.Element {
     <section className={styles.section}>
       <div className={`container ${styles.container}`}>
         <div>
-          <h2 className={`${styles.sub}`}>Your apps. Your terms.</h2>
+          <h2 className={`${styles.sub}`}>Your apps. Your cloud.</h2>
           <p className={styles.subText}>
             No setup. No DevOps. No strings attached.
           </p>

diff --git a/src/mixins/_fonts.scss b/src/mixins/_fonts.scss
@@ -1,15 +1,12 @@
 @mixin h2 {
   line-height: 1.2;
-  font-size: 2.5rem;
+  font-size: 2rem;
   letter-spacing: -0.05em;
   @media screen and (min-width: 768px) {
-    font-size: 3rem;
+    font-size: 2.75rem;
   }
   @media screen and (min-width: 1480px) {
-    font-size: 4rem;
-  }
-  @media screen and (min-width: 1900px) {
-    font-size: 4.75rem;
+    font-size: 3.25rem;
   }
 }
 

diff --git a/static/img/social_image_v11.jpg b/static/img/social_image_v11.jpg
diff --git a/static/img/social_image_v12.jpg b/static/img/social_image_v12.jpg