Wysteria Works SaaS Website

Wysteria Works is a creative technology studio, and this repository contains its complete product surface: a public studio website and, behind it, the SaaS workspace the studio actually runs on. Both halves are one React application, so moving from the marketing story into the product happens without a page reload or a change of visual language.

The workspace is a full operations platform — projects, clients, invoices, finance, analytics, time, people, assets and activity — rendered from a single in-memory dataset. Every screen is interactive: filtering, searching, sorting, editing, dialogs and state all behave the way they would in the shipped product.

Account screens live at /sign-in, /sign-up and /profile.

The landing page reads as one continuous scroll:

• Intro and hero — an animated entrance over a silent looping background video, followed by the studio statement.
• Editorial band — a plain-language description of how the studio works.
• Selected work — a scroll-driven horizontal gallery of square project cards. The section pins itself and the cards glide sideways, one at a time.
• Working alongside — a labelled marquee of the industry and technology groups the studio operates around. Hovering pauses the strip and reveals each mark in its own colours.
• Platform preview — a live fragment of the workspace interface.
• Engagements — pricing rows that open on pointer, click and keyboard focus.
• Contact — a product-shaped panel contrasting a studio without the platform against one running on it, then a direct route into the workspace.

src/
  routes/              file-based routes (public pages, workspace, account)
  components/
    public/            landing sections
    workspace/         shell, provider, session store, one file per view
      views/           dashboard, projects, clients, invoices, finance, …
      ui/              workspace-specific primitives
    auth/              sign-in and sign-up forms
    ui/                shared design-system primitives
  lib/
    data.ts            the seeded dataset every workspace view reads
    i18n.tsx           English and Turkish dictionaries + locale provider
    site.ts            contact address, social links, engagement pricing
    format.ts          currency, date and number formatting
  styles.css           design tokens, themes and custom utilities
public/                brand and partner assets

Data. There is no backend. src/lib/data.ts holds the seeded dataset and src/components/workspace/workspace-store.tsx keeps session state, so anything edited during a visit stays consistent across every screen until the tab closes.

Theming. Light and dark themes are built separately from the semantic tokens in src/styles.css. Components reference tokens (brand, card, muted, success…) rather than raw colours, so one token change re-themes the whole app. The workspace additionally supports scoped dashboard palettes.

Language. English and Turkish are both complete and switch instantly from the header, with a crossfade instead of a reload.

Motion. Motion drives entrances, the pinned horizontal gallery and panel transitions; Lenis smooths scrolling. Every animation respects the operating system's reduced-motion preference and degrades to a static, scrollable layout.

Responsiveness and performance. Layouts are mobile-first, images are lazily decoded, the marquee and gallery run on GPU-composited transforms, and route code is split by TanStack Router. Head metadata (title, description, Open Graph, Twitter card) is defined per route.

• TanStack Start v1 — full-stack React framework, server rendering
• TanStack Router — type-safe file-based routing
• React 19 + TypeScript — strict typing throughout
• Vite 7 — build and dev pipeline
• Tailwind CSS v4 — CSS-first design system defined in src/styles.css
• Motion — animation and scroll choreography
• Lenis — smooth scrolling
• Recharts — dashboard and analytics charts
• lucide-react — icon set
• TanStack Query — client data layer