File Structure

Norio is a Vite + React Router SPA. After npm run build, Vite emits the production SPA under dist/ — with SPA redirects via public/_redirects. Day-to-day editing happens under src/.

---

src/main.tsx + src/App.tsx (entry)

    
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "@fontsource/inter/400.css";
import "./styles/globals.scss";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
);

// App.tsx mounts <AppRoutes /> + VendorScripts
    

---

src/components/layout/SiteShell.tsx

Pages wrap content in SiteShell, which composes header/footer chrome and mounts client motion via EffectsLoader.

    
export type SiteShellProps = {
  children: React.ReactNode;
  headerName?: "header-1" | "header-2" | "header-3" | "header-4" | "header-5";
  footerName?: "footer-1" | "footer-2" | "footer-3";
  pageName?: string;
  enablePreLoader?: boolean;
  bodyClass?: string;
  colorScheme?: "light" | "dark";
};

// Typical page usage:
<SiteShell pageName="home-dark" colorScheme="dark" enablePreLoader>
  {/* sections */}
</SiteShell>
    
 

---

Key paths

• src/pages/*.tsx + src/AppRoutes.tsx — routes
• src/components/sections/** — section React components
• src/data/*.json — copy and lists
• src/styles/** — SCSS (section styles mirror HTML master)
• src/effects/** — GSAP / Three.js modules
• tokens/tokens.json — design tokens → CSS vars via npm run tokens
• public/assets/** — static images and vendor scripts

Dependencies (package name)

    
{
  "name": "norio-react-dev",
  "version": "1.0.0",
  "dependencies": {
    "react-router-dom": "^7.9.1",
    "vite": "^6.2.0",
    "react": "19.2.8",
    "react-dom": "19.2.8",
    "gsap": "^3.15.0",
    "three": "^0.184.0",
    "glightbox": "^3.3.1"
  },
  "devDependencies": {
    "sass": "^1.105.0",
    "typescript": "^5"
  }
}