import * as React from "react"; import { BlogIndexOne } from "@/registry/blog-index-one/blog-index-one"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef; type NewsletterFormValues = Parameters< NonNullable >[0]; const hero = { badge: "Playbooks", title: "How revenue teams build compounding growth loops in 2025", description: "Learn the frameworks that helped teams like Linear and dbt Labs transform their blogs into the highest converting demand channels they own.", media: { src: "https://raw.githubusercontent.com/vercel/next.js/canary/examples/image-component/public/sunset.jpg", alt: "Product team collaborating in a sunlit office.", }, metadata: { date: "June 4, 2025", readTime: "12 minute read", category: "Growth loops", }, author: { name: "Miranda Keller", role: "VP of Growth, Nextbase", avatarUrl: "https://avatars.githubusercontent.com/u/87666617?s=200&v=4", }, cta: { label: "Get the full playbook", helperText: "Delivered instantly to your inbox", href: "#", }, }; const categories = [ { id: "strategies", label: "Strategies", description: "Senior-level frameworks for marketing and product teams", articles: [ { id: "strategies-1", title: "Designing lifecycle campaigns that feel bespoke at scale", excerpt: "Deploy a modular storytelling system that personalizes nurture paths without blowing up your ops bandwidth.", href: "#", readTime: "9 min read", publishedAt: "May 23, 2025", author: { name: "Jonah Levin", role: "Lifecycle Marketing Lead", avatarUrl: "https://avatars.githubusercontent.com/u/1396951?v=4", }, tags: ["Lifecycle", "Personalization"], media: { src: "https://raw.githubusercontent.com/vercel/next.js/canary/examples/image-component/public/flower.jpg", alt: "Email campaign analytics dashboard.", }, }, { id: "strategies-2", title: "The modular content system powering dbt Labs' launch engine", excerpt: "A reusable asset stack that turns every feature announcement into lasting evergreen narrative arcs.", href: "#", readTime: "7 min read", publishedAt: "May 18, 2025", author: { name: "Kaya Sanchez", role: "Head of Content", avatarUrl: "https://avatars.githubusercontent.com/u/46135?v=4", }, tags: ["Editorial", "Product launches"], }, { id: "strategies-3", title: "Why voice and tone belong in your product changelog", excerpt: "Treat release notes like micro stories that reinforce positioning, not just bullet lists of what shipped.", href: "#", readTime: "5 min read", publishedAt: "May 12, 2025", author: { name: "Theo Murray", role: "Product Marketing Principal", avatarUrl: "https://avatars.githubusercontent.com/u/20581204?v=4", }, tags: ["Changelog", "Positioning"], }, ], }, { id: "case-studies", label: "Case studies", description: "Stories from the highest performing marketing teams", articles: [ { id: "case-1", title: "How Secoda grew newsletter opt-ins 3.2x without popups", excerpt: "A motion pairing high intent callouts with social proof to convert readers at the perfect moment.", href: "#", readTime: "6 min read", publishedAt: "April 30, 2025", author: { name: "Haley Ortiz", role: "Demand Generation Manager", avatarUrl: "https://avatars.githubusercontent.com/u/43156?v=4", }, tags: ["Newsletter", "Conversion"], }, { id: "case-2", title: "Inside Vercel's editorial ops pod", excerpt: "Scale shipping cadence without losing the craftsmanship that keeps developers subscribed.", href: "#", readTime: "11 min read", publishedAt: "April 18, 2025", author: { name: "Liam Douglas", role: "Editorial Director", avatarUrl: "https://avatars.githubusercontent.com/u/127124125?v=4", }, tags: ["Editorial", "Operations"], media: { src: "https://raw.githubusercontent.com/vercel/next.js/canary/examples/image-component/public/forest.jpg", alt: "Writers collaborating in a studio.", }, }, { id: "case-3", title: "Level's experiment vault: 90 days of iteration", excerpt: "Run, record, and repurpose every experiment across channels with a single content operating system.", href: "#", readTime: "8 min read", publishedAt: "April 11, 2025", author: { name: "Ada Bloom", role: "Growth PM", avatarUrl: "https://avatars.githubusercontent.com/u/5730721?v=4", }, tags: ["Experiments", "Process"], }, ], }, { id: "ops", label: "Ops & analytics", description: "Automation, reporting, and signal amplification", articles: [ { id: "ops-1", title: "Airtable vs. Notion: Choosing the right editorial ops stack", excerpt: "A decision matrix for high-velocity teams balancing planning, approvals, and analytics.", href: "#", readTime: "10 min read", publishedAt: "March 28, 2025", author: { name: "Priya Menon", role: "Operations Lead", avatarUrl: "https://avatars.githubusercontent.com/u/18113894?v=4", }, tags: ["Automation", "Stack"], }, { id: "ops-2", title: "Designing a channel influence score you can defend", excerpt: "Move beyond last-touch attribution with a model stakeholders actually trust.", href: "#", readTime: "12 min read", publishedAt: "March 19, 2025", author: { name: "Mara Chen", role: "Revenue Analytics", avatarUrl: "https://avatars.githubusercontent.com/u/8096433?v=4", }, tags: ["Attribution", "Analytics"], }, { id: "ops-3", title: "The tactical guide to meaningful first-party intent signals", excerpt: "Instrument your content touchpoints to capture buying signals that actually help sales prioritize.", href: "#", readTime: "7 min read", publishedAt: "March 5, 2025", author: { name: "Ravi Patel", role: "Growth Operations", avatarUrl: "https://avatars.githubusercontent.com/u/594181?v=4", }, tags: ["Intent", "Sales alignment"], }, ], }, ]; const insights = [ { id: "insight-1", title: "Lead velocity", metric: "+18% MoM", change: "New hero layout outperformed baseline by 3.2x", description: "Hero form conversion saw the largest lift on product-led articles.", href: "#", }, { id: "insight-2", title: "Waitlist pipeline", metric: "412 demos", change: "Tabs personalization reduced bounce by 24%", description: "Audience cohorts prefer industry-specific collections after 45 seconds of engagement.", href: "#", }, { id: "insight-3", title: "Newsletter growth", metric: "+2.4x", change: "Inline validation lowered friction for new subscribers.", description: "Mid-article CTAs contributed 37% of weekly signups this quarter.", }, { id: "insight-4", title: "Trending topics", metric: "AI ops", change: "Surfaced in 62% of sessions this week", description: "Most active in RevOps and Ops persona tabs.", }, { id: "insight-5", title: "Engagement depth", metric: "6m 12s", change: "Average time on page across top 5 articles", }, ]; const newsletter = { title: "Get growth systems in your inbox", description: "A Sunday digest covering the experiments, frameworks, and story architectures shaping top-of-funnel performance.", submitLabel: "Subscribe now", placeholder: "founder@studio.com", helperText: "No fluff. Just case studies, data, and a quarterly benchmark report.", successMessage: "Check your inbox for a welcome gift", trustIndicators: [ { name: "Linear", avatarUrl: "https://avatars.githubusercontent.com/u/23767609?s=200&v=4", tooltip: "Linear marketing team", }, { name: "Cal.com", avatarUrl: "https://avatars.githubusercontent.com/u/2700058?s=200&v=4", tooltip: "Cal product marketing", }, { name: "Superhuman", avatarUrl: "https://avatars.githubusercontent.com/u/26054186?s=200&v=4", tooltip: "Superhuman lifecycle crew", }, ], }; const testimonial = { quote: "We shipped the hero converter using this framework and saw 2.1x pipeline in 30 days—without adding any ads budget.", name: "Aria Walters", role: "Head of Growth Marketing", company: "Chord Commerce", }; export function BlogIndexOneDemo() { const [subscribedEmails, setSubscribedEmails] = React.useState([]); const handleSubscribe = React.useCallback( async (values: NewsletterFormValues) => { await new Promise((resolve) => setTimeout(resolve, 500)); setSubscribedEmails((prev) => [...prev, values.email]); }, [], ); return (

{subscribedEmails.length ? (

Recent demo subscriptions

{email}

) : null}

); } export default BlogIndexOneDemo;

Simple