Skip to content

Commit 4259c07

Browse files
decebaldecebal
committed
apps(marketing-assets): all 6 Remotion compositions + rendered outputs
Components: MockDashboard, MockEventList, MockMetricCard, MockTerminal with oklch dark theme tokens matching the web app. Compositions (all rendering successfully): - hero-screenshot (1270x760 Still) — dashboard with metrics + events - demo-video (1920x1080, 60s/1800 frames) — logo → dashboard → explorer → time-travel terminal → pricing → CTA - gif-event-explorer (800x500, 5s) — search typing + row highlight - gif-live-stream (800x500, 5s) — events sliding in with fade - gif-api-key (800x500, 4s) — terminal: curl onboard → JSON response - gif-onboarding (800x500, 5s) — 4-step progress with checkmarks Output sizes: hero 104K, video 3.4MB, GIFs 182K-531K (all under 5MB). Render all: `cd apps/marketing-assets && bun run render:all`
1 parent 6fa8cc2 commit 4259c07

13 files changed

Lines changed: 799 additions & 12 deletions

‎apps/marketing-assets/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"dependencies": {
2222
"@remotion/bundler": "^4.0.450",
2323
"@remotion/cli": "^4.0.450",
24+
"@remotion/renderer": "4.0.450",
2425
"react": "^19.2.5",
2526
"react-dom": "^19.2.5",
2627
"remotion": "^4.0.450"

‎apps/marketing-assets/src/Root.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import { Composition, Still } from "remotion";
2-
3-
// Compositions — add as they're built
4-
// import { HeroScreenshot } from "./compositions/HeroScreenshot";
5-
// import { DemoVideo } from "./compositions/DemoVideo";
6-
// import { GifEventExplorer } from "./compositions/GifEventExplorer";
7-
// import { GifLiveStream } from "./compositions/GifLiveStream";
8-
// import { GifApiKeyCreation } from "./compositions/GifApiKeyCreation";
9-
// import { GifOnboarding } from "./compositions/GifOnboarding";
2+
import { HeroScreenshot } from "./compositions/HeroScreenshot";
3+
import { DemoVideo } from "./compositions/DemoVideo";
4+
import { GifEventExplorer } from "./compositions/GifEventExplorer";
5+
import { GifLiveStream } from "./compositions/GifLiveStream";
6+
import { GifApiKeyCreation } from "./compositions/GifApiKeyCreation";
7+
import { GifOnboarding } from "./compositions/GifOnboarding";
108

119
export const RemotionRoot: React.FC = () => {
1210
return (
1311
<>
14-
{/* Uncomment as each composition is built:
15-
1612
<Still
1713
id="hero-screenshot"
1814
component={HeroScreenshot}
@@ -64,8 +60,6 @@ export const RemotionRoot: React.FC = () => {
6460
width={800}
6561
height={500}
6662
/>
67-
68-
*/}
6963
</>
7064
);
7165
};

‎apps/marketing-assets/src/components/MockDashboard.tsx‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import type React from "react";
2+
import { colors, fonts } from "./styles";
3+
4+
const sidebarItems = [
5+
{ icon: "~", label: "Dashboard", active: false },
6+
{ icon: ">", label: "Events", active: true },
7+
{ icon: "#", label: "Projections", active: false },
8+
{ icon: "*", label: "Schemas", active: false },
9+
{ icon: "!", label: "Pipelines", active: false },
10+
{ icon: "@", label: "Settings", active: false },
11+
];
12+
13+
interface Props {
14+
children: React.ReactNode;
15+
title?: string;
16+
}
17+
18+
export const MockDashboard: React.FC<Props> = ({ children, title = "Event Explorer" }) => (
19+
<div
20+
style={{
21+
display: "flex",
22+
width: "100%",
23+
height: "100%",
24+
background: colors.bg,
25+
fontFamily: fonts.sans,
26+
color: colors.text,
27+
}}
28+
>
29+
{/* Sidebar */}
30+
<div
31+
style={{
32+
width: 220,
33+
background: colors.bgSidebar,
34+
borderRight: `1px solid ${colors.border}`,
35+
display: "flex",
36+
flexDirection: "column",
37+
padding: "20px 0",
38+
flexShrink: 0,
39+
}}
40+
>
41+
{/* Logo */}
42+
<div
43+
style={{
44+
padding: "0 20px 24px",
45+
display: "flex",
46+
alignItems: "center",
47+
gap: 10,
48+
borderBottom: `1px solid ${colors.border}`,
49+
marginBottom: 16,
50+
}}
51+
>
52+
<div
53+
style={{
54+
width: 28,
55+
height: 28,
56+
borderRadius: 8,
57+
background: `linear-gradient(135deg, ${colors.primary}, ${colors.cyan})`,
58+
display: "flex",
59+
alignItems: "center",
60+
justifyContent: "center",
61+
fontSize: 14,
62+
fontWeight: 800,
63+
color: "white",
64+
}}
65+
>
66+
A
67+
</div>
68+
<span style={{ fontSize: 16, fontWeight: 700, letterSpacing: -0.3 }}>AllSource</span>
69+
</div>
70+
71+
{/* Nav items */}
72+
{sidebarItems.map((item) => (
73+
<div
74+
key={item.label}
75+
style={{
76+
padding: "10px 20px",
77+
display: "flex",
78+
alignItems: "center",
79+
gap: 12,
80+
fontSize: 14,
81+
fontWeight: item.active ? 600 : 400,
82+
color: item.active ? colors.text : colors.textMuted,
83+
background: item.active ? `${colors.primary}15` : "transparent",
84+
borderLeft: item.active ? `2px solid ${colors.primary}` : "2px solid transparent",
85+
cursor: "pointer",
86+
}}
87+
>
88+
<span style={{ fontFamily: fonts.mono, fontSize: 14, width: 16 }}>{item.icon}</span>
89+
{item.label}
90+
</div>
91+
))}
92+
93+
{/* Bottom status */}
94+
<div style={{ marginTop: "auto", padding: "16px 20px", borderTop: `1px solid ${colors.border}` }}>
95+
<div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: colors.textDim }}>
96+
<div style={{ width: 8, height: 8, borderRadius: 4, background: colors.green }} />
97+
All systems healthy
98+
</div>
99+
<div style={{ fontSize: 11, color: colors.textDim, marginTop: 4 }}>v0.19.1 | Pro tier</div>
100+
</div>
101+
</div>
102+
103+
{/* Main content */}
104+
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
105+
{/* Header */}
106+
<div
107+
style={{
108+
padding: "16px 28px",
109+
borderBottom: `1px solid ${colors.border}`,
110+
display: "flex",
111+
alignItems: "center",
112+
justifyContent: "space-between",
113+
}}
114+
>
115+
<h1 style={{ fontSize: 20, fontWeight: 700, margin: 0 }}>{title}</h1>
116+
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
117+
<div
118+
style={{
119+
padding: "6px 14px",
120+
borderRadius: 8,
121+
background: colors.bgInput,
122+
border: `1px solid ${colors.border}`,
123+
color: colors.textDim,
124+
fontSize: 13,
125+
width: 200,
126+
}}
127+
>
128+
Search events...
129+
</div>
130+
<div
131+
style={{
132+
width: 32,
133+
height: 32,
134+
borderRadius: 16,
135+
background: `linear-gradient(135deg, ${colors.primary}, ${colors.cyan})`,
136+
display: "flex",
137+
alignItems: "center",
138+
justifyContent: "center",
139+
fontSize: 13,
140+
fontWeight: 700,
141+
color: "white",
142+
}}
143+
>
144+
D
145+
</div>
146+
</div>
147+
</div>
148+
149+
{/* Content */}
150+
<div style={{ flex: 1, padding: 28, overflow: "hidden" }}>{children}</div>
151+
</div>
152+
</div>
153+
);

