Products Hero

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

@@ -5,10 +5,30 @@
   background-color: var(--surface-purple);
   overflow: hidden;
   min-height: 100vh;
-  display: flex;
+  display: grid;
+  grid-template-columns:
+    minmax(5rem, 1fr) [banner-start] minmax(0, 182.5px) [content-start] minmax(
+      0,
+      915px
+    )
+    [content-end] minmax(0, 182.5px) [banner-end] minmax(5rem, 1fr);
   justify-content: center;
 }
 
+@media (width < 768px) {
+  /* in small screens, the banner becomes more confined than the content */
+  .pageLayout {
+    grid-template-columns:
+      1.5rem [content-start] 1rem
+      [banner-start] minmax(0, 915px)
+      [banner-end] 1rem [content-end] 1.5rem;
+  }
+}
+
+.pageLayout > * {
+  z-index: 1;
+}
+
 .pageLayout::before {
   content: "";
   position: absolute;
@@ -41,14 +61,17 @@
 
 .content {
   position: relative;
-  max-width: 915px;
   width: 100%;
-  margin-inline: 2rem;
   margin-block: 6rem;
   z-index: 1;
+  grid-column: content;
+}
+
+.content.noMarginTop {
+  margin-top: 0;
 }
 
-.hero {
+.intro {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -57,10 +80,10 @@
   margin-bottom: var(--bolt-space-8);
 }
 
-.hero h1 {
+.intro h1 {
   text-align: center;
 }
 
-.hero p {
+.intro p {
   text-align: center;
 }

client/src/components/page-layout/PageLayout.tsx

@@ -2,7 +2,7 @@ import type { JSX } from "preact/jsx-runtime";
 import styles from "./PageLayout.module.css";
 
 export interface PageLayoutProps {
-  children: JSX.Element;
+  children: JSX.Element | JSX.Element[];
 }
 
 function PageLayoutRoot({ children }: PageLayoutProps) {
@@ -11,21 +11,27 @@ function PageLayoutRoot({ children }: PageLayoutProps) {
 
 export interface PageLayoutContentProps {
   children: JSX.Element | JSX.Element[];
+  noMarginTop?: boolean;
 }
 
-function Content({ children }: PageLayoutContentProps) {
-  return <div className={styles.content}>{children}</div>;
+function Content({ children, noMarginTop }: PageLayoutContentProps) {
+  return (
+    <div
+      className={`${styles.content} ${noMarginTop ? styles.noMarginTop : ""}`}>
+      {children}
+    </div>
+  );
 }
 
 export interface PageLayoutHeroProps {
   children: JSX.Element | JSX.Element[];
 }
 
-function Hero({ children }: PageLayoutHeroProps) {
-  return <section className={styles.hero}>{children}</section>;
+function Intro({ children }: PageLayoutHeroProps) {
+  return <section className={styles.intro}>{children}</section>;
 }
 
 export const PageLayout = Object.assign(PageLayoutRoot, {
-  Hero,
+  Intro,
   Content,
 });

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

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

client/src/pages/products/Product.module.css

@@ -1,3 +1,48 @@
+.hero {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  gap: 6rem;
+
+  padding: 7.5rem 4.5rem;
+  grid-column: banner;
+  background-color: var(--bolt-surface-informative);
+  border-radius: var(--bolt-border-radius-lg);
+  margin-top: 3rem;
+  margin-bottom: 8rem;
+}
+
+@media (width < 992px) {
+  .hero {
+    grid-template-columns: 1fr;
+    padding: 2.5rem 1.5rem;
+    margin-top: 2rem;
+    margin-bottom: 4rem;
+  }
+}
+
+.heroContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bolt-space-2);
+  justify-content: center;
+}
+
+.heroSample {
+  display: flex;
+  align-items: center;
+}
+
+.heroGame {
+  height: 380px;
+  z-index: 1;
+}
+
+.heroAd {
+  height: 430px;
+  margin-left: -45px;
+  border-radius: var(--bolt-border-radius-lg);
+}
+
 .preview {
   display: flex;
   align-items: center;

client/src/pages/products/Products.tsx

@@ -19,6 +19,9 @@ 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 GrunsSwipeable from "../../assets/gruns-swipeable.png";
+import tetris from "../../assets/tetris.png";
+
 import styles from "./Product.module.css";
 import { Heading1 } from "../../design/heading/Heading";
 import { TextBlock } from "../../design/text-block/TextBlock";
@@ -29,8 +32,29 @@ import { CheckoutAction } from "./ad-action/CheckoutAction";
 export default function Products() {
   return (
     <PageLayout>
-      <PageLayout.Content>
-        <PageLayout.Hero>
+      <section className={styles.hero}>
+        <div className={styles.heroContent}>
+          <Heading1 xlarge>Reach New Audiences with Gaming Ads</Heading1>
+          <TextBlock size="large">
+            Connect your brand with millions of customers through rewarded
+            in-game ads. Turning playtime into measurable revenue.
+          </TextBlock>
+        </div>
+        <div className={styles.heroSample}>
+          <img
+            src={tetris}
+            className={styles.heroGame}
+            alt="Tetris Ad Preview"
+          />
+          <img
+            src={GrunsSwipeable}
+            className={styles.heroAd}
+            alt="Gruns Swipeable Ad Preview"
+          />
+        </div>
+      </section>
+      <PageLayout.Content noMarginTop>
+        <PageLayout.Intro>
           <img
             width={88}
             height={88}
@@ -41,7 +65,7 @@ export default function Products() {
           <TextBlock size="xlarge">
             Explore the different products BoltPlay offers within gaming
           </TextBlock>
-        </PageLayout.Hero>
+        </PageLayout.Intro>
         <Tabs
           center
           items={[

client/src/pages/sdks/DeveloperSDKs.tsx

@@ -14,12 +14,12 @@ export function DevelopmentSDKs() {
   return (
     <PageLayout>
       <PageLayout.Content>
-        <PageLayout.Hero>
+        <PageLayout.Intro>
           <Heading1 xlarge>Developer SDKs</Heading1>
           <TextBlock size="xlarge">
             Integrate ads into your game to generate additional revenue
           </TextBlock>
-        </PageLayout.Hero>
+        </PageLayout.Intro>
 
         <hr className={styles.divider} />
 

client/vite.config.ts

@@ -25,6 +25,7 @@ export default defineConfig(({ mode }) => {
       allowedHosts: [
         'localhost',
         '.ngrok.io',
+        '.ngrok.app',
         'dev.bolt.me',
       ]
     }