Page UI Documentation

The library provides a collection of presentational components designed to work together to build landing pages. These components are located in the components/landing directory of the project. They are highly customizable and can be used individually or combined to create unique sections for your brand.

Available component categories include:

• Navigation & Layout: Navigation / Header, Footer, Band, Bento Grid, Marquee.
• Call to Action (CTA): Primary Image CTA, Primary Video CTA, Primary Text CTA, Sale CTA, Discount, Cta Background Effects, Cta Text Effects.
• Social Proof: Social Proof, Social Proof Band, Testimonial, Testimonial Grid, Testimonial List, Testimonial Inline, Rating, Showcase, Stats.
• Product & Features: Product Card, Product Feature, Product Video Feature, Product Features Grid, Product Steps, Product Tour, Feature List, Feature, Feature Key Points.
• Pricing: Pricing, Pricing Plan, Pricing Comparison.
• Content & Engagement: FAQ, FAQ Collapsible, Blog List, Blog Post, Newsletter, Problem Agitator, Problem / Solution, About, Team.
• Buttons & Badges: App Store Button, Leading Pills, Product Hunt Award.

Text effects in this library are not standalone components, but rather Tailwind CSS patterns applied to elements passed into the titleComponent prop of CTA section components.

These effects are designed to be used with:

• LandingPrimaryImageCtaSection
• LandingPrimaryTextCtaSection
• LandingPrimaryVideoCtaSection

To apply an effect, wrap the target text in a <span> (or similar element) and apply the corresponding Tailwind CSS classes (e.g., bg-clip-text, text-transparent, or underline with decoration-* utilities).

/* Example of the pattern: passing a styled element to titleComponent */
<LandingPrimaryTextCtaSection
  titleComponent={
    <h1 className="font-normal text-2xl md:text-3xl lg:text-4xl leading-tight md:max-w-2xl">
      Grow your{' '}
      <span className="font-semibold bg-gradient-to-r from-primary-500 via-primary-300 to-primary-500 bg-clip-text text-transparent">
        revenue
      </span><br/>
      across multiple channels
    </h1>
  }
  description="Description text here"
  textPosition="center"
>
  <Button size="xl" asChild>
    <a href="#">Start Free Trial</a>
  </Button>
</LandingPrimaryTextCtaSection>

You can customize the appearance of the LandingStatsSection using several props:

• Title & Description: Use title and description to add a heading and subtext to the section.
• Grid Layout: Control columns via columnsDesktop and columnsMobile.
• Borders: Toggle borders using hasBorders (boolean).
• Backgrounds: Enable a background with withBackground. You can set the variant (e.g., "secondary") to change the background style.
• Glow Effects: Enable a background glow with withBackgroundGlow. Use backgroundGlowVariant (e.g., "secondary") to control the glow color/style.

<LandingStatsSection
  title="Our Achievements"
  description="We take pride in our accomplishments."
  columnsDesktop={4}
  columnsMobile={1}
  hasBorders={false}
  withBackground={true}
  variant="secondary"
  withBackgroundGlow={true}
  backgroundGlowVariant="secondary"
  stats={[
    { value: '15+', label: 'apps', description: 'Projects delivered.' }
  ]}
/>

The Bento Grid system is composed of a main container, LandingBentoGridSection, and several specialized child items designed for specific content types. The container manages the grid layout, columns, and rows, while the child items provide pre-designed layouts for displaying icons, metrics, or images. You can mix and match these specialized items or use generic children to create complex, visually appealing feature grids for landing pages.

import {
  LandingBentoGridSection,
  LandingBentoGridIconItem,
  LandingBentoGridNumberItem,
  LandingBentoGridImageItem,
} from '@/components/landing/bento-grid';

<LandingBentoGridSection title="Title" description="Description">
  <LandingBentoGridIconItem icon={<Icon />} bottomText="Text" />
  <LandingBentoGridNumberItem number="10%" bottomText="Metric" />
  <LandingBentoGridImageItem imageSrc="/path.webp" bottomText="Caption" />
</LandingBentoGridSection>