322 lines
12 KiB
TypeScript
322 lines
12 KiB
TypeScript
"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>
|
|
);
|
|
}
|