# ankushh19/ochi-clone architecture

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

- Interactive diagram: https://gitdiagram.com/ankushh19/ochi-clone
- Repository: https://github.com/ankushh19/ochi-clone

## Overview

#### Purpose and Runtime
This is a static, multi-page clone of the Ochi agency site. It runs as a Next.js Pages Router application using React and TypeScript, styled with Tailwind/global CSS and animated with GSAP, Framer Motion, and Locomotive Scroll. Media is served from `public/homevideo.mp4` and `public/workizvideo.mp4`.

#### Application Entry and Page Composition
Next.js bootstraps shared application and document behavior through `pages/_app.tsx` and `pages/_document.tsx`. Route files are thin page-level assemblers that compose domain containers, including:
- Home: `pages/index.tsx`
- Services: `pages/services/index.tsx`
- Case/work detail: `pages/case/index.tsx`
- Contact: `pages/contact/index.tsx`
- Team, insights, and presentation: `pages/ochi-team/index.tsx`, `pages/insights/index.tsx`, `pages/presentation/index.tsx`

#### Page Container Layer
The `container/` hierarchy is the primary content architecture: each folder groups ordered, full-width sections for a route rather than implementing routing itself.
- Home sections: `container/home-page/Hero.tsx`, `container/home-page/Projects.tsx`, `container/home-page/Video.tsx`
- Services narrative: `container/services-page/Hero.tsx`, `container/services-page/Process.tsx`, `container/services-page/Archive.tsx`
- Workiz case-study flow: `container/workiz-page/Hero.tsx`, `container/workiz-page/Chelenge.tsx`, `container/workiz-page/Result.tsx`
- About/contact content: `container/about-page/About.tsx`, `container/about-page/Team.tsx`, `container/contact-page/Form.tsx`

#### Shared UI and Site Shell
Reusable presentational components supply consistent navigation, footer, typography, cards, media, and interaction affordances across containers. The likely site shell is formed by `components/Navbar.tsx`, `components/MobileNav.tsx`, and `components/Footer.tsx`. Content modules such as `components/ProjectCard.tsx`, `components/PlayVideo.tsx`, and `components/Marquee.tsx` encapsulate repeated visual patterns. Barrel exports in `components/index.ts` and `container/index.ts` define the intended import boundary.

#### Motion and Interaction Boundary
Animation is separated from page sections into reusable React animation primitives and a motion module:
- Hover/text effects: `animation/LinkHover.tsx`, `animation/TextHover.tsx`, `animation/TextMask.tsx`
- Brand/continuous movement: `animation/LogoMarquee.tsx`
- Motion exports: `motion/index.ts`
- Interactive visual component: `components/Eyes.tsx`

Containers compose these primitives around content; animation libraries should remain behind these components rather than spreading imperative animation logic through route files.

#### Data, Assets, and Styling
Content appears locally authored in components and shared constants/types rather than fetched from a backend. Shared values and type contracts reside in `constants/index.ts` and `types/index.ts`. Global visual rules enter through `styles/globals.css`, with Tailwind configured by `tailwind.config.ts`. Public assets are directly consumed from `public/`, while `public/index.ts` may centralize asset references.

#### Infrastructure Constraints
There is no visible API, database, authentication layer, CMS, or external service integration. Deployment is standard Next.js infrastructure, configured through `next.config.mjs`; rendering and interaction are primarily client-side due to scroll and animation dependencies.

