The landing (home) page is a single MDX entry composed from reusable sections (Hero, Feature Grid, Pricing, Testimonials, etc.). CTAs support Buy (one-time), Subscribe (recurring), Waitlist dialog, and Link. Pricing cards pull live plans from Supabase.

• Collection: landing
• Path: content/landing
• Creation/Deletion: disabled (one canonical entry managed in repo).
• SEO: full SEO object available on the entry.

• app/page.tsx loads the landing entry and generates metadata from its SEO.
• LandingPageSections maps each section to a React component.
• The Subscription section receives subscriptionPlans from Supabase via fetchSubscriptionPlansWithCurrent().
• Preview: if Next.js draft mode is enabled, a simple “Preview Mode” page is shown.

• id — optional anchor (e.g. pricing). Useful for in-page links /#pricing.
• header — shared object with label, title, subtitle.
• listItems — reusable list with text, type (accent/default/etc.), optional badge.
• CTA button — one of: Buy, Subscribe, Waitlist, Link.

• Buy — requires Lemon Squeezy Variant ID. Starts one-time checkout via startCheckoutAction.
• Subscribe — requires Lemon Squeezy Variant ID. Starts recurring checkout via createSubscriptionAction.
• Waitlist — opens the JoinWaitlistDialog; posts email via joinWaitlistAction.
• Link — href plus linkType (internal or external).

• The Subscription section doesn’t hardcode prices. It renders the plans supplied by fetchSubscriptionPlansWithCurrent().
• Plans come from the Supabase table subscription_plans (with monthly/yearly rows and optional badges/benefits).
• The UI exposes a billing cycle toggle and per-plan Get Plan button that triggers the subscription checkout.

• Fields: motto, headlineIntro, headlineValue, headlineContrast, subheadline, image, optional socialProof (highlight, text, rating, avatars).
• CTA: single button (Buy / Subscribe / Waitlist / Link).
• Tips: keep headlines short; use image for an app screenshot or illustration.

• A compact grid of features (title + description + optional icon/image).
• Good for quick scannability after the hero.

• Cards with title, description, and an Image Block (src, alignment Left/Right).
• Optional badges per card.
• Works well for “What’s included” or “Use cases”.

• Tabbed content. Choose a defaultTab, then define tabs with: value (from predefined keys), label, icon (Lucide key), and content (title, listItems, image, optional links).
• Use this to group deep feature sets without overwhelming the page.

• Two columns: Left (Negative) vs Right (Positive) with titles and listItems.
• Perfect for “Before vs After” messaging.

• Up to 3 metrics (value, optional suffix or unit + position, and a label).
• Example: 120 + hrs → “saved per month”.

• Section header tailored for pricing promos.
• Products list with name, price, optional oldPrice, highlightLabel, listItems, a single checkoutButton (Buy/Subscribe/Waitlist), and optional checkoutNote.
• Use for one-time deals or bundles separate from your subscription plans.

• Uses Supabase plans injected from the server (see Pricing and plans above).
• Includes a billing cycle toggle and plan PrimaryButton wired to subscription checkout.
• Shows “Your current plan” on the active plan.

• Fields: videoUrl, posterImage, optional header.
• Keep the video short; ensure hosting allows hotlinking/embeds.

• Two lists: awards (type + link) and logos (company keys).
• Great for trust bars, partner walls, or badges.

• Grid of projects with image, name, link, and website.
• Use it to show what customers have built or example templates.

• Mixed testimonials: text or video cards.
• Text item: quote, image (asset), optional avatar, name, alias, and source (platform + URL).
• Video item: quote, videoUrl, posterImage, name, starRating (1–5).

• Simple list of testimonials with avatar, name, useCase, quote.
• Ideal when you prefer fewer, larger quotes over a grid.

• Accordion of Questions where each item has question + answer (rich text).
• Keep answers short; link to docs for details.

• A list of lines (rich text) with inline highlight marks for emphasis.
• Optional single link at the end (label, href).

• Show your tech stack as a list of libraries from a predefined options set.
• Good for “Built with X + Y + Z” visuals.

• Set an id on any section (e.g. pricing) and link to it with either:
• A Link CTA using /#pricing
• Any internal anchor from elsewhere on the site

• The landing entry includes the full SEO object (title, description, Open Graph).
• app/page.tsx calls generateSeoMetadata() to convert Tina SEO into Next.js Metadata.
• OG image is customizable per entry.

• Write headlines for clarity first; emojis and flair are optional.
• Avoid renaming or removing sections during active tests; anchor links may break.
• Keep media small (optimize images, use poster images for videos).
• For Buy/Subscribe CTAs, verify the Variant ID matches Lemon Squeezy.
• Update plans in Supabase rather than hardcoding prices in CMS.