# srk005/classa_web architecture

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

- Interactive diagram: https://gitdiagram.com/srk005/classa_web
- Repository: https://github.com/srk005/classa_web

## Overview

#### Purpose and runtime
This is a Next.js App Router marketing/presentation site for Classa and “NextGen Learn.” It is a client-facing static-style website rather than an API-backed application. The runtime is Next.js/React with TypeScript, Tailwind/PostCSS styling, and Vercel-oriented deployment configuration: `package.json`, `next.config.js`, `vercel.json`.

#### Application shell and entry points
The root route and shared document shell are the primary execution entry points. `src/app/layout.tsx` establishes global layout/font/style concerns, while `src/app/page.tsx` renders the homepage. Global styling is centralized in `src/app/globals.css`. Next.js route resolution also exposes dedicated pages at `/about`, `/classa`, and `/nextgen-learn`.

#### Route-level content composition
Each major product or informational view has a route module that composes reusable presentation components:
- Homepage: `src/app/page.tsx`
- About page: `src/app/about/page.tsx`
- Classa page: `src/app/classa/page.tsx`
- NextGen Learn page: `src/app/nextgen-learn/page.tsx`

This boundary keeps URL ownership in `src/app` and section-level UI in `src/components`.

#### Shared site frame and conversion sections
Navigation and footer are reusable site-wide framing components, with contact content acting as the main conversion-oriented section:
- `src/components/Navbar.tsx`
- `src/components/Footer.tsx`
- `src/components/ContactSection.tsx`

Route pages likely assemble these around hero, informational, and trust/value sections. No server-side form handler, database, or backend integration is represented in the repository tree.

#### Brand and informational content modules
The core marketing narrative is implemented as reusable React sections: hero messaging, about/company copy, feature differentiation, and team presentation.
- `src/components/HeroSection.tsx`
- `src/components/AboutUs.tsx`
- `src/components/WhyChooseSection.tsx`
- `src/components/MeetTheTeam.tsx`

A separate NextGen Learn module supports the related route: `src/components/NextGenLearn.tsx`.

#### Motion and visual-experience layer
Animated and decorative components are separated from content sections, allowing pages to add visual effects without embedding animation mechanics in every route:
- `src/components/AnimatedBackground.tsx`
- `src/components/AnimatedRocketHero.tsx`
- `src/components/AnimatedText.tsx`
- `src/components/FloatingOrbs.tsx`

Additional experimental or specialized hero implementations live under `src/components/ui/MaterialHero.tsx` and `src/components/ui/helix-hero.tsx`. Ambient type declarations for animation/UI libraries are maintained in `src/types/vanta.d.ts` and related declaration files.

#### Assets, references, and deployment boundary
Public browser-served assets are housed in `public/image` and `public/images`. The `ref/` directory contains prototype/replica source material, not application routes, including `ref/WhyChooseSection.tsx` and hero/contact JSX references. Deployment is intended for Vercel via `vercel.json`; no external data services or infrastructure dependencies are evident from the supplied tree.

