Developer SDK page

Author: alanthai

client/src/app.css

@@ -9,7 +9,8 @@
 }
 
 body {
-  all: unset;
+  margin: 0;
+  padding: 0;
 }
 
 p {

client/src/app.tsx

@@ -11,9 +11,10 @@ import { zappyBirdRoute, zappyLayoutRoute } from "./routes/zappy-bird";
 import { useUserProfile } from "./endpoints";
 import { useBoltSessionVerification } from "./hooks/useBoltSessionVerification";
 import { productsRoute } from "./routes/products";
+import { sdksRoute } from "./routes/sdks";
 
 const routeTree = rootRoute.addChildren([
-  standardLayoutRoute.addChildren([productsRoute]),
+  standardLayoutRoute.addChildren([productsRoute, sdksRoute]),
   zappyLayoutRoute.addChildren([zappyBirdRoute]),
 ]);
 

client/src/assets/icon-js.png

@@ -0,0 +1,58 @@
+.pageLayout {
+  --surface-purple: #f8f6fe;
+
+  position: relative;
+  background-color: var(--surface-purple);
+  overflow: hidden;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+}
+
+.pageLayout::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 364px;
+  height: 640px;
+  background-image: url("../../assets/brand-background-top-corner.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  filter: blur(2px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.pageLayout::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 364px;
+  height: 640px;
+  background-image: url("../../assets/brand-background-bottom-corner.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  filter: blur(2px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.content {
+  position: relative;
+  max-width: 915px;
+  width: 100%;
+  margin-inline: 2rem;
+  margin-block: 6rem;
+  z-index: 1;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bolt-space-2);
+
+  margin-bottom: var(--bolt-space-8);
+}

client/src/assets/icon-unity.png

@@ -0,0 +1,29 @@
+import type { JSX } from "preact/jsx-runtime";
+import styles from "./PageLayout.module.css";
+
+export interface PageLayoutProps {
+  children: JSX.Element;
+}
+
+export function PageLayout({ children }: PageLayoutProps) {
+  return <div className={styles.pageLayout}>{children}</div>;
+}
+
+export interface PageLayoutContentProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+function Content({ children }: PageLayoutContentProps) {
+  return <div className={styles.content}>{children}</div>;
+}
+
+export interface PageLayoutHeroProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+function Hero({ children }: PageLayoutHeroProps) {
+  return <section className={styles.hero}>{children}</section>;
+}
+
+PageLayout.Hero = Hero;
+PageLayout.Content = Content;

client/src/assets/preview-js.jpg

@@ -1,3 +1,9 @@
+.sections {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  gap: 7rem;
+}
+
 .section {
   display: grid;
   grid-template-columns: subgrid;
@@ -16,29 +22,6 @@
   margin-top: var(--bolt-space-6);
 }
 
-.preview {
-  display: flex;
-  align-items: center;
-}
-
-.preview img {
-  user-select: none;
-  pointer-events: none;
-}
-.previewAd {
-  opacity: 1;
-  height: 400px;
-  z-index: 1;
-  border-radius: var(--bolt-border-radius-lg);
-  box-shadow: var(--global-shadow3);
-}
-
-.previewGame {
-  opacity: 0.5;
-  height: 250px;
-  margin-left: -80px;
-}
-
 @media (width < 768px) {
   .section {
     grid-template-columns: 1fr;

client/src/assets/preview-unity.png

@@ -1,3 +1,4 @@
+import type { JSX } from "preact/jsx-runtime";
 import { Button } from "../../design/button/Button";
 import { Heading1 } from "../../design/heading/Heading";
 import { TextBlock } from "../../design/text-block/TextBlock";
@@ -8,31 +9,34 @@ export interface SectionProps {
   iconUrl: string;
   title: string;
   description: string;
-  experienceUrl: string;
-  previewAdUrl: string;
-  previewGameUrl: string;
+  experience: {
+    url: string;
+    label: string;
+  };
+  preview: JSX.Element | JSX.Element[];
 }
 
 export function Section(props: SectionProps) {
-  const { iconUrl, title, description, previewAdUrl, previewGameUrl } = props;
+  const { iconUrl, title, description, experience, preview } = props;
   return (
     <section className={styles.section}>
       <div className={styles.sectionContent}>
-        <img src={iconUrl} width={88} height={88} alt="Swipe-able Ads" />
+        <img src={iconUrl} height={80} alt="Swipe-able Ads" />
         <Heading1 large>{title}</Heading1>
         <TextBlock size="large">{description}</TextBlock>
 
-        <Button>View Experience</Button>
+        <Button>{experience.label}</Button>
       </div>
 
-      <div className={styles.preview}>
-        <img src={previewAdUrl} className={styles.previewAd} alt="Preview Ad" />
-        <img
-          src={previewGameUrl}
-          className={styles.previewGame}
-          alt="Preview Game"
-        />
-      </div>
+      {preview}
     </section>
   );
 }
+
+export interface SectionsProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+export function Sections({ children }: SectionsProps) {
+  return <div className={styles.sections}>{children}</div>;
+}