mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
jwinterm
787753aef1
New store icons from bauhaus-echo/assets/store/app_icon_512.png and suchoice/assets/icon_1024.png, both resampled to 512 and both square and fully opaque. Bauhaus drops 320KB -> 72KB, Suchoice 259KB -> 142KB. The corner artifact had a measurable cause. Five icons bake their own rounded corners as transparency (suchoice 20.5%, smirk-wallet 20.1%, vegan-iq 19.3%, mushroom-capital 17.0%, such-moon-launch 15.2% of their width); the rest are square. CSS then rounded them again, at a radius that differed per page: 21.4% on /apps at 56px, 25% at 64px, and 20% at 80px. 20% is BELOW suchoice's 20.5% baked corner, so on /products/suchoice the CSS clip fell inside the transparent corner and a wedge of card background showed through at each corner. That is the "different coloured stuff next to the rounded corners": not a rendering bug, an arithmetic one. Every square app icon now uses one percentage radius, rounded-[22%]. It is above every baked radius in the set, so no transparent corner can ever be exposed, and being a percentage it stays identical at 56, 64 and 80px instead of drifting with the pixel size. The two new icons are square, so they cannot produce the artifact at any radius. The non-square occupy-wallets banner keeps a fixed radius: a percentage on a non-square box goes elliptical.
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