86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
|
import { ImageResponse } from "next/og"
|
||
|
|
|
||
|
|
export const alt = "Property Management Network — property management without the chaos"
|
||
|
|
export const size = { width: 1200, height: 630 }
|
||
|
|
export const contentType = "image/png"
|
||
|
|
|
||
|
|
export default function OpengraphImage() {
|
||
|
|
return new ImageResponse(
|
||
|
|
(
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
justifyContent: "center",
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
padding: "80px",
|
||
|
|
background: "#09090b",
|
||
|
|
backgroundImage:
|
||
|
|
"radial-gradient(1000px circle at 30% 0%, rgba(99, 102, 241, 0.28), rgba(9, 9, 11, 0) 55%), radial-gradient(900px circle at 90% 100%, rgba(139, 92, 246, 0.18), rgba(9, 9, 11, 0) 55%)",
|
||
|
|
color: "white",
|
||
|
|
fontFamily: "sans-serif",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
gap: "14px",
|
||
|
|
marginBottom: "44px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
width: "16px",
|
||
|
|
height: "16px",
|
||
|
|
borderRadius: "9999px",
|
||
|
|
background: "#6366f1",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
fontSize: "26px",
|
||
|
|
fontWeight: 600,
|
||
|
|
letterSpacing: "0.02em",
|
||
|
|
color: "rgba(255, 255, 255, 0.9)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Property Management Network
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
fontSize: "84px",
|
||
|
|
fontWeight: 800,
|
||
|
|
lineHeight: 1.05,
|
||
|
|
letterSpacing: "-0.02em",
|
||
|
|
maxWidth: "980px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Property management without the chaos
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
marginTop: "36px",
|
||
|
|
fontSize: "32px",
|
||
|
|
fontWeight: 400,
|
||
|
|
lineHeight: 1.35,
|
||
|
|
color: "rgba(255, 255, 255, 0.6)",
|
||
|
|
maxWidth: "900px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Track rent, maintenance, leases & expenses — built for independent
|
||
|
|
landlords.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
{ ...size },
|
||
|
|
)
|
||
|
|
}
|