Soroush.Asadi
36e264f3e3
- Wire admin API into homepage + templates page (ISR 60s, null fallback) - Add src/lib/admin-api.ts with safeFetch helper - Add adminProjectToTemplateItem + adminProjectToCatalogTemplate mappers - Add LogoMark SVG component, replace Sparkles icon in Navbar/Footer/Sidebar - Add public/favicon.svg (SVG brand mark) - Rewrite opengraph-image.tsx with FlatRender branding - Add RTL/Persian font cascade: unlayered [dir=rtl] block forces Vazirmatn - Dashboard Settings page: Profile, Security, Billing, Notifications sections - Add src/lib/supabase/client.ts browser client - Admin API: GET /me, PATCH /profile, POST /change-password endpoints - Admin API DTOs: AdminUserDto, UpdateProfileRequest, ChangePasswordRequest - Admin UI Settings page with TanStack Query + mutations - Add CLAUDE.md + README.md to both repos for new-machine onboarding - Update PROJECT_MEMORY.md with session log - Add appsettings.Development.json.example template
113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
import { ImageResponse } from "next/og";
|
|
|
|
export const runtime = "edge";
|
|
|
|
export const alt = "FlatRender — AI Video & Image Maker";
|
|
export const size = { width: 1200, height: 630 };
|
|
export const contentType = "image/png";
|
|
|
|
export default function OpenGraphImage() {
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
height: "100%",
|
|
width: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
justifyContent: "center",
|
|
background:
|
|
"linear-gradient(135deg, #1e3a8a 0%, #2563EB 55%, #4f46e5 100%)",
|
|
padding: "80px 90px",
|
|
fontFamily: "system-ui, -apple-system, sans-serif",
|
|
}}
|
|
>
|
|
{/* Logo mark row */}
|
|
<div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 40 }}>
|
|
{/* Icon */}
|
|
<div
|
|
style={{
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 12,
|
|
background: "rgba(255,255,255,0.15)",
|
|
border: "1.5px solid rgba(255,255,255,0.3)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
{/* Play triangle */}
|
|
<div
|
|
style={{
|
|
width: 0,
|
|
height: 0,
|
|
borderTop: "11px solid transparent",
|
|
borderBottom: "11px solid transparent",
|
|
borderLeft: "18px solid white",
|
|
marginLeft: 4,
|
|
}}
|
|
/>
|
|
</div>
|
|
<span
|
|
style={{ fontSize: 28, fontWeight: 700, color: "white", letterSpacing: -0.5 }}
|
|
>
|
|
FlatRender
|
|
</span>
|
|
</div>
|
|
|
|
{/* Main headline */}
|
|
<div
|
|
style={{
|
|
fontSize: 62,
|
|
fontWeight: 800,
|
|
color: "white",
|
|
lineHeight: 1.08,
|
|
maxWidth: 900,
|
|
letterSpacing: -1.5,
|
|
}}
|
|
>
|
|
Create pro videos & images with AI
|
|
</div>
|
|
|
|
{/* Subtitle */}
|
|
<div
|
|
style={{
|
|
fontSize: 26,
|
|
color: "rgba(255,255,255,0.82)",
|
|
marginTop: 28,
|
|
maxWidth: 760,
|
|
lineHeight: 1.4,
|
|
}}
|
|
>
|
|
Templates, editors, and one-click export for every channel
|
|
</div>
|
|
|
|
{/* Bottom pill tags */}
|
|
<div style={{ display: "flex", gap: 12, marginTop: 48 }}>
|
|
{["Video Maker", "Image Maker", "AI Templates", "One-click Export"].map(
|
|
(tag) => (
|
|
<div
|
|
key={tag}
|
|
style={{
|
|
background: "rgba(255,255,255,0.15)",
|
|
border: "1px solid rgba(255,255,255,0.25)",
|
|
borderRadius: 100,
|
|
padding: "8px 20px",
|
|
fontSize: 16,
|
|
fontWeight: 600,
|
|
color: "rgba(255,255,255,0.9)",
|
|
}}
|
|
>
|
|
{tag}
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
),
|
|
{ ...size }
|
|
);
|
|
}
|