mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Launch, Grow, Insights tabs; rename Deploy → Launch

Browse Source 
- Rename Deploy tab label to Launch in ProjectShell
- Add Grow and Insights placeholder pages with Stackless styling

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-02 16:39:13 -08:00
parent d60d300a64
commit 7f452c0420
3 changed files with 117 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/[workspace]/project/[projectId]/grow/page.tsx Normal file
View File

@@ -0,0 +1,57 @@
"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: "Outfit, sans-serif" }}
>
<div style={{ maxWidth: 560 }}>
<h3 style={{ fontFamily: "Newsreader, 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>
);
}

57
app/[workspace]/project/[projectId]/insights/page.tsx Normal file
View File

@@ -0,0 +1,57 @@
"use client";
export default function InsightsPage() {
const items = [
{ icon: "📊", title: "Usage analytics", desc: "Page views, active users, retention curves, and funnel analysis." },
{ icon: "⚡", title: "Performance", desc: "Load times, error rates, and infrastructure health at a glance." },
{ icon: "💰", title: "Revenue", desc: "MRR, churn, LTV, and subscription metrics wired from your billing provider." },
{ icon: "🔔", title: "Alerts", desc: "Get notified when key metrics drop or anomalies are detected." },
];
return (
<div
className="vibn-enter"
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "Outfit, sans-serif" }}
>
<div style={{ maxWidth: 560 }}>
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
Insights
</h3>
<p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: 28 }}>
Analytics, performance, and revenue — available once your product is deployed.
</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>
);
}