# vetra-studio/website architecture

> Architecture diagram of the GitHub repository vetra-studio/website, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-08). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vetra-studio/website
- Repository: https://github.com/vetra-studio/website

## Overview

#### Purpose and Entry Point
This is a small Next.js App Router site, derived from `create-next-app`. Its primary rendered route is the root page at `app/page.tsx`, served by the Next.js runtime at `/`. No API routes, database integrations, or backend service boundaries are present in the repository tree.

#### Application Shell
`app/layout.tsx` defines the root layout shared by all App Router pages. It is the global composition boundary for document-level structure, metadata, font setup, and persistent site chrome. `app/globals.css` supplies application-wide styling imported through this layout.

Paths:
- `app/layout.tsx`
- `app/globals.css`

#### Root Page Composition
`app/page.tsx` is the main feature/page entry point and is where route-specific content is assembled. With only this route present, the application is currently a single-page site rather than a multi-route product flow.

Paths:
- `app/page.tsx`
- `app/layout.tsx`

#### Shared Navigation and Header
The site’s top-level navigation is separated into reusable components. `components/Header.tsx` likely provides header structure and delegates navigation-specific UI to `components/Navbar.tsx`. These components form the primary user navigation boundary and should remain layout-oriented rather than owning page business logic.

Paths:
- `components/Header.tsx`
- `components/Navbar.tsx`
- `app/page.tsx`

#### Footer and Contact Surface
Footer concerns are componentized separately from page content. `components/Footer.tsx` is the outer footer region, while `components/FooterContact.tsx` isolates contact-oriented footer content. This supports reuse if additional App Router pages are added.

Paths:
- `components/Footer.tsx`
- `components/FooterContact.tsx`
- `app/page.tsx`

#### Rendering, Styling, and Assets
The project uses the Next.js TypeScript runtime and App Router conventions. Styling is centered on global CSS in `app/globals.css`, with PostCSS processing configured in `postcss.config.mjs`. Static browser-served assets belong under `public`, though no individual assets are listed. The README states `next/font` is used for optimized Geist font loading, normally configured from the root layout.

Paths:
- `app/globals.css`
- `app/layout.tsx`
- `public`

#### Runtime and Deployment Boundary
Development starts through the package scripts defined in `package.json` (the README identifies `npm run dev`) and is served locally on port 3000. Build/runtime behavior is governed by Next.js configuration in `next.config.ts`. The documented deployment target is Vercel, but no Vercel-specific configuration, external APIs, persistence layer, authentication provider, or environment configuration is represented in the tree.

Paths:
- `package.json`
- `next.config.ts`
- `README.md`

