ankushh19/ochi-clone

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.