84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
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 & 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 },
|
||
)
|
||
}
|