# Juozas Auto Design Brief

## Feature Summary

Build the full Juozas Auto static website for a Lithuanian single-seller used-car inventory. Listing pages are the highest-priority surface because each one doubles as a Meta ad landing page and must convert mobile visitors into calls or WhatsApp messages.

## Primary User Action

A buyer should quickly understand the car, see the price, trust the presentation, and contact the seller without friction.

## Design Direction

Color strategy: Restrained burgundy. Use tinted off-white and charcoal neutrals, with deep burgundy reserved for primary contact actions, prices, focus states, and a few editorial details.

Theme scene: A buyer opens a Meta ad on a phone in daylight or near a car, wants quick trust and contact, so the site uses a light theme with high readability and quiet contrast.

Anchor references: boutique automotive retail, restrained fashion ecommerce, and calm Swiss-style inventory presentation. The site must avoid Autoplius, Skelbiu, marketplace density, and generic SaaS hero sections.

Image gate: skipped because this harness has no native image-generation tool.

## Scope

Fidelity: production-ready.

Breadth: full site, including homepage, listing detail pages, about, contact, content collection, SEO metadata, Meta Pixel stub, README, and responsive behavior.

Interactivity: shipped-quality static site with minimal client JavaScript only where it directly supports conversion or gallery use.

Time intent: polish until build verification passes and the 375px experience answers the conversion checklist.

## Layout Strategy

Mobile-first. Listing pages put the photo gallery, title, price, and contact actions at the top so buyers can evaluate and act within seconds. Desktop uses a sticky gallery on the left and a sticky information/contact column on the right. The homepage stays sparse and image-led, with inventory cards only where they help comparison.

## Key States

- Current inventory with 1-10 cars.
- Sold inventory hidden by default behind a config flag.
- Empty inventory with a calm contact prompt.
- Optional specification fields missing.
- Mobile sticky contact bar after initial scroll.
- Desktop sticky contact area in the right column.
- Reduced-motion mode with no spatial animation dependency.

## Interaction Model

Car cards are full-link targets with subtle lift on hover-capable devices and no image zoom. The gallery is swipeable with a counter and minimal controls. Phone and WhatsApp links fire the Meta `Contact` event when a pixel ID is configured. Contact remains reachable without requiring the buyer to hunt through the page.

## Content Requirements

All UI strings are Lithuanian and centralized in `src/i18n/lt.ts`. Copy should be confident, honest, and quiet. Formatting must match Lithuanian expectations: `12 500 €`, `145 000 km`, `140 kW (190 AG)`, and Lithuanian WhatsApp text.

## Recommended References

- `brand.md` for brand-register distinctiveness and anti-slop checks.
- `spatial-design.md` for mobile-first hierarchy and avoiding unnecessary cards.
- `typography.md` for fluid display type, readable measure, and tabular figures.
- `responsive-design.md` for 375px and touch-target behavior.
- `color-and-contrast.md` for OKLCH burgundy and tinted neutrals.
- `motion-design.md` for restrained micro-interactions and reduced motion.

## Open Questions

None blocking. Use placeholder seller contact details and form endpoint values that are easy to replace in config.