# nexoralabs-website/nexora-website architecture

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

- Interactive diagram: https://gitdiagram.com/nexoralabs-website/nexora-website
- Repository: https://github.com/nexoralabs-website/nexora-website

## Overview

Nexora Labs is a marketing/agency website built as a Next.js 15 App Router application. The architecture is centered on a mostly static public site with a small interactive backend path for the contact form. Most of the code lives in `app/`, `components/`, and `lib/`, with `styles/`, `public/`, and `types/` supporting presentation and shared contracts.

The application routes are simple and page-oriented: the landing page at `app/page.tsx`, plus dedicated `privacy` and `terms` pages. `app/robots.ts` and `app/sitemap.ts` indicate the site also generates SEO and crawl metadata at the framework level rather than through a separate backend.

The landing page is composed from modular sections in `components/sections/` such as hero, services, projects, testimonials, FAQ, contact, and CTA. This suggests a single long-form conversion page broken into reusable blocks, which is typical for an agency site and makes the visual structure easy to diagram as a stack of independent content sections.

Shared chrome and persistent UI live in `components/` outside the sections folder: navbar, footer, floating contact action, logo, and a loading screen. These components define the site shell around the route content and are likely reused across the legal pages and the main homepage.

The design system is built from shadcn/ui primitives under `components/ui/`, including button, card, input, label, textarea, accordion, and a couple of animated interaction components. This means the UI layer is split between composable base controls and higher-level marketing sections, rather than a monolithic page template.

Animation is a first-class concern. `hooks/use-animations.ts`, `components/ui/animated-section.tsx`, `components/ui/magnetic-button.tsx`, and the Framer Motion dependency in the README indicate scroll/entrance and interactive motion effects are layered into otherwise static content. For architecture diagrams, this is a client-side enhancement layer rather than a separate subsystem.

The primary dynamic workflow is the contact form. The form is validated with Zod via `lib/validations/contact.ts`, then submitted through a Next.js Server Action in `app/actions/contact.ts`. This gives the site a server-side boundary without a full API layer.

There is an optional persistence backend through Supabase, configured in `lib/supabase.ts`. The README makes clear that contact submission storage is optional: if Supabase credentials are absent, the form still validates and returns success for demo use. So the data flow is “client form -> server action -> optional Supabase insert,” with a graceful no-database fallback.

Shared application data and constants are centralized in `lib/data.ts` and `lib/constants.ts`, while `lib/metadata.ts` handles SEO metadata generation. This keeps content and site-wide configuration out of individual components, which is useful for diagramming a clean separation between content/config and presentation.

Utility and type boundaries are lightweight but explicit. `lib/utils.ts` likely contains helper functions, and `types/index.ts` provides project-wide TypeScript types. This indicates a small but intentional shared domain layer used by both components and server-side code.

The project is styled globally through `styles/globals.css` and Tailwind CSS v4, with `postcss.config.mjs` and `next.config.ts` handling build-time integration. Styling is therefore not managed by a separate design system service; it is fully embedded in the frontend build pipeline.

Static assets are stored in `public/`, including brand assets under `public/brand`. The README and `scripts/extract-logos.mjs` suggest brand/logo processing is part of the repo’s asset workflow, supporting a polished marketing presentation rather than dynamic media delivery.

Overall, the architecture has three main boundaries: a route/presentation layer in `app/`, a reusable UI/content layer in `components/` and `lib/`, and a narrow server/data path for contact submissions via Server Actions and optional Supabase. The rest of the repository is mostly supporting infrastructure for styling, animation, SEO, and static assets.

