Athai/optimized images

client/package.json

@@ -24,7 +24,8 @@
     "@preact/preset-vite": "^2.10.1",
     "@tanstack/router-devtools": "^1.124.0",
     "typescript": "~5.8.3",
-    "vite": "^7.0.0"
+    "vite": "^7.0.0",
+    "vite-imagetools": "^10.0.0"
   },
   "volta": {
     "node": "22.17.0"

client/src/app.css

@@ -50,13 +50,13 @@ p {
   margin-top: 3rem;
 }
 
-@media (max-width: 768px) {
+@media (width < 768px) {
   .app-content {
     grid-template-columns: 1fr;
   }
 }
 
-@media (max-width: 768px) {
+@media (width < 768px) {
   .mobile-hidden {
     border: 0;
     clip: rect(0 0 0 0);

client/src/assets/product-images.d.ts

@@ -0,0 +1,18 @@
+// Type declarations for product-images.js (vite-imagetools transforms).
+// Icon exports are URL strings. SrcSet exports are "url Nw, url Mw" srcset strings.
+
+export declare const IconSwipeableAds: string;
+export declare const IconCarouselAds: string;
+export declare const IconVideoAds: string;
+export declare const IconGameController: string;
+export declare const IconCheckoutProduct: string;
+
+export declare const PreviewSwipeableAdSrcSet: string;
+export declare const PreviewCarouselAdSrcSet: string;
+export declare const PreviewVideoAdSrcSet: string;
+export declare const PreviewCheckoutProductSrcSet: string;
+
+export declare const PreviewSwipeableGameSrcSet: string;
+export declare const PreviewCarouselGameSrcSet: string;
+export declare const PreviewVideoGameSrcSet: string;
+export declare const PreviewCheckoutGameSrcSet: string;

client/src/assets/product-images.js

@@ -0,0 +1,24 @@
+// vite-imagetools query-param imports.
+// TypeScript resolves the companion product-images.d.ts for types.
+// Vite processes this file and runs the actual imagetools transforms at build time.
+
+// Icons: WebP at 2× display size (displayed at 80–88px), single URL
+export { default as IconSwipeableAds } from "./icon-swipeable-ads.png?w=160&format=webp";
+export { default as IconCarouselAds } from "./icon-carousel-ads.png?w=160&format=webp";
+export { default as IconVideoAds } from "./icon-video-ads.png?w=160&format=webp";
+export { default as IconGameController } from "./icon-game-controller.png?w=176&format=webp";
+export { default as IconCheckoutProduct } from "./icon-checkout-product.png?w=160&format=webp";
+
+// Ad preview images: displayed at height 400px (fixed CSS), width ~300px
+// Generates two sizes and returns a "url 300w, url 600w" srcset string
+export { default as PreviewSwipeableAdSrcSet } from "./preview-swipeable-ad.png?w=300;600&format=webp&as=srcset";
+export { default as PreviewCarouselAdSrcSet } from "./preview-carousel-ad.png?w=300;600&format=webp&as=srcset";
+export { default as PreviewVideoAdSrcSet } from "./preview-video-ad.png?w=300;600&format=webp&as=srcset";
+export { default as PreviewCheckoutProductSrcSet } from "./preview-checkout-product.png?w=300;600&format=webp&as=srcset";
+
+// Game preview images: displayed at exactly 200×250px with object-fit: cover
+// Generates two sizes and returns a "url 200w, url 400w" srcset string
+export { default as PreviewSwipeableGameSrcSet } from "./preview-swipeable-game.png?w=200;400&format=webp&as=srcset";
+export { default as PreviewCarouselGameSrcSet } from "./preview-carousel-game.jpg?w=200;400&format=webp&as=srcset";
+export { default as PreviewVideoGameSrcSet } from "./preview-video-game.jpg?w=200;400&format=webp&as=srcset";
+export { default as PreviewCheckoutGameSrcSet } from "./preview-checkout-game.png?w=200;400&format=webp&as=srcset";

client/src/assets/sdk-images.d.ts

@@ -0,0 +1,5 @@
+// Type declarations for sdk-images.js (vite-imagetools transforms).
+// All exports are "url Nw, url Mw" srcset strings.
+
+export declare const PreviewUnitySrcSet: string;
+export declare const PreviewJSSrcSet: string;

client/src/assets/sdk-images.js

@@ -0,0 +1,7 @@
+// vite-imagetools query-param imports.
+// TypeScript resolves the companion sdk-images.d.ts for types.
+// Vite processes this file and runs the actual imagetools transforms at build time.
+
+// SDK preview images: displayed at width 400px (fixed CSS)
+export { default as PreviewUnitySrcSet } from "./preview-unity.png?w=400;800&format=webp&as=srcset";
+export { default as PreviewJSSrcSet } from "./preview-js.jpg?w=400;800&format=webp&as=srcset";

client/src/components/page-layout/PageLayout.module.css

@@ -56,3 +56,11 @@
 
   margin-bottom: var(--bolt-space-8);
 }
+
+.hero h1 {
+  text-align: center;
+}
+
+.hero p {
+  text-align: center;
+}

client/src/components/section/Section.module.css

@@ -30,6 +30,7 @@
 @media (width < 768px) {
   .section {
     grid-template-columns: 1fr;
+    gap: var(--bolt-space-10);
   }
 
   .preview {

client/src/components/top-nav/TopNav.module.css

@@ -7,21 +7,74 @@
   z-index: 100;
 }
 
+@media (width < 768px) {
+  .topNav {
+    padding: var(--bolt-space-3) var(--bolt-space-4);
+  }
+}
+
+.navContainer {
+  display: flex;
+  align-items: center;
+}
+
 .navLeft {
   display: flex;
   align-items: center;
-  gap: 4rem;
+  gap: 1.5rem;
+}
+
+.navBrand {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.navBrandLink {
+  display: flex;
+  align-items: center;
+  color: var(--bolt-content-primary);
+}
+
+.navLogoFull {
+  height: 24px;
+  display: block;
+}
+
+.navLogoIcon {
+  height: 24px;
+  width: 24px;
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .navLogoFull {
+    display: none;
+  }
+
+  .navLogoIcon {
+    display: block;
+  }
 }
 
 .navLinks {
   margin-top: 0.5rem;
   display: flex;
-  gap: var(--bolt-space-8);
+  gap: var(--bolt-space-6);
+  flex-wrap: wrap;
+}
+
+@media (width < 480px) {
+  .navLinks {
+    gap: var(--bolt-space-4);
+  }
 }
 
 .navLink {
   color: var(--bolt-content-secondary);
   text-decoration: none;
+  white-space: nowrap;
+  font-size: clamp(0.8rem, 2.5vw, 1rem);
 }
 
 .active {

client/src/components/top-nav/TopNav.tsx

@@ -1,5 +1,6 @@
 import { Link } from "@tanstack/react-router";
 
+import BoltIcon from "../../assets/bolt.svg";
 import BoltLightningGames from "../../assets/lightning-games.svg";
 
 import styles from "./TopNav.module.css";
@@ -14,7 +15,12 @@ export function TopNav() {
               <img
                 src={BoltLightningGames}
                 alt="Game Logo"
-                className={styles.navLogo}
+                className={styles.navLogoFull}
+              />
+              <img
+                src={BoltIcon}
+                alt="Game Logo"
+                className={styles.navLogoIcon}
               />
             </Link>
           </div>

client/src/design/heading/Heading.module.css

@@ -1,20 +1,20 @@
 .heading1 {
   font-size: var(--bolt-font-heading-1-size);
-  line-height: 0;
+  line-height: 1.2;
   font-weight: var(--bolt-font-heading-1-weight);
+  margin-block: 0;
 }
 .heading1.large {
   font-size: var(--bolt-font-heading-1-large-size);
-  line-height: 0;
 }
 
 .heading1.xlarge {
   font-size: var(--bolt-font-heading-1-xlarge-size);
-  line-height: 0;
 }
 
 .heading2 {
   font-size: var(--bolt-font-heading-2-size);
-  line-height: 0;
+  line-height: 1.2;
   font-weight: var(--bolt-font-heading-2-weight);
+  margin-block: 0;
 }

client/src/globals.d.ts

@@ -1,5 +1,12 @@
 /// <reference types="vite/client" />
 
+// vite-imagetools: query-param image imports return a URL string by default.
+// Using wildcards here because TypeScript can't resolve arbitrary query strings.
+declare module "*.png?w=160&format=webp" {
+  const src: string;
+  export default src;
+}
+
 declare global {
     interface Window {
       BoltSDK?: any;

client/src/pages/products/Products.tsx

@@ -1,23 +1,20 @@
 import Tabs from "../../design/tabs/Tabs";
 import { Section, Sections } from "../../components/section/Section";
-
-import IconSwipeableAds from "../../assets/icon-swipeable-ads.png";
-import PreviewSwipeableAd from "../../assets/preview-swipeable-ad.png";
-import PreviewSwipeableGame from "../../assets/preview-swipeable-game.png";
-
-import IconCarouselAds from "../../assets/icon-carousel-ads.png";
-import PreviewCarouselAd from "../../assets/preview-carousel-ad.png";
-import PreviewCarouselGame from "../../assets/preview-carousel-game.jpg";
-
-import IconVideoAds from "../../assets/icon-video-ads.png";
-import PreviewVideoAd from "../../assets/preview-video-ad.png";
-import PreviewVideoGame from "../../assets/preview-video-game.jpg";
-
-import IconGameController from "../../assets/icon-game-controller.png";
-
-import IconCheckoutProduct from "../../assets/icon-checkout-product.png";
-import PreviewCheckoutProduct from "../../assets/preview-checkout-product.png";
-import PreviewCheckoutGame from "../../assets/preview-checkout-game.png";
+import {
+  IconSwipeableAds,
+  IconCarouselAds,
+  IconVideoAds,
+  IconGameController,
+  IconCheckoutProduct,
+  PreviewSwipeableAdSrcSet,
+  PreviewCarouselAdSrcSet,
+  PreviewVideoAdSrcSet,
+  PreviewCheckoutProductSrcSet,
+  PreviewSwipeableGameSrcSet,
+  PreviewCarouselGameSrcSet,
+  PreviewVideoGameSrcSet,
+  PreviewCheckoutGameSrcSet,
+} from "../../assets/product-images";
 
 import styles from "./Product.module.css";
 import { Heading1 } from "../../design/heading/Heading";
@@ -76,7 +73,10 @@ function AdsProductContent() {
           />
         }
         preview={
-          <Preview adUrl={PreviewSwipeableAd} gameUrl={PreviewSwipeableGame} />
+          <Preview
+            adSrcSet={PreviewSwipeableAdSrcSet}
+            gameSrcSet={PreviewSwipeableGameSrcSet}
+          />
         }
       />
       <Section
@@ -90,7 +90,10 @@ function AdsProductContent() {
           />
         }
         preview={
-          <Preview adUrl={PreviewCarouselAd} gameUrl={PreviewCarouselGame} />
+          <Preview
+            adSrcSet={PreviewCarouselAdSrcSet}
+            gameSrcSet={PreviewCarouselGameSrcSet}
+          />
         }
       />
       <Section
@@ -103,7 +106,12 @@ function AdsProductContent() {
             label="View Experience"
           />
         }
-        preview={<Preview adUrl={PreviewVideoAd} gameUrl={PreviewVideoGame} />}
+        preview={
+          <Preview
+            adSrcSet={PreviewVideoAdSrcSet}
+            gameSrcSet={PreviewVideoGameSrcSet}
+          />
+        }
       />
     </Sections>
   );
@@ -119,20 +127,30 @@ function CheckoutProductContent() {
         action={<CheckoutAction label="View Experience" />}
         preview={
           <Preview
-            adUrl={PreviewCheckoutProduct}
-            gameUrl={PreviewCheckoutGame}
+            adSrcSet={PreviewCheckoutProductSrcSet}
+            gameSrcSet={PreviewCheckoutGameSrcSet}
           />
         }
       />
     </Sections>
   );
 }
 
-function Preview({ adUrl, gameUrl }: { adUrl: string; gameUrl: string }) {
+function Preview({ adSrcSet, gameSrcSet }: { adSrcSet: string; gameSrcSet: string }) {
   return (
     <div className={styles.preview}>
-      <img src={adUrl} className={styles.previewAd} alt="Preview Ad" />
-      <img src={gameUrl} className={styles.previewGame} alt="Preview Game" />
+      <img
+        srcSet={adSrcSet}
+        sizes="300px"
+        className={styles.previewAd}
+        alt="Preview Ad"
+      />
+      <img
+        srcSet={gameSrcSet}
+        sizes="200px"
+        className={styles.previewGame}
+        alt="Preview Game"
+      />
     </div>
   );
 }

client/src/pages/sdks/DeveloperSDKs.module.css

@@ -8,4 +8,5 @@
 
 .previewImage {
   width: 400px;
+  max-width: 100%;
 }

client/src/pages/sdks/DeveloperSDKs.tsx

@@ -3,9 +3,7 @@ import { Section, Sections } from "../../components/section/Section";
 import { Heading1 } from "../../design/heading/Heading";
 import { TextBlock } from "../../design/text-block/TextBlock";
 
-import PreviewUnity from "../../assets/preview-unity.png";
-
-import PreviewJS from "../../assets/preview-js.jpg";
+import { PreviewUnitySrcSet, PreviewJSSrcSet } from "../../assets/sdk-images";
 
 import styles from "./DeveloperSDKs.module.css";
 import { LinkButton } from "../../design/button/Button";
@@ -37,7 +35,8 @@ export function DevelopmentSDKs() {
             }
             preview={
               <img
-                src={PreviewUnity}
+                srcSet={PreviewUnitySrcSet}
+                sizes="400px"
                 className={styles.previewImage}
                 alt="Unity SDK Preview"
               />
@@ -57,7 +56,8 @@ export function DevelopmentSDKs() {
             }
             preview={
               <img
-                src={PreviewJS}
+                srcSet={PreviewJSSrcSet}
+                sizes="400px"
                 className={styles.previewImage}
                 alt="TypeScript SDK Preview"
               />