Build complete AI creator partnership prototype

components/ContactForm.tsx

@@ -0,0 +1,3 @@
+"use client";import { FormEvent,useState } from "react";
+const interests=["AI 分身","内容增长","评论与私聊运营","粉丝变现","MCN / Agency 合作"];
+export function ContactForm(){const [sent,setSent]=useState(false);function submit(e:FormEvent){e.preventDefault();setSent(true)}if(sent)return <div className="success" role="status"><i>✓</i><p className="eyebrow">INQUIRY SAVED</p><h2>合作意向已记录。</h2><p>这是网站原型的交互演示。正式上线时，可将表单接入邮箱、CRM 或企业协作工具。</p><button className="link" type="button" onClick={()=>setSent(false)}>继续填写一份 <b>→</b></button></div>;return <form className="form" onSubmit={submit}><div className="form-row"><label>你的称呼<input required placeholder="怎么称呼你"/></label><label>合作身份<select required defaultValue=""><option value="" disabled>请选择</option><option>个人创作者</option><option>艺人 / 经纪团队</option><option>MCN / Agency</option><option>品牌或平台</option></select></label></div><label>主要账号或作品链接<input required type="url" placeholder="https://"/></label><div className="form-row"><label>主要平台<select required defaultValue=""><option value="" disabled>请选择</option><option>Facebook</option><option>Instagram</option><option>TikTok</option><option>YouTube</option><option>其他</option></select></label><label>粉丝规模<select required defaultValue=""><option value="" disabled>请选择</option><option>1 万以下</option><option>1–10 万</option><option>10–100 万</option><option>100 万以上</option></select></label></div><fieldset><legend>感兴趣的合作方向</legend><div className="checks">{interests.map(x=><label key={x}><input type="checkbox"/><span>{x}</span></label>)}</div></fieldset><label>你现在最想解决的问题<textarea rows={5} placeholder="例如：有粉丝基础，但私聊和变现还没有系统运营……"/></label><label className="consent"><input required type="checkbox"/><span>我同意团队仅为评估本次合作而使用以上信息。</span></label><button className="btn primary submit" type="submit">提交合作意向 <b>→</b></button><p className="note">原型演示：当前不会向外部系统发送数据。</p></form>}

components/PageHero.tsx

@@ -0,0 +1,2 @@
+import type { ReactNode } from "react";
+export function PageHero({eyebrow,title,description,extra}:{eyebrow:string,title:ReactNode,description:string,extra?:ReactNode}){return <section className="page-hero paper"><div className="shell page-hero-grid"><div><p className="eyebrow">{eyebrow}</p><h1>{title}</h1></div><div><p>{description}</p>{extra}</div></div></section>}

components/SiteNav.tsx

@@ -0,0 +1,6 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+const links=[["/","首页"],["/advantages","合作优势"],["/process","合作流程"],["/cases","案例展示"],["/faq","常见问题"],["/contact","联系"]];
+export function SiteNav(){const path=usePathname();const [open,setOpen]=useState(false);return <header><div className="shell nav"><Link className="brand" href="/" onClick={()=>setOpen(false)}>COZ<span>CREATOR</span></Link><button className="menu" type="button" aria-label={open?"关闭导航":"打开导航"} aria-expanded={open} onClick={()=>setOpen(!open)}><i/><i/></button><nav className={open?"open":""}>{links.map(([href,label])=><Link className={path===href?"active":""} href={href} key={href} onClick={()=>setOpen(false)}>{label}</Link>)}<Link className="nav-cta" href="/contact">成为合作伙伴</Link></nav></div></header>}

components/SiteShell.tsx

@@ -0,0 +1,5 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+import { SiteNav } from "./SiteNav";
+
+export function SiteShell({children}:{children:ReactNode}) { return <div className="site"><SiteNav/>{children}<footer><div className="shell footer-main"><div><Link className="brand inverted" href="/">COZ<span>CREATOR</span></Link><p>让 AI 延展创作者的内容、关系与商业价值。</p></div><nav><div><strong>探索</strong><Link href="/advantages">合作优势</Link><Link href="/process">合作流程</Link><Link href="/cases">案例展示</Link></div><div><strong>合作</strong><Link href="/faq">常见问题</Link><Link href="/contact">联系团队</Link><Link href="/contact">申请合作</Link></div></nav></div><div className="shell footer-bottom"><span>© 2026 COZCREATOR</span><span>AI 分身 · 内容增长 · 关系运营 · 粉丝变现</span></div></footer></div> }