# Vertex landing page starter

A single-page AI SaaS landing page built with Next.js, TypeScript, Tailwind CSS, shadcn/ui, Magic UI, and next-themes. Includes light/dark themes, animated feature visuals, pricing tabs, and testimonial marquees.

## Getting started

Use the repository's pinned Yarn version:

```bash
yarn install
yarn dev
```

Open the local URL printed by Next.js. To use a specific port, run `yarn dev --port 3002`.

## Folder organization

```text
app/
  page.tsx                  # Page frame and section order
  layout.tsx                # Metadata, Geist fonts, and theme provider
  globals.css               # Theme tokens, animations, and frame styles
components/
  layout/                   # Header, footer, theme provider, and toggle
  sections/
    hero-section.tsx
    logos-section.tsx
    features-section.tsx
    features/               # Terminal, orbit, activity list, chart, globe
    developers-section.tsx
    reliability-section.tsx
    pricing-section.tsx
    testimonials-section.tsx
    cta-section.tsx
  shared/                   # Brand, headings, frame crosses, reusable copy/cards
  ui/                       # shadcn/ui and Magic UI primitives
hooks/                      # Shared hooks
lib/                        # Utilities
public/                     # Brand logo and Open Graph image
```

Each section is a named component imported directly into `app/page.tsx`. Reorder or remove its component there to change the page composition. Sections retain the shared page frame, borders, and responsive spacing.

Copy, logo URLs, sample metrics, plans, and testimonials live in the components that use them. There is no separate content or site configuration layer. Feature-specific data lives beside its visual in `components/sections/features/`.

Pricing owns its billing state. Theme controls and JavaScript-driven visuals keep their own client boundaries; the page composition and static sections do not need a page-wide client component.

## Customizing the template

- Edit section copy and data in `components/sections/`.
- Edit navigation and footer links in `components/layout/`.
- Change the wordmark in `components/shared/brand.tsx` and replace `public/logo.svg`.
- Adjust colors, typography tokens, and decorative effects in `app/globals.css`.
- Update metadata in `app/layout.tsx`, the favicon in `app/favicon.ico`, and the social preview in `public/og.png`. Set `NEXT_PUBLIC_SITE_URL` to your site's origin when publishing.
- Logos and portrait photos are loaded from `https://sb.frontend.co`. Update the source URLs in their components and `images.remotePatterns` in `next.config.js` if using another host.

Testimonials, portraits, metrics, and pricing are sample content, not verified customer endorsements or service guarantees. Replace them and connect the placeholder signup, sales, status, and privacy links before publishing.

## Checks and production build

```bash
yarn lint
yarn tsc --noEmit
yarn build
yarn start
```