Main entry points: [`app/layout.tsx`](https://github.com/vetra-studio/website/blob/main/app/layout.tsx) (Root layout), [`app/page.tsx`](https://github.com/vetra-studio/website/blob/main/app/page.tsx) (Root page), [`components/Header.tsx`](https://github.com/vetra-studio/website/blob/main/components/Header.tsx) (Header), [`components/Footer.tsx`](https://github.com/vetra-studio/website/blob/main/components/Footer.tsx) (Footer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Router"]
  node_layout["Root layout<br/>App Router layout<br/>[layout.tsx]"]
  node_page["Root page<br/>route page<br/>[page.tsx]"]
  node_global_css["Global styles<br/>CSS<br/>[globals.css]"]
end

subgraph group_ui["Shared UI"]
  node_header["Header<br/>shared component<br/>[Header.tsx]"]
  node_navbar["Navigation bar<br/>shared component<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>shared component<br/>[Footer.tsx]"]
  node_footer_contact["Footer contact<br/>shared component<br/>[FooterContact.tsx]"]
end

subgraph group_runtime["Runtime &amp; Delivery"]
  node_next{{"Next.js runtime<br/>framework runtime"}}
  node_package["Package scripts<br/>npm entrypoint<br/>[package.json]"]
  node_next_config["Next configuration<br/>runtime config<br/>[next.config.ts]"]
  node_public_assets["Static assets<br/>public assets"]
  node_readme["README<br/>project documentation<br/>[README.md]"]
end

node_package -->|"starts dev server"| node_next
node_next_config -->|"configures"| node_next
node_next -->|"renders route shell"| node_layout
node_layout -->|"wraps"| node_page
node_layout -->|"imports"| node_global_css
node_page -->|"composes"| node_header
node_header -->|"delegates navigation"| node_navbar
node_page -->|"composes"| node_footer
node_footer -->|"contains"| node_footer_contact
node_next -->|"serves"| node_public_assets
node_readme -.->|"documents dev command"| node_package

click node_package "https://github.com/vetra-studio/website/blob/main/package.json"
click node_next_config "https://github.com/vetra-studio/website/blob/main/next.config.ts"
click node_layout "https://github.com/vetra-studio/website/blob/main/app/layout.tsx"
click node_page "https://github.com/vetra-studio/website/blob/main/app/page.tsx"
click node_global_css "https://github.com/vetra-studio/website/blob/main/app/globals.css"
click node_header "https://github.com/vetra-studio/website/blob/main/components/Header.tsx"
click node_navbar "https://github.com/vetra-studio/website/blob/main/components/Navbar.tsx"
click node_footer "https://github.com/vetra-studio/website/blob/main/components/Footer.tsx"
click node_footer_contact "https://github.com/vetra-studio/website/blob/main/components/FooterContact.tsx"
click node_public_assets "https://github.com/vetra-studio/website/tree/main/public"
click node_readme "https://github.com/vetra-studio/website/blob/main/README.md"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_layout,node_page,node_global_css toneBlue
class node_header,node_navbar,node_footer,node_footer_contact toneAmber
class node_next,node_package,node_next_config,node_public_assets,node_readme toneMint
```

## Components

### App Router

- [Root layout](https://github.com/vetra-studio/website/blob/main/app/layout.tsx): App Router layout · Provides document structure, metadata, fonts, and shared chrome. · `app/layout.tsx`
- [Root page](https://github.com/vetra-studio/website/blob/main/app/page.tsx): route page · The site's only rendered route. · `app/page.tsx`
- [Global styles](https://github.com/vetra-studio/website/blob/main/app/globals.css): CSS · `app/globals.css`

### Shared UI

- [Header](https://github.com/vetra-studio/website/blob/main/components/Header.tsx): shared component · `components/Header.tsx`
- [Navigation bar](https://github.com/vetra-studio/website/blob/main/components/Navbar.tsx): shared component · `components/Navbar.tsx`
- [Footer](https://github.com/vetra-studio/website/blob/main/components/Footer.tsx): shared component · `components/Footer.tsx`
- [Footer contact](https://github.com/vetra-studio/website/blob/main/components/FooterContact.tsx): shared component · `components/FooterContact.tsx`

### Runtime & Delivery

- **Next.js runtime**: framework runtime · Serves the App Router site at /.
- [Package scripts](https://github.com/vetra-studio/website/blob/main/package.json): npm entrypoint · `package.json`
- [Next configuration](https://github.com/vetra-studio/website/blob/main/next.config.ts): runtime config · `next.config.ts`
- [Static assets](https://github.com/vetra-studio/website/tree/main/public): public assets · Browser-served static files. · `public`
- [README](https://github.com/vetra-studio/website/blob/main/README.md): project documentation · Documents local development and Vercel deployment. · `README.md`

## Connections

- Package scripts → Next.js runtime: starts dev server
- Next configuration → Next.js runtime: configures
- Next.js runtime → Root layout: renders route shell
- Root layout → Root page: wraps
- Root layout → Global styles: imports
- Root page → Header: composes
- Header → Navigation bar: delegates navigation
- Root page → Footer: composes
- Footer → Footer contact: contains
- Next.js runtime → Static assets: serves
- README → Package scripts: documents dev command