### Install Project Dependencies

Source: https://github.com/pageai-pro/page-ui/blob/main/website/README.md

Run this command to install all necessary project dependencies.

```bash
npm i
```

--------------------------------

### Example Usage: With Background

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/problem-solution.mdx

An example demonstrating the LandingProductProblemSolution component with a background.

```APIDOC
## POST /api/example/background

### Description
This endpoint shows how to use the LandingProductProblemSolution component with a background effect.

### Method
POST

### Endpoint
/api/example/background

### Request Body
- **title** (string) - Required - The main title for the section.
- **description** (string) - Required - Supporting text for the section.
- **withBackground** (boolean) - Optional - Enables the background effect. Defaults to false.
- **problems** (array) - Required - An array of problem objects, each with a `title`.
- **solutions** (array) - Required - An array of solution objects, each with a `title`.

### Request Example
```json
{
  "title": "Problems and Solutions",
  "description": "Addressing key customer pain points with innovative solutions",
  "withBackground": true,
  "problems": [
    { "title": "Complex setup process" },
    { "title": "Poor performance" }
  ],
  "solutions": [
    { "title": "One-click installation" },
    { "title": "Optimized performance" }
  ]
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Component rendered successfully with background"
}
```
```

--------------------------------

### LandingPricingPlan - With Discount Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/pricing-plan.mdx

Example of using the LandingPricingPlan component with a discounted price.

```APIDOC
## LandingPricingPlan - With Discount

### Description
This example demonstrates how to display a pricing plan with a regular price and a discounted price.

### Component Usage
```jsx
import { LandingPricingPlan } from '@/components/landing/pricing/LandingPricingPlan';

<LandingPricingPlan
  title="Pro"
  description="For larger teams or businesses."
  ctaText="Upgrade now"
  price="$20"
  discountPrice="$10"
>
  <p>Unlimited users</p>
  <p>AI features</p>
  <p>Priority support</p>
</LandingPricingPlan>
```
```

--------------------------------

### Render Complete LandingBlogPost Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/blog-post.mdx

This example demonstrates rendering a fully-featured blog post card with all available properties. Import `LandingBlogPost` before use.

```jsx
import { LandingBlogPost } from '@/components/landing/blog/LandingBlogPost';

<LandingBlogPost
  post={{
    path: '/blog/complete-example',
    slug: 'complete-example',
    date: 'November 18, 2023',
    title: 'The Complete Guide to Modern Web Development',
    summary: 'Explore the latest tools, frameworks, and best practices for building exceptional web experiences in 2023 and beyond.',
    tags: ['Web Development', 'Tutorial', 'Best Practices'],
    images: ['/static/images/backdrop-10.webp'],
    readingTime: 12,
    author: {
      name: 'Michael Chen',
      avatar: '/static/images/people/4.webp'
    }
  }}
/>
```

--------------------------------

### Example Usage: Basic

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/problem-solution.mdx

A basic example of the LandingProductProblemSolution component with titles, descriptions, problems, and solutions.

```APIDOC
## POST /api/example

### Description
This endpoint demonstrates a basic usage of the LandingProductProblemSolution component.

### Method
POST

### Endpoint
/api/example

### Request Body
- **title** (string) - Required - The main title for the section.
- **description** (string) - Required - Supporting text for the section.
- **problemTitle** (string) - Optional - Heading for the problem column.
- **solutionTitle** (string) - Optional - Heading for the solution column.
- **problems** (array) - Required - An array of problem objects, each with a `title` and `description`.
- **solutions** (array) - Required - An array of solution objects, each with a `title` and `description`.

### Request Example
```json
{
  "title": "Before vs After",
  "description": "See the difference our product makes",
  "problemTitle": "Before",
  "solutionTitle": "After",
  "problems": [
    { "title": "Manual process", "description": "Time-consuming and error-prone" },
    { "title": "Manual process", "description": "Time-consuming and error-prone" }
  ],
  "solutions": [
    { "title": "Automated workflow", "description": "Fast, accurate, and reliable" },
    { "title": "Automated workflow", "description": "Fast, accurate, and reliable" }
  ]
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Component rendered successfully"
}
```
```

--------------------------------

### Start Development Server

Source: https://github.com/pageai-pro/page-ui/blob/main/website/README.md

Execute this command to launch the local development server.

```bash
npm run dev
```

--------------------------------

### Install Page UI Dependencies

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/installation/manual-reactjs.mdx

Installs all required dependencies for Page UI and Tailwind CSS. Ensure you have Node.js and npm/yarn installed.

```bash
npm install -D tailwindcss@3 postcss autoprefixer @tailwindcss/forms @tailwindcss/typography tailwindcss-animate embla-carousel-react class-variance-authority clsx tailwind-merge lucide-react @radix-ui/react-accordion @radix-ui/react-tabs @radix-ui/react-label
```

--------------------------------

### Complete Example with Custom Stats

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/about.mdx

An example demonstrating the usage of LandingAboutSection and LandingStatItem components together.

```APIDOC
## Complete example with custom stats

### Description
This example shows how to use the `LandingAboutSection` and `LandingStatItem` components to create a landing page section with an about description and key statistics.

### Component Usage

```jsx
import { LandingAboutSection } from '@/components/landing/about/LandingAboutSection';
import { LandingStatItem } from '@/components/landing/stats/LandingStatItem';

