eagl3eyes/rise-at-seven

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.