feat: initialize landing page with dynamic competitor comparison routes and structured SEO metadata

greenlns-landing/app/opengraph-image.tsx

@@ -0,0 +1,83 @@
+import { ImageResponse } from 'next/og'
+
+export const runtime = 'edge'
+export const alt = 'GreenLens – Plant Identifier and Care Planner'
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+export default function OGImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: '#131f16',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '80px',
+        }}
+      >
+        <div
+          style={{
+            fontSize: 26,
+            fontWeight: 600,
+            color: '#56a074',
+            letterSpacing: '0.15em',
+            textTransform: 'uppercase',
+            marginBottom: 28,
+            display: 'flex',
+          }}
+        >
+          Plant Identifier &amp; Care App
+        </div>
+
+        <div
+          style={{
+            fontSize: 100,
+            fontWeight: 800,
+            color: '#f4f1e8',
+            marginBottom: 28,
+            display: 'flex',
+          }}
+        >
+          GreenLens
+        </div>
+
+        <div
+          style={{
+            fontSize: 34,
+            color: 'rgba(244,241,232,0.65)',
+            textAlign: 'center',
+            maxWidth: 820,
+            display: 'flex',
+          }}
+        >
+          Identify plants, get AI-powered care plans, and manage your collection.
+        </div>
+
+        <div style={{ marginTop: 56, display: 'flex', gap: 16 }}>
+          {['450+ plant species', 'AI-powered scans', 'iOS & Android'].map((label) => (
+            <div
+              key={label}
+              style={{
+                background: 'rgba(86,160,116,0.15)',
+                border: '1.5px solid rgba(86,160,116,0.4)',
+                borderRadius: 100,
+                padding: '14px 30px',
+                fontSize: 22,
+                color: '#7ac99a',
+                display: 'flex',
+              }}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+    { ...size },
+  )
+}