# sanjai-dev46/shalzz-genz-digital-marketer architecture

> Architecture diagram of the GitHub repository sanjai-dev46/shalzz-genz-digital-marketer, 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/sanjai-dev46/shalzz-genz-digital-marketer
- Repository: https://github.com/sanjai-dev46/shalzz-genz-digital-marketer

## Overview

#### Purpose and Entry Points
This is a Vite-powered React/TypeScript single-page presentation or marketing deck. It renders a sequence of full-screen content slides describing offerings, packages, add-ons, and contact information.

Application startup is `src/main.tsx`, which mounts the React tree into `index.html`. The root composition is `src/App.tsx`.

#### Application Shell and Slide Orchestration
`src/App.tsx` is the primary control boundary: it determines slide order and composes the deck from slide-level React components. There is no evidence of routing, backend integration, persistence, or asynchronous data loading.

Key paths:
- `src/App.tsx`
- `src/main.tsx`
- `index.html`

#### Slide Content Modules
Each business/presentation section is isolated as a dedicated React component under `src/slides`. This keeps content ownership separate while allowing the app shell to define presentation flow.

Core stages include:
- Introductory hero: `src/slides/HeroSlide.tsx`
- Rationale/value proposition: `src/slides/WhyChooseUsSlide.tsx`
- Content strategy: `src/slides/ContentMixSlide.tsx`
- Package offering: `src/slides/GrowthPackageSlide.tsx`
- Optional services: `src/slides/AddOnsSlide.tsx`
- Closing/contact CTA: `src/slides/ContactSlide.tsx`

#### Shared Presentation Primitives
Reusable components establish visual consistency across otherwise independent slides. `SlideWrapper` is the likely structural/layout boundary for slide sections; `SlideTitle` standardizes headings; `FeatureCard` supports repeated offering or benefit blocks.

Key paths:
- `src/components/SlideWrapper.tsx`
- `src/components/SlideTitle.tsx`
- `src/components/FeatureCard.tsx`

#### Styling and Theme Boundary
Global styling is centralized in `src/index.css`, while reusable theme values or design-token-like configuration live in `src/theme.ts`. Slide and shared components consume this styling layer rather than introducing a separate UI framework boundary.

Key paths:
- `src/index.css`
- `src/theme.ts`
- `src/utils/cn.ts`

#### Runtime and Assets
The client runs in the browser as a React application, built and served through Vite configuration in `vite.config.ts`. Static visual assets are expected under `public/images` and are served directly from the public asset space.

Key paths:
- `vite.config.ts`
- `public/images`
- `package.json`

#### Primary Flow and Boundaries
The runtime flow is: browser loads `index.html` → Vite bundle executes `src/main.tsx` → React renders `src/App.tsx` → app composes ordered slide modules → slides use shared layout/card/title primitives and global theme/styles. The repository appears fully frontend-only: no API clients, server runtime, database, authentication, or external service integration is represented in the supplied tree.

Main entry points: [`src/App.tsx`](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/App.tsx) (Deck Orchestrator), [`src/components/SlideWrapper.tsx`](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/components/SlideWrapper.tsx) (Slide Wrapper), [`src/main.tsx`](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/main.tsx) (React Bootstrap), [`src/slides/HeroSlide.tsx`](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/HeroSlide.tsx) (Hero)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Client Runtime"]
  node_vite{{"Vite Build &amp; Dev<br/>build tool<br/>[vite.config.ts]"}}
  node_package["Package Manifest<br/>dependencies<br/>[package.json]"]
  node_html["HTML Entry<br/>browser document<br/>[index.html]"]
  node_main["React Bootstrap<br/>client entry<br/>[main.tsx]"]
  node_app["Deck Orchestrator<br/>React root<br/>[App.tsx]"]
  node_images["Public Images<br/>static assets"]
end

subgraph group_slides["Presentation Slides"]
  node_hero["Hero<br/>slide component<br/>[HeroSlide.tsx]"]
  node_why["Why Choose Us<br/>slide component"]
  node_contentmix["Content Mix<br/>slide component"]
  node_growth["Growth Package<br/>slide component"]
  node_addons["Add-Ons<br/>slide component<br/>[AddOnsSlide.tsx]"]
  node_contact["Contact CTA<br/>slide component<br/>[ContactSlide.tsx]"]
end

subgraph group_ui["Shared UI &amp; Styling"]
  node_wrapper["Slide Wrapper<br/>layout primitive<br/>[SlideWrapper.tsx]"]
  node_title["Slide Title<br/>heading primitive<br/>[SlideTitle.tsx]"]
  node_featurecard["Feature Card<br/>content primitive<br/>[FeatureCard.tsx]"]
  node_styles["Global Styles<br/>CSS<br/>[index.css]"]
  node_theme["Theme Tokens<br/>theme module<br/>[theme.ts]"]
  node_cn["Class Utility<br/>style utility<br/>[cn.ts]"]
end

