# eagl3eyes/rise-at-seven architecture

> Architecture diagram of the GitHub repository eagl3eyes/rise-at-seven, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/eagl3eyes/rise-at-seven
- Repository: https://github.com/eagl3eyes/rise-at-seven

## Overview

1. **What this repo is**
   - This is a **single-product marketing site** built with **Next.js 15 App Router**, React, Tailwind CSS, and animation-heavy UI patterns.
   - Architecturally, it behaves like a **front-end experience layer**: there is no visible backend, data service, or CMS integration in the tree.

2. **Application shell**
   - The entry points are `src/app/layout.jsx` and `src/app/page.jsx`.
   - `layout.jsx` defines the global document shell, while `page.jsx` assembles the homepage content from the section components.

3. **Page composition model**
   - The homepage is built as a **long-form scroll narrative** made from distinct sections under `src/components/sections`.
   - The major page blocks are: **Hero, LogoCarousel, Services, FeaturedWork, DrivingDemand, ChasingConsumers, Legacy, WhatsNew, ReadyToRise**.

4. **Shared chrome**
   - `src/components/layout/Navbar` and `src/components/layout/Footer` provide the persistent top and bottom site chrome.
   - These are the main cross-page structural components, likely reused or mounted globally from the app layout.

5. **Reusable UI primitives**
   - `src/components/ui` contains the low-level building blocks used across the site: **CTAButton, HamburgerButton, TagBadge, Logos, CustomCursor, CircleMaskReveal**.
   - These are not page sections themselves; they support consistent interaction patterns and visual language across the experience.

6. **Animation and interaction layer**
   - The repo is clearly designed around **rich client-side motion**: the README calls out **GSAP** and custom SVG mask reveals.
   - `CircleMaskReveal` and `CustomCursor` suggest a dedicated interaction subsystem for page transitions, hover states, and premium “agency-style” motion.

7. **Navigation behavior**
   - `Navbar` plus `HamburgerButton` implies a responsive navigation model with a compact mobile state and a richer desktop presentation.
   - The README mentions mega-menu style behavior, so navigation is likely one of the more complex interactive boundaries in the UI.

8. **Asset and content structure**
   - `public/images` is heavily subdivided by feature area: `hero`, `navbar`, `services`, `featured-work`, `blog`, `news`, `brand`, `platforms`, and logo variants.
   - This indicates a **static media-driven architecture**, where visual content is organized by section rather than fetched dynamically.

9. **Styling system**
   - Styling is centralized through **Tailwind CSS** with supporting global styles in `src/app/globals.css` and `src/index.css`.
   - `tailwind.config.js` is likely where the custom theme tokens live, giving the site its branded palette and premium visual treatment.

10. **Runtime and deployment**
   - The project is built for the **Next.js runtime** and deployed via **Vercel** (`vercel.json` is present).
   - That means the architecture is optimized for static assets, fast rendering, and frontend deployment rather than server-side business logic.

11. **Technology boundaries**
   - The stack is mostly **presentation + motion**: React for composition, Next.js for routing/build, Tailwind for styling, and GSAP for animation timing.
   - Any “data flow” is primarily **component composition and props**, not API-driven state management.

12. **How to diagram it**
   - A good architecture diagram would show: **App shell → homepage composition → section blocks → shared UI/layout components**, with **public assets** feeding the visual sections and **GSAP/custom cursor/mask reveal** sitting as an interaction layer across the whole page.

