new web style (#279)

.cursor/rules/conanio-agents.mdc

@@ -0,0 +1,15 @@
+---
+description: Enforce conanio AGENTS.md for the Next.js app subtree
+globs: conanio/**
+alwaysApply: false
+---
+
+# conanio — agent rules
+
+When editing or reviewing files under **`conanio/`**:
+
+1. **Read first**: Open and follow `conanio/AGENTS.md` before proposing architectural or framework-level changes.
+
+2. **Next.js version**: This subtree may use APIs or conventions that differ from generic Next.js docs. Prefer checking guidance shipped with the installed version under `node_modules/next/dist/docs/` when unsure, and respect deprecation notices.
+
+3. **Scope**: Do not assume patterns from other folders (for example `legacy/conanio/`) apply verbatim without verifying they match this app's constraints.

AGENTS.md

@@ -0,0 +1,13 @@
+# Agent instructions (workspace)
+
+## ConanCenter Next.js (`conanio`)
+
+When working under **`conanio/`**, you **must** read and follow:
+
+- [`conanio/AGENTS.md`](conanio/AGENTS.md)
+
+That file describes version-specific Next.js expectations for this subtree (APIs and conventions may differ from generic Next.js documentation).
+
+## Rest of this repository
+
+There is no root-wide agent guide beyond this pointer. Use existing code patterns in each package unless a subdirectory adds its own `AGENTS.md`.

README.md

@@ -1,43 +1,47 @@
 # web
-Conan website, including home and ConanCenter
+Monorepo for the Conan website, including the main site and ConanCenter web apps.
 
-## Requirements
+## Useful references
 
-- [Next.js Documentation](https://nextjs.org/docs) - Learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-- [React Select](https://react-select.com/home) - A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.
-- [React Icons](https://react-icons.github.io/react-icons) - Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
+- [Next.js Documentation](https://nextjs.org/docs) - Framework reference for routing, rendering, and API routes used by `conanio`.
+- [`conanio/README.md`](conanio/README.md) - Canonical local setup, scripts, env vars, and runtime notes for the web app.
+- [`conanio/AGENTS.md`](conanio/AGENTS.md) - Project rules, especially API public/private split and implementation constraints.
+- [`conanio/STYLE.md`](conanio/STYLE.md) - UI/page implementation guide for new pages and restyling work.
+- [`conanio/FEATURES.md`](conanio/FEATURES.md) - Deferred feature backlog and scope guardrails.
 
 ## Test server
 
-**server folder:** FastAPI server. [WIP]
+`test-server/` contains a local FastAPI mock server used for development and testing.
 
-Run server:
+Run it locally:
 
 ```bash
 cd test-server
 python3 -m venv venv
 source venv/bin/activate
 pip install -r requirements.txt
-uvicorn app:app --reload --port 4000
+uvicorn app:app --reload --port 5000
 ```
 
+The server will be available at `http://localhost:5000`.
+
 ## Webapp
 
-**conanio folder:** NexJS web app source.
+`conanio/` contains the Next.js web application source code.
 
-Run the development webserver with [yarn](https://yarnpkg.com/):
+Run the development server with [Yarn](https://yarnpkg.com/):
 
 ```bash
 cd conanio
 yarn install
-yarn test:ci
 yarn dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+For full local setup (including environment variables and test commands), see [`conanio/README.md`](conanio/README.md).
 
-[API routes](https://nextjs.org/docs/api-routes/introduction): the `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes): the `pages/api` directory is mapped to `/api/*`, and files there are treated as API endpoints instead of React pages.
 
 ## NGINX Proxy pass configuration
 

conanio/.dockerignore

@@ -2,7 +2,10 @@ Dockerfile
 .dockerignore
 node_modules
 npm-debug.log
-README.md
+yarn-error.log
 .next
 .git
+.gitignore
+.DS_Store
+coverage
 .env.development

conanio/.env.development

@@ -1,4 +1,7 @@
-NEXT_PUBLIC_CONAN_CONANIO_SERVICE=http://127.0.0.1:4000
-CONANIO_SERVER=http://127.0.0.1:4000
-GTM_ID=DEVELOP
-GTM_URL=http://0.0.0.0.fake:4000
+# Conan Center API base for local development:
+# next.config.ts maps this to `process.env.conanioServer` (see `env.conanioServer`).
+# Keep both variables in sync when updating API endpoints.
+NEXT_PUBLIC_CONAN_CONANIO_SERVICE=http://localhost:5000
+
+# Conan release (next.config maps to `process.env.conanVersion` — /downloads, asset URLs).
+NEXT_PUBLIC_CONAN_VERSION=2.28.0

conanio/.env.production

@@ -1,3 +1,2 @@
-CONANIO_SERVER=http://conanio-server:5000
 GTM_ID=GTM-WK44ZFM
 GTM_URL=https://gtm.jfrog.com/gtm.js

conanio/.gitignore

@@ -3,7 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -16,7 +21,6 @@
 /build
 
 # misc
-/tmp/
 .DS_Store
 *.pem
 
@@ -26,10 +30,13 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# local env files
-.env*.local
-
 # vercel
 .vercel
+
 # typescript
-tsconfig.tsbuildinfo
+*.tsbuildinfo
+next-env.d.ts
+
+# temporary: large assets (re-enable in git when ready)
+/public/conan-frog.png
+/public/tribe-frogs.png

conanio/.yarnrc

@@ -0,0 +1 @@
+registry "https://registry.npmjs.org/"

conanio/AGENTS.md

@@ -0,0 +1,47 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->
+
+## Conan backend: public API vs private API
+
+In this app, `getUrls()` in **`src/service/api.ts`** defines **`api.private`** (backend origin from `NEXT_PUBLIC_CONAN_CONANIO_SERVICE` / `conanioServer`) and **`api.public`** (`/api`, same-origin routes on this Next app).
+
+### Rules
+
+| Caller | Base to use | Purpose |
+| --- | --- | --- |
+| **Server-side only** (`getServerSideProps`, other Node code on this host) | **`getUrls().api.private`** | Call the Conan service directly. Not exposed to the browser. |
+| **Frontend** (`useEffect`, event handlers, anything that runs in the browser) | **`getUrls().api.public`** | Same-origin `/api/...` routes. Next forwards selected endpoints to the backend so the client never hits the raw service URL. |
+
+- **`private`** is never a substitute for auth boundaries by itself; it means “not meant to be called from the browser.” **`public`** is the deliberate, proxied surface for browser traffic.
+
+- When you add a **new** browser-initiated fetch to the backend, add or reuse a handler under **`src/pages/api/`** and point the client at **`urls.api.public`** with the matching path (e.g. search → `/api/search/[pattern]`; package `use_it` → `/api/package/[packageId]/use_it`).
+
+### Quick references in this tree
+
+- Client recipes search uses **`urls.api.public`**: `src/hooks/useCenterRecipesSearch.ts` (`getJsonList` against `searchUrls.api.public`).
+- Recipe detail hydrates **use_it** from the client with **`urls.api.public`**: `src/pages/center/recipes/[recipeName].tsx` (`useEffect` + `getJson`); initial package data stays **`urls.api.private`** in `getServerSideProps`.
+
+In **this** tree, shared URL composition and fetch helpers live in **`src/service/api.ts`** — keep the same public/private split when wiring new calls.
+
+## Typography
+
+Font sizes use CSS variables `--fs-*` on `:root` in **`src/styles/globals.css`**. A comment block at the top of that file maps **roles** (marketing hero, doc hero, section titles, ConanCenter, prose, UI) to the usual tokens and breakpoints. Prefer `var(--fs-…)` for new styles; page-specific rules live in **`src/styles/contentPages.module.css`** and **`src/styles/centerPages.module.css`**.
+
+## Page style guide (new pages + restyling)
+
+For any visual/content page work in `conanio` (new pages or restyling pages from other products), follow **`STYLE.md`** as the primary implementation playbook. It defines required shell structure, token usage, component patterns, responsive/a11y checks, and migration workflow.
+
+## FAQ and Terms copy
+
+The visible copy in **`src/pages/faq.tsx`** and **`src/pages/terms-conditions.tsx`** is **canonical**. Do **not** rewrite, replace, paraphrase, or “improve” that text as part of refactors, styling work, or drive-by edits. Only change those strings when the **user explicitly** asks to update FAQ or Terms content (or points to a specific wording change).
+
+## Deferred feature backlog
+
+The file **`FEATURES.md`** in this folder is the canonical backlog for explicitly deferred project-level features.
+
+- Read **`FEATURES.md`** before proposing roadmap-level work.
+- When a deferred item is requested, follow the scope described there and confirm implementation scope with the user.
+- Keep **`FEATURES.md`** updated when the user defers, approves, or closes one of those items.

conanio/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

conanio/Dockerfile

@@ -4,8 +4,8 @@ FROM node:25.6.0-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile
+COPY package.json yarn.lock .yarnrc ./
+RUN yarn install --frozen-lockfile --registry https://registry.npmjs.org/
 
 # Rebuild the source code only when needed
 FROM node:25.6.0-alpine AS builder
@@ -35,7 +35,7 @@ RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
 # You only need to copy next.config.js if you are NOT using the default configuration
-COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/next.config.ts ./
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 

conanio/FEATURES.md

@@ -0,0 +1,60 @@
+# conanio features backlog
+
+This file tracks pending project-level features that are intentionally deferred.
+Before implementing one of these items, confirm scope with the user in the current chat.
+
+## Pending items
+
+1. **Testing baseline**
+   - Add project test strategy and scripts (`test`, `test:ci`).
+   - Cover core flows with unit/integration and at least one E2E path.
+   - Wire coverage expectations.
+
+2. **Security headers**
+   - Add security headers in `next.config.ts` (`headers()`).
+   - Start with CSP in report-only mode, then move to enforcement after validation.
+   - Validate GTM/transcend and other third-party integrations against CSP policy.
+   - Proposed code snippet (do not apply automatically, use as implementation reference):
+
+```ts
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  output: "standalone",
+  // ... existing config ...
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          { key: "X-Content-Type-Options", value: "nosniff" },
+          { key: "X-Frame-Options", value: "SAMEORIGIN" },
+          { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+          { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
+          {
+            key: "Strict-Transport-Security",
+            value: "max-age=31536000; includeSubDomains; preload",
+          },
+          {
+            key: "Content-Security-Policy",
+            value: [
+              "default-src 'self'",
+              "script-src 'self' 'unsafe-inline' https://transcend-cdn.com https://gtm.jfrog.com",
+              "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
+              "font-src 'self' https://fonts.gstatic.com data:",
+              "img-src 'self' data: https:",
+              "connect-src 'self' https:",
+              "frame-ancestors 'self'",
+              "base-uri 'self'",
+            ].join("; "),
+          },
+        ],
+      },
+    ];
+  },
+};
+```
+
+3. **CI quality gates**
+   - Add mandatory CI checks before merge: lint + typecheck + tests + build.
+   - Define fail-fast policy and required checks for pull requests.
+   - Finalize together with Point 2 once test baseline exists.

conanio/README.md

@@ -0,0 +1,80 @@
+# Conan.io web (`conanio`)
+
+Next.js pages-router app for `conan.io` and ConanCenter pages.
+
+## Package manager policy
+
+This project uses **Yarn**.
+
+- Install dependencies with `yarn install`
+- Run scripts with `yarn <script>`
+- Do not use `npm`, `pnpm`, or `bun` in this folder
+- Dependencies must resolve from the public npm registry (`https://registry.npmjs.org/`)
+
+## Requirements
+
+- Node.js 20+ (recommended: latest LTS)
+- Yarn classic (lockfile is `yarn.lock`)
+
+## Local development
+
+1. Install dependencies:
+
+```bash
+yarn install
+```
+
+2. Configure local env in `.env.development` (example values):
+
+```bash
+NEXT_PUBLIC_CONAN_CONANIO_SERVICE=http://localhost:5000
+NEXT_PUBLIC_CONAN_VERSION=2.28.0
+```
+
+3. Start dev server:
+
+```bash
+yarn dev
+```
+
+App runs on [http://localhost:3000](http://localhost:3000).
+
+## Scripts
+
+- `yarn dev` - run dev server
+- `yarn build` - production build
+- `yarn start` - run production server
+- `yarn lint` - run ESLint
+- `yarn test` - run baseline unit/integration tests once
+- `yarn test:watch` - run tests in watch mode
+- `yarn test:ci` - run tests with coverage
+
+## Project structure (high-level)
+
+- `src/pages` - routes (`/`, `/center`, `/api/*`, `/llms.txt`, `/sitemap.xml`)
+- `src/components` - shared UI pieces
+- `tests` - Vitest suite (`*.test.ts`), kept outside `src`
+- `src/service` - API and URL composition helpers
+- `src/styles` - global and page-family styles
+- `public` - static assets
+
+## SEO and crawl surfaces
+
+- `public/robots.txt`
+- `src/pages/sitemap.xml.tsx` (served at `/sitemap.xml`)
+- `src/pages/llms.txt.tsx` (served at `/llms.txt`)
+- `src/pages/center/llms.txt.tsx` (served at `/center/llms.txt`)
+
+## API routing model
+
+- Browser-initiated requests should hit same-origin Next API routes (`/api/...`)
+- Server-side code can call backend private origin directly
+- Current public proxy routes:
+  - `GET /api/search/:pattern`
+  - `GET /api/package/:packageId/use_it`
+  - `GET /api/ping`
+
+## Build and container
+
+- Docker build uses `output: "standalone"` and runs `node server.js`
+- `NEXT_PUBLIC_SITE_ORIGIN` should point to canonical site origin in production