How elceo23x4/8dat works
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: Header.tsx Positioned header · Footer.tsx Site footer · useInteraction.ts Interaction effects · page.tsx Home
Components 23
Pages & Services
- Home
src/app/page.tsx - About
src/app/about/page.tsx - Our works
src/app/our-works/page.tsx - Branding
src/app/branding/page.tsx - Agro consults
src/app/agro-consults/page.tsx - Business consults
src/app/business-consults/page.tsx - Investment advisory
src/app/investment-advisory/page.tsx - Contact
src/app/contact/page.tsx
Navigation & Motion
- Positioned header
src/components/layout/Header.tsx - Navigation menu
src/components/navigation/Navigation.tsx - Transition link
src/components/layout/TransitionLink.tsx - Mascot transition
src/components/layout/MascotTransition.tsx
Page Experiences
- Pirate puppy
src/components/mascot/PiratePuppy.tsx - 3D hero monitor
src/components/3d/HeroMonitor.tsx - Review flipbook
src/components/three/FlipBook.tsx - Demo market chart
src/app/investment-advisory/page.tsx - Mock market assistant
src/app/investment-advisory/page.tsx
Shared UI & Data
- Site footer
src/components/layout/Footer.tsx - Interaction effects
src/hooks/useInteraction.ts - Site & demo data
src/lib/data.ts - Mascot transition config
src/lib/mascotTransitions.ts
Other components
- Site visitor
- Market analyst endpoint
Connections 48
- Site visitor → Home: opens site
README.md - Site visitor → About: visits
README.md - Site visitor → Our works: visits
README.md - Site visitor → Branding: visits
README.md - Site visitor → Agro consults: visits
README.md - Site visitor → Business consults: visits
README.md - Site visitor → Investment advisory: visits
README.md - Site visitor → Contact: visits
README.md - Home → Positioned header: renders
src/app/page.tsx - Home → Site footer: renders
src/app/page.tsx - Home → 3D hero monitor: renders
src/app/page.tsx - Home → Pirate puppy: renders
src/app/page.tsx - Home → Interaction effects: uses effects
src/app/page.tsx - About → Positioned header: renders
src/app/about/page.tsx - About → Site footer: renders
src/app/about/page.tsx - About → Review flipbook: renders
src/app/about/page.tsx - About → Interaction effects: uses effects
src/app/about/page.tsx - Our works → Positioned header: renders
src/app/our-works/page.tsx - Our works → Site footer: renders
src/app/our-works/page.tsx - Our works → Pirate puppy: renders
src/app/our-works/page.tsx - Our works → Site & demo data: reads data
src/app/our-works/page.tsx - Our works → Interaction effects: uses effects
src/app/our-works/page.tsx - Branding → Positioned header: renders
src/app/branding/page.tsx - Branding → Site footer: renders
src/app/branding/page.tsx - Branding → Site & demo data: reads data
src/app/branding/page.tsx - Branding → Interaction effects: uses effects
src/app/branding/page.tsx - Agro consults → Positioned header: renders
src/app/agro-consults/page.tsx - Agro consults → Site footer: renders
src/app/agro-consults/page.tsx - Agro consults → Pirate puppy: renders
src/app/agro-consults/page.tsx - Agro consults → Interaction effects: uses effects
src/app/agro-consults/page.tsx - Business consults → Positioned header: renders
src/app/business-consults/page.tsx - Business consults → Site footer: renders
src/app/business-consults/page.tsx - Business consults → Interaction effects: uses effects
src/app/business-consults/page.tsx - Investment advisory → Positioned header: renders
src/app/investment-advisory/page.tsx - Investment advisory → Site footer: renders
src/app/investment-advisory/page.tsx - Investment advisory → Site & demo data: reads chart data
src/app/investment-advisory/page.tsx - Investment advisory → Interaction effects: uses effects
src/app/investment-advisory/page.tsx - Investment advisory → Market analyst endpoint: posts messages
src/app/investment-advisory/page.tsx - Contact → Positioned header: renders
src/app/contact/page.tsx - Contact → Site footer: renders
src/app/contact/page.tsx - Contact → Site & demo data: reads data
src/app/contact/page.tsx - Contact → Interaction effects: uses effects
src/app/contact/page.tsx - Positioned header → Navigation menu: renders
src/components/layout/Header.tsx - Positioned header → Transition link: renders
src/components/layout/Header.tsx - Navigation menu → Transition link: renders
src/components/navigation/Navigation.tsx - Transition link → Mascot transition: calls navigation
src/components/layout/TransitionLink.tsx - Mascot transition → Pirate puppy: uses mascot
src/components/layout/MascotTransition.tsx - Mascot transition → Mascot transition config: reads config
src/components/layout/MascotTransition.tsx