How kamalesh-k05/opencode-web works
This repository contains two React marketing experiences: a Pavazha Malli grocery storefront and a Tile Construction company portfolio site. Visitors browse each page’s sections and visual features; the construction site also presents project galleries and contact information, while the grocery page includes category and gallery content plus a newsletter section. The excerpts show the app-level composition and selected component relationships, but not every section’s implementation or behavior, so unsampled relationships are omitted.
Main entry points: src/App.jsx Construction page · src/App.jsx Grocery page · data.js Site content data · lib.jsx Reveal helpers
Components 30
Grocery storefront
- Grocery page
src/App.jsx - Category selector
src/App.jsx - Store gallery
src/App.jsx - Newsletter section
src/App.jsx
Interactive visuals
- Masonry gallery
src/components/Masonry.jsx - Option wheel
src/components/OptionWheel.jsx - Scroll expansion
src/components/ScrollExpand.jsx - Ferrofluid visual
src/components/Ferrofluid.jsx - Orb visual
src/components/Orb.jsx - Kolam visual
src/components/Kolam.jsx - Image trail
src/components/ImageTrail.jsx - Other visual components
src/components
Construction portfolio
- Construction page
tile-construction/src/App.jsx - Preloader
tile-construction/src/components/Preloader.jsx - Site navigation
tile-construction/src/components/Nav.jsx - Hero section
tile-construction/src/components/Hero.jsx - Company overview
tile-construction/src/components/About.jsx - Capabilities
tile-construction/src/components/Capabilities.jsx - Company metrics
tile-construction/src/components/Numbers.jsx - Building showcase
tile-construction/src/components/Building.jsx - Project map
tile-construction/src/components/ViewMap.jsx - Project collections
tile-construction/src/components/Floors.jsx - Project gallery
tile-construction/src/components/Gallery.jsx - Contact callout
tile-construction/src/components/FooterCTA.jsx - Contact and footer
tile-construction/src/components/Footer.jsx
Shared presentation
- Gradual blur
tile-construction/src/components/GradualBlur.jsx - Reveal helpers
tile-construction/src/lib.jsx - In-view observer
tile-construction/src/useInView.js - Site content data
tile-construction/src/data.js
Other components
- Site visitor
Connections 39
- Site visitor → Grocery page: opens
- Grocery page → Category selector: renders
src/App.jsx - Grocery page → Store gallery: renders
src/App.jsx - Grocery page → Newsletter section: renders
src/App.jsx - Grocery page → Masonry gallery: renders
src/App.jsx - Grocery page → Option wheel: renders
src/App.jsx - Grocery page → Scroll expansion: renders
src/App.jsx - Grocery page → Ferrofluid visual: lazy-loads
src/App.jsx - Grocery page → Orb visual: lazy-loads
src/App.jsx - Grocery page → Kolam visual: lazy-loads
src/App.jsx - Grocery page → Image trail: lazy-loads
src/App.jsx - Site visitor → Construction page: opens
- Construction page → Preloader: renders
tile-construction/src/App.jsx - Construction page → Site navigation: renders
tile-construction/src/App.jsx - Construction page → Hero section: renders
tile-construction/src/App.jsx - Construction page → Company overview: renders
tile-construction/src/App.jsx - Construction page → Capabilities: renders
tile-construction/src/App.jsx - Construction page → Company metrics: renders
tile-construction/src/App.jsx - Construction page → Building showcase: renders
tile-construction/src/App.jsx - Construction page → Project map: renders
tile-construction/src/App.jsx - Construction page → Project collections: renders
tile-construction/src/App.jsx - Construction page → Project gallery: renders
tile-construction/src/App.jsx - Construction page → Contact callout: renders
tile-construction/src/App.jsx - Construction page → Contact and footer: renders
tile-construction/src/App.jsx - Capabilities → Gradual blur: renders
tile-construction/src/components/Capabilities.jsx - Company overview → Reveal helpers: uses
tile-construction/src/components/About.jsx - Building showcase → Reveal helpers: uses
tile-construction/src/components/Building.jsx - Project collections → Reveal helpers: uses
tile-construction/src/components/Floors.jsx - Contact callout → Reveal helpers: uses
tile-construction/src/components/FooterCTA.jsx - Reveal helpers → In-view observer: observes visibility
tile-construction/src/lib.jsx - Company overview → Site content data: reads
tile-construction/src/components/About.jsx - Building showcase → Site content data: reads
tile-construction/src/components/Building.jsx - Project collections → Site content data: reads
tile-construction/src/components/Floors.jsx - Project gallery → Site content data: reads
tile-construction/src/components/Gallery.jsx - Contact and footer → Site content data: reads
tile-construction/src/components/Footer.jsx - Contact callout → Site content data: reads
tile-construction/src/components/FooterCTA.jsx - Hero section → Site content data: reads
tile-construction/src/components/Hero.jsx - Site navigation → Site content data: reads
tile-construction/src/components/Nav.jsx - Project map → Site content data: reads
tile-construction/src/components/ViewMap.jsx