mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
jwinterm
0324c8fab9
THE GREY BOX. The decorative animations were embedded with <object>, which creates a nested browsing context that paints its own canvas. On the dark pages that canvas showed as a light grey square behind the mark. The SVG's own baked tile had been hiding most of it, so only the rounded corners leaked, which is why it read as "grey corners" rather than "grey box": removing the tile exposed the whole thing and made the real cause obvious. <img> has a transparent canvas and still runs CSS animations inside an SVG, as the splash morph and the Hash Bags icon already demonstrate. Swapped on all three pages that used the pattern, not just the one that was reported: /apps, /products and /blog all had it. Verified on the rendered dark page, where the pixels outside the mark, inside the old tile, and the page background are now the same colour. The marks themselves are now the tileless variants from such-graphics f457c37, so nothing bakes a background colour that has to match ours. COPY. "crypto payment tools" -> "cryptocurrency tools", and the supporting line now names both ways of working with us rather than only the products.
Such Software Website
Corporate website for Such Software LLC, a full-service software provider based in Kennett Square, PA.
Lighthouse Scores
| Page | Performance | Accessibility | SEO | Best Practices |
|---|---|---|---|---|
| Home | 99% | 100% | 100% | 77%* |
| Services | 98% | 100% | 100% | 100% |
| About | 99% | 100% | 100% | 100% |
*Home page Best Practices is 77% due to Cloudflare Turnstile third-party cookies.
Tech Stack
- Next.js 15 with App Router
- React 18 + TypeScript 5
- Tailwind CSS 3 + Framer Motion 11
- Radix UI accessible primitives
- next-themes for dark/light mode
- Zod for validation
- Cloudflare Turnstile for bot protection
- Turborepo + pnpm 9
Project Structure
such-software-site/
├── apps/web/ # Next.js website
│ ├── src/app/ # Pages (home, services, about)
│ ├── src/components/ # React components
│ ├── tests/ # Playwright a11y tests
│ └── public/ # Static assets
├── packages/ui/ # Shared UI components
└── packages/config/ # Shared config
Development
pnpm install # Install dependencies
pnpm dev # Start dev server at localhost:3000
pnpm build # Production build
pnpm start # Start production server
Testing
cd apps/web
pnpm test:a11y # Run Playwright accessibility tests
pnpm test:ui # Run tests with interactive UI
42 accessibility tests across Chromium, Firefox, and WebKit covering WCAG 2.2 AA criteria, heading hierarchy, color contrast, and keyboard navigation.
Accessibility
- WCAG 2.2 AA: engineered to meet, audited against (Lighthouse measured 100%)
- Skip-to-main link, semantic HTML5, ARIA labels
- Proper heading hierarchy, color contrast (4.5:1+)
prefers-reduced-motionsupport- Keyboard navigation, focus indicators
- Structured data (JSON-LD) and canonical URLs
Environment Variables
Create apps/web/.env.local:
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key
TURNSTILE_SECRET_KEY=your_secret_key
See apps/web/.env.example for template.
License
Proprietary - Such Software LLC