<div className="flex flex-col w-full">
  <LandingAboutSection
    title="About Us"
    description="We're a team of passionate designers and developers building exceptional digital experiences."
    imageSrc="/static/images/backdrop-5.webp"
    imageAlt="Our team"
  />

  <div className="py-8">
    <div className="container-wide px-6">
      <h2 className="w-full text-3xl font-semibold mb-6 text-left">Key Statistics</h2>
      <div className="grid grid-cols-2 md:grid-cols-3">
        <LandingStatItem
          value="150+"
          label="projects"
          description="Successfully completed projects"
          variant="primary"
        />
        <LandingStatItem
          value="9"
          label="members"
          description="Dedicated members"
          variant="primary"
        />
        <LandingStatItem
          value="10+"
          label="years"
          description="Years of industry experience"
          variant="primary"
        />
      </div>
    </div>
  </div>
</div>
```
```

--------------------------------

### Basic LandingBlogPost Usage

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/blog-post.mdx

Render the LandingBlogPost component by passing a 'post' object containing essential details. This example shows a minimal setup.

```jsx
<LandingBlogPost
  post={{
    slug: 'getting-started',
    date: 'November 15, 2023',
    title: 'Getting Started with Shipixen',
    summary: 'Learn how to quickly set up and customize your Shipixen landing page with our comprehensive guide.',
    tags: ['Guide', 'Tutorial'],
    images: ['/static/images/backdrop-3.webp'],
    readingTime: 5,
    author: {
      name: 'Alex Johnson',
      avatar: '/static/images/people/2.webp'
    }
  }}
/>
```

--------------------------------

### Initialize Page UI CLI

Source: https://github.com/pageai-pro/page-ui/blob/main/README.md

Run the Page UI CLI to initialize the project. Ensure you have Node.js installed.

```bash
npx @page-ui/wizard@latest init
```

--------------------------------

### Example Usage: With Background Glow

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/problem-solution.mdx

An example showcasing the LandingProductProblemSolution component with a background glow effect.

```APIDOC
## POST /api/example/background-glow

### Description
This endpoint illustrates the usage of the LandingProductProblemSolution component with a background glow effect.

### Method
POST

### Endpoint
/api/example/background-glow

### Request Body
- **title** (string) - Required - The main title for the section.
- **withBackgroundGlow** (boolean) - Optional - Enables the background glow effect. Defaults to false.
- **problems** (array) - Required - An array of problem objects, each with a `title`.
- **solutions** (array) - Required - An array of solution objects, each with a `title`.

### Request Example
```json
{
  "title": "Problems and Solutions",
  "withBackgroundGlow": true,
  "problems": [
    { "title": "Complex setup process" },
    { "title": "Poor performance" }
  ],
  "solutions": [
    { "title": "One-click installation" },
    { "title": "Optimized performance" }
  ]
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Component rendered successfully with background glow"
}
```
```

--------------------------------

### Basic Usage with Custom Styling

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/appstore-button.mdx

Example of how to use the LandingAppStoreButton with custom styling applied via the className prop.

```APIDOC
## POST /pageai-pro/page-ui (Example Endpoint)

### Description
This example demonstrates how to apply custom styling to the LandingAppStoreButton using the `className` prop.

### Method
N/A (Component Usage Example)

### Endpoint
N/A (Component Usage Example)

### Request Body
#### Props
- **appStore** (string) - Required - 'ios-appstore'
- **className** (string) - Optional - 'shadow-lg hover:shadow-xl transition-shadow duration-300'

### Request Example
```jsx
<LandingAppStoreButton
  appStore="ios-appstore"
  className="shadow-lg hover:shadow-xl transition-shadow duration-300"
/>
```

### Response
(Component rendering, no specific API response)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Basic LandingBlogList Usage

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/blog-list.mdx

A minimal example demonstrating how to use the LandingBlogList component with a single LandingBlogPost. This setup is useful for showcasing a single featured article or a simple list.

```jsx
<LandingBlogList
  title="Latest Articles"
  description="Check out our latest blog posts and stay updated with the newest trends."
>
  <LandingBlogPost
    post={{
      slug: "getting-started",
      date: "2023-08-10",
      title: "Getting Started with Shipixen",
      summary: "Learn how to set up your first project using Shipixen templates and components.",
      tags: ["Tutorial", "Beginners"],
      images: ["/static/images/backdrop-1.webp"],
      readingTime: 5,
      author: {
        name: "Jack Doe",
        avatar: "/static/images/people/1.webp"
      }
    }}
  />
</LandingBlogList>
```

--------------------------------

### Minimal FAQ Section Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/faq.mdx

A minimal example of the LandingFaqSection component, demonstrating its core functionality with a single FAQ item. This is useful for quick integration or when only a few questions need to be displayed.

```jsx
<LandingFaqSection
  title={'Frequently Asked Questions'}
  description="Looking to learn more about Shipixen? Here are some of the most common
  questions we get asked."
  faqItems={[
    {
      question: 'What is Shipixen exactly?',
      answer:
        'Shipixen is an app that generates boilerplate code with your branding. You get the git repository & can modify the code as you want.',
    },
  ]}
