Products Structure

This section will provide a detailed guide on how to maintain an organized file system within your project. Keeping your files structured is crucial for efficient workflow and easy navigation. Our theme adheres to a specific file organization, which is designed to help you manage your project effectively. The file structure of our theme is organized as follows:

Folder Structure

index.html Entry HTML, loads DM Sans and template CSS
vite.config.ts Vite + React plugin, @/ alias → src/
tsconfig.json / tsconfig.app.json / tsconfig.node.json
package.json
public
- assets — css, imgs, fonts, video
- data
- scripts — theme-init.js
src
- main.tsx — bootstraps React + RouterProvider
- router.tsx — all 36 routes
- vite-env.d.ts
- pages
  - Home.tsx — route /
  - Index2.tsx — route /index-2
  - About1.tsx, About2.tsx, About3.tsx
  - Portfolio1.tsx … Portfolio6.tsx
  - ...
  - PageLoader.tsx — initial loader
  - NotFound.tsx — catch-all *
- components
  - common — Image.tsx, Link.tsx shims
  - cards
  - effects — all GSAP effects
  - elements
  - layout — Header*, Footer*, Sidebar…
  - sections — home-1..5, about-1..3, portfolio-*, …
  - shared
- util
  - dynamic.tsx — next/dynamic replacement
  - data-bg.ts
  - ImageHoverEffects.ts
  - useGsap.ts
  - useTheme.ts, useCollapse.ts, useSidebarMenu.ts
  - ...
- data
  - cardShop.json
scripts Build-time helpers (Node.js)
- migrate.mjs
- generate-pages.mjs
- update-docs-urls.mjs
dist Generated by npm run build