Main entry points: [`pages/_app.tsx`](https://github.com/ankushh19/ochi-clone/blob/main/pages/_app.tsx) (App bootstrap), [`components/ProjectCard.tsx`](https://github.com/ankushh19/ochi-clone/blob/main/components/ProjectCard.tsx) (Content components), [`container/home-page/Hero.tsx`](https://github.com/ankushh19/ochi-clone/blob/main/container/home-page/Hero.tsx) (Home sections), [`container/workiz-page/Hero.tsx`](https://github.com/ankushh19/ochi-clone/blob/main/container/workiz-page/Hero.tsx) (Workiz case sections)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Next.js runtime"]
  node_next{{"Next.js Pages Router<br/>runtime<br/>[next.config.mjs]"}}
  node_app["App bootstrap<br/>app wrapper<br/>[_app.tsx]"]
  node_document["Document bootstrap<br/>document wrapper<br/>[_document.tsx]"]
end

subgraph group_routes["Route assembly"]
  node_home_route["Home route<br/>page assembler<br/>[index.tsx]"]
  node_services_route["Services route<br/>page assembler<br/>[index.tsx]"]
  node_case_route["Workiz case route<br/>page assembler<br/>[index.tsx]"]
  node_other_routes["Content routes<br/>page assemblers<br/>[index.tsx]"]
end

subgraph group_containers["Page containers"]
  node_home_sections["Home sections<br/>container set<br/>[Hero.tsx]"]
  node_services_sections["Services sections<br/>container set<br/>[Hero.tsx]"]
  node_workiz_sections["Workiz case sections<br/>container set<br/>[Hero.tsx]"]
  node_about_contact_sections["About and contact sections<br/>container set<br/>[About.tsx]"]
  node_container_barrel["Container boundary<br/>barrel export<br/>[index.ts]"]
end

subgraph group_ui["Shared UI and motion"]
  node_site_shell["Site shell<br/>shared layout<br/>[Navbar.tsx]"]
  node_content_components["Content components<br/>shared UI<br/>[ProjectCard.tsx]"]
  node_animation_primitives["Animation primitives<br/>interaction UI<br/>[LinkHover.tsx]"]
  node_motion_boundary["Motion module<br/>motion exports<br/>[index.ts]"]
  node_eyes["Eyes interaction<br/>interactive visual<br/>[Eyes.tsx]"]
  node_component_barrel["Component boundary<br/>barrel export<br/>[index.ts]"]
end

subgraph group_content["Content, assets, styling"]
  node_content_contracts["Content contracts<br/>constants and types<br/>[index.ts]"]
  node_styles["Global styling<br/>CSS and Tailwind<br/>[globals.css]"]
  node_media["Public media<br/>static assets<br/>[homevideo.mp4]"]
end

node_next -->|"boots"| node_app
node_next -->|"renders with"| node_document
node_app -->|"wraps"| node_home_route
node_app -->|"wraps"| node_services_route
node_app -->|"wraps"| node_case_route
node_app -->|"wraps"| node_other_routes
node_home_route -->|"assembles"| node_home_sections
node_services_route -->|"assembles"| node_services_sections
node_case_route -->|"assembles"| node_workiz_sections
node_other_routes -->|"assembles"| node_about_contact_sections
node_container_barrel -->|"exports"| node_home_sections
node_container_barrel -->|"exports"| node_services_sections
node_container_barrel -->|"exports"| node_workiz_sections
node_home_sections -->|"uses"| node_content_components
node_services_sections -->|"uses"| node_content_components
node_workiz_sections -->|"uses"| node_content_components
node_about_contact_sections -->|"uses"| node_content_components
node_home_sections -->|"composes"| node_animation_primitives
node_services_sections -->|"composes"| node_animation_primitives
node_workiz_sections -->|"composes"| node_animation_primitives
node_animation_primitives -->|"uses"| node_motion_boundary
node_content_components -->|"includes"| node_eyes
node_component_barrel -->|"exports"| node_site_shell
node_component_barrel -->|"exports"| node_content_components
node_app -->|"applies"| node_site_shell
node_app -->|"loads"| node_styles
node_content_components -->|"uses"| node_content_contracts
node_home_sections -->|"plays"| node_media
node_workiz_sections -->|"plays"| node_media
node_styles -.->|"styled by Tailwind config"| node_next

click node_next "https://github.com/ankushh19/ochi-clone/blob/main/next.config.mjs"
click node_app "https://github.com/ankushh19/ochi-clone/blob/main/pages/_app.tsx"
click node_document "https://github.com/ankushh19/ochi-clone/blob/main/pages/_document.tsx"
click node_home_route "https://github.com/ankushh19/ochi-clone/blob/main/pages/index.tsx"
click node_services_route "https://github.com/ankushh19/ochi-clone/blob/main/pages/services/index.tsx"
click node_case_route "https://github.com/ankushh19/ochi-clone/blob/main/pages/case/index.tsx"
click node_other_routes "https://github.com/ankushh19/ochi-clone/blob/main/pages/contact/index.tsx"
click node_home_sections "https://github.com/ankushh19/ochi-clone/blob/main/container/home-page/Hero.tsx"
click node_services_sections "https://github.com/ankushh19/ochi-clone/blob/main/container/services-page/Hero.tsx"
click node_workiz_sections "https://github.com/ankushh19/ochi-clone/blob/main/container/workiz-page/Hero.tsx"
click node_about_contact_sections "https://github.com/ankushh19/ochi-clone/blob/main/container/about-page/About.tsx"
click node_container_barrel "https://github.com/ankushh19/ochi-clone/blob/main/container/index.ts"
click node_site_shell "https://github.com/ankushh19/ochi-clone/blob/main/components/Navbar.tsx"
click node_content_components "https://github.com/ankushh19/ochi-clone/blob/main/components/ProjectCard.tsx"
click node_animation_primitives "https://github.com/ankushh19/ochi-clone/blob/main/animation/LinkHover.tsx"
click node_motion_boundary "https://github.com/ankushh19/ochi-clone/blob/main/motion/index.ts"
click node_eyes "https://github.com/ankushh19/ochi-clone/blob/main/components/Eyes.tsx"
click node_component_barrel "https://github.com/ankushh19/ochi-clone/blob/main/components/index.ts"
click node_content_contracts "https://github.com/ankushh19/ochi-clone/blob/main/constants/index.ts"
click node_styles "https://github.com/ankushh19/ochi-clone/blob/main/styles/globals.css"
click node_media "https://github.com/ankushh19/ochi-clone/blob/main/public/homevideo.mp4"

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_next,node_app,node_document toneBlue
class node_home_route,node_services_route,node_case_route,node_other_routes toneAmber
class node_home_sections,node_services_sections,node_workiz_sections,node_about_contact_sections,node_container_barrel toneMint
class node_site_shell,node_content_components,node_animation_primitives,node_motion_boundary,node_eyes,node_component_barrel toneRose
class node_content_contracts,node_styles,node_media toneIndigo
```

## Components

### Next.js runtime

- [Next.js Pages Router](https://github.com/ankushh19/ochi-clone/blob/main/next.config.mjs): runtime · Static multi-page React application runtime. · `next.config.mjs`
- [App bootstrap](https://github.com/ankushh19/ochi-clone/blob/main/pages/_app.tsx): app wrapper · `pages/_app.tsx`
- [Document bootstrap](https://github.com/ankushh19/ochi-clone/blob/main/pages/_document.tsx): document wrapper · `pages/_document.tsx`

### Route assembly

- [Home route](https://github.com/ankushh19/ochi-clone/blob/main/pages/index.tsx): page assembler · `pages/index.tsx`
- [Services route](https://github.com/ankushh19/ochi-clone/blob/main/pages/services/index.tsx): page assembler · `pages/services/index.tsx`
- [Workiz case route](https://github.com/ankushh19/ochi-clone/blob/main/pages/case/index.tsx): page assembler · `pages/case/index.tsx`
- [Content routes](https://github.com/ankushh19/ochi-clone/blob/main/pages/contact/index.tsx): page assemblers · Contact, team, insights, and presentation pages. · `pages/contact/index.tsx`

### Page containers

Ordered full-width route sections.

- [Home sections](https://github.com/ankushh19/ochi-clone/blob/main/container/home-page/Hero.tsx): container set · Hero, projects, and video sections. · `container/home-page/Hero.tsx`
- [Services sections](https://github.com/ankushh19/ochi-clone/blob/main/container/services-page/Hero.tsx): container set · Hero, process, and archive narrative. · `container/services-page/Hero.tsx`
- [Workiz case sections](https://github.com/ankushh19/ochi-clone/blob/main/container/workiz-page/Hero.tsx): container set · Hero, challenge, and result flow. · `container/workiz-page/Hero.tsx`
- [About and contact sections](https://github.com/ankushh19/ochi-clone/blob/main/container/about-page/About.tsx): container set · About, team, and form content. · `container/about-page/About.tsx`
- [Container boundary](https://github.com/ankushh19/ochi-clone/blob/main/container/index.ts): barrel export · `container/index.ts`

### Shared UI and motion

- [Site shell](https://github.com/ankushh19/ochi-clone/blob/main/components/Navbar.tsx): shared layout · Navigation and footer shared across pages. · `components/Navbar.tsx`
- [Content components](https://github.com/ankushh19/ochi-clone/blob/main/components/ProjectCard.tsx): shared UI · Reusable cards, video controls, and marquees. · `components/ProjectCard.tsx`
- [Animation primitives](https://github.com/ankushh19/ochi-clone/blob/main/animation/LinkHover.tsx): interaction UI · Reusable hover, text-mask, and marquee effects. · `animation/LinkHover.tsx`
- [Motion module](https://github.com/ankushh19/ochi-clone/blob/main/motion/index.ts): motion exports · Encapsulates animation library access. · `motion/index.ts`
- [Eyes interaction](https://github.com/ankushh19/ochi-clone/blob/main/components/Eyes.tsx): interactive visual · `components/Eyes.tsx`
- [Component boundary](https://github.com/ankushh19/ochi-clone/blob/main/components/index.ts): barrel export · `components/index.ts`

### Content, assets, styling

- [Content contracts](https://github.com/ankushh19/ochi-clone/blob/main/constants/index.ts): constants and types · Locally authored shared values and type contracts. · `constants/index.ts`
- [Global styling](https://github.com/ankushh19/ochi-clone/blob/main/styles/globals.css): CSS and Tailwind · `styles/globals.css`
- [Public media](https://github.com/ankushh19/ochi-clone/blob/main/public/homevideo.mp4): static assets · Home and Workiz videos are served directly. · `public/homevideo.mp4`

## Connections

- Next.js Pages Router → App bootstrap: boots
- Next.js Pages Router → Document bootstrap: renders with
- App bootstrap → Home route: wraps
- App bootstrap → Services route: wraps
- App bootstrap → Workiz case route: wraps
- App bootstrap → Content routes: wraps
- Home route → Home sections: assembles
- Services route → Services sections: assembles
- Workiz case route → Workiz case sections: assembles
- Content routes → About and contact sections: assembles
- Container boundary → Home sections: exports
- Container boundary → Services sections: exports
- Container boundary → Workiz case sections: exports
- Home sections → Content components: uses
- Services sections → Content components: uses
- Workiz case sections → Content components: uses
- About and contact sections → Content components: uses
- Home sections → Animation primitives: composes
- Services sections → Animation primitives: composes
- Workiz case sections → Animation primitives: composes
- Animation primitives → Motion module: uses
- Content components → Eyes interaction: includes
- Component boundary → Site shell: exports
- Component boundary → Content components: exports
- App bootstrap → Site shell: applies
- App bootstrap → Global styling: loads
- Content components → Content contracts: uses
- Home sections → Public media: plays
- Workiz case sections → Public media: plays
- Global styling → Next.js Pages Router: styled by Tailwind config