Main entry points: [`src/app/layout.tsx`](https://github.com/srk005/classa_web/blob/main/src/app/layout.tsx) (Root layout), [`src/components/HeroSection.tsx`](https://github.com/srk005/classa_web/blob/main/src/components/HeroSection.tsx) (Marketing sections), [`src/app/page.tsx`](https://github.com/srk005/classa_web/blob/main/src/app/page.tsx) (Homepage), [`src/app/classa/page.tsx`](https://github.com/srk005/classa_web/blob/main/src/app/classa/page.tsx) (Classa page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["App Router"]
  node_layout["Root layout<br/>app shell<br/>[layout.tsx]"]
  node_styles["Global styles<br/>CSS<br/>[globals.css]"]
  node_home["Homepage<br/>route<br/>[page.tsx]"]
  node_about["About page<br/>route<br/>[page.tsx]"]
  node_classa["Classa page<br/>route<br/>[page.tsx]"]
  node_nextgen["NextGen Learn page<br/>route<br/>[page.tsx]"]
end

subgraph group_content["Site content"]
  node_siteframe["Navigation and footer<br/>shared frame<br/>[Navbar.tsx]"]
  node_marketing["Marketing sections<br/>content sections<br/>[HeroSection.tsx]"]
  node_contact["Contact section<br/>conversion section<br/>[ContactSection.tsx]"]
  node_nextgenmodule["NextGen Learn module<br/>content section<br/>[NextGenLearn.tsx]"]
end

subgraph group_visuals["Visual experience"]
  node_motion["Animation components<br/>motion layer"]
  node_experimental["Specialized heroes<br/>experimental UI<br/>[MaterialHero.tsx]"]
  node_types["Animation declarations<br/>TypeScript declarations<br/>[vanta.d.ts]"]
end

node_next{{"Next.js runtime<br/>framework<br/>[next.config.js]"}}
node_deployment{{"Vercel deployment<br/>deployment config<br/>[vercel.json]"}}
node_assets["Public assets<br/>browser assets"]
node_references["Prototype references<br/>reference source"]

node_deployment -->|"deploys"| node_next
node_next -->|"renders shell"| node_layout
node_layout -->|"loads"| node_styles
node_layout -->|"wraps"| node_home
node_layout -->|"wraps"| node_about
node_layout -->|"wraps"| node_classa
node_layout -->|"wraps"| node_nextgen
node_home -->|"composes"| node_siteframe
node_home -->|"composes"| node_marketing
node_home -->|"includes"| node_contact
node_about -->|"composes"| node_siteframe
node_about -->|"composes"| node_marketing
node_classa -->|"composes"| node_siteframe
node_classa -->|"composes"| node_marketing
node_classa -->|"includes"| node_contact
node_nextgen -->|"composes"| node_siteframe
node_nextgen -->|"composes"| node_nextgenmodule
node_nextgen -->|"includes"| node_contact
node_marketing -->|"enhanced by"| node_motion
node_motion -.->|"uses declarations"| node_types
node_marketing -->|"uses"| node_assets
node_references -.->|"informs"| node_marketing
node_experimental -.->|"alternative visuals"| node_motion

click node_next "https://github.com/srk005/classa_web/blob/main/next.config.js"
click node_deployment "https://github.com/srk005/classa_web/blob/main/vercel.json"
click node_layout "https://github.com/srk005/classa_web/blob/main/src/app/layout.tsx"
click node_styles "https://github.com/srk005/classa_web/blob/main/src/app/globals.css"
click node_home "https://github.com/srk005/classa_web/blob/main/src/app/page.tsx"
click node_about "https://github.com/srk005/classa_web/blob/main/src/app/about/page.tsx"
click node_classa "https://github.com/srk005/classa_web/blob/main/src/app/classa/page.tsx"
click node_nextgen "https://github.com/srk005/classa_web/blob/main/src/app/nextgen-learn/page.tsx"
click node_siteframe "https://github.com/srk005/classa_web/blob/main/src/components/Navbar.tsx"
click node_marketing "https://github.com/srk005/classa_web/blob/main/src/components/HeroSection.tsx"
click node_contact "https://github.com/srk005/classa_web/blob/main/src/components/ContactSection.tsx"
click node_nextgenmodule "https://github.com/srk005/classa_web/blob/main/src/components/NextGenLearn.tsx"
click node_motion "https://github.com/srk005/classa_web/blob/main/src/components/AnimatedBackground.tsx"
click node_experimental "https://github.com/srk005/classa_web/blob/main/src/components/ui/MaterialHero.tsx"
click node_assets "https://github.com/srk005/classa_web/tree/main/public/image"
click node_types "https://github.com/srk005/classa_web/blob/main/src/types/vanta.d.ts"

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_styles,node_home,node_about,node_classa,node_nextgen toneBlue
class node_siteframe,node_marketing,node_contact,node_nextgenmodule toneAmber
class node_motion,node_experimental,node_types toneMint
class node_next,node_deployment,node_assets,node_references toneNeutral
```

## Components

### App Router

URL-owned route modules and shared shell.

- [Root layout](https://github.com/srk005/classa_web/blob/main/src/app/layout.tsx): app shell · Applies global document, font, and style concerns. · `src/app/layout.tsx`
- [Global styles](https://github.com/srk005/classa_web/blob/main/src/app/globals.css): CSS · `src/app/globals.css`
- [Homepage](https://github.com/srk005/classa_web/blob/main/src/app/page.tsx): route · `src/app/page.tsx`
- [About page](https://github.com/srk005/classa_web/blob/main/src/app/about/page.tsx): route · `src/app/about/page.tsx`
- [Classa page](https://github.com/srk005/classa_web/blob/main/src/app/classa/page.tsx): route · `src/app/classa/page.tsx`
- [NextGen Learn page](https://github.com/srk005/classa_web/blob/main/src/app/nextgen-learn/page.tsx): route · `src/app/nextgen-learn/page.tsx`

### Site content

Reusable marketing and conversion sections.

- [Navigation and footer](https://github.com/srk005/classa_web/blob/main/src/components/Navbar.tsx): shared frame · Site-wide navigation and footer components. · `src/components/Navbar.tsx`
- [Marketing sections](https://github.com/srk005/classa_web/blob/main/src/components/HeroSection.tsx): content sections · Hero, company, value, and team narrative modules. · `src/components/HeroSection.tsx`
- [Contact section](https://github.com/srk005/classa_web/blob/main/src/components/ContactSection.tsx): conversion section · Primary contact-oriented conversion content; no backend handler is represented. · `src/components/ContactSection.tsx`
- [NextGen Learn module](https://github.com/srk005/classa_web/blob/main/src/components/NextGenLearn.tsx): content section · `src/components/NextGenLearn.tsx`

### Visual experience

Reusable animation and decorative components.

- [Animation components](https://github.com/srk005/classa_web/blob/main/src/components/AnimatedBackground.tsx): motion layer · Background, rocket, text, and orb visual effects. · `src/components/AnimatedBackground.tsx`
- [Specialized heroes](https://github.com/srk005/classa_web/blob/main/src/components/ui/MaterialHero.tsx): experimental UI · Alternative Material and helix hero implementations. · `src/components/ui/MaterialHero.tsx`
- [Animation declarations](https://github.com/srk005/classa_web/blob/main/src/types/vanta.d.ts): TypeScript declarations · Ambient declarations for animation and UI libraries. · `src/types/vanta.d.ts`

### Other components

- [Next.js runtime](https://github.com/srk005/classa_web/blob/main/next.config.js): framework · React App Router static-style site runtime. · `next.config.js`
- [Vercel deployment](https://github.com/srk005/classa_web/blob/main/vercel.json): deployment config · `vercel.json`
- [Public assets](https://github.com/srk005/classa_web/tree/main/public/image): browser assets · Images served directly to the browser. · `public/image`
- **Prototype references**: reference source · Non-route prototype and replica material.

## Connections

- Vercel deployment → Next.js runtime: deploys
- Next.js runtime → Root layout: renders shell
- Root layout → Global styles: loads
- Root layout → Homepage: wraps
- Root layout → About page: wraps
- Root layout → Classa page: wraps
- Root layout → NextGen Learn page: wraps
- Homepage → Navigation and footer: composes
- Homepage → Marketing sections: composes
- Homepage → Contact section: includes
- About page → Navigation and footer: composes
- About page → Marketing sections: composes
- Classa page → Navigation and footer: composes
- Classa page → Marketing sections: composes
- Classa page → Contact section: includes
- NextGen Learn page → Navigation and footer: composes
- NextGen Learn page → NextGen Learn module: composes
- NextGen Learn page → Contact section: includes
- Marketing sections → Animation components: enhanced by
- Animation components → Animation declarations: uses declarations
- Marketing sections → Public assets: uses
- Prototype references → Marketing sections: informs
- Specialized heroes → Animation components: alternative visuals