| 1 | import { ImageResponse } from 'next/og' |
| 2 | import { SaturnLogoLight } from '@/components/icons/saturn-logo' |
| 3 | |
| 4 | export const runtime = 'edge' |
| 5 | export const alt = 'Saturn - Freelance Project Management' |
| 6 | export const size = { width: 1200, height: 600 } |
| 7 | export const contentType = 'image/png' |
| 8 | |
| 9 | async function loadGeistFont() { |
| 10 | const [bold, regular] = await Promise.all([ |
| 11 | fetch( |
| 12 | new URL( |
| 13 | 'https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-700-normal.woff' |
| 14 | ) |
| 15 | ).then((r) => r.arrayBuffer()), |
| 16 | fetch( |
| 17 | new URL( |
| 18 | 'https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-400-normal.woff' |
| 19 | ) |
| 20 | ).then((r) => r.arrayBuffer()), |
| 21 | ]) |
| 22 | return { bold, regular } |
| 23 | } |
| 24 | |
| 25 | export default async function TwitterImage() { |
| 26 | const { bold, regular } = await loadGeistFont() |
| 27 | |
| 28 | return new ImageResponse( |
| 29 | <div |
| 30 | style={{ |
| 31 | background: |
| 32 | 'linear-gradient(145deg, #0a0a0f 0%, #0d0b1a 40%, #120e24 100%)', |
| 33 | overflow: 'hidden', |
| 34 | }} |
| 35 | tw='flex w-full h-full relative' |
| 36 | > |
| 37 | <div |
| 38 | style={{ |
| 39 | right: -20, |
| 40 | top: '50%', |
| 41 | transform: 'translateY(-50%)', |
| 42 | opacity: 0.04, |
| 43 | }} |
| 44 | tw='absolute flex' |
| 45 | > |
| 46 | <SaturnLogoLight height={540} /> |
| 47 | </div> |
| 48 | <div |
| 49 | style={{ |
| 50 | width: 800, |
| 51 | height: 800, |
| 52 | borderRadius: '50%', |
| 53 | border: '1px solid rgba(124,58,237,0.08)', |
| 54 | right: -250, |
| 55 | top: -100, |
| 56 | }} |
| 57 | tw='absolute flex' |
| 58 | /> |
| 59 | <div |
| 60 | style={{ |
| 61 | width: 600, |
| 62 | height: 600, |
| 63 | borderRadius: '50%', |
| 64 | border: '1px solid rgba(124,58,237,0.05)', |
| 65 | right: -150, |
| 66 | top: 0, |
| 67 | }} |
| 68 | tw='absolute flex' |
| 69 | /> |
| 70 | <div |
| 71 | style={{ |
| 72 | width: 500, |
| 73 | height: 500, |
| 74 | borderRadius: '50%', |
| 75 | background: |
| 76 | 'radial-gradient(circle, rgba(124,58,237,0.18) 0%, rgba(124,58,237,0.05) 40%, transparent 70%)', |
| 77 | top: -100, |
| 78 | right: 50, |
| 79 | }} |
| 80 | tw='absolute flex' |
| 81 | /> |
| 82 | <div |
| 83 | style={{ |
| 84 | width: 400, |
| 85 | height: 400, |
| 86 | borderRadius: '50%', |
| 87 | background: |
| 88 | 'radial-gradient(circle, rgba(251,146,60,0.06) 0%, transparent 70%)', |
| 89 | bottom: -120, |
| 90 | left: 40, |
| 91 | }} |
| 92 | tw='absolute flex' |
| 93 | /> |
| 94 | <div |
| 95 | style={{ |
| 96 | left: 0, |
| 97 | top: 0, |
| 98 | bottom: 0, |
| 99 | width: 5, |
| 100 | background: |
| 101 | 'linear-gradient(to bottom, transparent, #7c3aed, #a78bfa, #7c3aed, transparent)', |
| 102 | }} |
| 103 | tw='absolute flex' |
| 104 | /> |
| 105 | <div |
| 106 | style={{ padding: '56px 72px' }} |
| 107 | tw='flex flex-col justify-between h-full w-full relative' |
| 108 | > |
| 109 | <div tw='flex items-center justify-between w-full'> |
| 110 | <div style={{ gap: '14px' }} tw='flex items-center'> |
| 111 | <SaturnLogoLight height={36} /> |
| 112 | <span |
| 113 | style={{ letterSpacing: '-0.5px' }} |
| 114 | tw='text-[26px] font-bold text-white' |
| 115 | > |
| 116 | Saturn |
| 117 | </span> |
| 118 | </div> |
| 119 | <span |
| 120 | style={{ letterSpacing: '3px', textTransform: 'uppercase' }} |
| 121 | tw='text-[14px] text-white/30' |
| 122 | > |
| 123 | For freelancers & agencies |
| 124 | </span> |
| 125 | </div> |
| 126 | <div style={{ gap: '24px', maxWidth: 780 }} tw='flex flex-col'> |
| 127 | <div style={{ gap: '0px' }} tw='flex flex-col'> |
| 128 | <span |
| 129 | style={{ lineHeight: 0.95, letterSpacing: '-4px' }} |
| 130 | tw='text-[80px] font-bold text-white' |
| 131 | > |
| 132 | Ship projects. |
| 133 | </span> |
| 134 | <span |
| 135 | style={{ |
| 136 | lineHeight: 0.95, |
| 137 | letterSpacing: '-4px', |
| 138 | color: '#a78bfa', |
| 139 | }} |
| 140 | tw='text-[80px] font-bold' |
| 141 | > |
| 142 | Get paid. |
| 143 | </span> |
| 144 | </div> |
| 145 | <p |
| 146 | style={{ letterSpacing: '-0.3px' }} |
| 147 | tw='text-[20px] text-white/40 m-0' |
| 148 | > |
| 149 | Track requirements, manage teams, log hours, and invoice clients — |
| 150 | from one dashboard. |
| 151 | </p> |
| 152 | </div> |
| 153 | <div tw='flex' /> |
| 154 | </div> |
| 155 | </div>, |
| 156 | { |
| 157 | ...size, |
| 158 | fonts: [ |
| 159 | { |
| 160 | name: 'Geist', |
| 161 | data: bold, |
| 162 | style: 'normal' as const, |
| 163 | weight: 700 as const, |
| 164 | }, |
| 165 | { |
| 166 | name: 'Geist', |
| 167 | data: regular, |
| 168 | style: 'normal' as const, |
| 169 | weight: 400 as const, |
| 170 | }, |
| 171 | ], |
| 172 | } |
| 173 | ) |
| 174 | } |