# leck0000/dentra-website architecture

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

- Interactive diagram: https://gitdiagram.com/leck0000/dentra-website
- Repository: https://github.com/leck0000/dentra-website

## Overview

DENTRA Website is a public-facing presentation site for the DENTRA dental-care platform, not the platform’s clinic-search or dental-screening backend. A visitor opens the landing page and browses product, clinic-finder, trust, installation, and FAQ sections; the clinic finder is explicitly illustrative rather than live clinic data. A scroll-driven 3D camera breakdown is a separate interactive showcase. The graph follows documented imports and calls; backend behavior is not shown, and the README’s responsive-layout capability is not a separate runtime subsystem.

Main entry points: [`app/page.jsx`](https://github.com/leck0000/dentra-website/blob/main/app/page.jsx) (Home page), [`components/icon.jsx`](https://github.com/leck0000/dentra-website/blob/main/components/icon.jsx) (Icon set), [`app/reveal.jsx`](https://github.com/leck0000/dentra-website/blob/main/app/reveal.jsx) (Reveal animation), [`app/hero.jsx`](https://github.com/leck0000/dentra-website/blob/main/app/hero.jsx) (Product introduction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_composition["Landing Page"]
  node_home["Home page<br/>[page.jsx]"]
  node_navigation["Navigation<br/>[nav.jsx]"]
end

subgraph group_capabilities["Product Sections"]
  node_hero["Product introduction<br/>[hero.jsx]"]
  node_how["How it works<br/>[how-it-works.jsx]"]
  node_finder["Clinic finder demo<br/>[find-dentist.jsx]"]
  node_treatments["AI treatments<br/>[treatments-ai.jsx]"]
  node_privacy["Privacy and trust<br/>[privacy-trust.jsx]"]
  node_install["iPhone installation<br/>[install-ios.jsx]"]
  node_faq["FAQ<br/>[faq.jsx]"]
end

subgraph group_device["Device Showcase"]
  node_device_view["Exploded-view interaction"]
  node_device_steps["Device story steps<br/>[steps.js]"]
  node_device_scene["Three.js scene<br/>[scene.js]"]
  node_device_model["3D device model<br/>[model.js]"]
end

subgraph group_shared["Shared Presentation"]
  node_brand["Brand elements<br/>[brand.jsx]"]
  node_icon["Icon set<br/>[icon.jsx]"]
  node_phone["Phone screenshots<br/>[phone.jsx]"]
  node_badges["Store badges<br/>[store-badges.jsx]"]
  node_reveal["Reveal animation<br/>[reveal.jsx]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_navigation
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_device_view
node_home -->|"renders"| node_how
node_home -->|"renders"| node_finder
node_home -->|"renders"| node_treatments
node_home -->|"renders"| node_privacy
node_home -->|"renders"| node_install
node_home -->|"renders"| node_faq
node_home -->|"renders"| node_brand
node_device_view -->|"reads steps"| node_device_steps
node_device_view -->|"loads scene"| node_device_scene
node_device_scene -->|"uses step data"| node_device_steps
node_device_scene -->|"builds model"| node_device_model
node_navigation -->|"uses mark"| node_brand
node_navigation -->|"uses badges"| node_badges
node_hero -->|"uses icons"| node_icon
node_hero -->|"renders phone"| node_phone
node_hero -->|"uses badges"| node_badges
node_how -->|"uses icons"| node_icon
node_how -->|"renders phone"| node_phone
node_how -->|"wraps content"| node_reveal
node_finder -->|"uses icons"| node_icon
node_finder -->|"wraps content"| node_reveal
node_treatments -->|"uses icons"| node_icon
node_treatments -->|"wraps content"| node_reveal
node_privacy -->|"uses icons"| node_icon
node_privacy -->|"wraps content"| node_reveal
node_faq -->|"uses icons"| node_icon
node_faq -->|"uses badges"| node_badges
node_faq -->|"wraps content"| node_reveal
node_install -->|"wraps content"| node_reveal
node_install -->|"uses mark"| node_brand
node_install -->|"uses badge"| node_badges

click node_home "https://github.com/leck0000/dentra-website/blob/main/app/page.jsx"
click node_navigation "https://github.com/leck0000/dentra-website/blob/main/app/nav.jsx"
click node_hero "https://github.com/leck0000/dentra-website/blob/main/app/hero.jsx"
click node_how "https://github.com/leck0000/dentra-website/blob/main/app/how-it-works.jsx"
click node_finder "https://github.com/leck0000/dentra-website/blob/main/app/find-dentist.jsx"
click node_treatments "https://github.com/leck0000/dentra-website/blob/main/app/treatments-ai.jsx"
click node_privacy "https://github.com/leck0000/dentra-website/blob/main/app/privacy-trust.jsx"
click node_install "https://github.com/leck0000/dentra-website/blob/main/app/install-ios.jsx"
click node_faq "https://github.com/leck0000/dentra-website/blob/main/app/faq.jsx"
click node_device_view "https://github.com/leck0000/dentra-website/blob/main/components/device/DeviceExplodedView.jsx"
click node_device_steps "https://github.com/leck0000/dentra-website/blob/main/components/device/steps.js"
click node_device_scene "https://github.com/leck0000/dentra-website/blob/main/components/device/scene/scene.js"
click node_device_model "https://github.com/leck0000/dentra-website/blob/main/components/device/scene/model.js"
click node_brand "https://github.com/leck0000/dentra-website/blob/main/components/brand.jsx"
click node_icon "https://github.com/leck0000/dentra-website/blob/main/components/icon.jsx"
click node_phone "https://github.com/leck0000/dentra-website/blob/main/components/phone.jsx"
click node_badges "https://github.com/leck0000/dentra-website/blob/main/components/store-badges.jsx"
click node_reveal "https://github.com/leck0000/dentra-website/blob/main/app/reveal.jsx"

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_navigation toneBlue
class node_hero,node_how,node_finder,node_treatments,node_privacy,node_install,node_faq toneAmber
class node_device_view,node_device_steps,node_device_scene,node_device_model toneMint
class node_brand,node_icon,node_phone,node_badges,node_reveal toneRose
class node_visitor toneIndigo
```

## Components

### Landing Page

- [Home page](https://github.com/leck0000/dentra-website/blob/main/app/page.jsx): `app/page.jsx`
- [Navigation](https://github.com/leck0000/dentra-website/blob/main/app/nav.jsx): `app/nav.jsx`

### Product Sections

- [Product introduction](https://github.com/leck0000/dentra-website/blob/main/app/hero.jsx): `app/hero.jsx`
- [How it works](https://github.com/leck0000/dentra-website/blob/main/app/how-it-works.jsx): `app/how-it-works.jsx`
- [Clinic finder demo](https://github.com/leck0000/dentra-website/blob/main/app/find-dentist.jsx): `app/find-dentist.jsx`
- [AI treatments](https://github.com/leck0000/dentra-website/blob/main/app/treatments-ai.jsx): `app/treatments-ai.jsx`
- [Privacy and trust](https://github.com/leck0000/dentra-website/blob/main/app/privacy-trust.jsx): `app/privacy-trust.jsx`
- [iPhone installation](https://github.com/leck0000/dentra-website/blob/main/app/install-ios.jsx): `app/install-ios.jsx`
- [FAQ](https://github.com/leck0000/dentra-website/blob/main/app/faq.jsx): `app/faq.jsx`

### Device Showcase

- [Exploded-view interaction](https://github.com/leck0000/dentra-website/blob/main/components/device/DeviceExplodedView.jsx): `components/device/DeviceExplodedView.jsx`
- [Device story steps](https://github.com/leck0000/dentra-website/blob/main/components/device/steps.js): `components/device/steps.js`
- [Three.js scene](https://github.com/leck0000/dentra-website/blob/main/components/device/scene/scene.js): `components/device/scene/scene.js`
- [3D device model](https://github.com/leck0000/dentra-website/blob/main/components/device/scene/model.js): `components/device/scene/model.js`

### Shared Presentation

- [Brand elements](https://github.com/leck0000/dentra-website/blob/main/components/brand.jsx): `components/brand.jsx`
- [Icon set](https://github.com/leck0000/dentra-website/blob/main/components/icon.jsx): `components/icon.jsx`
- [Phone screenshots](https://github.com/leck0000/dentra-website/blob/main/components/phone.jsx): `components/phone.jsx`
- [Store badges](https://github.com/leck0000/dentra-website/blob/main/components/store-badges.jsx): `components/store-badges.jsx`
- [Reveal animation](https://github.com/leck0000/dentra-website/blob/main/app/reveal.jsx): `app/reveal.jsx`

### Other components

- **Site visitor**

## Connections

- Site visitor → Home page: opens (evidence: `README.md`)
- Home page → Navigation: renders (evidence: `app/page.jsx`)
- Home page → Product introduction: renders (evidence: `app/page.jsx`)
- Home page → Exploded-view interaction: renders (evidence: `app/page.jsx`)
- Home page → How it works: renders (evidence: `app/page.jsx`)
- Home page → Clinic finder demo: renders (evidence: `app/page.jsx`)
- Home page → AI treatments: renders (evidence: `app/page.jsx`)
- Home page → Privacy and trust: renders (evidence: `app/page.jsx`)
- Home page → iPhone installation: renders (evidence: `app/page.jsx`)
- Home page → FAQ: renders (evidence: `app/page.jsx`)
- Home page → Brand elements: renders (evidence: `app/page.jsx`)
- Exploded-view interaction → Device story steps: reads steps (evidence: `components/device/DeviceExplodedView.jsx`)
- Exploded-view interaction → Three.js scene: loads scene (evidence: `components/device/DeviceExplodedView.jsx`)
- Three.js scene → Device story steps: uses step data (evidence: `components/device/scene/scene.js`)
- Three.js scene → 3D device model: builds model (evidence: `components/device/scene/scene.js`)
- Navigation → Brand elements: uses mark (evidence: `app/nav.jsx`)
- Navigation → Store badges: uses badges (evidence: `app/nav.jsx`)
- Product introduction → Icon set: uses icons (evidence: `app/hero.jsx`)
- Product introduction → Phone screenshots: renders phone (evidence: `app/hero.jsx`)
- Product introduction → Store badges: uses badges (evidence: `app/hero.jsx`)
- How it works → Icon set: uses icons (evidence: `app/how-it-works.jsx`)
- How it works → Phone screenshots: renders phone (evidence: `app/how-it-works.jsx`)
- How it works → Reveal animation: wraps content (evidence: `app/how-it-works.jsx`)
- Clinic finder demo → Icon set: uses icons (evidence: `app/find-dentist.jsx`)
- Clinic finder demo → Reveal animation: wraps content (evidence: `app/find-dentist.jsx`)
- AI treatments → Icon set: uses icons (evidence: `app/treatments-ai.jsx`)
- AI treatments → Reveal animation: wraps content (evidence: `app/treatments-ai.jsx`)
- Privacy and trust → Icon set: uses icons (evidence: `app/privacy-trust.jsx`)
- Privacy and trust → Reveal animation: wraps content (evidence: `app/privacy-trust.jsx`)
- FAQ → Icon set: uses icons (evidence: `app/faq.jsx`)
- FAQ → Store badges: uses badges (evidence: `app/faq.jsx`)
- FAQ → Reveal animation: wraps content (evidence: `app/faq.jsx`)
- iPhone installation → Reveal animation: wraps content (evidence: `app/install-ios.jsx`)
- iPhone installation → Brand elements: uses mark (evidence: `app/install-ios.jsx`)
- iPhone installation → Store badges: uses badge (evidence: `app/install-ios.jsx`)