‎apps/marketing-assets/src/components/MockEventList.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import type React from "react";
2+
import { colors, fonts } from "./styles";
3+
import { SAMPLE_EVENTS } from "../data/events";
4+
5+
const typeColors: Record<string, string> = {
6+
"user.signup": "#6366f1",
7+
"order.placed": "#22c55e",
8+
"payment.settled": "#eab308",
9+
"agent.query": "#06b6d4",
10+
"projection.updated": "#3b82f6",
11+
"schema.registered": "#a855f7",
12+
"user.login": "#6366f1",
13+
"order.shipped": "#22c55e",
14+
};
15+
16+
interface Props {
17+
count?: number;
18+
highlightIndex?: number;
19+
}
20+
21+
export const MockEventList: React.FC<Props> = ({ count = 6, highlightIndex }) => {
22+
const events = SAMPLE_EVENTS.slice(0, count);
23+
24+
return (
25+
<div
26+
style={{
27+
background: colors.bgCard,
28+
border: `1px solid ${colors.border}`,
29+
borderRadius: 12,
30+
overflow: "hidden",
31+
fontFamily: fonts.mono,
32+
fontSize: 13,
33+
}}
34+
>
35+
{/* Header */}
36+
<div
37+
style={{
38+
display: "grid",
39+
gridTemplateColumns: "100px 160px 100px 1fr",
40+
padding: "10px 16px",
41+
borderBottom: `1px solid ${colors.border}`,
42+
color: colors.textMuted,
43+
fontSize: 11,
44+
fontWeight: 600,
45+
textTransform: "uppercase",
46+
letterSpacing: 1,
47+
fontFamily: fonts.sans,
48+
}}
49+
>
50+
<span>ID</span>
51+
<span>Type</span>
52+
<span>Entity</span>
53+
<span>Timestamp</span>
54+
</div>
55+
56+
{/* Rows */}
57+
{events.map((evt, i) => (
58+
<div
59+
key={evt.id}
60+
style={{
61+
display: "grid",
62+
gridTemplateColumns: "100px 160px 100px 1fr",
63+
padding: "10px 16px",
64+
borderBottom: i < events.length - 1 ? `1px solid ${colors.borderSubtle}` : "none",
65+
background: highlightIndex === i ? `${colors.primary}15` : "transparent",
66+
color: colors.text,
67+
}}
68+
>
69+
<span style={{ color: colors.textDim }}>{evt.id}</span>
70+
<span style={{ color: typeColors[evt.type] || colors.text, fontWeight: 500 }}>
71+
{evt.type}
72+
</span>
73+
<span style={{ color: colors.textMuted }}>{evt.entity}</span>
74+
<span style={{ color: colors.textDim }}>
75+
{evt.ts.replace("T", " ").replace("Z", "")}
76+
</span>
77+
</div>
78+
))}
79+
</div>
80+
);
81+
};

‎apps/marketing-assets/src/components/MockMetricCard.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type React from "react";
2+
import { colors, fonts } from "./styles";
3+
4+
interface Props {
5+
label: string;
6+
value: string;
7+
unit?: string;
8+
}
9+
10+
export const MockMetricCard: React.FC<Props> = ({ label, value, unit }) => (
11+
<div
12+
style={{
13+
background: colors.bgCard,
14+
border: `1px solid ${colors.border}`,
15+
borderRadius: 12,
16+
padding: "20px 24px",
17+
display: "flex",
18+
flexDirection: "column",
19+
gap: 4,
20+
fontFamily: fonts.sans,
21+
}}
22+
>
23+
<span style={{ color: colors.textMuted, fontSize: 13, fontWeight: 500 }}>
24+
{label}
25+
</span>
26+
<div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
27+
<span style={{ color: colors.text, fontSize: 32, fontWeight: 700, letterSpacing: -1 }}>
28+
{value}
29+
</span>
30+
{unit && (
31+
<span style={{ color: colors.textDim, fontSize: 14, fontWeight: 500 }}>
32+
{unit}
33+
</span>
34+
)}
35+
</div>
36+
</div>
37+
);

0 commit comments

Comments
 (0)