@rubytech/create-maxy 1.0.0

package/payload/maxy/app/og/page.tsx

@@ -0,0 +1,252 @@
+import Image from 'next/image'
+
+type Format = 'landscape' | 'square' | 'portrait' | 'linkedin-banner'
+
+const dimensions: Record<Format, { width: number; height: number }> = {
+  landscape: { width: 1200, height: 628 },
+  square: { width: 1200, height: 1200 },
+  portrait: { width: 1080, height: 1350 },
+  'linkedin-banner': { width: 4200, height: 700 },
+}
+
+export default async function OGImage({
+  searchParams,
+}: {
+  searchParams: Promise<{ format?: string }>
+}) {
+  const params = await searchParams
+  const format = (params.format as Format) || 'landscape'
+  const { width, height } = dimensions[format] || dimensions.landscape
+
+  const isLinkedIn = format === 'linkedin-banner'
+  const isPortrait = format === 'portrait'
+  const isSquare = format === 'square'
+
+  // LinkedIn banner: hero image left, text right
+  if (isLinkedIn) {
+    return (
+      <div
+        style={{
+          width,
+          height,
+          minWidth: width,
+          maxWidth: width,
+          minHeight: height,
+          maxHeight: height,
+          display: 'flex',
+          position: 'relative',
+          overflow: 'hidden',
+          backgroundColor: '#FAFAF8',
+        }}
+      >
+        <div style={{ width: '50%', position: 'relative', flexShrink: 0 }}>
+          <Image src="/marketing/maxy-family.png" alt="" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div
+          style={{
+            width: '50%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            justifyContent: 'center',
+            padding: '32px 120px',
+          }}
+        >
+          <Image src="/brand/maxy-black.png" alt="Maxy" width={80} height={80} style={{ objectFit: 'contain' }} />
+          <h1
+            style={{
+              fontFamily: "'Cormorant', Georgia, serif",
+              fontWeight: 300,
+              fontSize: 48,
+              color: '#1A1A1A',
+              marginTop: 20,
+              letterSpacing: '-0.02em',
+              lineHeight: 1.15,
+              textAlign: 'right',
+            }}
+          >
+            No Stress. Quiet Life.
+          </h1>
+        </div>
+      </div>
+    )
+  }
+
+  // Portrait: hero image top, text bottom
+  if (isPortrait) {
+    return (
+      <div
+        style={{
+          width,
+          height,
+          minWidth: width,
+          maxWidth: width,
+          minHeight: height,
+          maxHeight: height,
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          backgroundColor: '#FAFAF8',
+        }}
+      >
+        <div style={{ position: 'relative', width: '100%', height: '60%', flexShrink: 0 }}>
+          <Image src="/marketing/maxy-family.png" alt="" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '40px 60px',
+          }}
+        >
+          <Image src="/brand/maxy-black.png" alt="Maxy" width={64} height={64} style={{ objectFit: 'contain', marginBottom: 20 }} />
+          <h1
+            style={{
+              fontFamily: "'Cormorant', Georgia, serif",
+              fontWeight: 300,
+              fontSize: 56,
+              color: '#1A1A1A',
+              letterSpacing: '-0.02em',
+              lineHeight: 1.15,
+              textAlign: 'center',
+              margin: 0,
+            }}
+          >
+            No Stress. Quiet Life.
+          </h1>
+          <p
+            style={{
+              fontFamily: "'DM Sans', sans-serif",
+              fontSize: 24,
+              color: '#6B6B6B',
+              marginTop: 16,
+              textAlign: 'center',
+            }}
+          >
+            A personal AI assistant that lives in your home.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  // Square: hero image top half, text bottom half
+  if (isSquare) {
+    return (
+      <div
+        style={{
+          width,
+          height,
+          minWidth: width,
+          maxWidth: width,
+          minHeight: height,
+          maxHeight: height,
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          backgroundColor: '#FAFAF8',
+        }}
+      >
+        <div style={{ position: 'relative', width: '100%', height: '55%', flexShrink: 0 }}>
+          <Image src="/marketing/maxy-family.png" alt="" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '32px 60px',
+          }}
+        >
+          <Image src="/brand/maxy-black.png" alt="Maxy" width={72} height={72} style={{ objectFit: 'contain', marginBottom: 20 }} />
+          <h1
+            style={{
+              fontFamily: "'Cormorant', Georgia, serif",
+              fontWeight: 300,
+              fontSize: 60,
+              color: '#1A1A1A',
+              letterSpacing: '-0.02em',
+              lineHeight: 1.15,
+              textAlign: 'center',
+              margin: 0,
+            }}
+          >
+            No Stress. Quiet Life.
+          </h1>
+          <p
+            style={{
+              fontFamily: "'DM Sans', sans-serif",
+              fontSize: 26,
+              color: '#6B6B6B',
+              marginTop: 16,
+              textAlign: 'center',
+            }}
+          >
+            A personal AI assistant that lives in your home.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  // Landscape: hero image left, text right
+  return (
+    <div
+      style={{
+        width,
+        height,
+        minWidth: width,
+        maxWidth: width,
+        minHeight: height,
+        maxHeight: height,
+        display: 'flex',
+        overflow: 'hidden',
+        backgroundColor: '#FAFAF8',
+      }}
+    >
+      <div style={{ position: 'relative', width: '45%', flexShrink: 0 }}>
+        <Image src="/marketing/maxy-family.png" alt="" fill style={{ objectFit: 'cover' }} />
+      </div>
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          padding: '40px 48px',
+        }}
+      >
+        <Image src="/brand/maxy-black.png" alt="Maxy" width={64} height={64} style={{ objectFit: 'contain', marginBottom: 20 }} />
+        <h1
+          style={{
+            fontFamily: "'Cormorant', Georgia, serif",
+            fontWeight: 300,
+            fontSize: 48,
+            color: '#1A1A1A',
+            letterSpacing: '-0.02em',
+            lineHeight: 1.15,
+            margin: 0,
+          }}
+        >
+          No Stress. Quiet Life.
+        </h1>
+        <p
+          style={{
+            fontFamily: "'DM Sans', sans-serif",
+            fontSize: 20,
+            color: '#6B6B6B',
+            lineHeight: 1.5,
+            marginTop: 14,
+          }}
+        >
+          A personal AI assistant that lives in your home.
+        </p>
+      </div>
+    </div>
+  )
+}