Template
Rami Bitar
c84dc9dbe7
Use remote logos and avatars, refine landing copy, and document the template structure.
67 lines
2.9 KiB
Markdown
67 lines
2.9 KiB
Markdown
# 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
|
|
```
|