Vibe AnyLanding Page System
Prebuilt, composable landing sections powered by next-intl configuration
Landing Page System
A production-grade landing page built from composable sections with full i18n support. Configuration is fetched via getLandingPageConfig() and rendered in the Home route.
Each section is optional. When you provide the minimal fields for a section in messages/config, it will render; if you omit them, the section stays hidden.
Setup and Configure
1) Prepare i18n messages
In each locale messages file, add a top-level key landing to store landing-page copy and flags. If a section key is missing, that section is hidden.
{
"landing": {
"banner": {
"title": "VibeAny 1.0",
"description": "Ship faster with ready-made sections",
"buttonText": "Star on GitHub",
"buttonHref": "https://github.com/...",
"show": true,
"dismissible": true,
"variant": "gradient",
"year": "2025"
}
}
}2) Configure partners (PowerBy)
In getPowerByConfig(), associate your partner keys with SVG files of the same name under public/partners/. Ensure all SVGs share a consistent viewBox and dimensions.
3) Optional: Pricing
Provide price plans and environment variables, then getPricingConfig(locale) will merge copy with plans automatically.
4) Render on Home
Use the config helpers and render sections when data exists.
const { locale } = await params
const [page, pricing] = await Promise.all([
getLandingPageConfig(locale),
getPricingConfig(locale),
])
const powerBy = getPowerByConfig()
return (
<>
{page.hero && <Hero hero={page.hero} />}
{page.powerby && <PowerBy section={page.powerby} config={powerBy} />}
{pricing && <Pricing section={pricing} />}
</>
)5) Preview & publish
Run bun run dev to preview. Commit to deploy; no code change is needed when only editing messages or partner logos.
Sections Reference
- Hero: headline + description + dual CTAs.
- PowerBy: partner logos from
public/partners.
- Three Benefits: animated cards highlighting core benefits.
- Introduction: image/video split layout with content sections.
- Features: icon grid with titles and descriptions.
- Testimonials: animated quotes with avatars.
- Pricing: subscription/one-time plans via pricing config.
- Showcase & Media Coverage: horizontally scrollable content and media mentions.
- FAQ & CTA: standard QA list and closing CTA.
Best Practices
- Keep copy in i18n to enable full locale control.
- Prefer smaller images in
public/and use modern formats (AVIF/WebP) for performance. - When adding partners, ensure SVGs have consistent viewBox and size for visual balance.
- Use analytics events on primary CTAs to measure conversion.
FAQ
Q: A section is missing on the homepage.
A: The section might be disabled or missing minimal fields in the landing namespace. Provide the required fields (or set the banner show flag to true) and it will render.
Q: Partner logos don’t appear.
A: Ensure getPowerByConfig() names map to existing SVGs in public/partners/, and those SVGs share consistent viewBox and sizing to avoid stretching.
Q: How does Pricing connect to real plans?
A: getPricingConfig(locale) merges translated copy with configured price plans. After environment variables and price IDs are set, the UI renders automatically.
Q: Where should I add analytics?
A: Use useAnalyticsEvents() on key interactions, for example events.click('hero_button', 'landing_page'). For conversions, track on signup/payment success for accuracy.
Q: How do I localize or hide sections per locale?
A: Copy is driven by next-intl. Omit a section’s data in a locale to hide it, or provide fields to show it. This keeps per-locale control simple and explicit.