Template

Files

T

Rami Bitar 6376bb3d82 Organize Vertex starter into reusable sections

Use remote logos and avatars, refine landing copy, and document the template structure.

2026-09-15 10:49:07 -04:00

2.9 KiB

Raw Blame History

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:

yarn install
yarn dev

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

Folder organization

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

yarn lint
yarn tsc --noEmit
yarn build
yarn start