Skip to content

Commit b69fc02

Browse files
shashank03-devshashank03-dev
authored
Merge pull request #3 from shashank03-dev/codex/redesign-marketing-surface
[codex] redesign marketing surface
2 parents e279534 + fd6a124 commit b69fc02

11 files changed

Lines changed: 4426 additions & 376 deletions

File tree

‎app/examples/page.tsx‎

Lines changed: 138 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import type { Metadata } from "next";
22
import Link from "next/link";
3-
import { ArrowRight } from "lucide-react";
4-
import { LifecycleRail } from "@/components/lifecycle";
53
import {
6-
ExampleGallery,
7-
MotionSpecPreview,
4+
cssStarter,
5+
examples,
6+
motionSpec,
87
SiteFooter,
98
SiteHeader,
109
} from "@/components/marketing";
@@ -15,64 +14,82 @@ export const metadata: Metadata = {
1514
"Review sample MotionCode specs and starter snippets for common UI motion patterns.",
1615
};
1716

17+
const reviewLoopItems = [
18+
{
19+
title: "Reference",
20+
detail: "A short clip that shows the motion clearly.",
21+
},
22+
{
23+
title: "Spec",
24+
detail: "Intent, element, duration, easing, and frame count.",
25+
},
26+
{
27+
title: "Snippet",
28+
detail: "CSS, GSAP, or Framer Motion starter code to inspect.",
29+
},
30+
{
31+
title: "Review",
32+
detail: "Human edits for selectors, states, and reduced motion.",
33+
},
34+
];
35+
1836
export default function ExamplesPage() {
1937
return (
20-
<div className="min-h-screen bg-[#10120d] text-[#fffbf4]">
38+
<div className="min-h-screen bg-[#080808] text-[#fffbf4]">
2139
<SiteHeader />
2240

2341
<main>
24-
<section className="border-b border-white/10">
42+
<section className="border-b border-[#1a1a1a]">
2543
<div className="mx-auto grid w-full max-w-7xl gap-10 px-4 py-16 sm:px-6 lg:grid-cols-[0.85fr_1.15fr] lg:px-8">
2644
<div>
27-
<p className="font-mono text-xs uppercase tracking-[0.22em] text-[#9ef0c0]">
28-
Examples
45+
<p className="font-mono text-xs uppercase tracking-[0.22em] text-[#00ff88]">
46+
{"// examples"}
2947
</p>
30-
<h1 className="mt-4 font-mono text-4xl leading-tight sm:text-6xl">
48+
<h1 className="mt-4 max-w-3xl font-mono text-4xl font-bold leading-tight sm:text-6xl">
3149
Sample motion specs and starter code.
3250
</h1>
33-
<p className="mt-6 text-lg leading-8 text-[#d8cfbc]/75">
51+
<p className="mt-6 max-w-xl text-base leading-8 text-[#565449] sm:text-lg">
3452
These examples show the kind of compact motion notes and snippets
3553
MotionCode is designed to produce. Treat them as drafts, not
3654
finished implementation.
3755
</p>
3856
<div className="mt-8 flex flex-wrap gap-3">
3957
<Link
4058
href="/app"
41-
className="inline-flex h-11 items-center gap-2 rounded-[8px] bg-[#9ef0c0] px-5 text-sm font-semibold text-[#10120d] hover:bg-[#c8ffd9]"
59+
className="inline-flex h-11 items-center border border-[#00ff88] bg-[#00ff88] px-5 font-mono text-xs font-bold text-[#080808] transition-opacity hover:opacity-90"
4260
>
43-
Try the app
44-
<ArrowRight className="size-4" aria-hidden="true" />
61+
Try the app →
4562
</Link>
4663
<Link
47-
href="/#pricing"
48-
className="inline-flex h-11 items-center rounded-[8px] border border-white/15 px-5 text-sm font-semibold text-[#fffbf4] hover:border-[#9ef0c0]/50"
64+
href="/pricing"
65+
className="inline-flex h-11 items-center border border-[#1a1a1a] px-5 font-mono text-xs font-bold text-[#fffbf4] transition-colors hover:border-[#00ff88]/60 hover:bg-[#00ff88]/10"
4966
>
5067
Pricing
5168
</Link>
5269
</div>
5370
</div>
5471

55-
<MotionSpecPreview />
72+
<SpecPreview />
5673
</div>
5774
</section>
5875

59-
<section className="border-b border-white/10 bg-[#0d100b]">
76+
<section className="border-b border-[#1a1a1a] bg-[#11120d]">
6077
<div className="mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
61-
<ExampleGallery />
78+
<ExampleGrid />
6279
</div>
6380
</section>
6481

65-
<section>
82+
<section className="border-b border-[#1a1a1a]">
6683
<div className="mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
6784
<div className="mb-8 max-w-3xl">
68-
<p className="font-mono text-xs uppercase tracking-[0.22em] text-[#ffd166]">
69-
Review loop
85+
<p className="font-mono text-xs uppercase tracking-[0.22em] text-[#00ff88]">
86+
{"// review loop"}
7087
</p>
71-
<h2 className="mt-3 font-mono text-3xl leading-tight sm:text-4xl">
88+
<h2 className="mt-3 font-mono text-3xl font-bold leading-tight sm:text-4xl">
7289
Keep each snippet tied to the reference.
7390
</h2>
7491
</div>
75-
<LifecycleRail />
92+
<ReviewLoop />
7693
</div>
7794
</section>
7895
</main>
@@ -81,3 +98,101 @@ export default function ExamplesPage() {
8198
</div>
8299
);
83100
}
101+
102+
function SpecPreview() {
103+
return (
104+
<div className="min-w-0 border border-[#1a1a1a] bg-[#11120d]">
105+
<div className="flex items-center justify-between border-b border-[#1a1a1a] px-4 py-3">
106+
<div className="font-mono text-xs uppercase tracking-[0.18em] text-[#00ff88]">
107+
{"{ motion spec }"}
108+
</div>
109+
<span className="border border-[#1a1a1a] px-2 py-1 font-mono text-[11px] text-[#565449]">
110+
sample
111+
</span>
112+
</div>
113+
114+
<div className="grid min-w-0 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
115+
<div className="min-w-0 border-b border-[#1a1a1a] p-4 lg:border-b-0 lg:border-r">
116+
<pre className="max-w-full overflow-x-auto font-mono text-sm leading-6 text-[#fffbf4]">
117+
<code>{motionSpec}</code>
118+
</pre>
119+
</div>
120+
<div className="min-w-0 bg-[#080808] p-4">
121+
<div className="mb-3 font-mono text-xs uppercase tracking-[0.18em] text-[#00ff88]">
122+
CSS starter
123+
</div>
124+
<pre className="max-w-full overflow-x-auto font-mono text-sm leading-6 text-[#d8cfbc]">
125+
<code>{cssStarter}</code>
126+
</pre>
127+
</div>
128+
</div>
129+
130+
<div className="flex items-center gap-3 border-t border-[#1a1a1a] bg-[#080808] px-4 py-3 text-sm text-[#565449]">
131+
<span className="size-2 bg-[#00ff88]" aria-hidden="true" />
132+
Review the spec, adjust the code, then paste it into your project.
133+
</div>
134+
</div>
135+
);
136+
}
137+
138+
function ExampleGrid() {
139+
return (
140+
<div className="grid min-w-0 gap-4 lg:grid-cols-3">
141+
{examples.map((example, index) => {
142+
const Icon = example.icon;
143+
144+
return (
145+
<article
146+
key={example.title}
147+
className="min-w-0 border border-[#1a1a1a] bg-[#080808] p-5 transition-colors hover:border-[#00ff88]/60"
148+
>
149+
<div className="mb-5 flex items-start justify-between gap-4">
150+
<div className="flex size-10 items-center justify-center border border-[#1a1a1a] text-[#00ff88]">
151+
<Icon className="size-5" aria-hidden="true" />
152+
</div>
153+
<span className="font-mono text-[11px] uppercase tracking-[0.16em] text-[#565449]">
154+
{String(index + 1).padStart(2, "0")} / {example.intent}
155+
</span>
156+
</div>
157+
<h3 className="font-mono text-xl text-[#fffbf4]">
158+
{example.title}
159+
</h3>
160+
<p className="mt-3 text-sm leading-6 text-[#d8cfbc]/70">
161+
{example.description}
162+
</p>
163+
<p className="mt-4 border-t border-[#1a1a1a] pt-4 font-mono text-xs leading-5 text-[#00ff88]">
164+
{example.spec}
165+
</p>
166+
<pre className="mt-4 max-w-full overflow-x-auto border border-[#1a1a1a] bg-[#11120d] p-4 font-mono text-xs leading-5 text-[#d8cfbc]">
167+
<code>{example.code}</code>
168+
</pre>
169+
</article>
170+
);
171+
})}
172+
</div>
173+
);
174+
}
175+
176+
function ReviewLoop() {
177+
return (
178+
<div className="grid gap-3 md:grid-cols-4">
179+
{reviewLoopItems.map((item, index) => (
180+
<article
181+
key={item.title}
182+
className="relative border border-[#1a1a1a] bg-[#11120d] p-5"
183+
>
184+
<div className="mb-6 flex items-center gap-3">
185+
<span className="flex size-8 items-center justify-center border border-[#00ff88]/40 font-mono text-xs text-[#00ff88]">
186+
{index + 1}
187+
</span>
188+
<span className="h-px flex-1 bg-[#1a1a1a]" aria-hidden="true" />
189+
</div>
190+
<h3 className="font-mono text-lg text-[#fffbf4]">{item.title}</h3>
191+
<p className="mt-3 text-sm leading-6 text-[#d8cfbc]/70">
192+
{item.detail}
193+
</p>
194+
</article>
195+
))}
196+
</div>
197+
);
198+
}

0 commit comments

Comments
 (0)