Main entry points: [`app/layout.tsx`](https://github.com/nexoralabs-website/nexora-website/blob/main/app/layout.tsx) (Root layout), [`lib/metadata.ts`](https://github.com/nexoralabs-website/nexora-website/blob/main/lib/metadata.ts) (Metadata), [`app/page.tsx`](https://github.com/nexoralabs-website/nexora-website/blob/main/app/page.tsx) (Home page), [`components/ui/button.tsx`](https://github.com/nexoralabs-website/nexora-website/blob/main/components/ui/button.tsx) (UI primitives)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_app["App routes"]
  node_node_layout["Root layout<br/>app shell<br/>[layout.tsx]"]
  node_node_home["Home page<br/>route page<br/>[page.tsx]"]
  node_node_privacy["Privacy page<br/>legal page<br/>[page.tsx]"]
  node_node_terms["Terms page<br/>legal page<br/>[page.tsx]"]
  node_node_actions{{"Contact action<br/>server action<br/>[contact.ts]"}}
  node_node_robots["Robots<br/>seo route<br/>[robots.ts]"]
  node_node_sitemap["Sitemap<br/>seo route<br/>[sitemap.ts]"]
end

subgraph group_group_components["UI layer"]
  node_node_navbar["Navbar<br/>site chrome<br/>[navbar.tsx]"]
  node_node_footer["Footer<br/>site chrome<br/>[footer.tsx]"]
  node_node_floating(("Contact action<br/>floating CTA"))
  node_node_sections["Page sections<br/>marketing sections<br/>[hero.tsx]"]
  node_node_practical["Engineering block<br/>content section"]
  node_node_ui["UI primitives<br/>design system<br/>[button.tsx]"]
  node_node_animations(("Motion layer<br/>client UX"))
end

subgraph group_group_lib["Shared logic"]
  node_node_data["Site data<br/>content registry<br/>[data.ts]"]
  node_node_constants["Constants<br/>config module<br/>[constants.ts]"]
  node_node_metadata["Metadata<br/>seo helpers<br/>[metadata.ts]"]
  node_node_validation["Contact schema<br/>zod schema<br/>[contact.ts]"]
  node_node_supabase[("Supabase client<br/>optional storage<br/>[supabase.ts]")]
end

subgraph group_group_support["Support"]
  node_node_hooks(("Animation hook<br/>client hook<br/>[use-animations.ts]"))
  node_node_utils["Utils<br/>helpers<br/>[utils.ts]"]
  node_node_types["Types<br/>[index.ts]"]
  node_node_styles["Global styles<br/>tailwind css<br/>[globals.css]"]
  node_node_brand[("Brand assets<br/>static media")]
  node_node_logo_script["Logo script<br/>asset tooling<br/>[extract-logos.mjs]"]
end

node_node_layout -->|"wraps"| node_node_navbar
node_node_layout -->|"wraps"| node_node_footer
node_node_layout -->|"loads"| node_node_styles
node_node_layout -->|"renders"| node_node_home
node_node_layout -->|"renders"| node_node_privacy
node_node_layout -->|"renders"| node_node_terms
node_node_home -->|"assembles"| node_node_sections
node_node_home -->|"includes"| node_node_practical
node_node_home -->|"shows"| node_node_floating
node_node_home -->|"uses"| node_node_metadata
node_node_privacy -->|"uses"| node_node_metadata
node_node_terms -->|"uses"| node_node_metadata
node_node_robots -->|"derives from"| node_node_metadata
node_node_sitemap -->|"derives from"| node_node_metadata
node_node_sections -->|"reads"| node_node_data
node_node_sections -->|"uses"| node_node_ui
node_node_practical -->|"uses"| node_node_ui
node_node_floating -->|"uses"| node_node_ui
node_node_ui -->|"enhances with"| node_node_animations
node_node_animations -->|"depends on"| node_node_hooks
node_node_actions -->|"validates"| node_node_validation
node_node_actions -->|"optionally writes"| node_node_supabase
node_node_actions -->|"uses"| node_node_types
node_node_validation -->|"defines"| node_node_types
node_node_supabase -->|"uses"| node_node_utils
node_node_metadata -->|"reads"| node_node_constants
node_node_data -->|"reads"| node_node_constants
node_node_utils -->|"supports"| node_node_types
node_node_logo_script -->|"processes"| node_node_brand

click node_node_layout "https://github.com/nexoralabs-website/nexora-website/blob/main/app/layout.tsx"
click node_node_home "https://github.com/nexoralabs-website/nexora-website/blob/main/app/page.tsx"
click node_node_privacy "https://github.com/nexoralabs-website/nexora-website/blob/main/app/privacy/page.tsx"
click node_node_terms "https://github.com/nexoralabs-website/nexora-website/blob/main/app/terms/page.tsx"
click node_node_actions "https://github.com/nexoralabs-website/nexora-website/blob/main/app/actions/contact.ts"
click node_node_robots "https://github.com/nexoralabs-website/nexora-website/blob/main/app/robots.ts"
click node_node_sitemap "https://github.com/nexoralabs-website/nexora-website/blob/main/app/sitemap.ts"
click node_node_navbar "https://github.com/nexoralabs-website/nexora-website/blob/main/components/navbar.tsx"
click node_node_footer "https://github.com/nexoralabs-website/nexora-website/blob/main/components/footer.tsx"
click node_node_floating "https://github.com/nexoralabs-website/nexora-website/blob/main/components/floating-contact.tsx"
click node_node_sections "https://github.com/nexoralabs-website/nexora-website/blob/main/components/sections/hero.tsx"
click node_node_practical "https://github.com/nexoralabs-website/nexora-website/blob/main/components/sections/practical-engineering.tsx"
click node_node_ui "https://github.com/nexoralabs-website/nexora-website/blob/main/components/ui/button.tsx"
click node_node_animations "https://github.com/nexoralabs-website/nexora-website/blob/main/components/ui/animated-section.tsx"
click node_node_hooks "https://github.com/nexoralabs-website/nexora-website/blob/main/hooks/use-animations.ts"
click node_node_data "https://github.com/nexoralabs-website/nexora-website/blob/main/lib/data.ts"
click node_node_constants "https://github.com/nexoralabs-website/nexora-website/blob/main/lib/constants.ts"
click node_node_metadata "https://github.com/nexoralabs-website/nexora-website/blob/main/lib/metadata.ts"
click node_node_validation "https://github.com/nexoralabs-website/nexora-website/blob/main/lib/validations/contact.ts"
click node_node_supabase "https://github.com/nexoralabs-website/nexora-website/blob/main/lib/supabase.ts"
click node_node_utils "https://github.com/nexoralabs-website/nexora-website/blob/main/lib/utils.ts"
click node_node_types "https://github.com/nexoralabs-website/nexora-website/blob/main/types/index.ts"
click node_node_styles "https://github.com/nexoralabs-website/nexora-website/blob/main/styles/globals.css"
click node_node_brand "https://github.com/nexoralabs-website/nexora-website/tree/main/public/brand"
click node_node_logo_script "https://github.com/nexoralabs-website/nexora-website/blob/main/scripts/extract-logos.mjs"

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_node_layout,node_node_home,node_node_privacy,node_node_terms,node_node_actions,node_node_robots,node_node_sitemap toneBlue
class node_node_navbar,node_node_footer,node_node_floating,node_node_sections,node_node_practical,node_node_ui,node_node_animations toneAmber
class node_node_data,node_node_constants,node_node_metadata,node_node_validation,node_node_supabase toneMint
class node_node_hooks,node_node_utils,node_node_types,node_node_styles,node_node_brand,node_node_logo_script toneRose
```

## Components

### App routes

Next.js App Router pages, metadata, and server actions.

- [Root layout](https://github.com/nexoralabs-website/nexora-website/blob/main/app/layout.tsx): app shell · Global app wrapper and shared document structure. · `app/layout.tsx`
- [Home page](https://github.com/nexoralabs-website/nexora-website/blob/main/app/page.tsx): route page · Main marketing landing page assembled from sections. · `app/page.tsx`
- [Privacy page](https://github.com/nexoralabs-website/nexora-website/blob/main/app/privacy/page.tsx): legal page · Dedicated privacy policy route. · `app/privacy/page.tsx`
- [Terms page](https://github.com/nexoralabs-website/nexora-website/blob/main/app/terms/page.tsx): legal page · Dedicated terms of service route. · `app/terms/page.tsx`
- [Contact action](https://github.com/nexoralabs-website/nexora-website/blob/main/app/actions/contact.ts): server action · Server-side contact submission boundary. · `app/actions/contact.ts`
- [Robots](https://github.com/nexoralabs-website/nexora-website/blob/main/app/robots.ts): seo route · Framework-level robots metadata output. · `app/robots.ts`
- [Sitemap](https://github.com/nexoralabs-website/nexora-website/blob/main/app/sitemap.ts): seo route · Framework-level sitemap metadata output. · `app/sitemap.ts`

### UI layer

Persistent chrome, long-form sections, and shared UI primitives.

- [Navbar](https://github.com/nexoralabs-website/nexora-website/blob/main/components/navbar.tsx): site chrome · Top-level navigation reused across pages. · `components/navbar.tsx`
- [Footer](https://github.com/nexoralabs-website/nexora-website/blob/main/components/footer.tsx): site chrome · Shared footer for the site shell. · `components/footer.tsx`
- [Contact action](https://github.com/nexoralabs-website/nexora-website/blob/main/components/floating-contact.tsx): floating CTA · Persistent contact shortcut component. · `components/floating-contact.tsx`
- [Page sections](https://github.com/nexoralabs-website/nexora-website/blob/main/components/sections/hero.tsx): marketing sections · Reusable long-form homepage blocks such as hero, services, projects, FAQ, and CTA. · `components/sections/hero.tsx`
- [Engineering block](https://github.com/nexoralabs-website/nexora-website/blob/main/components/sections/practical-engineering.tsx): content section · Supplementary credibility and process-focused marketing section. · `components/sections/practical-engineering.tsx`
- [UI primitives](https://github.com/nexoralabs-website/nexora-website/blob/main/components/ui/button.tsx): design system · Base shadcn-style controls and interaction primitives. · `components/ui/button.tsx`
- [Motion layer](https://github.com/nexoralabs-website/nexora-website/blob/main/components/ui/animated-section.tsx): client UX · Scroll and interaction enhancements layered onto static content. · `components/ui/animated-section.tsx`

### Shared logic

Content, constants, validation, metadata, utilities, and backend client setup.

- [Site data](https://github.com/nexoralabs-website/nexora-website/blob/main/lib/data.ts): content registry · Centralized marketing copy, service lists, and shared content. · `lib/data.ts`
- [Constants](https://github.com/nexoralabs-website/nexora-website/blob/main/lib/constants.ts): config module · Site-wide constants and configuration values. · `lib/constants.ts`
- [Metadata](https://github.com/nexoralabs-website/nexora-website/blob/main/lib/metadata.ts): seo helpers · SEO metadata generation helpers. · `lib/metadata.ts`
- [Contact schema](https://github.com/nexoralabs-website/nexora-website/blob/main/lib/validations/contact.ts): zod schema · Validation contract for contact submissions. · `lib/validations/contact.ts`
- [Supabase client](https://github.com/nexoralabs-website/nexora-website/blob/main/lib/supabase.ts): optional storage · Optional persistence backend for contact submissions. · `lib/supabase.ts`

### Support

Styling, types, hooks, static assets, and tooling.

- [Animation hook](https://github.com/nexoralabs-website/nexora-website/blob/main/hooks/use-animations.ts): client hook · Shared animation behavior used by interactive UI. · `hooks/use-animations.ts`
- [Utils](https://github.com/nexoralabs-website/nexora-website/blob/main/lib/utils.ts): helpers · Shared utility functions used across the app. · `lib/utils.ts`
- [Types](https://github.com/nexoralabs-website/nexora-website/blob/main/types/index.ts): shared types · Project-wide TypeScript type definitions. · `types/index.ts`
- [Global styles](https://github.com/nexoralabs-website/nexora-website/blob/main/styles/globals.css): tailwind css · App-wide styling layer. · `styles/globals.css`
- [Brand assets](https://github.com/nexoralabs-website/nexora-website/tree/main/public/brand): static media · Static brand and logo assets. · `public/brand`
- [Logo script](https://github.com/nexoralabs-website/nexora-website/blob/main/scripts/extract-logos.mjs): asset tooling · Repository script for logo extraction and asset processing. · `scripts/extract-logos.mjs`

## Connections

- Root layout → Navbar: wraps · Shared site shell composes navigation.
- Root layout → Footer: wraps · Shared site shell composes footer.
- Root layout → Global styles: loads · Global stylesheet is applied at the app root.
- Root layout → Home page: renders · Root layout hosts route content.
- Root layout → Privacy page: renders · Root layout hosts legal route content.
- Root layout → Terms page: renders · Root layout hosts legal route content.
- Home page → Page sections: assembles · Landing page is built from modular sections.
- Home page → Engineering block: includes · Home page includes supporting credibility content.
- Home page → Contact action: shows · Home page exposes persistent contact entry.
- Home page → Metadata: uses · Page metadata is generated centrally.
- Privacy page → Metadata: uses · Legal page metadata is centrally generated.
- Terms page → Metadata: uses · Legal page metadata is centrally generated.
- Robots → Metadata: derives from · SEO route participates in site metadata generation.
- Sitemap → Metadata: derives from · SEO route participates in site metadata generation.
- Page sections → Site data: reads · Marketing sections consume shared site content.
- Page sections → UI primitives: uses · Sections are composed from base UI controls.
- Engineering block → UI primitives: uses · Supporting section uses shared primitives.
- Contact action → UI primitives: uses · Floating CTA relies on shared button/input styling primitives.
- UI primitives → Motion layer: enhances with · Primitives are augmented by motion interactions.
- Motion layer → Animation hook: depends on · Animation components share hook logic.
- Contact action → Contact schema: validates · Server action validates form payloads before submission.
- Contact action → Supabase client: optionally writes · Persistence is optional when credentials are present.
- Contact action → Types: uses · Server-side workflow shares domain types.
- Contact schema → Types: defines · Schema informs shared contact data shape.
- Supabase client → Utils: uses · Backend client setup can share helpers.
- Metadata → Constants: reads · Metadata generation uses site constants.
- Site data → Constants: reads · Content registry is parameterized by constants.
- Utils → Types: supports · Utility code operates on shared types.
- Logo script → Brand assets: processes · Asset script works on brand/logo files.