@astryxdesign/cli 0.3.0-canary.d1b7d82 → 0.3.0-canary.d52d2cb

package/assets/templates/blocks/components/Overlay/OverlayHoverReveal.tsx

@@ -28,7 +28,7 @@ export default function OverlayHoverReveal() {
       content={<Button label="Quick view" variant="secondary" size="sm" />}>
       <AspectRatio ratio={16 / 9} style={frame}>
         <img
-          src="https://lookaside.facebook.com/assets/astryx/light-working-horizontal-1.png"
+          src="/template-assets/light-working-horizontal-1.png"
           alt="Workspace preview"
           style={image}
         />

package/assets/templates/blocks/components/Overlay/OverlayShowcase.tsx

@@ -29,7 +29,7 @@ export default function OverlayShowcase() {
           overflow: 'clip',
         }}>
         <img
-          src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
+          src="/template-assets/light-scene-horizontal-1.png"
           alt="Abstract landscape"
           style={{width: '100%', height: '100%', objectFit: 'cover'}}
         />

package/assets/templates/blocks/components/TopNav/TopNavMegaMenu.tsx

@@ -75,7 +75,7 @@ export default function TopNavMegaMenuBlock() {
               <TopNavMegaMenuFeaturedCard
                 title="What's new in v4.0"
                 description="AI-powered analytics and real-time collaboration."
-                image="https://lookaside.facebook.com/assets/astryx/light-working-horizontal-1.png"
+                image="/template-assets/light-working-horizontal-1.png"
                 imageAlt="Team collaboration"
                 linkLabel="Read the announcement"
                 linkHref="#announcement"

package/assets/templates/pages/centered-hero/page.tsx

@@ -12,7 +12,7 @@ import {Section} from '@astryxdesign/core/Section';
 import {ArrowRightIcon} from '@heroicons/react/20/solid';
 
 const IMAGE_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png';
+  '/template-assets/light-scene-horizontal-1.png';
 
 const heroImage: CSSProperties = {
   width: '100%',

package/assets/templates/pages/classic-gallery/page.tsx

@@ -47,52 +47,52 @@ interface GalleryImage {
 
 const GALLERY_IMAGES: GalleryImage[] = [
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-1.png',
+    src: '/template-assets/moody-scene-horizontal-1.png',
     alt: 'Moody scene landscape',
     category: 'scene',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-lifestyle-vertical-1.png',
+    src: '/template-assets/moody-lifestyle-vertical-1.png',
     alt: 'Moody lifestyle portrait',
     category: 'lifestyle',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-home-vertical-1.png',
+    src: '/template-assets/moody-home-vertical-1.png',
     alt: 'Moody home interior',
     category: 'home',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-2.png',
+    src: '/template-assets/moody-scene-horizontal-2.png',
     alt: 'Moody scene vista',
     category: 'scene',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-lifestyle-vertical-2.png',
+    src: '/template-assets/moody-lifestyle-vertical-2.png',
     alt: 'Moody lifestyle scene',
     category: 'lifestyle',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-lifestyle-horizontal-1.png',
+    src: '/template-assets/moody-lifestyle-horizontal-1.png',
     alt: 'Moody lifestyle horizontal',
     category: 'lifestyle',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-1.png',
+    src: '/template-assets/moody-scene-vertical-1.png',
     alt: 'Moody scene vertical',
     category: 'scene',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-home-vertical-2.png',
+    src: '/template-assets/moody-home-vertical-2.png',
     alt: 'Moody home vertical',
     category: 'home',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-home-horizontal-1.png',
+    src: '/template-assets/moody-home-horizontal-1.png',
     alt: 'Moody home horizontal',
     category: 'home',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-2.png',
+    src: '/template-assets/moody-scene-vertical-2.png',
     alt: 'Moody scene vertical',
     category: 'scene',
   },

package/assets/templates/pages/detail-page/page.tsx

@@ -64,11 +64,11 @@ const itemsList: CSSProperties = {
 
 // ─── Product data ───────────────────────────────────────────────────────────
 const PRODUCT_IMAGES = [
-  'https://lookaside.facebook.com/assets/astryx/light-product-1.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-2.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-3.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-4.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-5.png',
+  '/template-assets/light-product-1.png',
+  '/template-assets/light-product-2.png',
+  '/template-assets/light-product-3.png',
+  '/template-assets/light-product-4.png',
+  '/template-assets/light-product-5.png',
 ];
 
 const PRODUCTS = [

package/assets/templates/pages/form-two-column/page.tsx

@@ -19,7 +19,7 @@ import {Card} from '@astryxdesign/core/Card';
 import {Selector} from '@astryxdesign/core/Selector';
 
 const ILLUSTRATION_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-working-vertical-2.png';
+  '/template-assets/light-working-vertical-2.png';
 
 const INQUIRY_REASONS = [
   'New business',

package/assets/templates/pages/gallery-hero/page.tsx

@@ -13,15 +13,15 @@ import {ArrowRightIcon} from '@heroicons/react/20/solid';
 
 const IMAGES = [
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-home-horizontal-1.png',
+    src: '/template-assets/colorful-home-horizontal-1.png',
     alt: 'Colorful home interior with vibrant decor',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-1.png',
+    src: '/template-assets/colorful-lifestyle-horizontal-1.png',
     alt: 'Colorful lifestyle portrait with natural lighting',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-2.png',
+    src: '/template-assets/colorful-lifestyle-horizontal-2.png',
     alt: 'Colorful lifestyle scene with warm tones',
   },
 ];

package/assets/templates/pages/library/page.tsx

@@ -37,7 +37,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-home-horizontal-1.png',
+      '/template-assets/colorful-home-horizontal-1.png',
   },
   {
     id: '2',
@@ -47,7 +47,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-3.png',
+      '/template-assets/illustrative-horizontal-3.png',
   },
   {
     id: '3',
@@ -57,7 +57,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-working-horizontal-2.png',
+      '/template-assets/light-working-horizontal-2.png',
   },
   {
     id: '4',
@@ -66,7 +66,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Utility',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-1.png',
+      '/template-assets/moody-scene-horizontal-1.png',
   },
   {
     id: '5',
@@ -75,7 +75,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Pattern',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-2.png',
+      '/template-assets/colorful-lifestyle-horizontal-2.png',
   },
   {
     id: '6',
@@ -84,7 +84,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+      '/template-assets/light-scene-horizontal-1.png',
   },
   {
     id: '7',
@@ -94,7 +94,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-working-horizontal-1.png',
+      '/template-assets/moody-working-horizontal-1.png',
   },
   {
     id: '8',
@@ -103,7 +103,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-working-horizontal-3.png',
+      '/template-assets/colorful-working-horizontal-3.png',
   },
   {
     id: '9',
@@ -112,7 +112,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png',
+      '/template-assets/illustrative-horizontal-1.png',
   },
   {
     id: '10',
@@ -121,7 +121,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-home-horizontal-1.png',
+      '/template-assets/light-home-horizontal-1.png',
   },
   {
     id: '11',
@@ -130,7 +130,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-home-horizontal-2.png',
+      '/template-assets/moody-home-horizontal-2.png',
   },
   {
     id: '12',
@@ -140,7 +140,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-product-1.png',
+      '/template-assets/colorful-product-1.png',
   },
   {
     id: '13',
@@ -150,7 +150,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-5.png',
+      '/template-assets/illustrative-horizontal-5.png',
   },
   {
     id: '14',
@@ -159,7 +159,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Pattern',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-working-horizontal-1.png',
+      '/template-assets/light-working-horizontal-1.png',
   },
   {
     id: '15',
@@ -169,7 +169,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Pattern',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-lifestyle-horizontal-1.png',
+      '/template-assets/moody-lifestyle-horizontal-1.png',
   },
   {
     id: '16',
@@ -178,7 +178,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-home-horizontal-2.png',
+      '/template-assets/colorful-home-horizontal-2.png',
   },
   {
     id: '17',
@@ -188,7 +188,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-working-horizontal-1.png',
+      '/template-assets/colorful-working-horizontal-1.png',
   },
   {
     id: '18',
@@ -198,7 +198,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Pattern',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-working-horizontal-3.png',
+      '/template-assets/light-working-horizontal-3.png',
   },
   {
     id: '19',
@@ -208,7 +208,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-working-horizontal-2.png',
+      '/template-assets/moody-working-horizontal-2.png',
   },
   {
     id: '20',
@@ -218,7 +218,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-2.png',
+      '/template-assets/illustrative-horizontal-2.png',
   },
   {
     id: '21',
@@ -227,7 +227,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-1.png',
+      '/template-assets/colorful-lifestyle-horizontal-1.png',
   },
   {
     id: '22',
@@ -236,7 +236,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-lifestyle-horizontal-1.png',
+      '/template-assets/light-lifestyle-horizontal-1.png',
   },
   {
     id: '23',
@@ -246,7 +246,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-home-horizontal-1.png',
+      '/template-assets/moody-home-horizontal-1.png',
   },
   {
     id: '24',
@@ -256,7 +256,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-working-horizontal-2.png',
+      '/template-assets/colorful-working-horizontal-2.png',
   },
   {
     id: '25',
@@ -266,7 +266,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-4.png',
+      '/template-assets/illustrative-horizontal-4.png',
   },
   {
     id: '26',
@@ -276,7 +276,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-working-horizontal-4.png',
+      '/template-assets/light-working-horizontal-4.png',
   },
   {
     id: '27',
@@ -286,7 +286,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Utility',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-lifestyle-horizontal-2.png',
+      '/template-assets/moody-lifestyle-horizontal-2.png',
   },
   {
     id: '28',
@@ -295,7 +295,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-2.png',
+      '/template-assets/moody-scene-horizontal-2.png',
   },
   {
     id: '29',
@@ -305,7 +305,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Pattern',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-product-2.png',
+      '/template-assets/colorful-product-2.png',
   },
   {
     id: '30',
@@ -315,7 +315,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-working-horizontal-3.png',
+      '/template-assets/moody-working-horizontal-3.png',
   },
 ];
 

package/assets/templates/pages/login/page.tsx

@@ -17,7 +17,6 @@ import {CubeIcon} from '@heroicons/react/24/outline';
 const pageStyle: CSSProperties = {
   minHeight: '100%',
   backgroundColor: 'var(--color-background-body)',
-  padding: 'var(--spacing-6)',
 };
 // Cap the column at 400px but let it shrink to fit narrow screens (Stack
 // has no maxWidth prop, so it's set here).
@@ -43,7 +42,7 @@ export default function LoginPage() {
   };
 
   return (
-    <Center axis="both" style={pageStyle}>
+    <Center axis="both" padding={6} style={pageStyle}>
       <VStack gap={4} hAlign="center" style={contentStyle}>
         {/* Logo */}
         <VStack gap={2} hAlign="center">

package/assets/templates/pages/login-card/page.tsx

@@ -58,7 +58,6 @@ const GoogleIcon = (props: React.SVGProps<SVGSVGElement>) => (
 const pageStyle: CSSProperties = {
   minHeight: '100%',
   backgroundColor: 'var(--color-background-body)',
-  padding: 'var(--spacing-6)',
 };
 // Cap the column at 400px but let it shrink to fit narrow screens (Stack
 // has no maxWidth prop, so it's set here).
@@ -87,7 +86,7 @@ export default function LoginSimple() {
   };
 
   return (
-    <Center axis="both" style={pageStyle}>
+    <Center axis="both" padding={6} style={pageStyle}>
       <VStack gap={4} hAlign="center" style={contentStyle}>
         {/* Logo */}
         <VStack gap={2} hAlign="center">

package/assets/templates/pages/login-split/page.tsx

@@ -18,11 +18,11 @@ import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
 
 const COVER_IMAGE_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-working-vertical-1.png';
+  '/template-assets/light-working-vertical-1.png';
 const APPLE_LOGO_URL =
-  'https://lookaside.facebook.com/assets/astryx/AppleLogo.png';
+  '/template-assets/AppleLogo.png';
 const GOOGLE_LOGO_URL =
-  'https://lookaside.facebook.com/assets/astryx/GoogleLogo.png';
+  '/template-assets/GoogleLogo.png';
 
 // Grid emits minmax(MIN, 1fr) where MIN is a hard floor, so MIN plus the
 // grid inset and page padding must fit the narrowest phone or the column is
@@ -33,11 +33,10 @@ const COLUMN_MIN_WIDTH = 240;
 // tightens the inset at that same point, keyed to the card width (not the
 // window) so it never desyncs.
 // minHeight:100% fills the host so the centered card never leaves an unpainted
-// band; padding keeps it off the surface edges.
+// band; Center's padding prop keeps it off the surface edges.
 const pageStyle: CSSProperties = {
   minHeight: '100%',
   backgroundColor: 'var(--color-background-body)',
-  padding: 'var(--spacing-6)',
 };
 const cardWrap: CSSProperties = {
   width: '100%',
@@ -98,7 +97,7 @@ export default function LoginTwoColumn() {
   };
 
   return (
-    <Center axis="both" style={pageStyle}>
+    <Center axis="both" padding={6} style={pageStyle}>
       <style>{LOGIN_SPLIT_CSS}</style>
       <VStack gap={4} width="100%">
         <div style={cardWrap}>

package/assets/templates/pages/login-sso/page.tsx

@@ -20,14 +20,13 @@ import {Avatar} from '@astryxdesign/core/Avatar';
 // Styles
 // ---------------------------------------------------------------------------
 
-const BG_URL = 'https://lookaside.facebook.com/assets/astryx/building.png';
+const BG_URL = '/template-assets/building.png';
 
 const pageStyle: CSSProperties = {
   minHeight: '100%',
   backgroundImage: `url(${BG_URL})`,
   backgroundSize: 'cover',
   backgroundPosition: 'center',
-  padding: 'var(--spacing-6)',
 };
 
 type SSOProvider = {
@@ -98,7 +97,7 @@ export default function LoginSSO() {
   };
 
   return (
-    <Center axis="both" style={pageStyle}>
+    <Center axis="both" padding={6} style={pageStyle}>
       <Card padding={8} width="100%" maxWidth={400}>
         <VStack gap={4} hAlign="stretch">
           {/* ── Step 1: Email entry ── */}

package/assets/templates/pages/mixed-gallery/page.tsx

@@ -66,23 +66,23 @@ interface GalleryImage {
 // All landscape photos so the uniform 3:2 / 3:1 tiles crop cleanly.
 const IMAGES: GalleryImage[] = [
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png',
+    src: '/template-assets/illustrative-horizontal-1.png',
     title: 'Going places',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/light-home-horizontal-1.png',
+    src: '/template-assets/light-home-horizontal-1.png',
     title: 'Making memories',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/light-lifestyle-horizontal-1.png',
+    src: '/template-assets/light-lifestyle-horizontal-1.png',
     title: 'Being free',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/light-working-horizontal-2.png',
+    src: '/template-assets/light-working-horizontal-2.png',
     title: 'Getting it done',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+    src: '/template-assets/light-scene-horizontal-1.png',
     title: 'Finding calm',
   },
 ];

package/assets/templates/pages/payment-form/page.tsx

@@ -111,13 +111,13 @@ const US_STATES = [
 // docsite; the CLI swaps these for an inline placeholder on scaffold).
 const ITEM_IMAGES: Record<string, {src: string}> = {
   '1': {
-    src: 'https://lookaside.facebook.com/assets/astryx/light-product-1.png',
+    src: '/template-assets/light-product-1.png',
   },
   '2': {
-    src: 'https://lookaside.facebook.com/assets/astryx/light-product-4.png',
+    src: '/template-assets/light-product-4.png',
   },
   '3': {
-    src: 'https://lookaside.facebook.com/assets/astryx/light-product-5.png',
+    src: '/template-assets/light-product-5.png',
   },
 };
 

package/assets/templates/pages/product-detail/page.tsx

@@ -74,13 +74,13 @@ function StarRating({rating, count}: {rating: number; count: number}) {
 // ─── Image URLs ─────────────────────────────────────────────────────────────
 // IMAGES[0] = fallback hero; IMAGES[1..6] = thumbnails (first is selected by default)
 const IMAGES = [
-  'https://lookaside.facebook.com/assets/astryx/light-product-1.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-1.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-2.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-3.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-4.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-5.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-3.png',
+  '/template-assets/light-product-1.png',
+  '/template-assets/light-product-1.png',
+  '/template-assets/light-product-2.png',
+  '/template-assets/light-product-3.png',
+  '/template-assets/light-product-4.png',
+  '/template-assets/light-product-5.png',
+  '/template-assets/light-product-3.png',
 ];
 
 // ─── Product Data ───────────────────────────────────────────────────────────

package/assets/templates/pages/product-gallery/page.tsx

@@ -40,7 +40,7 @@ const PRODUCTS: Product[] = [
       "Sometimes all it takes is one small thing to turn your whole day around. That's what good design is for.",
     price: 75.0,
     image:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png',
+      '/template-assets/illustrative-horizontal-1.png',
   },
   {
     id: 2,
@@ -49,7 +49,7 @@ const PRODUCTS: Product[] = [
       "Sometimes all it takes is one small thing to turn your whole day around. That's what good design is for.",
     price: 80.0,
     image:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-1.png',
+      '/template-assets/illustrative-vertical-1.png',
   },
   {
     id: 3,
@@ -58,7 +58,7 @@ const PRODUCTS: Product[] = [
       "Sometimes all it takes is one small thing to turn your whole day around. That's what good design is for.",
     price: 75.0,
     image:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-3.png',
+      '/template-assets/illustrative-horizontal-3.png',
   },
   {
     id: 4,
@@ -67,7 +67,7 @@ const PRODUCTS: Product[] = [
       "Sometimes all it takes is one small thing to turn your whole day around. That's what good design is for.",
     price: 75.0,
     image:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-4.png',
+      '/template-assets/illustrative-horizontal-4.png',
   },
   {
     id: 5,
@@ -76,7 +76,7 @@ const PRODUCTS: Product[] = [
       "Sometimes all it takes is one small thing to turn your whole day around. That's what good design is for.",
     price: 60.0,
     image:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-5.png',
+      '/template-assets/illustrative-horizontal-5.png',
   },
   {
     id: 6,
@@ -85,7 +85,7 @@ const PRODUCTS: Product[] = [
       "Sometimes all it takes is one small thing to turn your whole day around. That's what good design is for.",
     price: 80.0,
     image:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-2.png',
+      '/template-assets/illustrative-horizontal-2.png',
   },
 ];
 

package/assets/templates/pages/shell-top-nav/page.tsx

@@ -158,7 +158,7 @@ export default function ShellTopNav() {
                   <MegaFeatured
                     title="The Autumn Edit"
                     description="Layering staples in warm, earthy tones."
-                    image="https://lookaside.facebook.com/assets/astryx/texture-beige-horizontal-1.png"
+                    image="/template-assets/texture-beige-horizontal-1.png"
                     imageAlt="Autumn collection lookbook"
                     linkLabel="Shop the edit"
                     linkHref="#autumn-edit"
@@ -172,7 +172,7 @@ export default function ShellTopNav() {
                   <MegaFeatured
                     title="Meet Studio Mara"
                     description="Modern tailoring, made to last."
-                    image="https://lookaside.facebook.com/assets/astryx/texture-beige-horizontal-2.png"
+                    image="/template-assets/texture-beige-horizontal-2.png"
                     imageAlt="Studio Mara lookbook"
                     linkLabel="Discover the label"
                     linkHref="#studio-mara"