# mohanapriyan1386k/startup-solution-pro architecture

> Architecture diagram of the GitHub repository mohanapriyan1386k/startup-solution-pro, 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/mohanapriyan1386k/startup-solution-pro
- Repository: https://github.com/mohanapriyan1386k/startup-solution-pro

## Overview

#### Purpose and runtime
This is a Vite-based React/TypeScript single-page marketing and portfolio site. It presents agency-style content, project listings, pricing, services, and contact calls to action; no server, API layer, database, or external integration implementation is present in the repository. Browser assets and SEO files are served from `public/robots.txt` and `public/sitemap.xml`.

#### Application entry and page composition
The browser bootstraps from `src/main.tsx`, which mounts the root application in `src/App.tsx`. Page-level views are organized under `src/pages/`, principally the landing page at `src/pages/Index.tsx`, a per-project view at `src/pages/ProjectDetail.tsx`, and a fallback route/view at `src/pages/NotFound.tsx`. `src/App.css` and `src/index.css` provide application/global styling boundaries.

#### Landing-page content pipeline
The landing experience is assembled from independently rendered section components rather than from a CMS or backend. Major stages include navigation/header (`src/components/Navbar.tsx`, `src/components/Hero.tsx`), credibility and capability content (`src/components/TrustedBy.tsx`, `src/components/TechnologiesSection.tsx`, `src/components/WhyChooseUs.tsx`), commercial content (`src/components/Services.tsx`, `src/components/Pricing.tsx`), and conversion/footer content (`src/components/Contact.tsx`, `src/components/Footer.tsx`). This keeps visual sections separately maintainable while `Index.tsx` controls their page-level ordering.

#### Portfolio data and detail boundary
Project content is centralized in `src/data/projects.ts` and consumed by portfolio presentation and detail pages, including `src/components/Portfolio.tsx` and `src/pages/ProjectDetail.tsx`. The key application flow is static project data → portfolio cards/listing → project-specific detail rendering. Samples or associated static material reside under `src/assets/samples`; no remote content-fetching boundary is visible.

#### Navigation and client-side state
Navigation behavior is represented by reusable navigation components (`src/components/Navbar.tsx`, `src/components/NavLink.tsx`) and page modules under `src/pages/`. The presence of a dedicated `NotFound.tsx` and `ProjectDetail.tsx` indicates client-side route/view selection, though the route configuration is not visible in the supplied tree. Mobile-responsive behavior is isolated in `src/hooks/use-mobile.tsx`.

#### Design-system boundary
Reusable UI primitives are kept separate from product sections in `src/components/ui/`, with higher-level site components consuming them as needed. Representative primitives include `src/components/ui/button.tsx`, `src/components/ui/card.tsx`, and `src/components/ui/dialog.tsx`. Shared class/style composition utilities live at `src/lib/utils.ts`; Tailwind configuration is defined in `tailwind.config.ts`. This boundary allows page sections to avoid owning low-level interaction and visual primitive implementations.

#### Build, quality, and infrastructure
Vite is the frontend build/dev runtime, configured by `vite.config.ts`; TypeScript project boundaries are defined in `tsconfig.json` and `tsconfig.app.json`. The repository includes both Bun lockfiles and npm lockfiles (`bun.lock`, `package-lock.json`), so dependency installation should be standardized before changes. Playwright and Vitest configuration exist (`playwright.config.ts`, `vitest.config.ts`), but no deployment, backend infrastructure, authentication provider, analytics service, or API client is represented.

