Timeon Website

Modern marketing and pre-order experience for Timeon Watch built with Next.js 14 (App Router), TypeScript, Tailwind CSS, shadcn/ui, Framer Motion, next-intl, and Sanity CMS.

Stack

• Framework: Next.js 14 (App Router) + TypeScript
• Styling: Tailwind CSS, shadcn/ui component library
• Animations: Framer Motion micro-interactions
• Internationalisation: next-intl (FR/EN with locale-aware routing)
• Content: Sanity Studio embedded at /studio
• Payments: Stripe Checkout + webhook ingestion
• Email: Resend + React Email templates
• Analytics: Plausible (optional via env)

Getting Started

npm install
cp .env.example .env
# fill in SANITY_*, STRIPE_*, RESEND_* secrets

npm run dev

Visit http://localhost:3000/fr for the default locale (French).

Sanity Studio & Seed

1. Populate .env with SANITY_PROJECT_ID, SANITY_DATASET, and API tokens.
2. Launch the embedded Studio:

   npm run studio

3. Seed baseline content (features, product, legal pages):

   npm run cms:seed

Key Scripts

Script	Description
npm run dev	Start Next.js dev server
npm run build	Production build
npm run start	Start production server
npm run lint	ESLint
npm run typecheck	TypeScript project check
npm run studio	Run Sanity Studio locally
npm run cms:seed	Seed Sanity dataset with starter content

Environment Variables

See .env.example for the full list. Minimum required for production:

• NEXT_PUBLIC_BASE_URL
• NEXT_PUBLIC_SANITY_PROJECT_ID, NEXT_PUBLIC_SANITY_DATASET
• SANITY_PROJECT_ID, SANITY_DATASET, SANITY_API_READ_TOKEN, SANITY_API_WRITE_TOKEN
• STRIPE_SECRET_KEY, NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, STRIPE_WEBHOOK_SECRET
• RESEND_API_KEY, EMAIL_FROM
• NEXT_PUBLIC_PLAUSIBLE_DOMAIN (optional analytics)

Project Structure

src/
  app/
    [locale]/(marketing)/page.tsx       # Home
    [locale]/produit/[slug]/page.tsx    # Product detail
    [locale]/produit/page.tsx           # Product listing redirect/list
    [locale]/panier/page.tsx            # Cart
    [locale]/cgv/page.tsx               # Terms & conditions
    [locale]/confidentialite/page.tsx   # Privacy policy
    [locale]/contact/page.tsx           # Contact & newsletter
    (studio)/studio/[[...index]]        # Embedded Sanity Studio
  components/
    analytics/                          # Plausible script helper
    animations/                         # Framer Motion helpers
    cart/                               # Cart context & drawer
    faq/                                # FAQ accordion
    forms/                              # Newsletter & contact forms
    layout/                             # Header, footer, shell
    product/                            # Gallery, CTA, tech specs
    rich-text/                          # Sanity PortableText renderer
  i18n/                                 # next-intl config & routing helpers
  lib/                                  # CMS clients, Stripe, email, rate limiting
  messages/                             # Static copy for FR/EN

API routes live under src/app/api and cover checkout, Stripe webhooks, newsletter subscriptions, and contact submissions (with basic rate limiting).

Testing & Quality

• npm run lint and npm run typecheck keep the codebase healthy.
• Stripe/Resend/Sanity integrations fail gracefully when secrets are absent, but real credentials are required for end-to-end flows.

Future Enhancements

• Full order management dashboards inside Sanity
• Blog/FAQ sections fed by CMS documents
• Playwright E2E coverage and Lighthouse CI