/>
```

--------------------------------

### Minimal LandingBlogPost Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/blog-post.mdx

A basic example of the LandingBlogPost component using only the required 'slug', 'date', 'title', and 'summary' properties.

```jsx
<LandingBlogPost
  post={{
    slug: 'minimal-post',
    date: 'November 10, 2023',
    title: 'Minimal Blog Post Example',
    summary: 'This is a minimal blog post example with only the essential information.',
  }}
/>
```

--------------------------------

### Example: LandingMarquee with Background and Icons

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/marquee.mdx

Illustrates using LandingMarquee with a background, custom animation duration, and various icons.

```APIDOC
## LandingMarquee with Background and Icons

### Description
This example showcases the LandingMarquee component with a background enabled, set to a secondary variant, and a specific animation duration. It displays a collection of icons.

### Component Usage

```jsx
import { ChromeIcon, FigmaIcon, GithubIcon, FramerIcon, TwitchIcon, TwitterIcon, GitlabIcon, InstagramIcon, SlackIcon } from 'lucide-react';
import { LandingMarquee } from '@/components/landing/LandingMarquee';

<LandingMarquee withBackground variant="secondary" animationDurationInSeconds="10s">
  <ChromeIcon className="w-12 h-12 mx-8" />
  <FigmaIcon className="w-12 h-12 mx-8" />
  <GithubIcon className="w-12 h-12 mx-8" />
  <FramerIcon className="w-12 h-12 mx-8" />
  <TwitchIcon className="w-12 h-12 mx-8" />
  <TwitterIcon className="w-12 h-12 mx-8" />
  <GitlabIcon className="w-12 h-12 mx-8" />
  <InstagramIcon className="w-12 h-12 mx-8" />
  <SlackIcon className="w-12 h-12 mx-8" />
</LandingMarquee>;
```
```

--------------------------------

### LandingFeatureList Component Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/feature-list.mdx

Example usage of the LandingFeatureList component with background glow.

```APIDOC
## LandingFeatureList Component Example

### Description
Example usage of the LandingFeatureList component with background glow.

### Method
None

### Endpoint
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
import { SparklesIcon, LineChartIcon, LayersIcon } from 'lucide-react';
import { LandingFeatureList } from '@/components/landing/feature/LandingFeatureList';

const featureItems = [
  {
    title: 'Automatic deployment to Vercel',
    description:
      'Deploying the generated template to Vercel is as easy as clicking a button. ',
    icon: <SparklesIcon />,
  },
  {
    title: 'Dynamic Social Image',
    description:
      'We generate an open graph image that will be visible when you share your site online.',
    icon: <LineChartIcon />,
  },
  {
    title: 'MDX blog, no server required',
    description:
      'Shipixen comes with a fully featured MDX blog. ',
    icon: <LayersIcon />,
  },
]

<LandingFeatureList
  withBackgroundGlow
  backgroundGlowVariant="primary"
  variant="secondary"
  title={"Nothing quite like it."}
  description={
    'Shipixen sets up everything you need to start working on your blog, website or product.'
  }
  featureItems={featureItems}
/>
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Component Example: With background glow

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/newsletter.mdx

Example demonstrating the LandingNewsletterSection component with the `withBackgroundGlow` prop enabled.

```APIDOC
## Component Example: With background glow

### Description
This example shows how to use the `withBackgroundGlow` prop to add a glowing background effect to the newsletter section.

### Usage

```jsx
<LandingNewsletterSection
  title="Never miss an update!"
  description="Subscribe to our newsletter to get the latest announcements, news and exclusive offers."
  withBackgroundGlow
>
</LandingNewsletterSection>
```
```

--------------------------------

### LandingPricingPlan - Sold Out Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/pricing-plan.mdx

Example of using the LandingPricingPlan component to indicate a sold-out status.

```APIDOC
## LandingPricingPlan - Sold Out

### Description
This example shows how to use the `soldOut` prop to indicate that a pricing plan is no longer available.

### Component Usage
```jsx
import { LandingPricingPlan } from '@/components/landing/pricing/LandingPricingPlan';

<LandingPricingPlan
  title="Pro"
  description="For larger teams or businesses."
  ctaText="Upgrade now"
  price="$20"
  soldOut
>
  <p>Unlimited users</p>
  <p>AI features</p>
  <p>Priority support</p>
</LandingPricingPlan>
```
```

--------------------------------

### Custom Product Cards Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/product-card.mdx

This example shows how to implement custom content within product cards using `topComponent` and `bottomComponent` props.

```APIDOC
## Custom Product Cards Example

### Description
This example demonstrates using the `topComponent` and `bottomComponent` props to add custom content to the product cards, allowing for flexible and rich card designs.

### Method
N/A (Component Usage Example)

### Endpoint
N/A (Component Usage Example)

### Parameters
N/A (Component Usage Example)

### Request Example
```jsx
<LandingProductCardSection
  title="Custom Product Cards"
  description="Featuring custom component slots for flexible layouts"
