# maxrohowsky/landing-page-design-examples architecture

> Architecture diagram of the GitHub repository maxrohowsky/landing-page-design-examples, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/maxrohowsky/landing-page-design-examples
- Repository: https://github.com/maxrohowsky/landing-page-design-examples

## Overview

This repository is a curated landing-page inspiration site. A visitor opens the site, whose home page fetches the listing data, lets visitors filter it by tags, and renders scrollable cards linking to each showcased site. The interface also includes a promotional hero, navigation, and banner. The README documents the site and its filtering capability; source excerpts show the page’s data-fetch and rendering behavior. The dataset and screenshots are served from GitHub. Some interface links are explicit, but no further backend processing is shown.

Main entry points: [`next-site/src/app/page.js`](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/app/page.js) (Home page), [`next-site/src/components/card.js`](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/card.js) (Page card), [`next-site/src/components/filters.js`](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/filters.js) (Tag filters), [`next-site/src/components/banner.js`](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/banner.js) (Community banner)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browse["Browse experience"]
  node_home["Home page<br/>[page.js]"]
  node_filters["Tag filters<br/>[filters.js]"]
  node_listing["Filtered listing<br/>[page.js]"]
  node_card["Page card<br/>[card.js]"]
end

subgraph group_content["Curated content"]
  node_catalog[("Catalog data<br/>[data.json]")]
  node_github_content["GitHub content host"]
  node_showcased_sites["Showcased sites"]
end

subgraph group_promote["Site promotion"]
  node_banner["Community banner<br/>[banner.js]"]
  node_navbar["Site navigation<br/>[navbar.js]"]
  node_hero["Hero promotion<br/>[hero.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"fetches listing"| node_github_content
node_github_content -->|"returns JSON"| node_home
node_home -->|"renders"| node_filters
node_home -->|"renders"| node_listing
node_filters -->|"sets tag state"| node_listing
node_listing -->|"renders matches"| node_card
node_card -->|"loads screenshots"| node_github_content
node_card -->|"links to"| node_showcased_sites
node_home -->|"renders"| node_banner
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero

click node_home "https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/app/page.js"
click node_filters "https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/filters.js"
click node_listing "https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/app/page.js"
click node_card "https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/card.js"
click node_catalog "https://github.com/maxrohowsky/landing-page-design-examples/blob/master/docs/data.json"
click node_banner "https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/banner.js"
click node_navbar "https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/navbar.js"
click node_hero "https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/hero.js"

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_home,node_filters,node_listing,node_card toneBlue
class node_catalog,node_github_content,node_showcased_sites toneAmber
class node_banner,node_navbar,node_hero toneMint
class node_visitor toneIndigo
```

## Components

### Browse experience

- [Home page](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/app/page.js): `next-site/src/app/page.js`
- [Tag filters](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/filters.js): `next-site/src/components/filters.js`
- [Filtered listing](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/app/page.js): `next-site/src/app/page.js`
- [Page card](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/card.js): `next-site/src/components/card.js`

### Curated content

- [Catalog data](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/docs/data.json): `docs/data.json`
- **GitHub content host**
- **Showcased sites**

### Site promotion

- [Community banner](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/banner.js): `next-site/src/components/banner.js`
- [Site navigation](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/navbar.js): `next-site/src/components/navbar.js`
- [Hero promotion](https://github.com/maxrohowsky/landing-page-design-examples/blob/master/next-site/src/components/hero.js): `next-site/src/components/hero.js`

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens (evidence: `README.md`)
- Home page → GitHub content host: fetches listing (evidence: `next-site/src/app/page.js`)
- GitHub content host → Home page: returns JSON (evidence: `next-site/src/app/page.js`)
- Home page → Tag filters: renders (evidence: `next-site/src/app/page.js`)
- Home page → Filtered listing: renders (evidence: `next-site/src/app/page.js`)
- Tag filters → Filtered listing: sets tag state (evidence: `next-site/src/app/page.js`)
- Filtered listing → Page card: renders matches (evidence: `next-site/src/app/page.js`)
- Page card → GitHub content host: loads screenshots (evidence: `next-site/src/components/card.js`)
- Page card → Showcased sites: links to (evidence: `next-site/src/components/card.js`)
- Home page → Community banner: renders (evidence: `next-site/src/app/page.js`)
- Home page → Site navigation: renders (evidence: `next-site/src/app/page.js`)
- Home page → Hero promotion: renders (evidence: `next-site/src/app/page.js`)