Production ready

2026-02-09 22:31:22 +01:00
parent fd6e7c44e1
commit 7814548e11
82 changed files with 3390 additions and 2026 deletions
--- a/frontend/app/opengraph-image.tsx
+++ b/frontend/app/opengraph-image.tsx
@@ -0,0 +1,139 @@
+import { ImageResponse } from 'next/og'
+
+export const runtime = 'edge'
+export const alt = 'SiteChangeMonitor - Website Change Detection'
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: '#0f172a',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontFamily: 'sans-serif',
+          position: 'relative',
+        }}
+      >
+        {/* Background Gradients/Glows */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '-20%',
+            left: '-10%',
+            width: '600px',
+            height: '600px',
+            background: 'radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(15, 23, 42, 0) 70%)',
+            filter: 'blur(40px)',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '-20%',
+            right: '-10%',
+            width: '700px',
+            height: '700px',
+            background: 'radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, rgba(15, 23, 42, 0) 70%)',
+            filter: 'blur(60px)',
+          }}
+        />
+
+        {/* Content Container */}
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 10,
+            padding: '40px',
+            border: '1px solid rgba(255, 255, 255, 0.1)',
+            borderRadius: '24px',
+            background: 'rgba(30, 41, 59, 0.4)',
+            boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.3)',
+          }}
+        >
+          {/* Logo Section */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '20px',
+              marginBottom: '32px',
+            }}
+          >
+            <div
+              style={{
+                width: '72px',
+                height: '72px',
+                borderRadius: '18px',
+                background: 'linear-gradient(135deg, #06b6d4, #3b82f6)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '36px',
+                color: 'white',
+                fontWeight: 800,
+                boxShadow: '0 4px 12px rgba(6, 182, 212, 0.4)',
+              }}
+            >
+              S
+            </div>
+            <span style={{ fontSize: '56px', fontWeight: 800, color: 'white', letterSpacing: '-0.02em' }}>
+              SiteChangeMonitor
+            </span>
+          </div>
+
+          {/* Tagline */}
+          <p
+            style={{
+              fontSize: '32px',
+              fontWeight: 500,
+              color: '#cbd5e1',
+              maxWidth: '800px',
+              textAlign: 'center',
+              lineHeight: 1.4,
+              margin: '0 0 48px 0',
+            }}
+          >
+            Less noise. More signal.<br />
+            <span style={{ color: '#38bdf8' }}>Smart website change monitoring.</span>
+          </p>
+
+          {/* Features / Badges */}
+          <div
+            style={{
+              display: 'flex',
+              gap: '24px',
+            }}
+          >
+            {['Noise Filtering', 'Visual Diffs', 'Instant Alerts'].map((feature) => (
+              <div
+                key={feature}
+                style={{
+                  padding: '10px 24px',
+                  background: 'rgba(56, 189, 248, 0.1)',
+                  border: '1px solid rgba(56, 189, 248, 0.2)',
+                  borderRadius: '100px',
+                  color: '#7dd3fc',
+                  fontSize: '20px',
+                  fontWeight: 600,
+                }}
+              >
+                {feature}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    ),
+    { ...size }
+  )
+}