>
  <LandingProductCard
    title="Premium Chair"
    description="Ergonomic office chair with adjustable height and lumbar support."
    imageSrc="/static/images/backdrop-16.webp"
    topComponent={<Badge>New Arrival</Badge>}
    actionComponent={<Button className="w-full">Add to Cart</Button>}
  />
  <LandingProductCard
    title="Standing Desk"
    description="Height-adjustable standing desk with memory presets."
    imageSrc="/static/images/backdrop-17.webp"
    topComponent={<Badge variant="destructive">Bestseller</Badge>}
    bottomComponent={<div className="flex justify-center"><LandingRating /></div>}
    actionComponent={<Button className="w-full">View Details</Button>}
  />
  <LandingProductCard
    title="Desk Lamp"
    description="Adjustable desk lamp with wireless charging base."
    imageSrc="/static/images/backdrop-18.webp"
    topComponent={<Badge variant="secondary">Limited Edition</Badge>}
    bottomComponent={<div className="text-sm font-medium text-green-600">In stock - ships in 24 hours</div>}
    actionComponent={<Button className="w-full">Buy Now</Button>}
  />
</LandingProductCardSection>
```

### Response
N/A (Component Usage Example)
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/installation/reactjs.mdx

Install essential development dependencies for Tailwind CSS, form and typography plugins, and various UI utility libraries. Ensure you are in your project's root directory.

```bash
cd my-app
npm install -D tailwindcss@3 postcss autoprefixer @tailwindcss/forms @tailwindcss/typography tailwindcss-animate embla-carousel-react class-variance-authority clsx tailwind-merge lucide-react @radix-ui/react-accordion @radix-ui/react-tabs @radix-ui/react-label
```

--------------------------------

### Landing Page CTA and Social Proof Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/primary-image-cta.mdx

Demonstrates a centered full example of a landing page with a primary CTA section and social proof elements. Includes imports for necessary components.

```jsx
import { Button } from '@/components/shared/ui/button';
import { LandingPrimaryImageCtaSection } from '@/components/landing/cta/LandingPrimaryCta';
import { LandingDiscount } from '@/components/landing/discount/LandingDiscount';
import { LandingProductHuntAward } from '@/components/landing/social-proof/LandingProductHuntAward';
import { LandingSocialProof } from '@/components/landing/social-proof/LandingSocialProof';
import { LandingSocialProofBand } from '@/components/landing/social-proof/LandingSocialProofBand';
import { LandingSocialProofBandItem } from '@/components/landing/social-proof/LandingSocialProofBandItem';

<LandingSocialProofBand invert>
  <LandingSocialProofBandItem>
    100% encrypted and secure
  </LandingSocialProofBandItem>

  <LandingSocialProofBandItem>24/7 customer support</LandingSocialProofBandItem>

  <LandingSocialProofBandItem>
    99% customer satisfaction
  </LandingSocialProofBandItem>
</LandingSocialProofBand>

<LandingPrimaryImageCtaSection
  title="Landing page in minutes"
  description="Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back."
  imageSrc="/static/images/shipixen/product/1.webp"
  imageAlt="Sample image"
  imagePosition="center"
  textPosition="center"
  withBackground
  withBackgroundGlow
  variant="secondary"
  backgroundGlowVariant="secondary"
  leadingComponent={<LandingProductHuntAward />}
>
  <Button size="xl" variant="secondary" asChild>
    <a href="#">
      Buy now
    </a>
  </Button>

  <Button size="xl" variant="outlineSecondary">
    <a href="#">Read more</a>
  </Button>

  <LandingDiscount
    className="w-full flex justify-center"
    discountValueText="$350 off"
    discountDescriptionText="for the first 10 customers (2 left)"
  />

  <LandingSocialProof
    className="mt-12 w-full flex justify-center"
    showRating
    numberOfUsers={99}
    avatarItems={[
      {
        imageSrc: '/static/images/people/1.webp',
        name: 'John Doe',
      },
      {
        imageSrc: '/static/images/people/2.webp',
        name: 'Jane Doe',
      },
      {
        imageSrc: '/static/images/people/3.webp',
        name: 'Alice Doe',
      },
    ]}
  />
</LandingPrimaryImageCtaSection>
```

--------------------------------

### Complete Landing Page Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/about.mdx

Demonstrates a complete landing page section with an about us component and key statistics. Ensure necessary components are imported.

```jsx
import { LandingAboutSection } from '@/components/landing/about/LandingAboutSection';
import { LandingStatItem } from '@/components/landing/stats/LandingStatItem';

<div className="flex flex-col w-full">
  <LandingAboutSection
    title="About Us"
    description="We're a team of passionate designers and developers building exceptional digital experiences."
    imageSrc="/static/images/backdrop-5.webp"
    imageAlt="Our team"
  />

  <div className="py-8">
    <div className="container-wide px-6">
      <h2 className="w-full text-3xl font-semibold mb-6 text-left">Key Statistics</h2>
      <div className="grid grid-cols-2 md:grid-cols-3">
        <LandingStatItem
          value="150+"
          label="projects"
          description="Successfully completed projects"
          variant="primary"
        />
        <LandingStatItem
          value="9"
          label="members"
          description="Dedicated members"
          variant="primary"
        />
        <LandingStatItem
          value="10+"
          label="years"
          description="Years of industry experience"
          variant="primary"
        />
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Landing Product Tour Section Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/product-tour.mdx

Demonstrates the structure and usage of the LandingProductTourSection component, including its title, description, default value, and nested content.

