diff --git a/apps/web/app/[name]/opengraph-image.tsx b/apps/web/app/[name]/opengraph-image.tsx index 6b80dbc7..f623fbaf 100644 --- a/apps/web/app/[name]/opengraph-image.tsx +++ b/apps/web/app/[name]/opengraph-image.tsx @@ -177,22 +177,23 @@ export default async function OGImage({ params }: Props) { flex: 1, flexDirection: "column", position: "relative", + paddingBottom: 40, }} > {/* Top bar with logo left, domain right */}
{/* Logo on left */}
- +
{/* Domain on right */} -
v1.run
+
v1.run
{/* Main content area */} @@ -219,7 +220,7 @@ export default async function OGImage({ params }: Props) { style={{ display: "flex", fontSize: - packageNameDisplay.length > 30 ? 48 : packageNameDisplay.length > 20 ? 60 : 72, + packageNameDisplay.length > 30 ? 56 : packageNameDisplay.length > 20 ? 72 : 88, fontWeight: 700, color: "#fff", textAlign: "center", @@ -233,12 +234,12 @@ export default async function OGImage({ params }: Props) {
{truncatedDesc} @@ -250,6 +251,8 @@ export default async function OGImage({ params }: Props) {
{/* Stats cells */} @@ -258,21 +261,21 @@ export default async function OGImage({ params }: Props) { style={{ display: "flex", flexDirection: "column", - padding: 16, - paddingLeft: 24, - paddingRight: 24, + padding: 20, + paddingLeft: 32, + paddingRight: 32, }} > -
+
{stat1.label.toUpperCase()}
{stat1.value} @@ -284,21 +287,21 @@ export default async function OGImage({ params }: Props) { style={{ display: "flex", flexDirection: "column", - padding: 16, - paddingLeft: 24, - paddingRight: 24, + padding: 20, + paddingLeft: 32, + paddingRight: 32, }} > -
+
{stat2.label.toUpperCase()}
{stat2.value} @@ -310,21 +313,21 @@ export default async function OGImage({ params }: Props) { style={{ display: "flex", flexDirection: "column", - padding: 16, - paddingLeft: 24, - paddingRight: 24, + padding: 20, + paddingLeft: 32, + paddingRight: 32, }} > -
+
{stat3.label.toUpperCase()}
{stat3.value} @@ -336,21 +339,21 @@ export default async function OGImage({ params }: Props) { style={{ display: "flex", flexDirection: "column", - padding: 16, - paddingLeft: 24, - paddingRight: 24, + padding: 20, + paddingLeft: 32, + paddingRight: 32, }} > -
+
{stat4.label.toUpperCase()}
{stat4.value} @@ -364,11 +367,11 @@ export default async function OGImage({ params }: Props) { style={{ display: "flex", alignItems: "center", - padding: 16, - paddingLeft: 24, - paddingRight: 24, - color: "#333", - fontSize: 14, + padding: 20, + paddingLeft: 32, + paddingRight: 32, + color: "#444", + fontSize: 24, }} > {`v1.run/${packageNameDisplay}`}