Mark Henderson
bada63452f
- Map Justine tokens to shadcn CSS variables (--vibn-* aliases) - Switch fonts to Inter + Lora via next/font (IBM Plex Mono for code) - Base typography: body Inter, h1–h3 Lora; marketing hero + wordmark serif - Project shell and global chrome use semantic colors - Replace Outfit/Newsreader references across TSX inline styles Made-with: Cursor
58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
export default function GrowPage() {
|
|
const items = [
|
|
{ icon: "📣", title: "Marketing copy", desc: "AI-generated landing page, emails, and social posts tailored to your product." },
|
|
{ icon: "🎯", title: "Launch channels", desc: "Recommended channels based on your target audience and business model." },
|
|
{ icon: "👥", title: "User acquisition", desc: "Onboarding flows, referral mechanics, and early adopter campaigns." },
|
|
{ icon: "💬", title: "Community", desc: "Discord, Slack, or forum setup recommendations for your user base." },
|
|
];
|
|
|
|
return (
|
|
<div
|
|
className="vibn-enter"
|
|
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}
|
|
>
|
|
<div style={{ maxWidth: 560 }}>
|
|
<h3 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
|
|
Grow
|
|
</h3>
|
|
<p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: 28 }}>
|
|
Marketing, launch strategy, and user acquisition — coming once your product is live.
|
|
</p>
|
|
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
|
{items.map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="vibn-enter"
|
|
style={{
|
|
display: "flex", alignItems: "flex-start", gap: 16,
|
|
padding: "18px 20px", background: "#fff",
|
|
border: "1px solid #e8e4dc", borderRadius: 10,
|
|
boxShadow: "0 1px 2px #1a1a1a05",
|
|
animationDelay: `${i * 0.06}s`,
|
|
}}
|
|
>
|
|
<div style={{ fontSize: "1.2rem", flexShrink: 0, marginTop: 2 }}>{item.icon}</div>
|
|
<div>
|
|
<div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 4 }}>{item.title}</div>
|
|
<div style={{ fontSize: "0.8rem", color: "#6b6560", lineHeight: 1.55 }}>{item.desc}</div>
|
|
</div>
|
|
<span style={{
|
|
marginLeft: "auto", flexShrink: 0,
|
|
display: "inline-flex", alignItems: "center",
|
|
padding: "3px 9px", borderRadius: 4,
|
|
fontSize: "0.68rem", fontWeight: 600,
|
|
color: "#9a7b3a", background: "#d4a04a12",
|
|
}}>
|
|
Soon
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|