```jsx
<LandingProductTourSection
  title='Landing page in minutes'
  description="Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back."
  defaultValue="feature-1"
>
  <LandingProductTourList>
    <LandingProductTourTrigger value="feature-1">
      <p className="text-xl font-bold">
        Automatic deployment to Vercel
      </p>
      <p>
        Deploying the generated template to Vercel is as easy as clicking a button.
      </p>
    </LandingProductTourTrigger>

    <LandingProductTourTrigger value="feature-2">
      <p className="text-xl font-bold">
        MDX blog, no server required
      </p>
      <p>
        Shipixen comes with a fully featured MDX blog.
      </p>
    </LandingProductTourTrigger>

    <LandingProductTourTrigger value="feature-3">
      <p className="text-xl font-bold">
        Customizable themes
      </p>
      <p>
        Choose from more than 30+ beautifully designed themes or create your own.
      </p>
    </LandingProductTourTrigger>
  </LandingProductTourList>
  <LandingProductTourContent value="feature-1">
    <VideoPlayer
      className={'w-full rounded-md'}
      src={'https://cache.shipixen.com/features/20-mobile-optimized.mp4'}
      autoPlay={true}
      controls={false}
      loop={true}
    />
  </LandingProductTourContent>
  <LandingProductTourContent value="feature-2">
    <VideoPlayer
      className={'w-full rounded-md'}
      src={
        'https://cache.shipixen.com/features/11-pricing-page-builder.mp4'
      }
      autoPlay={true}
      controls={false}
      loop={true}
    />
  </LandingProductTourContent>
  <LandingProductTourContent value="feature-3">
    <VideoPlayer
      className={'w-full rounded-md'}
      src={'https://cache.shipixen.com/features/21-run-locally.mp4'}
      autoPlay={true}
      controls={false}
      loop={true}
    />
  </LandingProductTourContent>
</LandingProductTourSection>
```

--------------------------------

### LandingFeature Component Usage Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/feature.mdx

Demonstrates how to use the LandingFeature component with its essential props.

```APIDOC
## Usage Example

This example shows how to import and use the `LandingFeature` component with a title, description, and icon.

### Code

```jsx
import { LandingFeature } from '@/components/landing/feature/LandingFeature';
import { SparklesIcon } from 'lucide-react';

<LandingFeature
  title="Automatic deployment to Vercel"
  description="Deploying the generated template to Vercel is as easy as clicking a button. There is no need to configure anything."
  icon={<SparklesIcon />}
/>;
```
```

--------------------------------

### Example: LandingMarquee with Images

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/marquee.mdx

Demonstrates how to use the LandingMarquee component to display a scrolling list of avatars with images.

```APIDOC
## LandingMarquee with Images

### Description
This example shows how to populate the LandingMarquee with a list of people's avatars, each featuring an image and a name.

### Component Usage

```jsx
<LandingMarquee>
  <div className="flex gap-8 px-4">
    {[
      {
        imageSrc: '/static/images/people/1.webp',
        name: 'John Doe',
      },
      {
        imageSrc: '/static/images/people/2.webp',
        name: 'Jane Doe',
      },
      {
        imageSrc: '/static/images/people/3.webp',
        name: 'Alice Doe',
      },
      {
        imageSrc: '/static/images/people/4.webp',
        name: 'Bob Doe',
      },
      {
        imageSrc: '/static/images/people/5.webp',
        name: 'Eve Doe',
      },
    ].map((person, index) => (
      <LandingAvatar
        size="large"
        key={index}
        imageSrc={person.imageSrc}
        name={person.name}
      />
    ))}
  </div>
</LandingMarquee>
```
```

--------------------------------

### LandingRating Component Examples

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/rating.mdx

Demonstrates various ways to use the LandingRating component with different configurations.

```APIDOC
## LandingRating Component Examples

### With Custom Rating

```jsx
import { LandingRating } from '@/components/landing/rating/LandingRating';

<LandingRating rating={4} />;
```

### With Partial Rating

```jsx
import { LandingRating } from '@/components/landing/rating/LandingRating';

<LandingRating rating={4.3} />;
```

### With Custom Size

```jsx
import { LandingRating } from '@/components/landing/rating/LandingRating';

<LandingRating rating={4.3} size="large" />;
```

### With Custom Max Rating

```jsx
import { LandingRating } from '@/components/landing/rating/LandingRating';

<LandingRating rating={4.3} maxRating={6} />;
```
```

--------------------------------

### Example: Blog Post with Clickable Tags

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/blog-post.mdx

Demonstrates how to use the LandingBlogPost component to display a blog post with tags that link to other pages.

```APIDOC
## Example: Blog Post with Clickable Tags

### Description

A blog post with tags that link to other pages when clicked.

### Component Usage

```jsx
import { LandingBlogPost } from '@/components/landing/blog/LandingBlogPost';

<LandingBlogPost
  post={{
    slug: 'clickable-tags-post',
    date: 'November 20, 2023',
    title: 'Blog Post with Clickable Tags',
    summary: 'This example shows a blog post with tags that link to other pages when clicked.',
    tags: [
      { url: '/tags/react', text: 'React' },
      { url: '/tags/nextjs', text: 'Next.js' }
    ],
    readingTime: 7
  }}
/>
```
```

--------------------------------

