STS Demo

Suave Tech Solutions (STS.) — Next.js 14 (App Router) demo application showcasing AI-powered business automation across eight industry verticals. Built for client-facing demonstrations.

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript (strict mode)
• Styling: Tailwind CSS with custom brand tokens
• Typography: Plus Jakarta Sans via Google Fonts
• Linting/Formatting: Biome (replaces ESLint + Prettier)
• Git Hooks: Lefthook (pre-commit + pre-push)

Getting Started

pnpm install
pnpm lefthook install   # activate git hooks
pnpm dev                # start dev server at localhost:3000

Scripts

Command	Description
pnpm dev	Start development server
pnpm build	Production build
pnpm lint	Biome lint with auto-fix
pnpm format	Biome format with auto-fix
pnpm check	Biome check without writing (CI)
pnpm type-check	TypeScript type-check only

Project Structure

app/
  layout.tsx              # Root layout (nav, font, brand surface)
  page.tsx                # Home page with demo card grid
  globals.css             # Tailwind directives + font import
  demo/
    senior-living/        # Demo 1: Resident intake automation
    tax-filing/           # Demo 2: W-2 parsing and 1040 population
    bookkeeping/          # Demo 3: Expense categorization
    inventory/            # Demo 4: Natural language stock management
    appointments/         # Demo 5: Booking confirmations & follow-ups
    reviews/              # Demo 6: Google review response generator
    chat-widget/          # Demo 7: Customer support chat widget
    patient-faq/          # Demo 8: HIPAA-safe patient FAQ bot

components/               # Atomic design system (Brad Frost methodology)
  atoms/                  # Basic building blocks
    Badge.tsx             # Label badges with variant support
    Button.tsx            # Primary/secondary/ghost button variants
    Tag.tsx               # Small pill tags
    TypingIndicator.tsx   # Chat typing animation (bouncing dots)
  molecules/              # Combinations of atoms
    BusinessSwitcher.tsx  # Business type selector tabs
    ChatInput.tsx         # Chat text input + send button
    ChatMessage.tsx       # Chat message bubble with variants
    DemoHeader.tsx        # Back link + badge + title + subtitle
    LoadingState.tsx      # AI processing animation
    SuggestionChips.tsx   # Clickable suggestion pill row
  organisms/              # Complex UI sections
    ChatPanel.tsx         # Full chat interface (header + messages + input)
    CtaSection.tsx        # Dark CTA block (used on every demo)
    SellingPointsGrid.tsx # 2-col icon + text feature grid
  templates/              # Page-level layout wrappers
    DemoLayout.tsx        # Common demo page shell (max-width + header)
  ui/                     # Standalone utility components
    FileUpload.tsx        # Drag-and-drop file upload
    StepIndicator.tsx     # Multi-step progress indicator

lib/
  hooks/                  # Shared React hooks
    useChatState.ts       # Chat messages, typing, scroll, send
    useCopyToClipboard.ts # Copy with visual feedback
  utils/                  # Pure utility functions
    format.ts             # Currency formatting (formatCurrency, formatUSD)
    aggregation.ts        # Data aggregation (groupBySum)
  constants/              # Shared reference data
    locations.ts          # US state abbreviations
  config/                 # Per-demo constants and helper functions
    appointments.ts       # Business configs, send times
    bookkeeping.ts        # Sample docs, category colors
    chat-widget.ts        # Business Q&A configs, response matching
    inventory.ts          # Business types, status styles, chips
    patient-faq.ts        # Practice configs, HIPAA guardrails
    reviews.ts            # Review samples, tones, business types
  mockAI.ts               # Simulated AI responses (no API keys needed)

docs/                     # Specification documents and workflow diagrams
agents/                   # AI agent workflow guides

Design System

The application uses a custom brand palette derived from suavetech.solutions:

Token	Hex	Usage
brand-400	#9f8be7	Primary accent (buttons, links, active states)
brand-50	#f5f3fc	Light backgrounds, hover states
brand-700	#5f42b8	Dark text on brand backgrounds
lime-400	#ddf160	Secondary accent, online indicators
surface-light	#faf7f6	Page background
surface-dark	#161616	Header, CTA sections

Components follow a consistent color scheme across all demos rather than per-demo color coding, providing a cohesive brand experience.

Architecture Decisions

• Atomic Design: Components are organized following Brad Frost's atomic design methodology (atoms, molecules, organisms, templates) to maximize reuse across demos.
• Mock AI: All AI responses are simulated in lib/mockAI.ts for offline demos. No API keys or external services required.
• Biome over ESLint: Single tool for linting and formatting with faster execution.
• No runtime dependencies: Beyond Next.js and React, the project has zero production dependencies.

Demo Context

This is a client-facing demo application. Priority is a polished, consistent experience. All data shown is synthetic.