node_package -.->|"declares"| node_vite
node_vite -->|"serves and bundles"| node_html
node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"first slide"| node_hero
node_app -->|"composes"| node_why
node_app -->|"composes"| node_contentmix
node_app -->|"composes"| node_growth
node_app -->|"composes"| node_addons
node_app -->|"closing slide"| node_contact
node_hero -.->|"uses"| node_wrapper
node_why -.->|"uses"| node_wrapper
node_contentmix -.->|"uses"| node_wrapper
node_growth -.->|"uses"| node_featurecard
node_addons -.->|"uses"| node_featurecard
node_wrapper -.->|"pairs with"| node_title
node_main -->|"loads"| node_styles
node_app -.->|"uses"| node_theme
node_theme -.->|"supports styling"| node_cn
node_hero -.->|"renders assets"| node_images

click node_vite "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/vite.config.ts"
click node_package "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/package.json"
click node_html "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/index.html"
click node_main "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/main.tsx"
click node_app "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/App.tsx"
click node_hero "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/HeroSlide.tsx"
click node_why "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/WhyChooseUsSlide.tsx"
click node_contentmix "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/ContentMixSlide.tsx"
click node_growth "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/GrowthPackageSlide.tsx"
click node_addons "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/AddOnsSlide.tsx"
click node_contact "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/ContactSlide.tsx"
click node_wrapper "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/components/SlideWrapper.tsx"
click node_title "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/components/SlideTitle.tsx"
click node_featurecard "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/components/FeatureCard.tsx"
click node_styles "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/index.css"
click node_theme "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/theme.ts"
click node_cn "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/utils/cn.ts"
click node_images "https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/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_vite,node_package,node_html,node_main,node_app,node_images toneBlue
class node_hero,node_why,node_contentmix,node_growth,node_addons,node_contact toneAmber
class node_wrapper,node_title,node_featurecard,node_styles,node_theme,node_cn toneMint
```

## Components

### Client Runtime

- [Vite Build & Dev](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/vite.config.ts): build tool · `vite.config.ts`
- [Package Manifest](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/package.json): dependencies · `package.json`
- [HTML Entry](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/index.html): browser document · `index.html`
- [React Bootstrap](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/main.tsx): client entry · `src/main.tsx`
- [Deck Orchestrator](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/App.tsx): React root · Defines slide order and deck composition. · `src/App.tsx`
- [Public Images](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/tree/main/public/images): static assets · Browser-served visual assets. · `public/images`

### Presentation Slides

Ordered full-screen deck content.

- [Hero](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/HeroSlide.tsx): slide component · `src/slides/HeroSlide.tsx`
- [Why Choose Us](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/WhyChooseUsSlide.tsx): slide component · `src/slides/WhyChooseUsSlide.tsx`
- [Content Mix](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/ContentMixSlide.tsx): slide component · `src/slides/ContentMixSlide.tsx`
- [Growth Package](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/GrowthPackageSlide.tsx): slide component · `src/slides/GrowthPackageSlide.tsx`
- [Add-Ons](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/AddOnsSlide.tsx): slide component · `src/slides/AddOnsSlide.tsx`
- [Contact CTA](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/slides/ContactSlide.tsx): slide component · `src/slides/ContactSlide.tsx`

### Shared UI & Styling

- [Slide Wrapper](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/components/SlideWrapper.tsx): layout primitive · `src/components/SlideWrapper.tsx`
- [Slide Title](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/components/SlideTitle.tsx): heading primitive · `src/components/SlideTitle.tsx`
- [Feature Card](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/components/FeatureCard.tsx): content primitive · `src/components/FeatureCard.tsx`
- [Global Styles](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/index.css): CSS · `src/index.css`
- [Theme Tokens](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/theme.ts): theme module · `src/theme.ts`
- [Class Utility](https://github.com/sanjai-dev46/shalzz-genz-digital-marketer/blob/main/src/utils/cn.ts): style utility · `src/utils/cn.ts`

## Connections

- Package Manifest → Vite Build & Dev: declares
- Vite Build & Dev → HTML Entry: serves and bundles
- HTML Entry → React Bootstrap: loads
- React Bootstrap → Deck Orchestrator: mounts
- Deck Orchestrator → Hero: first slide
- Deck Orchestrator → Why Choose Us: composes
- Deck Orchestrator → Content Mix: composes
- Deck Orchestrator → Growth Package: composes
- Deck Orchestrator → Add-Ons: composes
- Deck Orchestrator → Contact CTA: closing slide
- Hero → Slide Wrapper: uses
- Why Choose Us → Slide Wrapper: uses
- Content Mix → Slide Wrapper: uses
- Growth Package → Feature Card: uses
- Add-Ons → Feature Card: uses
- Slide Wrapper → Slide Title: pairs with
- React Bootstrap → Global Styles: loads
- Deck Orchestrator → Theme Tokens: uses
- Theme Tokens → Class Utility: supports styling
- Hero → Public Images: renders assets