### Basic LandingProblemAgitator Implementation

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/problem-agitator.mdx

A basic example demonstrating the structure and content of the LandingProblemAgitator component.

```jsx
<LandingProblemAgitator
  title="Common User Challenges"
  description="These are the problems our users face every day"
  cliffhanger="Our solution makes these problems disappear"
>
  <LandingProblemAgitatorItem>
    <p>Problem 1</p>
  </LandingProblemAgitatorItem>

  <LandingProblemAgitatorItem>
    <p>Problem 2</p>
    <LandingProblemAgitatorComment className="-right-8 top-0">
      Pain point 1
    </LandingProblemAgitatorComment>
  </LandingProblemAgitatorItem>

  <LandingProblemAgitatorItem>
    <p>Problem 3</p>
  </LandingProblemAgitatorItem>
</LandingProblemAgitator>
```

--------------------------------

### Component Usage Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/team.mdx

Demonstrates how to use LandingTeamSection and LandingTeamMember components together, either by passing members as an array or as children.

```APIDOC
## Component-based Usage

Alternatively, you can use individual `LandingTeamMember` components as children:

```jsx
import { LandingTeamSection } from '@/components/landing/team/LandingTeamSection';
import { LandingTeamMember } from '@/components/landing/team/LandingTeamMember';

<LandingTeamSection
  title="Leadership Team"
  description="Meet the people driving our vision forward."
>
  <LandingTeamMember
    member={{ name: "Lee Rob", role: "CEO & Founder", imageSrc: "/static/images/people/11.webp" }}
  />
  <LandingTeamMember
    member={{ name: "David Chen", role: "CTO", imageSrc: "/static/images/people/2.webp" }}
  />
  <LandingTeamMember
    member={{ name: "Alex Rivera", role: "Lead Designer", imageSrc: "/static/images/people/12.webp" }}
  />
</LandingTeamSection>
```
```

--------------------------------

### Basic App Store Button Usage

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/appstore-button.mdx

Example of rendering a single iOS App Store button.

```jsx
<LandingAppStoreButton appStore="ios-appstore" />
```

--------------------------------

### LandingProductSteps with Video Features

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/product-steps.mdx

Integrate video features into your product steps display. This example shows how to use LandingProductVideoFeature alongside LandingProductFeature. Ensure all necessary components are imported.

```jsx
import { LandingProductSteps } from '@/components/landing/LandingProductSteps';
import { LandingProductFeature } from '@/components/landing/LandingProductFeature';
import { LandingProductVideoFeature } from '@/components/landing/LandingProductVideoFeature';

<LandingProductSteps
  title="See it in action"
  description="Watch how our product solves real-world problems."
>
  <LandingProductFeature
    title="Research"
    description="We start by understanding your needs and goals."
    imageSrc="/static/images/backdrop-1.webp"
  />
  <LandingProductFeature
    title="Intuitive Interface"
    description="Navigate with ease through our user-friendly platform."
    imageSrc="/static/images/backdrop-9.webp"
  />
  <LandingProductVideoFeature
    title="Design"
    description="Choose from more than 30+ themes."
    autoPlay={false}
    videoSrc="https://cache.shipixen.com/features/3-theme-and-logo.mp4"
    videoPoster="/static/images/backdrop-9.webp"
  />
  <LandingProductVideoFeature
    title="Code"
    description="We build your project to perfection."
    autoPlay={false}
    videoSrc='https://cache.shipixen.com/features/20-mobile-optimized.mp4'
    videoPoster="/static/images/backdrop-3.webp"
  />
</LandingProductSteps>
```

--------------------------------

### LandingProductVideoFeature with CTA

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/product-video-feature.mdx

This example demonstrates using LandingProductVideoFeature with a paragraph description and a call to action button. Import Button and LandingProductFeature.

```jsx
import { Button } from '@/components/shared/ui/button';
import { LandingProductFeature } from '@/components/landing/LandingProductFeature';

<LandingProductVideoFeature
  withBackgroundGlow
  backgroundGlowVariant="primary"
  title="Easy Branding"
  autoPlay={false}
  controls={false}
  videoSrc="https://cache.shipixen.com/features/3-theme-and-logo.mp4"
  descriptionComponent={
    <>
      <p>
        Receive personalized recommendations and insights tailored to your
        workflow and easily collaborate with team members and clients in
        real-time.
      </p>

      <Button className="mt-8" asChild>
        <a href="#">Try now for free</a>
      </Button>

      <p className="text-sm opacity-70">
        7 day free trial, no credit card required.
      </p>
    </>
  }
/>
```

--------------------------------

### LandingFeatureList Component with Background

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/feature-list.mdx

Example of using the LandingFeatureList component with a background and secondary variant. Requires importing icons and the component.

```jsx
import { SparklesIcon, LineChartIcon, LayersIcon } from 'lucide-react';
import { LandingFeatureList } from '@/components/landing/feature/LandingFeatureList';

const featureItems = [
  {
    title: 'Deploy now',
    description: 'Deploying to Vercel with a click.',
    icon: <SparklesIcon />,
  },
  {
    title: 'SEO optimized',
    description: 'Shipixen is optimized for search engines.',
    icon: <LineChartIcon />,
  },
  {
    title: 'MDX blog ready',
    description: 'Shipixen comes with a fully featured MDX blog. ',
    icon: <LayersIcon />,
  },
]

<LandingFeatureList
  withBackground
  variant="secondary"
  title={"Nothing quite like it."}
  description={
    'Shipixen sets up everything you need to start working on your blog, website or product.'
  }
  featureItems={featureItems}
/>
```

