Brand Logo
Say Hello

1. What You Have

A Next.js 16 application with React 19 and TypeScript. Install the dependencies once, work on it with the dev server, and produce the site withnpm run build. Every one of the 31 pages is prerendered at build time, so what ships is static HTML that any host will serve.

2. The Folder

Everything is where its name says it is.
                    
                      pexora/
  src/
    app/                  one folder per route, plus three [slug] routes
    components/
      layout/             the bar, the footer, the FAQ
      cart/               the basket, the checkout and the order
      ui/                 the cards the collections are printed as
      pexora-scripts.tsx  the whole interaction layer
    content/
      blog/               six articles, as MDX
      projects/           three case studies, as MDX
      plans/              three packages, as MDX
    lib/
      content.ts          reads the three collections
      cart.ts             the basket, in localStorage
      seo.ts              the head every page shares
  public/assets/
    css/styles.css        one stylesheet, four sections
    fonts/                three self-hosted families
    images/               every picture the pages use

3. Editing Content

The articles, case studies and packages live as MDX files undersrc/content/: frontmatter for the fields a card and a page print, and a Markdown body for the prose. Adding one means dropping a new file in the folder — itsorderdecides where it appears, and every surface that lists it picks it up at once. The pages themselves are ordinary React components undersrc/app/, where the words that belong to no collection are edited directly.

4. Colours, Type and Spacing

The design system lives in CSS custom properties at the top ofpublic/assets/css/styles.css. Changing--color--black,--color--bright-lilacor any of the--_typography---*and--_responsive---*values re-themes the whole site at once. The style guide page shows every one of them in use.

5. Fonts

Three families are self-hosted as woff2 inpublic/assets/fonts/, and all three are SIL Open Font License 1.1: Jersey 10 for display, Figtree for body copy and EB Garamond for the accent style. Nothing is requested from Google at runtime. To swap a family, replace the files and edit the@font-faceblocks inpublic/assets/fonts/fonts.css, then point the matching--_typography---font-family--*variable at the new name.

6. Motion

All of it is insrc/components/pexora-scripts.tsxand section 4 of the stylesheet: the scroll reveals, the character and line splits, the two scroll-driven rails, the sliders, the tabs, the accordion and the navigation. No animation library is used, and the stylesheet owns every value — that file only decides when. Everything is disabled automatically for readers who have asked their system for reduced motion.

7. The Cart and the Forms Are Demos

The basket, the two checkout pages and the 401 password page run entirely in the browser: the basket is kept in localStorage underpexora:cart, the order it becomes underpexora:order, no payment is taken, no card field is ever read, and the demo password ispexora. The contact form does not send anything. All of it is a few readable files under src/lib/cart.ts and src/components/cart/, ready to be wired to a backend of your own before going live.

8. Still Confused?

If you still have any confusion or need clarification on anything, feel free to reach out to us directly. You can contact us via email atcontact@kaziehsan.com. We’re happy to help!