Main entry points: [`src/app/page.jsx`](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/app/page.jsx) (Homepage), [`src/app/layout.jsx`](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/app/layout.jsx) (Root layout), [`public/images`](https://github.com/eagl3eyes/rise-at-seven/tree/main/public/images) (Image library), [`src/components/layout/Navbar/index.jsx`](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/layout/Navbar/index.jsx) (Navbar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_layout["Root layout<br/>next app shell<br/>[layout.jsx]"]
  node_home["Homepage<br/>next route<br/>[page.jsx]"]
end

subgraph group_content["Homepage content"]
  node_hero["Hero<br/>section<br/>[index.jsx]"]
  node_logos["Logo carousel<br/>section<br/>[index.jsx]"]
  node_services["Services<br/>section<br/>[index.jsx]"]
  node_featured["Featured work<br/>section<br/>[index.jsx]"]
  node_demand["Driving demand<br/>section<br/>[index.jsx]"]
  node_consumers["Chasing consumers<br/>section<br/>[index.jsx]"]
  node_legacy["Legacy<br/>section<br/>[index.jsx]"]
  node_news["What's new<br/>section<br/>[index.jsx]"]
  node_rise["Ready to rise<br/>section<br/>[index.jsx]"]
end

subgraph group_shared["Shared components"]
  node_navbar["Navbar<br/>site chrome<br/>[index.jsx]"]
  node_footer["Footer<br/>site chrome<br/>[index.jsx]"]
  node_cta["CTA button<br/>ui control<br/>[index.jsx]"]
  node_hamburger(("Hamburger button<br/>ui control<br/>[index.jsx]"))
  node_badges(("Tag badge<br/>ui primitive<br/>[index.jsx]"))
  node_logosui(("Logos<br/>ui primitive<br/>[index.jsx]"))
  node_cursor(("Custom cursor<br/>interaction<br/>[index.jsx]"))
  node_mask(("Mask reveal<br/>interaction<br/>[index.jsx]"))
end

subgraph group_assets["Static media"]
  node_media[("Image library<br/>static assets")]
end

subgraph group_styles["Styling"]
  node_styles["Global styles<br/>styling<br/>[globals.css]"]
  node_theme["Tailwind config<br/>styling system<br/>[tailwind.config.js]"]
end

node_layout -->|"renders"| node_home
node_layout -->|"includes"| node_navbar
node_layout -->|"includes"| node_footer
node_layout -->|"loads"| node_styles
node_layout -.->|"themes"| node_theme
node_home -->|"composes"| node_hero
node_home -->|"composes"| node_logos
node_home -->|"composes"| node_services
node_home -->|"composes"| node_featured
node_home -->|"composes"| node_demand
node_home -->|"composes"| node_consumers
node_home -->|"composes"| node_legacy
node_home -->|"composes"| node_news
node_home -->|"composes"| node_rise
node_navbar -->|"uses"| node_hamburger
node_navbar -->|"uses"| node_cta
node_hero -->|"uses"| node_cta
node_services -->|"uses"| node_badges
node_featured -->|"uses"| node_logosui
node_home -.->|"enhanced by"| node_cursor
node_home -.->|"enhanced by"| node_mask
node_hero -->|"assets"| node_media
node_logos -->|"assets"| node_media
node_services -->|"assets"| node_media
node_featured -->|"assets"| node_media
node_navbar -->|"assets"| node_media
node_layout -.->|"mounts"| node_cursor
node_layout -.->|"mounts"| node_mask

click node_layout "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/app/layout.jsx"
click node_home "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/app/page.jsx"
click node_navbar "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/layout/Navbar/index.jsx"
click node_footer "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/layout/Footer/index.jsx"
click node_hero "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/Hero/index.jsx"
click node_logos "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/LogoCarousel/index.jsx"
click node_services "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/Services/index.jsx"
click node_featured "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/FeaturedWork/index.jsx"
click node_demand "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/DrivingDemand/index.jsx"
click node_consumers "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/ChasingConsumers/index.jsx"
click node_legacy "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/Legacy/index.jsx"
click node_news "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/WhatsNew/index.jsx"
click node_rise "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/ReadyToRise/index.jsx"
click node_cta "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/CTAButton/index.jsx"
click node_hamburger "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/HamburgerButton/index.jsx"
click node_badges "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/TagBadge/index.jsx"
click node_logosui "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/Logos/index.jsx"
click node_cursor "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/CustomCursor/index.jsx"
click node_mask "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/CircleMaskReveal/index.jsx"
click node_styles "https://github.com/eagl3eyes/rise-at-seven/blob/main/src/app/globals.css"
click node_theme "https://github.com/eagl3eyes/rise-at-seven/blob/main/tailwind.config.js"
click node_media "https://github.com/eagl3eyes/rise-at-seven/tree/main/public/images"

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_layout,node_home toneBlue
class node_hero,node_logos,node_services,node_featured,node_demand,node_consumers,node_legacy,node_news,node_rise toneAmber
class node_navbar,node_footer,node_cta,node_hamburger,node_badges,node_logosui,node_cursor,node_mask toneMint
class node_media toneRose
class node_styles,node_theme toneIndigo
```

## Components

### App shell

Next.js entrypoints and global document scaffolding

- [Root layout](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/app/layout.jsx): next app shell · Defines the global document frame and app-level wrappers · `src/app/layout.jsx`
- [Homepage](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/app/page.jsx): next route · Assembles the landing page from section components · `src/app/page.jsx`

### Homepage content

Long-form landing page sections assembled into the scroll narrative

- [Hero](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/Hero/index.jsx): section · Opening banner and primary value proposition · `src/components/sections/Hero/index.jsx`
- [Logo carousel](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/LogoCarousel/index.jsx): section · Scrolling trust and client logo strip · `src/components/sections/LogoCarousel/index.jsx`
- [Services](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/Services/index.jsx): section · Core offerings and capability overview · `src/components/sections/Services/index.jsx`
- [Featured work](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/FeaturedWork/index.jsx): section · Selected work and proof points · `src/components/sections/FeaturedWork/index.jsx`
- [Driving demand](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/DrivingDemand/index.jsx): section · Persuasion-focused campaign narrative block · `src/components/sections/DrivingDemand/index.jsx`
- [Chasing consumers](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/ChasingConsumers/index.jsx): section · Audience and conversion narrative block · `src/components/sections/ChasingConsumers/index.jsx`
- [Legacy](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/Legacy/index.jsx): section · Brand story and credibility section · `src/components/sections/Legacy/index.jsx`
- [What's new](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/WhatsNew/index.jsx): section · Latest updates or news-style content block · `src/components/sections/WhatsNew/index.jsx`
- [Ready to rise](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/sections/ReadyToRise/index.jsx): section · Closing call to action and conversion endcap · `src/components/sections/ReadyToRise/index.jsx`

### Shared components

Reusable layout chrome and UI primitives

- [Navbar](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/layout/Navbar/index.jsx): site chrome · Persistent top navigation and responsive menu shell · `src/components/layout/Navbar/index.jsx`
- [Footer](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/layout/Footer/index.jsx): site chrome · Persistent bottom site chrome · `src/components/layout/Footer/index.jsx`
- [CTA button](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/CTAButton/index.jsx): ui control · Primary action button used across the site · `src/components/ui/CTAButton/index.jsx`
- [Hamburger button](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/HamburgerButton/index.jsx): ui control · Compact navigation trigger for mobile states · `src/components/ui/HamburgerButton/index.jsx`
- [Tag badge](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/TagBadge/index.jsx): ui primitive · Small label and emphasis chip component · `src/components/ui/TagBadge/index.jsx`
- [Logos](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/Logos/index.jsx): ui primitive · Reusable logo rendering and brand mark utility · `src/components/ui/Logos/index.jsx`
- [Custom cursor](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/CustomCursor/index.jsx): interaction · Site-wide pointer treatment for premium motion feel · `src/components/ui/CustomCursor/index.jsx`
- [Mask reveal](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/components/ui/CircleMaskReveal/index.jsx): interaction · Circle-based reveal effect for animated transitions · `src/components/ui/CircleMaskReveal/index.jsx`

### Static media

Section-organized images and logo assets

- [Image library](https://github.com/eagl3eyes/rise-at-seven/tree/main/public/images): static assets · Section-organized marketing imagery and logo assets · `public/images`

### Styling

Global CSS and Tailwind theme layer

- [Global styles](https://github.com/eagl3eyes/rise-at-seven/blob/main/src/app/globals.css): styling · Shared global CSS and base application styles · `src/app/globals.css`
- [Tailwind config](https://github.com/eagl3eyes/rise-at-seven/blob/main/tailwind.config.js): styling system · Theme tokens and utility customization layer · `tailwind.config.js`

## Connections

- Root layout → Homepage: renders · The app shell hosts the homepage route
- Root layout → Navbar: includes · Global document frame includes persistent navigation
- Root layout → Footer: includes · Global document frame includes persistent footer
- Root layout → Global styles: loads · Application shell applies global CSS
- Root layout → Tailwind config: themes · Tailwind config supports the visual system
- Homepage → Hero: composes · Homepage starts with the hero section
- Homepage → Logo carousel: composes · Homepage includes the trust logo strip
- Homepage → Services: composes · Homepage includes services overview
- Homepage → Featured work: composes · Homepage includes featured work section
- Homepage → Driving demand: composes · Homepage includes demand-generation narrative
- Homepage → Chasing consumers: composes · Homepage includes audience-focused narrative
- Homepage → Legacy: composes · Homepage includes brand history section
- Homepage → What's new: composes · Homepage includes updates/news section
- Homepage → Ready to rise: composes · Homepage ends with conversion CTA section
- Navbar → Hamburger button: uses · Navigation relies on compact menu trigger
- Navbar → CTA button: uses · Navigation may surface primary action buttons
- Hero → CTA button: uses · Hero uses primary call-to-action control
- Services → Tag badge: uses · Services section uses compact label chips
- Featured work → Logos: uses · Featured work section renders brand marks
- Homepage → Custom cursor: enhanced by · Premium pointer interaction applies across the page
- Homepage → Mask reveal: enhanced by · Animated reveal effect supports section transitions
- Hero → Image library: assets · Hero consumes section-specific imagery
- Logo carousel → Image library: assets · Logo carousel reads logo image assets
- Services → Image library: assets · Services section uses branded imagery
- Featured work → Image library: assets · Featured work section uses case-study visuals
- Navbar → Image library: assets · Navigation uses header and logo imagery
- Root layout → Custom cursor: mounts · Interaction layer is likely mounted globally
- Root layout → Mask reveal: mounts · Global layout can provide shared reveal effects