--------------------------------

### Landing Price Comparison Section Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/pricing-comparison.mdx

Use this component to create a feature comparison table. It accepts a title, description, and multiple columns, each containing comparison items.

```jsx
 <LandingPriceComparisonSection
  title="Feature Comparison"
  description="See how different solutions stack up"
>
  <LandingPriceComparisonColumn
    header="Solution A"
  >
    <LandingPriceComparisonItem state="check" text="API Access" />
    <LandingPriceComparisonItem state="cross" text="Real-time Sync" />
    <LandingPriceComparisonItem state="check" text="Basic Support" />
    <LandingPriceComparisonItem state="cross" text="Custom Integrations" />
  </LandingPriceComparisonColumn>

  <LandingPriceComparisonColumn
    featured
    header="Our Solution"
    ctaText="Learn More"
    href="#"
  >
    <LandingPriceComparisonItem state="check" text="API Access" showText={true} />
    <LandingPriceComparisonItem state="check" text="Real-time Sync" showText={true} />
    <LandingPriceComparisonItem state="check" text="Premium Support" showText={true} />
    <LandingPriceComparisonItem state="check" text="Custom Integrations" showText={true} />
  </LandingPriceComparisonColumn>

  <LandingPriceComparisonColumn
    header="Solution B"
  >
    <LandingPriceComparisonItem state="cross" text="API Access" />
    <LandingPriceComparisonItem state="check" text="Real-time Sync" />
    <LandingPriceComparisonItem state="check" text="Basic Support" />
    <LandingPriceComparisonItem state="cross" text="Custom Integrations" />
  </LandingPriceComparisonColumn>
</LandingPriceComparisonSection>
```

--------------------------------

### Landing Page CTA and Social Proof Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/primary-image-cta.mdx

Demonstrates the integration of a primary call-to-action section with social proof elements for a landing page. Ensure necessary components are imported.

```jsx
import { Button } from '@/components/shared/ui/button';
import { LandingPrimaryImageCtaSection } from '@/components/landing/cta/LandingPrimaryCta';
import { LandingDiscount } from '@/components/landing/discount/LandingDiscount';
import { LandingProductHuntAward } from '@/components/landing/social-proof/LandingProductHuntAward';
import { LandingSocialProof } from '@/components/landing/social-proof/LandingSocialProof';
import { LandingSocialProofBand } from '@/components/landing/social-proof/LandingSocialProofBand';
import { LandingSocialProofBandItem } from '@/components/landing/social-proof/LandingSocialProofBandItem';

<LandingSocialProofBand>
  <LandingSocialProofBandItem>
    100% encrypted and secure
  </LandingSocialProofBandItem>

  <LandingSocialProofBandItem>24/7 customer support</LandingSocialProofBandItem>

  <LandingSocialProofBandItem>
    99% customer satisfaction
  </LandingSocialProofBandItem>
</LandingSocialProofBand>

<LandingPrimaryImageCtaSection
  title="Landing page in minutes"
  description="Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back."
  imageSrc="/static/images/shipixen/product/1.webp"
  imageAlt="Sample image"
  withBackground
  withBackgroundGlow
  leadingComponent={<LandingProductHuntAward />}
>
  <Button size="xl" asChild>
    <a href="#">
      Buy now
    </a>
  </Button>

  <Button size="xl" variant="outlinePrimary">
    <a href="#">Read more</a>
  </Button>

  <LandingSocialProof
    className="w-full mt-12"
    showRating
    numberOfUsers={99}
    avatarItems={[
      {
        imageSrc: '/static/images/people/1.webp',
        name: 'John Doe',
      },
      {
        imageSrc: '/static/images/people/2.webp',
        name: 'Jane Doe',
      },
      {
        imageSrc: '/static/images/people/3.webp',
        name: 'Alice Doe',
      },
    ]}
  />
</LandingPrimaryImageCtaSection>
```

--------------------------------

### Build for Production

Source: https://github.com/pageai-pro/page-ui/blob/main/website/README.md

Use this command to create a production-ready build of the site.

```bash
npm run build
```

--------------------------------

### LandingProblemAgitator Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/problem-agitator.mdx

Example usage of the LandingProblemAgitator component with specific props and child items.

```APIDOC
## LandingProblemAgitator Example

### Description
An example demonstrating how to use the LandingProblemAgitator component with its title, description, cliffhanger, and problem items.

### Component Usage

```jsx
<LandingProblemAgitator
  title="Building websites is challenging"
  description="Traditional approaches leave teams frustrated and projects delayed"
  cliffhanger="There's a better approach"
  withBackgroundGlow
  withBackground={false}
>
  <LandingProblemAgitatorItem>
    <p>Complex requirements</p>
  </LandingProblemAgitatorItem>

  <LandingProblemAgitatorItem>
    <p>Limited resources</p>
  </LandingProblemAgitatorItem>

  <LandingProblemAgitatorItem>
    <p>Technical constraints</p>
  </LandingProblemAgitatorItem>
