# elceo23x4/8dat architecture

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

- Interactive diagram: https://gitdiagram.com/elceo23x4/8dat
- Repository: https://github.com/elceo23x4/8dat

## Overview

8DAT is a cinematic, multipage agency portfolio and service website. Visitors explore the home page and portfolio, browse agency and consulting pages, then follow calls to action toward contact; navigation links use a mascot transition. The graph also captures the investment page’s demo chart and mock assistant, and the about page’s flipbook. Arrows are limited to README statements and relationships visible in the supplied source index or excerpts; unsampled page details are not inferred.

Main entry points: [`src/components/layout/Header.tsx`](https://github.com/elceo23x4/8dat/blob/main/src/components/layout/Header.tsx) (Positioned header), [`src/components/layout/Footer.tsx`](https://github.com/elceo23x4/8dat/blob/main/src/components/layout/Footer.tsx) (Site footer), [`src/hooks/useInteraction.ts`](https://github.com/elceo23x4/8dat/blob/main/src/hooks/useInteraction.ts) (Interaction effects), [`src/app/page.tsx`](https://github.com/elceo23x4/8dat/blob/main/src/app/page.tsx) (Home)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Pages & Services"]
  node_home["Home<br/>[page.tsx]"]
  node_about["About<br/>[page.tsx]"]
  node_works["Our works<br/>[page.tsx]"]
  node_branding["Branding<br/>[page.tsx]"]
  node_agro["Agro consults<br/>[page.tsx]"]
  node_business["Business consults<br/>[page.tsx]"]
  node_investment["Investment advisory<br/>[page.tsx]"]
  node_contact["Contact<br/>[page.tsx]"]
end

subgraph group_navigation["Navigation &amp; Motion"]
  node_header["Positioned header<br/>[Header.tsx]"]
  node_navigationmenu["Navigation menu<br/>[Navigation.tsx]"]
  node_transitionlink["Transition link<br/>[TransitionLink.tsx]"]
  node_mascottransition["Mascot transition"]
end

subgraph group_visuals["Page Experiences"]
  node_puppy["Pirate puppy<br/>[PiratePuppy.tsx]"]
  node_monitor["3D hero monitor<br/>[HeroMonitor.tsx]"]
  node_flipbook["Review flipbook<br/>[FlipBook.tsx]"]
  node_chart["Demo market chart<br/>[page.tsx]"]
  node_assistant["Mock market assistant<br/>[page.tsx]"]
end

subgraph group_shared["Shared UI &amp; Data"]
  node_footer["Site footer<br/>[Footer.tsx]"]
  node_interaction["Interaction effects<br/>[useInteraction.ts]"]
  node_contentdata["Site &amp; demo data<br/>[data.ts]"]
  node_transitionconfig["Mascot transition config"]
end

node_visitor(("Site visitor"))
node_marketendpoint["Market analyst endpoint"]

node_visitor -->|"opens site"| node_home
node_visitor -->|"visits"| node_about
node_visitor -->|"visits"| node_works
node_visitor -->|"visits"| node_branding
node_visitor -->|"visits"| node_agro
node_visitor -->|"visits"| node_business
node_visitor -->|"visits"| node_investment
node_visitor -->|"visits"| node_contact
node_home -->|"renders"| node_header
node_home -->|"renders"| node_footer
node_home -->|"renders"| node_monitor
node_home -->|"renders"| node_puppy
node_home -->|"uses effects"| node_interaction
node_about -->|"renders"| node_header
node_about -->|"renders"| node_footer
node_about -->|"renders"| node_flipbook
node_about -->|"uses effects"| node_interaction
node_works -->|"renders"| node_header
node_works -->|"renders"| node_footer
node_works -->|"renders"| node_puppy
node_works -->|"reads data"| node_contentdata
node_works -->|"uses effects"| node_interaction
node_branding -->|"renders"| node_header
node_branding -->|"renders"| node_footer
node_branding -->|"reads data"| node_contentdata
node_branding -->|"uses effects"| node_interaction
node_agro -->|"renders"| node_header
node_agro -->|"renders"| node_footer
node_agro -->|"renders"| node_puppy
node_agro -->|"uses effects"| node_interaction
node_business -->|"renders"| node_header
node_business -->|"renders"| node_footer
node_business -->|"uses effects"| node_interaction
node_investment -->|"renders"| node_header
node_investment -->|"renders"| node_footer
node_investment -->|"reads chart data"| node_contentdata
node_investment -->|"uses effects"| node_interaction
node_investment -->|"posts messages"| node_marketendpoint
node_contact -->|"renders"| node_header
node_contact -->|"renders"| node_footer
node_contact -->|"reads data"| node_contentdata
node_contact -->|"uses effects"| node_interaction
node_header -->|"renders"| node_navigationmenu
node_header -->|"renders"| node_transitionlink
node_navigationmenu -->|"renders"| node_transitionlink
node_transitionlink -->|"calls navigation"| node_mascottransition
node_mascottransition -->|"uses mascot"| node_puppy
node_mascottransition -->|"reads config"| node_transitionconfig

click node_home "https://github.com/elceo23x4/8dat/blob/main/src/app/page.tsx"
click node_about "https://github.com/elceo23x4/8dat/blob/main/src/app/about/page.tsx"
click node_works "https://github.com/elceo23x4/8dat/blob/main/src/app/our-works/page.tsx"
click node_branding "https://github.com/elceo23x4/8dat/blob/main/src/app/branding/page.tsx"
click node_agro "https://github.com/elceo23x4/8dat/blob/main/src/app/agro-consults/page.tsx"
click node_business "https://github.com/elceo23x4/8dat/blob/main/src/app/business-consults/page.tsx"
click node_investment "https://github.com/elceo23x4/8dat/blob/main/src/app/investment-advisory/page.tsx"
click node_contact "https://github.com/elceo23x4/8dat/blob/main/src/app/contact/page.tsx"
click node_header "https://github.com/elceo23x4/8dat/blob/main/src/components/layout/Header.tsx"
click node_navigationmenu "https://github.com/elceo23x4/8dat/blob/main/src/components/navigation/Navigation.tsx"
click node_transitionlink "https://github.com/elceo23x4/8dat/blob/main/src/components/layout/TransitionLink.tsx"
click node_mascottransition "https://github.com/elceo23x4/8dat/blob/main/src/components/layout/MascotTransition.tsx"
click node_puppy "https://github.com/elceo23x4/8dat/blob/main/src/components/mascot/PiratePuppy.tsx"
click node_monitor "https://github.com/elceo23x4/8dat/blob/main/src/components/3d/HeroMonitor.tsx"
click node_flipbook "https://github.com/elceo23x4/8dat/blob/main/src/components/three/FlipBook.tsx"
click node_chart "https://github.com/elceo23x4/8dat/blob/main/src/app/investment-advisory/page.tsx"
click node_assistant "https://github.com/elceo23x4/8dat/blob/main/src/app/investment-advisory/page.tsx"
click node_footer "https://github.com/elceo23x4/8dat/blob/main/src/components/layout/Footer.tsx"
click node_interaction "https://github.com/elceo23x4/8dat/blob/main/src/hooks/useInteraction.ts"
click node_contentdata "https://github.com/elceo23x4/8dat/blob/main/src/lib/data.ts"
click node_transitionconfig "https://github.com/elceo23x4/8dat/blob/main/src/lib/mascotTransitions.ts"

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_home,node_about,node_works,node_branding,node_agro,node_business,node_investment,node_contact toneBlue
class node_header,node_navigationmenu,node_transitionlink,node_mascottransition toneAmber
class node_puppy,node_monitor,node_flipbook,node_chart,node_assistant toneMint
class node_footer,node_interaction,node_contentdata,node_transitionconfig toneRose
class node_visitor,node_marketendpoint toneIndigo
```

## Components

### Pages & Services

- [Home](https://github.com/elceo23x4/8dat/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [About](https://github.com/elceo23x4/8dat/blob/main/src/app/about/page.tsx): `src/app/about/page.tsx`
- [Our works](https://github.com/elceo23x4/8dat/blob/main/src/app/our-works/page.tsx): `src/app/our-works/page.tsx`
- [Branding](https://github.com/elceo23x4/8dat/blob/main/src/app/branding/page.tsx): `src/app/branding/page.tsx`
- [Agro consults](https://github.com/elceo23x4/8dat/blob/main/src/app/agro-consults/page.tsx): `src/app/agro-consults/page.tsx`
- [Business consults](https://github.com/elceo23x4/8dat/blob/main/src/app/business-consults/page.tsx): `src/app/business-consults/page.tsx`
- [Investment advisory](https://github.com/elceo23x4/8dat/blob/main/src/app/investment-advisory/page.tsx): `src/app/investment-advisory/page.tsx`
- [Contact](https://github.com/elceo23x4/8dat/blob/main/src/app/contact/page.tsx): `src/app/contact/page.tsx`

### Navigation & Motion

- [Positioned header](https://github.com/elceo23x4/8dat/blob/main/src/components/layout/Header.tsx): `src/components/layout/Header.tsx`
- [Navigation menu](https://github.com/elceo23x4/8dat/blob/main/src/components/navigation/Navigation.tsx): `src/components/navigation/Navigation.tsx`
- [Transition link](https://github.com/elceo23x4/8dat/blob/main/src/components/layout/TransitionLink.tsx): `src/components/layout/TransitionLink.tsx`
- [Mascot transition](https://github.com/elceo23x4/8dat/blob/main/src/components/layout/MascotTransition.tsx): `src/components/layout/MascotTransition.tsx`

### Page Experiences

- [Pirate puppy](https://github.com/elceo23x4/8dat/blob/main/src/components/mascot/PiratePuppy.tsx): `src/components/mascot/PiratePuppy.tsx`
- [3D hero monitor](https://github.com/elceo23x4/8dat/blob/main/src/components/3d/HeroMonitor.tsx): `src/components/3d/HeroMonitor.tsx`
- [Review flipbook](https://github.com/elceo23x4/8dat/blob/main/src/components/three/FlipBook.tsx): `src/components/three/FlipBook.tsx`
- [Demo market chart](https://github.com/elceo23x4/8dat/blob/main/src/app/investment-advisory/page.tsx): `src/app/investment-advisory/page.tsx`
- [Mock market assistant](https://github.com/elceo23x4/8dat/blob/main/src/app/investment-advisory/page.tsx): `src/app/investment-advisory/page.tsx`

### Shared UI & Data

- [Site footer](https://github.com/elceo23x4/8dat/blob/main/src/components/layout/Footer.tsx): `src/components/layout/Footer.tsx`
- [Interaction effects](https://github.com/elceo23x4/8dat/blob/main/src/hooks/useInteraction.ts): `src/hooks/useInteraction.ts`
- [Site & demo data](https://github.com/elceo23x4/8dat/blob/main/src/lib/data.ts): `src/lib/data.ts`
- [Mascot transition config](https://github.com/elceo23x4/8dat/blob/main/src/lib/mascotTransitions.ts): `src/lib/mascotTransitions.ts`

### Other components

- **Site visitor**
- **Market analyst endpoint**

## Connections

- Site visitor → Home: opens site (evidence: `README.md`)
- Site visitor → About: visits (evidence: `README.md`)
- Site visitor → Our works: visits (evidence: `README.md`)
- Site visitor → Branding: visits (evidence: `README.md`)
- Site visitor → Agro consults: visits (evidence: `README.md`)
- Site visitor → Business consults: visits (evidence: `README.md`)
- Site visitor → Investment advisory: visits (evidence: `README.md`)
- Site visitor → Contact: visits (evidence: `README.md`)
- Home → Positioned header: renders (evidence: `src/app/page.tsx`)
- Home → Site footer: renders (evidence: `src/app/page.tsx`)
- Home → 3D hero monitor: renders (evidence: `src/app/page.tsx`)
- Home → Pirate puppy: renders (evidence: `src/app/page.tsx`)
- Home → Interaction effects: uses effects (evidence: `src/app/page.tsx`)
- About → Positioned header: renders (evidence: `src/app/about/page.tsx`)
- About → Site footer: renders (evidence: `src/app/about/page.tsx`)
- About → Review flipbook: renders (evidence: `src/app/about/page.tsx`)
- About → Interaction effects: uses effects (evidence: `src/app/about/page.tsx`)
- Our works → Positioned header: renders (evidence: `src/app/our-works/page.tsx`)
- Our works → Site footer: renders (evidence: `src/app/our-works/page.tsx`)
- Our works → Pirate puppy: renders (evidence: `src/app/our-works/page.tsx`)
- Our works → Site & demo data: reads data (evidence: `src/app/our-works/page.tsx`)
- Our works → Interaction effects: uses effects (evidence: `src/app/our-works/page.tsx`)
- Branding → Positioned header: renders (evidence: `src/app/branding/page.tsx`)
- Branding → Site footer: renders (evidence: `src/app/branding/page.tsx`)
- Branding → Site & demo data: reads data (evidence: `src/app/branding/page.tsx`)
- Branding → Interaction effects: uses effects (evidence: `src/app/branding/page.tsx`)
- Agro consults → Positioned header: renders (evidence: `src/app/agro-consults/page.tsx`)
- Agro consults → Site footer: renders (evidence: `src/app/agro-consults/page.tsx`)
- Agro consults → Pirate puppy: renders (evidence: `src/app/agro-consults/page.tsx`)
- Agro consults → Interaction effects: uses effects (evidence: `src/app/agro-consults/page.tsx`)
- Business consults → Positioned header: renders (evidence: `src/app/business-consults/page.tsx`)
- Business consults → Site footer: renders (evidence: `src/app/business-consults/page.tsx`)
- Business consults → Interaction effects: uses effects (evidence: `src/app/business-consults/page.tsx`)
- Investment advisory → Positioned header: renders (evidence: `src/app/investment-advisory/page.tsx`)
- Investment advisory → Site footer: renders (evidence: `src/app/investment-advisory/page.tsx`)
- Investment advisory → Site & demo data: reads chart data (evidence: `src/app/investment-advisory/page.tsx`)
- Investment advisory → Interaction effects: uses effects (evidence: `src/app/investment-advisory/page.tsx`)
- Investment advisory → Market analyst endpoint: posts messages (evidence: `src/app/investment-advisory/page.tsx`)
- Contact → Positioned header: renders (evidence: `src/app/contact/page.tsx`)
- Contact → Site footer: renders (evidence: `src/app/contact/page.tsx`)
- Contact → Site & demo data: reads data (evidence: `src/app/contact/page.tsx`)
- Contact → Interaction effects: uses effects (evidence: `src/app/contact/page.tsx`)
- Positioned header → Navigation menu: renders (evidence: `src/components/layout/Header.tsx`)
- Positioned header → Transition link: renders (evidence: `src/components/layout/Header.tsx`)
- Navigation menu → Transition link: renders (evidence: `src/components/navigation/Navigation.tsx`)
- Transition link → Mascot transition: calls navigation (evidence: `src/components/layout/TransitionLink.tsx`)
- Mascot transition → Pirate puppy: uses mascot (evidence: `src/components/layout/MascotTransition.tsx`)
- Mascot transition → Mascot transition config: reads config (evidence: `src/components/layout/MascotTransition.tsx`)