ashwinramakrishnan/sai-meera

Purpose and Entry Points

This is a Vite-built React single-page site for a print/design business. It combines marketing and product/category pages, interactive visual “machine” showcases, contact/enquiry capture, image upload, and Razorpay payment initiation. Browser bootstrap is src/main.jsx; root composition and route-level orchestration are in src/App.jsx; the primary landing experience is src/pages/HomePage.jsx.

Application Shell and Navigation

The root app owns the persistent experience around page content: navigation, footer, loading/cursor effects, and scroll feedback. Layout components are separated from page modules, enabling route content to change without duplicating chrome.

• src/App.jsx

• src/components/layout/Navbar.jsx

• src/components/layout/Preloader.jsx

• src/components/layout/Footer.jsx

Page and Product Composition

Pages organize the domain-facing sections: home, product listing/category detail, printed-product-specific pages, and contact. Product/category metadata is locally defined and likely drives category presentation and navigation rather than being fetched from a CMS.

• src/pages/ProductsPage.jsx

• src/pages/CategoryPage.jsx

• src/pages/GreetingCardsPage.jsx

• src/data/categories.js

Marketing Showcase Layer

Reusable showcase modules construct the commercial portfolio and service narrative: featured work, design lab, print service cards, banners, galleries, invitations, and image framing. These are presentation-domain components consumed by landing or specialized pages.

• src/components/showcases/FeaturedWork.jsx

• src/components/showcases/ServicesGrid.jsx

• src/components/showcases/WhatWePrint.jsx

Interactive Production-Machine Experience

The site has a distinct visualization subsystem for print-production machinery. Machine-section/HUD/console UI components are paired with scene modules representing presses, cutters, printer output, and shared 3D-like environmental elements. This is a strong boundary from conventional page content and likely coordinates visual state through scroll and animation hooks.

• src/components/machines/MachineSection.jsx

• src/components/machines/MachineConsole.jsx

• src/scenes/OffsetPress.jsx

• src/scenes/SharedLighting.jsx

Interaction, Responsive Behavior, and Animation

Cross-cutting hooks encapsulate viewport detection, media queries, in-view activation, smooth scrolling, scroll ratios, and choreography. These form the control path for progressive visual effects and should remain independent of individual showcase content.

• src/hooks/useScrollChoreography.js

• src/hooks/useLenis.js

• src/hooks/useInView.js

• src/styles/scroll-choreography.css

Backend Boundary: Supabase, Uploads, and Enquiries

The frontend API layer communicates with Supabase. Supabase Edge Functions provide server-side trust boundaries for upload authorization and enquiry submission; database structure is represented in the project schema. Client secrets and service credentials should remain outside the browser, supplied through environment configuration.

• src/lib/supabase.js

• src/lib/api.js

• supabase/functions/authorize-upload/index.ts

• supabase/functions/submit-enquiry/index.ts

• supabase/schema.sql

Payments and Deployment

Razorpay checkout is initiated from the client but order creation, signature verification, and webhook processing occur in Supabase Edge Functions, keeping payment validation server-side. The static Vite build is configured for Firebase Hosting, while Supabase remains the backend runtime.

• src/hooks/useRazorpayCheckout.js

• supabase/functions/create-razorpay-order/index.ts

• supabase/functions/verify-razorpay-payment/index.ts

• supabase/functions/razorpay-webhook/index.ts

• firebase.json