</LandingProblemAgitator>
```
```

--------------------------------

### Run Page UI CLI Initialization

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/installation/nextjs.mdx

Navigate to your Next.js project directory and run the Page UI CLI to initialize the components. Ensure you replace 'my-app' if you used a different project name.

```bash
cd my-app
npx @page-ui/wizard@latest init
```

--------------------------------

### Run Page UI CLI for Initialization

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/installation/reactjs.mdx

Execute the Page UI wizard to initialize the project with the React template. This command sets up the necessary Page UI configurations.

```bash
npx @page-ui/wizard@latest init --template react
```

--------------------------------

### Page UI Init Command Options

Source: https://github.com/pageai-pro/page-ui/blob/main/packages/cli/README.md

Details the options available for the 'page-ui init' command. Use this to configure the Page UI setup, such as selecting a template or specifying the source directory.

```bash
Usage: page-ui init [options]

Setup Page UI: adds required files to your project

Options:
  -t, --template <template>  Choose a template from: nextjs, react. Default: nextjs (default: "nextjs")
  -src, --source <source>    Source directory. Defaults to root, but you might be using "src". (default: "")
  -h, --help                 display help for command
```

--------------------------------

### Install Node Types for Vite Configuration

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/installation/manual-reactjs.mdx

Installs the Node.js type definitions, which may be required for certain configurations in Vite projects, such as path resolution.

```bash
npm i -D @types/node
```

--------------------------------

### Centered Text and Video Layout Example

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/primary-video-cta.mdx

Configure the LandingPrimaryVideoCtaSection for a centered text and video layout, with an optional background. This example includes two buttons for 'Try It Free' and 'Learn More'.

```jsx
import { Button } from '@/components/shared/ui/button';
import { LandingPrimaryVideoCtaSection } from '@/components/landing/cta/LandingPrimaryCta';

<LandingPrimaryVideoCtaSection
  title="Streamline Your Workflow"
  description="Our intuitive tools help teams work more efficiently with less effort."
  videoSrc="https://cache.shipixen.com/features/8-customize-pages.mp4"
  textPosition="center"
  videoPosition="center"
  withBackground={true}
  autoPlay={true}
  loop={true}
  muted={true}
>
  <Button size="xl" asChild>
    <a href="#">Try It Free</a>
  </Button>
  <Button size="xl" variant="outlinePrimary">
    <a href="#">Learn More</a>
  </Button>
</LandingPrimaryVideoCtaSection>
```

--------------------------------

### Implement Landing Product Tour Section

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/product-tour.mdx

Use this component to create an interactive product tour with images. It requires importing the necessary components and defining the tour's content and triggers.

```jsx
import { LandingProductTourSection, LandingProductTourList, LandingProductTourTrigger, LandingProductTourContent } from '@/components/landing/LandingProductTour';
import Image from '@/components/shared/Image';

<LandingProductTourSection
  title='Landing page in minutes'
  description="Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back."
  defaultValue="feature-1"
>
  <LandingProductTourList>
    <LandingProductTourTrigger value="feature-1">
      <p className="text-xl font-bold">
        Automatic deployment to Vercel
      </p>
      <p>
        Deploying the generated template to Vercel is as easy as clicking a button.
      </p>
    </LandingProductTourTrigger>

    <LandingProductTourTrigger value="feature-2">
      <p className="text-xl font-bold">
        MDX blog, no server required
      </p>
      <p>
        Shipixen comes with a fully featured MDX blog.
      </p>
    </LandingProductTourTrigger>

    <LandingProductTourTrigger value="feature-3">
      <p className="text-xl font-bold">
        Customizable themes
      </p>
      <p>
        Choose from more than 30+ beautifully designed themes or create your own.
      </p>
    </LandingProductTourTrigger>
  </LandingProductTourList>
  <LandingProductTourContent value="feature-1">
    <Image src="https://picsum.photos/id/206/800/800" width={800} height={800} />
  </LandingProductTourContent>
  <LandingProductTourContent value="feature-2">
    <Image src="https://picsum.photos/id/33/800/800" width={800} height={800} />
  </LandingProductTourContent>
  <LandingProductTourContent value="feature-3">
    <Image src="https://picsum.photos/id/59/800/800" width={800} height={800} />
  </LandingProductTourContent>
</LandingProductTourSection>
```

--------------------------------

### Import Landing Price Comparison Components

Source: https://github.com/pageai-pro/page-ui/blob/main/website/data/docs/landing-page-components/pricing-comparison.mdx

Import the necessary components for creating price comparison sections. Ensure these components are available in your '@/components/landing' path.

```js
import {
  LandingPriceComparisonSection,
  LandingPriceComparisonColumn,
  LandingPriceComparisonItem,
} from '@/components/landing';
```

--------------------------------

### Page UI CLI Help and Options

Source: https://context7.com/pageai-pro/page-ui/llms.txt

View available commands for the Page UI CLI or initialize with specific templates and source directories.

```bash
npx @page-ui/wizard@latest --help
```

```bash
npx @page-ui/wizard@latest init --template nextjs
```

```bash
npx @page-ui/wizard@latest init --template react
```

```bash
npx @page-ui/wizard@latest init --source src
```