import { ArrowLeft, ArrowRight, BookOpen, Calendar, Clock } from 'lucide-react'; import { Head, Link, usePage } from '@inertiajs/react'; import { MarketingFooter } from '@/Components/marketing/MarketingFooter'; import { MarketingNav } from '@/Components/marketing/MarketingNav'; import { Button } from '@/Components/ui/button'; import { CTA_LABELS } from '@/config/cta-labels'; import { trackEvent } from '@/lib/analytics'; import { HUB_CTA_CLICKED, HUB_FEATURE_LINK_CLICKED, HUB_POST_CLICKED, HUB_RELATED_GUIDE_CLICKED, } from '@/lib/event-catalog'; import { formatDateOnly } from '@/lib/format'; import { type PageProps } from '@/types'; interface HubPost { id: number; title: string | null; slug: string; excerpt: string | null; author: string; published_at: string; category: string | null; reading_time_minutes: number | null; } interface RelatedHub { slug: string; title: string; description: string; } interface HubProps { can_login: boolean; can_register: boolean; slug: string; hub_title: string; hub_heading: string; hub_description: string; category: string; feature_anchor: string; feature_label: string; feature_cta: string; posts: HubPost[]; related_hubs: RelatedHub[]; } type HubComponent = ((props: HubProps) => JSX.Element) & { disableGlobalUi?: boolean; }; const Hub: HubComponent = ({ can_login, can_register, slug, hub_heading, hub_description, feature_anchor, feature_cta, posts, related_hubs, }) => { const appName = import.meta.env.VITE_APP_NAME || 'RankWiz'; const { app_url } = usePage().props; const breadcrumbSchema = { '@context': 'https://schema.org', '@type': 'BreadcrumbList', itemListElement: [ { '@type': 'ListItem', position: 1, name: 'Home', item: `${app_url}/` }, { '@type': 'ListItem', position: 2, name: 'Learn', item: `${app_url}/learn` }, { '@type': 'ListItem', position: 3, name: hub_heading, item: `${app_url}/learn/${slug}` }, ], }; const featureUrl = `/features#${feature_anchor}`; return ( <>
{/* Back nav */}
{/* Hero */}

{hub_heading}

{hub_description}

{can_register && ( )}
{/* Product feature CTA */}

{feature_cta}

trackEvent(HUB_FEATURE_LINK_CLICKED, { hub: slug, anchor: feature_anchor }) } > Explore the feature
{/* Posts grid */}

Articles in this guide {posts.length > 0 && ( ({posts.length}) )}

{posts.length === 0 ? (

Articles are coming soon. Check back shortly.

) : (
{posts.map((post) => ( trackEvent(HUB_POST_CLICKED, { hub: slug, post: post.slug })} >

{post.title ?? ''}

{post.excerpt ?? ''}

{post.reading_time_minutes && ( )}
))}
)}
{/* Related Guides */} {related_hubs.length > 0 && (

Related Guides

{related_hubs.map((hub) => ( trackEvent(HUB_RELATED_GUIDE_CLICKED, { from_hub: slug, to_hub: hub.slug, }) } >

{hub.title}

{hub.description}

))}
)} {/* Bottom CTA */} {can_register && (

Apply These Strategies to Your Site

Connect Google Search Console and get AI-powered recommendations in 2 minutes. Free to start.

)}
); }; Hub.disableGlobalUi = true; export default Hub;