VIBN Frontend for Coolify deployment
This commit is contained in:
321
app/[workspace]/project/[projectId]/market/page.tsx
Normal file
321
app/[workspace]/project/[projectId]/market/page.tsx
Normal file
@@ -0,0 +1,321 @@
|
||||
"use client";
|
||||
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
import {
|
||||
Megaphone,
|
||||
MessageSquare,
|
||||
Globe,
|
||||
Target,
|
||||
Rocket,
|
||||
Sparkles,
|
||||
Edit,
|
||||
Plus,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
PageTemplate,
|
||||
PageSection,
|
||||
PageCard,
|
||||
PageGrid,
|
||||
} from "@/components/layout/page-template";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const MARKET_NAV_ITEMS = [
|
||||
{ title: "Value Proposition", icon: Target, href: "/market" },
|
||||
{ title: "Messaging Framework", icon: MessageSquare, href: "/market#messaging" },
|
||||
{ title: "Website Copy", icon: Globe, href: "/market#website" },
|
||||
{ title: "Launch Strategy", icon: Rocket, href: "/market#launch" },
|
||||
{ title: "Target Channels", icon: Megaphone, href: "/market#channels" },
|
||||
];
|
||||
|
||||
export default function MarketPage() {
|
||||
const params = useParams();
|
||||
const pathname = usePathname();
|
||||
const workspace = params.workspace as string;
|
||||
const projectId = params.projectId as string;
|
||||
|
||||
const sidebarItems = MARKET_NAV_ITEMS.map((item) => {
|
||||
const fullHref = `/${workspace}/project/${projectId}${item.href}`;
|
||||
return {
|
||||
...item,
|
||||
href: fullHref,
|
||||
isActive: pathname === fullHref || pathname.startsWith(fullHref),
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<PageTemplate
|
||||
sidebar={{
|
||||
items: sidebarItems,
|
||||
}}
|
||||
>
|
||||
{/* Value Proposition */}
|
||||
<PageSection
|
||||
title="Value Proposition"
|
||||
description="Your core message to the market"
|
||||
headerAction={
|
||||
<Button size="sm" variant="ghost">
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<PageCard>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground mb-2">
|
||||
Headline
|
||||
</h3>
|
||||
<p className="text-2xl font-bold">
|
||||
Build Your Product Faster with AI-Powered Insights
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground mb-2">
|
||||
Subheadline
|
||||
</h3>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Turn conversations into code, design, and marketing - all in one platform
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground mb-2">
|
||||
Key Benefits
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<div className="h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<div className="h-2 w-2 rounded-full bg-primary" />
|
||||
</div>
|
||||
<span>Save weeks of planning and research</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<div className="h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<div className="h-2 w-2 rounded-full bg-primary" />
|
||||
</div>
|
||||
<span>Get AI-generated designs and code structure</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<div className="h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<div className="h-2 w-2 rounded-full bg-primary" />
|
||||
</div>
|
||||
<span>Launch with confidence and clarity</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</PageCard>
|
||||
</PageSection>
|
||||
|
||||
{/* Messaging Framework */}
|
||||
<PageSection title="Messaging Framework" description="How you talk about your product">
|
||||
<PageGrid cols={2}>
|
||||
<PageCard>
|
||||
<h3 className="font-semibold mb-3 flex items-center gap-2">
|
||||
<MessageSquare className="h-4 w-4 text-muted-foreground" />
|
||||
Primary Message
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
For solo founders and small teams building their first product
|
||||
</p>
|
||||
<p className="text-base">
|
||||
"Stop getting stuck in planning. Start building with AI as your co-founder."
|
||||
</p>
|
||||
</PageCard>
|
||||
|
||||
<PageCard>
|
||||
<h3 className="font-semibold mb-3 flex items-center gap-2">
|
||||
<Target className="h-4 w-4 text-muted-foreground" />
|
||||
Positioning
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Different from competitors because...
|
||||
</p>
|
||||
<p className="text-base">
|
||||
"We don't just track - we actively guide you from idea to launch with AI."
|
||||
</p>
|
||||
</PageCard>
|
||||
</PageGrid>
|
||||
</PageSection>
|
||||
|
||||
{/* Website Copy */}
|
||||
<PageSection
|
||||
title="Website Copy"
|
||||
description="Content for your marketing site"
|
||||
headerAction={
|
||||
<Button size="sm" variant="ghost">
|
||||
<Sparkles className="h-4 w-4 mr-2" />
|
||||
Generate More
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<PageCard>
|
||||
<h3 className="font-semibold mb-3">Hero Section</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="p-3 rounded-lg bg-muted/50">
|
||||
<p className="text-xs text-muted-foreground mb-1">Headline</p>
|
||||
<p className="font-medium">Build Your SaaS from Idea to Launch</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-muted/50">
|
||||
<p className="text-xs text-muted-foreground mb-1">CTA Button</p>
|
||||
<p className="font-medium">Start Building Free →</p>
|
||||
</div>
|
||||
</div>
|
||||
</PageCard>
|
||||
|
||||
<PageCard>
|
||||
<h3 className="font-semibold mb-3">Features Section</h3>
|
||||
<PageGrid cols={3}>
|
||||
<div className="p-3 rounded-lg bg-muted/50">
|
||||
<p className="text-sm font-medium mb-1">🎯 AI Interview</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Chat with AI to define your product
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-muted/50">
|
||||
<p className="text-sm font-medium mb-1">🎨 Auto Design</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Generate UI screens instantly
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-muted/50">
|
||||
<p className="text-sm font-medium mb-1">🚀 Launch Plan</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Get a complete go-to-market strategy
|
||||
</p>
|
||||
</div>
|
||||
</PageGrid>
|
||||
</PageCard>
|
||||
|
||||
<PageCard>
|
||||
<h3 className="font-semibold mb-3">Social Proof</h3>
|
||||
<div className="p-3 rounded-lg bg-muted/50">
|
||||
<p className="text-sm text-muted-foreground italic">
|
||||
"This tool cut our planning time from 4 weeks to 2 days. Incredible."
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
- Founder Name, Company
|
||||
</p>
|
||||
</div>
|
||||
</PageCard>
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
{/* Launch Strategy */}
|
||||
<PageSection title="Launch Strategy" description="Your go-to-market plan">
|
||||
<PageCard>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2 flex items-center gap-2">
|
||||
<Rocket className="h-4 w-4 text-muted-foreground" />
|
||||
Launch Timeline
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30">
|
||||
<div className="text-xs font-medium text-muted-foreground w-20">
|
||||
Week 1-2
|
||||
</div>
|
||||
<div className="text-sm">Soft launch to beta testers</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30">
|
||||
<div className="text-xs font-medium text-muted-foreground w-20">
|
||||
Week 3
|
||||
</div>
|
||||
<div className="text-sm">Product Hunt launch</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30">
|
||||
<div className="text-xs font-medium text-muted-foreground w-20">
|
||||
Week 4+
|
||||
</div>
|
||||
<div className="text-sm">Content marketing & SEO</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageCard>
|
||||
</PageSection>
|
||||
|
||||
{/* Target Channels */}
|
||||
<PageSection
|
||||
title="Target Channels"
|
||||
description="Where to reach your audience"
|
||||
headerAction={
|
||||
<Button size="sm" variant="ghost">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Channel
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<PageGrid cols={2}>
|
||||
<PageCard hover>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
|
||||
<Globe className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Twitter/X</h3>
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
Primary channel for developer audience
|
||||
</p>
|
||||
<span className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
|
||||
High Priority
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</PageCard>
|
||||
|
||||
<PageCard hover>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
|
||||
<Rocket className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Product Hunt</h3>
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
Launch day visibility and early adopters
|
||||
</p>
|
||||
<span className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground font-medium">
|
||||
Launch Day
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</PageCard>
|
||||
|
||||
<PageCard hover>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
|
||||
<MessageSquare className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Dev Communities</h3>
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
Indie Hackers, Reddit, Discord servers
|
||||
</p>
|
||||
<span className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground font-medium">
|
||||
Ongoing
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</PageCard>
|
||||
|
||||
<PageCard hover>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
|
||||
<Globe className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Content Marketing</h3>
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
Blog posts, tutorials, case studies
|
||||
</p>
|
||||
<span className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground font-medium">
|
||||
Long-term
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</PageCard>
|
||||
</PageGrid>
|
||||
</PageSection>
|
||||
</PageTemplate>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user