Organize Vertex starter into reusable sections

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

README.md

@@ -1,36 +1,66 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Vertex landing page starter
 
-## Getting Started
+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.
 
-First, run the development server:
+## Getting started
+
+Use the repository's pinned Yarn version:
 
 ```bash
-npm run dev
-# or
+yarn install
 yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open the local URL printed by Next.js. To use a specific port, run `yarn dev --port 3002`.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Folder organization
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```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
+```
 
-## Learn More
+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.
 
-To learn more about Next.js, take a look at the following resources:
+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/`.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+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.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Customizing the template
 
-## Deploy on Vercel
+- 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.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+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.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+## Checks and production build
+
+```bash
+yarn lint
+yarn tsc --noEmit
+yarn build
+yarn start
+```