# aliraza-techie/ali-consultancy architecture

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

- Interactive diagram: https://gitdiagram.com/aliraza-techie/ali-consultancy
- Repository: https://github.com/aliraza-techie/ali-consultancy

## Overview

This is a single-page marketing site for Ali Consultancy, promoting construction estimating services and guiding contractors from service discovery to a free estimate request. The visible workflow includes exploring estimating offerings, optionally calculating a preliminary project-cost range, then submitting project details and attaching plans for follow-up. Other sections cover the consultancy, process, markets, deliverables, pricing, projects, testimonials, and FAQs. Sampled source confirms the page composition, calculator behavior, and client-side form handling; the README is only a project name, and no server-side submission or persistent storage is evidenced.

Main entry points: [`src/App.tsx`](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/App.tsx) (Page composition), [`src/components/EstimateForm.tsx`](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/EstimateForm.tsx) (Estimate request), [`src/components/Services.tsx`](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Services.tsx) (Estimating services), [`src/components/Hero.tsx`](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Hero.tsx) (Service introduction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Marketing site"]
  node_app["Page composition<br/>[App.tsx]"]
  node_nav["Navigation<br/>[Navbar.tsx]"]
  node_hero["Service introduction<br/>[Hero.tsx]"]
  node_trust["Trust signals<br/>[TrustStrip.tsx]"]
  node_services["Estimating services<br/>[Services.tsx]"]
  node_about["Company profile<br/>[About.tsx]"]
  node_why["Value proposition<br/>[WhyQuantify.tsx]"]
  node_trades["Trade coverage<br/>[Trades.tsx]"]
  node_process["Service process<br/>[Process.tsx]"]
  node_stats["Performance statistics<br/>[StatsBar.tsx]"]
  node_deliverables["Estimate deliverables<br/>[Deliverables.tsx]"]
  node_pricing["Pricing information<br/>[Pricing.tsx]"]
  node_projects["Project examples<br/>[Projects.tsx]"]
  node_testimonials["Client testimonials<br/>[Testimonials.tsx]"]
  node_markets["Markets served<br/>[Markets.tsx]"]
  node_faq["Frequently asked questions<br/>[FAQ.tsx]"]
  node_footer["Contact and footer<br/>[Footer.tsx]"]
end

subgraph group_engagement["Estimate engagement"]
  node_calculator["Cost calculator<br/>[Calculator.tsx]"]
  node_form["Estimate request<br/>[EstimateForm.tsx]"]
end

subgraph group_shared["Shared UI behavior"]
  node_observer["Visibility observer"]
  node_counter["Animated counter<br/>[useCounter.ts]"]
end

node_contractor(("Contractor"))
node_browser(("Site visitor"))

node_contractor -->|"opens site"| node_app
node_app -->|"renders"| node_nav
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_trust
node_app -->|"renders"| node_services
node_app -->|"renders"| node_about
node_app -->|"renders"| node_why
node_app -->|"renders"| node_calculator
node_app -->|"renders"| node_trades
node_app -->|"renders"| node_process
node_app -->|"renders"| node_stats
node_app -->|"renders"| node_deliverables
node_app -->|"renders"| node_pricing
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_markets
node_app -->|"renders"| node_faq
node_app -->|"renders"| node_form
node_app -->|"renders"| node_footer
node_contractor -->|"explores"| node_services
node_contractor -->|"enters assumptions"| node_calculator
node_calculator -->|"scrolls to request"| node_form
node_contractor -->|"submits project details"| node_form
node_form -->|"shows confirmation"| node_browser
node_services -->|"scrolls to request"| node_form
node_hero -->|"scrolls to request"| node_form
node_hero -->|"scrolls to services"| node_services
node_services -->|"observes visibility"| node_observer
node_deliverables -->|"observes visibility"| node_observer
node_calculator -->|"observes visibility"| node_observer
node_hero -->|"animates statistics"| node_counter

click node_app "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/App.tsx"
click node_nav "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Hero.tsx"
click node_trust "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/TrustStrip.tsx"
click node_services "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Services.tsx"
click node_about "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/About.tsx"
click node_why "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/WhyQuantify.tsx"
click node_trades "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Trades.tsx"
click node_process "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Process.tsx"
click node_stats "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/StatsBar.tsx"
click node_deliverables "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Deliverables.tsx"
click node_pricing "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Pricing.tsx"
click node_projects "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Projects.tsx"
click node_testimonials "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Testimonials.tsx"
click node_markets "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Markets.tsx"
click node_faq "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/FAQ.tsx"
click node_calculator "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Calculator.tsx"
click node_form "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/EstimateForm.tsx"
click node_footer "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Footer.tsx"
click node_observer "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/hooks/useIntersectionObserver.ts"
click node_counter "https://github.com/aliraza-techie/ali-consultancy/blob/main/src/hooks/useCounter.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_app,node_nav,node_hero,node_trust,node_services,node_about,node_why,node_trades,node_process,node_stats,node_deliverables,node_pricing,node_projects,node_testimonials,node_markets,node_faq,node_footer toneBlue
class node_calculator,node_form toneAmber
class node_observer,node_counter toneMint
class node_contractor,node_browser toneIndigo
```

## Components

### Marketing site

- [Page composition](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Service introduction](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Trust signals](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/TrustStrip.tsx): `src/components/TrustStrip.tsx`
- [Estimating services](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Services.tsx): `src/components/Services.tsx`
- [Company profile](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [Value proposition](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/WhyQuantify.tsx): `src/components/WhyQuantify.tsx`
- [Trade coverage](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Trades.tsx): `src/components/Trades.tsx`
- [Service process](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Process.tsx): `src/components/Process.tsx`
- [Performance statistics](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/StatsBar.tsx): `src/components/StatsBar.tsx`
- [Estimate deliverables](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Deliverables.tsx): `src/components/Deliverables.tsx`
- [Pricing information](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Pricing.tsx): `src/components/Pricing.tsx`
- [Project examples](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Projects.tsx): `src/components/Projects.tsx`
- [Client testimonials](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Testimonials.tsx): `src/components/Testimonials.tsx`
- [Markets served](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Markets.tsx): `src/components/Markets.tsx`
- [Frequently asked questions](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/FAQ.tsx): `src/components/FAQ.tsx`
- [Contact and footer](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Estimate engagement

- [Cost calculator](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/Calculator.tsx): `src/components/Calculator.tsx`
- [Estimate request](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/components/EstimateForm.tsx): `src/components/EstimateForm.tsx`

### Shared UI behavior

- [Visibility observer](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/hooks/useIntersectionObserver.ts): `src/hooks/useIntersectionObserver.ts`
- [Animated counter](https://github.com/aliraza-techie/ali-consultancy/blob/main/src/hooks/useCounter.ts): `src/hooks/useCounter.ts`

### Other components

- **Contractor**
- **Site visitor**

## Connections

- Contractor → Page composition: opens site
- Page composition → Navigation: renders
- Page composition → Service introduction: renders
- Page composition → Trust signals: renders
- Page composition → Estimating services: renders
- Page composition → Company profile: renders
- Page composition → Value proposition: renders
- Page composition → Cost calculator: renders
- Page composition → Trade coverage: renders
- Page composition → Service process: renders
- Page composition → Performance statistics: renders
- Page composition → Estimate deliverables: renders
- Page composition → Pricing information: renders
- Page composition → Project examples: renders
- Page composition → Client testimonials: renders
- Page composition → Markets served: renders
- Page composition → Frequently asked questions: renders
- Page composition → Estimate request: renders
- Page composition → Contact and footer: renders
- Contractor → Estimating services: explores
- Contractor → Cost calculator: enters assumptions
- Cost calculator → Estimate request: scrolls to request
- Contractor → Estimate request: submits project details
- Estimate request → Site visitor: shows confirmation
- Estimating services → Estimate request: scrolls to request
- Service introduction → Estimate request: scrolls to request
- Service introduction → Estimating services: scrolls to services
- Estimating services → Visibility observer: observes visibility
- Estimate deliverables → Visibility observer: observes visibility
- Cost calculator → Visibility observer: observes visibility
- Service introduction → Animated counter: animates statistics