Main entry points: [`src/pages/Index.tsx`](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/pages/Index.tsx) (Landing page), [`src/components/Portfolio.tsx`](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Portfolio.tsx) (Portfolio listing), [`src/App.tsx`](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/App.tsx) (Root application), [`src/components/Navbar.tsx`](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Navbar.tsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser Runtime"]
  node_vite{{"Vite build runtime<br/>build tool<br/>[vite.config.ts]"}}
  node_main(("Browser entry<br/>React bootstrap<br/>[main.tsx]"))
  node_app["Root application<br/>app shell<br/>[App.tsx]"]
  node_mobile["Mobile behavior<br/>responsive hook<br/>[use-mobile.tsx]"]
end

subgraph group_pages["Page Views"]
  node_index["Landing page<br/>page view<br/>[Index.tsx]"]
  node_project_detail["Project detail<br/>page view<br/>[ProjectDetail.tsx]"]
  node_not_found["Fallback view<br/>page view<br/>[NotFound.tsx]"]
end

subgraph group_sections["Landing Sections"]
  node_navigation["Navigation<br/>[Navbar.tsx]"]
  node_hero["Hero<br/>landing section<br/>[Hero.tsx]"]
  node_credibility["Credibility &amp; capabilities<br/>landing sections<br/>[TrustedBy.tsx]"]
  node_commercial["Services &amp; pricing<br/>landing sections<br/>[Services.tsx]"]
  node_conversion["Contact &amp; footer<br/>landing sections<br/>[Contact.tsx]"]
  node_portfolio["Portfolio listing<br/>landing section<br/>[Portfolio.tsx]"]
end

subgraph group_design["Design System"]
  node_ui["UI primitives<br/>component library"]
  node_utils["Style utilities<br/>shared utility<br/>[utils.ts]"]
end

subgraph group_content["Static Content &amp; Assets"]
  node_projects[("Project catalog<br/>static data<br/>[projects.ts]")]
  node_samples["Portfolio samples<br/>static assets"]
  node_seo["SEO assets<br/>public files<br/>[robots.txt]"]
end

node_vite -->|"builds and serves"| node_main
node_main -->|"mounts"| node_app
node_app -->|"selects view"| node_index
node_app -->|"selects project view"| node_project_detail
node_app -->|"selects fallback"| node_not_found
node_index -->|"renders"| node_navigation
node_index -->|"renders"| node_hero
node_index -->|"renders"| node_credibility
node_index -->|"renders"| node_commercial
node_index -->|"renders"| node_portfolio
node_index -->|"renders"| node_conversion
node_navigation -.->|"navigates to"| node_project_detail
node_projects -->|"supplies cards"| node_portfolio
node_portfolio -->|"opens project"| node_project_detail
node_projects -->|"supplies project data"| node_project_detail
node_samples -->|"provides media"| node_portfolio
node_ui -->|"reused by"| node_navigation
node_ui -->|"reused by"| node_commercial
node_ui -->|"reused by"| node_portfolio
node_utils -->|"composes styles for"| node_ui
node_mobile -->|"supports responsive state"| node_navigation

click node_vite "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/vite.config.ts"
click node_main "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/main.tsx"
click node_app "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/App.tsx"
click node_index "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/pages/Index.tsx"
click node_project_detail "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/pages/ProjectDetail.tsx"
click node_not_found "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/pages/NotFound.tsx"
click node_navigation "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Hero.tsx"
click node_credibility "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/TrustedBy.tsx"
click node_commercial "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Services.tsx"
click node_conversion "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Contact.tsx"
click node_portfolio "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Portfolio.tsx"
click node_projects "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/data/projects.ts"
click node_samples "https://github.com/mohanapriyan1386k/startup-solution-pro/tree/main/src/assets/samples"
click node_utils "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/lib/utils.ts"
click node_mobile "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/hooks/use-mobile.tsx"
click node_seo "https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/public/robots.txt"

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_main,node_app,node_mobile toneBlue
class node_index,node_project_detail,node_not_found toneAmber
class node_navigation,node_hero,node_credibility,node_commercial,node_conversion,node_portfolio toneMint
class node_ui,node_utils toneRose
class node_projects,node_samples,node_seo toneIndigo
```

## Components

### Browser Runtime

- [Vite build runtime](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/vite.config.ts): build tool · `vite.config.ts`
- [Browser entry](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/main.tsx): React bootstrap · `src/main.tsx`
- [Root application](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/App.tsx): app shell · `src/App.tsx`
- [Mobile behavior](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/hooks/use-mobile.tsx): responsive hook · `src/hooks/use-mobile.tsx`

### Page Views

- [Landing page](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/pages/Index.tsx): page view · Orders the independently rendered marketing sections. · `src/pages/Index.tsx`
- [Project detail](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/pages/ProjectDetail.tsx): page view · `src/pages/ProjectDetail.tsx`
- [Fallback view](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/pages/NotFound.tsx): page view · `src/pages/NotFound.tsx`

### Landing Sections

- [Navigation](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Navbar.tsx): site navigation · `src/components/Navbar.tsx`
- [Hero](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Hero.tsx): landing section · `src/components/Hero.tsx`
- [Credibility & capabilities](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/TrustedBy.tsx): landing sections · TrustedBy, TechnologiesSection, and WhyChooseUs sections. · `src/components/TrustedBy.tsx`
- [Services & pricing](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Services.tsx): landing sections · Commercial offering sections. · `src/components/Services.tsx`
- [Contact & footer](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Contact.tsx): landing sections · Conversion calls to action and site footer. · `src/components/Contact.tsx`
- [Portfolio listing](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/components/Portfolio.tsx): landing section · `src/components/Portfolio.tsx`

### Design System

- **UI primitives**: component library · Reusable buttons, cards, dialogs, and related primitives.
- [Style utilities](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/lib/utils.ts): shared utility · `src/lib/utils.ts`

### Static Content & Assets

- [Project catalog](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/src/data/projects.ts): static data · `src/data/projects.ts`
- [Portfolio samples](https://github.com/mohanapriyan1386k/startup-solution-pro/tree/main/src/assets/samples): static assets · `src/assets/samples`
- [SEO assets](https://github.com/mohanapriyan1386k/startup-solution-pro/blob/main/public/robots.txt): public files · Robots and sitemap files served by the browser host. · `public/robots.txt`

## Connections

- Vite build runtime → Browser entry: builds and serves
- Browser entry → Root application: mounts
- Root application → Landing page: selects view
- Root application → Project detail: selects project view
- Root application → Fallback view: selects fallback
- Landing page → Navigation: renders
- Landing page → Hero: renders
- Landing page → Credibility & capabilities: renders
- Landing page → Services & pricing: renders
- Landing page → Portfolio listing: renders
- Landing page → Contact & footer: renders
- Navigation → Project detail: navigates to
- Project catalog → Portfolio listing: supplies cards
- Portfolio listing → Project detail: opens project
- Project catalog → Project detail: supplies project data
- Portfolio samples → Portfolio listing: provides media
- UI primitives → Navigation: reused by
- UI primitives → Services & pricing: reused by
- UI primitives → Portfolio listing: reused by
- Style utilities → UI primitives: composes styles for
- Mobile behavior → Navigation: supports responsive state