chore: initialize project

2026-04-03 16:32:58 +03:00
commit 014058071a
78 changed files with 12498 additions and 0 deletions
--- a/.cta.json
+++ b/.cta.json
@@ -0,0 +1,22 @@
 {
  "projectName": "monie-landing",
  "mode": "file-router",
  "typescript": true,
  "packageManager": "npm",
  "includeExamples": false,
  "tailwind": true,
  "addOnOptions": {},
  "envVarValues": {},
  "git": true,
  "routerOnly": false,
  "version": 1,
  "framework": "react",
  "chosenAddOns": [
    "biome",
    "posthog",
    "form",
    "t3env",
    "compiler",
    "sentry"
  ]
 }
--- a/.cursorrules
+++ b/.cursorrules
@@ -0,0 +1,22 @@
 We use Sentry for watching for errors in our deployed application, as well as for instrumentation of our application.
 ## Error collection
 Error collection is automatic and configured in `src/router.tsx`.
 ## Instrumentation
 We want our server functions instrumented. So if you see a function name like `createServerFn`, you can instrument it with Sentry. You'll need to import `Sentry`:
 ```tsx
 import * as Sentry from '@sentry/tanstackstart-react'
 ```
 And then wrap the implementation of the server function with `Sentry.startSpan`, like so:
 ```tsx
 Sentry.startSpan({ name: 'Requesting all the pokemon' }, async () => {
  // Some lengthy operation here
  await fetch('https://api.pokemon.com/data/')
 })
 ```
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,12 @@
 .git
 .gitea
 node_modules
 .output
 dist
 coverage
 .npm
 *.log
 .env
 .env.*
 README.md
 .codex
--- a/.gitea/workflows/deploy-dev.yml
+++ b/.gitea/workflows/deploy-dev.yml
@@ -0,0 +1,185 @@
 name: Deploy monie-landing to dev (kaniko)
 on:
  push:
    branches: [ develop ]
 jobs:
  build-and-deploy:
    runs-on: [self-hosted, linux, k8s]
    env:
      CI_NS: ci
      APP_NS: dev
      # Kaniko job runs inside cluster pods and can reach registry via node IP.
      PUSH_REGISTRY: 192.168.1.250:32000
      # Runtime pull should use the endpoint configured in MicroK8s containerd.
      DEPLOY_REGISTRY: localhost:32000
      IMAGE: monie-landing
      DEPLOYMENT: monie-landing
      CONTAINER: monie-landing
      # repo без кредов (креды берём из secret внутри Kaniko Job)
      REPO_HOST: git.denjs.ru
      REPO_PATH: monie/monie-landing.git
    steps:
      - name: Debug
        run: |
          set -eu
          echo "sha=${{ github.sha }}"
          echo "ref=${{ github.ref_name }}"
          echo "repo=git://${REPO_HOST}/${REPO_PATH}"
          microk8s kubectl version --client=true
      - name: Build & push with Kaniko (K8s Job)
        env:
          SHA: ${{ github.sha }}
          REF: ${{ github.ref_name }}
        run: |
          set -euo pipefail
          JOB="kaniko-${SHA}"
          DEST="${PUSH_REGISTRY}/${IMAGE}:${SHA}"
          echo "JOB=${JOB}"
          echo "DEST=${DEST}"
          echo "REF=${REF}"
          echo "REPO=git://${REPO_HOST}/${REPO_PATH}"
          microk8s kubectl -n "${CI_NS}" delete job "${JOB}" --ignore-not-found=true
          cat <<EOF_JOB | microk8s kubectl -n "${CI_NS}" apply -f -
          apiVersion: batch/v1
          kind: Job
          metadata:
            name: ${JOB}
            labels:
              app: kaniko
          spec:
            backoffLimit: 0
            template:
              spec:
                restartPolicy: Never
                containers:
                  - name: kaniko
                    image: gcr.io/kaniko-project/executor:latest
                    env:
                      - name: GIT_USERNAME
                        value: denis
                      - name: GIT_PASSWORD
                        valueFrom:
                          secretKeyRef:
                            name: gitea-git-token
                            key: token
                    args:
                      - --context=git://${REPO_HOST}/${REPO_PATH}#refs/heads/${REF}
                      - --dockerfile=Dockerfile
                      - --destination=${DEST}
                      - --verbosity=debug
                      - --cache=true
                      - --cache-repo=${PUSH_REGISTRY}/${IMAGE}-cache
                      - --insecure-registry=${PUSH_REGISTRY}
                      - --skip-tls-verify-registry=${PUSH_REGISTRY}
            ttlSecondsAfterFinished: 3600
          EOF_JOB
          DEADLINE_SECONDS=1800
          START_TS="$(date +%s)"
          OK=1
          while true; do
            SUCCEEDED="$(microk8s kubectl -n "${CI_NS}" get job "${JOB}" -o jsonpath='{.status.succeeded}' 2>/dev/null || true)"
            FAILED="$(microk8s kubectl -n "${CI_NS}" get job "${JOB}" -o jsonpath='{.status.failed}' 2>/dev/null || true)"
            SUCCEEDED="${SUCCEEDED:-0}"
            FAILED="${FAILED:-0}"
            if [ "${SUCCEEDED}" -ge 1 ]; then
              OK=0
              break
            fi
            if [ "${FAILED}" -ge 1 ]; then
              OK=1
              break
            fi
            NOW_TS="$(date +%s)"
            if [ $((NOW_TS - START_TS)) -ge "${DEADLINE_SECONDS}" ]; then
              OK=2
              break
            fi
            sleep 5
          done
          echo "[ci] job status:"
          microk8s kubectl -n "${CI_NS}" get job "${JOB}" -o wide || true
          echo "[ci] job logs (tail):"
          microk8s kubectl -n "${CI_NS}" logs "job/${JOB}" --tail=300 || true
          if [ "${OK}" -ne 0 ]; then
            echo "[ci] job did not reach Complete; describing job/pods for debug"
            microk8s kubectl -n "${CI_NS}" describe job "${JOB}" || true
            microk8s kubectl -n "${CI_NS}" get pods -l job-name="${JOB}" -o wide || true
            microk8s kubectl -n "${CI_NS}" describe pod -l job-name="${JOB}" || true
            exit 1
          fi
      - name: Deploy to dev
        env:
          SHA: ${{ github.sha }}
        run: |
          set -euo pipefail
          TARGET_IMAGE="${DEPLOY_REGISTRY}/${IMAGE}:${SHA}"
          microk8s kubectl -n "${APP_NS}" set image "deployment/${DEPLOYMENT}" \
            "${CONTAINER}=${TARGET_IMAGE}"
          set +e
          microk8s kubectl -n "${APP_NS}" rollout status "deployment/${DEPLOYMENT}" --timeout=15m
          ROLLOUT_RC=$?
          set -e
          if [ "${ROLLOUT_RC}" -ne 0 ]; then
            echo "[deploy] rollout did not complete in time; collecting diagnostics"
            SELECTOR="$(microk8s kubectl -n "${APP_NS}" get deployment "${DEPLOYMENT}" \
              -o jsonpath='{range $k,$v := .spec.selector.matchLabels}{$k}={$v},{end}' 2>/dev/null || true)"
            SELECTOR="${SELECTOR%,}"
            microk8s kubectl -n "${APP_NS}" get deployment "${DEPLOYMENT}" -o wide || true
            microk8s kubectl -n "${APP_NS}" describe deployment "${DEPLOYMENT}" || true
            if [ -n "${SELECTOR}" ]; then
              microk8s kubectl -n "${APP_NS}" get rs -l "${SELECTOR}" -o wide || true
              microk8s kubectl -n "${APP_NS}" get pods -l "${SELECTOR}" -o wide || true
              microk8s kubectl -n "${APP_NS}" describe pods -l "${SELECTOR}" || true
            fi
            microk8s kubectl -n "${APP_NS}" get events --sort-by=.lastTimestamp | tail -n 100 || true
            DESIRED="$(microk8s kubectl -n "${APP_NS}" get deployment "${DEPLOYMENT}" \
              -o jsonpath='{.spec.replicas}' 2>/dev/null || true)"
            UPDATED="$(microk8s kubectl -n "${APP_NS}" get deployment "${DEPLOYMENT}" \
              -o jsonpath='{.status.updatedReplicas}' 2>/dev/null || true)"
            AVAILABLE="$(microk8s kubectl -n "${APP_NS}" get deployment "${DEPLOYMENT}" \
              -o jsonpath='{.status.availableReplicas}' 2>/dev/null || true)"
            DESIRED="${DESIRED:-0}"
            UPDATED="${UPDATED:-0}"
            AVAILABLE="${AVAILABLE:-0}"
            echo "[deploy] desired=${DESIRED} updated=${UPDATED} available=${AVAILABLE}"
            if [ "${UPDATED}" -ge "${DESIRED}" ] && [ "${AVAILABLE}" -ge "${DESIRED}" ]; then
              echo "[deploy] New replica is healthy; old replica termination is delayed. Continuing."
              exit 0
            fi
            exit "${ROLLOUT_RC}"
          fi
--- a/.gitea/workflows/deploy-prod.yml
+++ b/.gitea/workflows/deploy-prod.yml
@@ -0,0 +1,174 @@
 # .gitea/workflows/deploy-prod.yml
 name: Deploy monie-landing (kaniko)
 on:
  push:
    branches: [ main ]
 jobs:
  build-and-deploy:
    runs-on: [self-hosted, linux, k8s]
    env:
      CI_NS: ci
      APP_NS: prod
      # Kaniko job runs inside cluster pods and can reach registry via node IP.
      PUSH_REGISTRY: 192.168.1.250:32000
      # Runtime pull should use the endpoint configured in MicroK8s containerd.
      DEPLOY_REGISTRY: localhost:32000
      IMAGE: monie-landing
      DEPLOYMENT: monie-landing
      CONTAINER: monie-landing
      # repo без кредов (креды берём из secret внутри Kaniko Job)
      REPO_HOST: git.denjs.ru
      REPO_PATH: monie/monie-landing.git
    steps:
      - name: Build & push image with Kaniko (K8s Job)
        env:
          SHA: ${{ github.sha }}
          REF: ${{ github.ref_name }}
        run: |
          set -euo pipefail
          JOB="kaniko-${SHA}"
          DEST="${PUSH_REGISTRY}/${IMAGE}:${SHA}"
          kubectl -n "${CI_NS}" delete job "${JOB}" --ignore-not-found=true
          cat <<EOF_JOB | kubectl -n "${CI_NS}" apply -f -
          apiVersion: batch/v1
          kind: Job
          metadata:
            name: ${JOB}
          spec:
            backoffLimit: 0
            activeDeadlineSeconds: 1800
            ttlSecondsAfterFinished: 3600
            template:
              spec:
                restartPolicy: Never
                containers:
                  - name: kaniko
                    image: gcr.io/kaniko-project/executor:latest
                    imagePullPolicy: IfNotPresent
                    env:
                      - name: GIT_USERNAME
                        value: denis
                      - name: GIT_PASSWORD
                        valueFrom:
                          secretKeyRef:
                            name: gitea-git-token
                            key: token
                    args:
                      - --dockerfile=Dockerfile
                      - --context=git://${REPO_HOST}/${REPO_PATH}#refs/heads/${REF}
                      - --destination=${DEST}
                      - --verbosity=debug
                      - --cache=true
                      - --cache-repo=${PUSH_REGISTRY}/${IMAGE}-cache
                      - --insecure-registry=${PUSH_REGISTRY}
                      - --skip-tls-verify-registry=${PUSH_REGISTRY}
          EOF_JOB
          # ждём terminal state job и не висим 30 минут при явном Failed
          DEADLINE_SECONDS=1800
          START_TS="$(date +%s)"
          OK=1
          while true; do
            SUCCEEDED="$(kubectl -n "${CI_NS}" get job "${JOB}" -o jsonpath='{.status.succeeded}' 2>/dev/null || true)"
            FAILED="$(kubectl -n "${CI_NS}" get job "${JOB}" -o jsonpath='{.status.failed}' 2>/dev/null || true)"
            SUCCEEDED="${SUCCEEDED:-0}"
            FAILED="${FAILED:-0}"
            if [ "${SUCCEEDED}" -ge 1 ]; then
              OK=0
              break
            fi
            if [ "${FAILED}" -ge 1 ]; then
              OK=1
              break
            fi
            NOW_TS="$(date +%s)"
            if [ $((NOW_TS - START_TS)) -ge "${DEADLINE_SECONDS}" ]; then
              OK=2
              break
            fi
            sleep 5
          done
          echo "[ci] job status:"
          kubectl -n "${CI_NS}" get job "${JOB}" -o wide || true
          echo "[ci] job logs (tail):"
          kubectl -n "${CI_NS}" logs "job/${JOB}" --tail=300 || true
          if [ "${OK}" -ne 0 ]; then
            echo "[ci] job did not reach Complete; describing job/pods for debug"
            kubectl -n "${CI_NS}" describe job "${JOB}" || true
            kubectl -n "${CI_NS}" get pods -l job-name="${JOB}" -o wide || true
            kubectl -n "${CI_NS}" describe pod -l job-name="${JOB}" || true
            exit 1
          fi
      - name: Deploy to prod
        env:
          SHA: ${{ github.sha }}
        run: |
          set -euo pipefail
          TARGET_IMAGE="${DEPLOY_REGISTRY}/${IMAGE}:${SHA}"
          kubectl -n "${APP_NS}" set image "deployment/${DEPLOYMENT}" \
            "${CONTAINER}=${TARGET_IMAGE}"
          set +e
          kubectl -n "${APP_NS}" rollout status "deployment/${DEPLOYMENT}" --timeout=15m
          ROLLOUT_RC=$?
          set -e
          if [ "${ROLLOUT_RC}" -ne 0 ]; then
            echo "[deploy] rollout did not complete in time; collecting diagnostics"
            SELECTOR="$(kubectl -n "${APP_NS}" get deployment "${DEPLOYMENT}" \
              -o jsonpath='{range $k,$v := .spec.selector.matchLabels}{$k}={$v},{end}' 2>/dev/null || true)"
            SELECTOR="${SELECTOR%,}"
            kubectl -n "${APP_NS}" get deployment "${DEPLOYMENT}" -o wide || true
            kubectl -n "${APP_NS}" describe deployment "${DEPLOYMENT}" || true
            if [ -n "${SELECTOR}" ]; then
              kubectl -n "${APP_NS}" get rs -l "${SELECTOR}" -o wide || true
              kubectl -n "${APP_NS}" get pods -l "${SELECTOR}" -o wide || true
              kubectl -n "${APP_NS}" describe pods -l "${SELECTOR}" || true
            fi
            kubectl -n "${APP_NS}" get events --sort-by=.lastTimestamp | tail -n 100 || true
            DESIRED="$(kubectl -n "${APP_NS}" get deployment "${DEPLOYMENT}" \
              -o jsonpath='{.spec.replicas}' 2>/dev/null || true)"
            UPDATED="$(kubectl -n "${APP_NS}" get deployment "${DEPLOYMENT}" \
              -o jsonpath='{.status.updatedReplicas}' 2>/dev/null || true)"
            AVAILABLE="$(kubectl -n "${APP_NS}" get deployment "${DEPLOYMENT}" \
              -o jsonpath='{.status.availableReplicas}' 2>/dev/null || true)"
            DESIRED="${DESIRED:-0}"
            UPDATED="${UPDATED:-0}"
            AVAILABLE="${AVAILABLE:-0}"
            echo "[deploy] desired=${DESIRED} updated=${UPDATED} available=${AVAILABLE}"
            if [ "${UPDATED}" -ge "${DESIRED}" ] && [ "${AVAILABLE}" -ge "${DESIRED}" ]; then
              echo "[deploy] New replica is healthy; old replica termination is delayed. Continuing."
              exit 0
            fi
            exit "${ROLLOUT_RC}"
          fi
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,14 @@
 node_modules
 .DS_Store
 dist
 dist-ssr
 *.local
 .env
 .nitro
 .tanstack
 .wrangler
 .output
 .vinxi
 __unconfig*
 todos.json
 .codex
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,35 @@
 {
 	"files.watcherExclude": {
 		"**/routeTree.gen.ts": true
 	},
 	"search.exclude": {
 		"**/routeTree.gen.ts": true
 	},
 	"files.readonlyInclude": {
 		"**/routeTree.gen.ts": true
 	},
 	"[javascript]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
 	"[javascriptreact]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
 	"[typescript]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
 	"[typescriptreact]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
 	"[json]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
 	"[jsonc]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
 	"[css]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
 	"editor.codeActionsOnSave": {
 		"source.organizeImports.biome": "explicit"
 	}
 }
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,499 @@
 # AGENTS.md
 ## Project
 Monie Landing — marketing website for a product for individual service masters.
 This is not a salon CRM.
 This is not an enterprise business automation system.
 This is not a dashboard-first product.
 The product is built for independent masters:
 - nail artists
 - barbers
 - brow artists
 - lash makers
 - cosmetologists
 - massage specialists
 - other solo beauty/service professionals
 The landing page must present Monie as a simple, modern tool that helps one master manage bookings, clients, and income without complexity.
 ---
 ## Core product idea
 Monie is a personal business page for a master.
 It combines:
 - personal profile
 - services and prices
 - online booking
 - simple calendar
 - client list
 - income visibility
 The product should feel like:
 - a personal brand page
 - a booking tool
 - a lightweight work assistant
 It should NOT feel like:
 - a salon admin panel
 - a CRM for teams
 - an overloaded ERP-like system
 - a back office for managers
 ---
 ## Strategic positioning
 YCLIENTS is positioned around business automation: online booking, customer base automation, notifications, analytics, finance, payroll, stock control, and management of larger operations.
 Monie must be positioned differently:
 - not for business owners managing staff
 - not for networks and franchises
 - not for administrators
 - for the master personally
 The key shift is:
 from "manage a business"
 to "run your own practice simply"
 ---
 ## Main message
 The user is not a company.
 The user is a master.
 The landing should communicate this feeling immediately:
 "I am a master. I want a beautiful page, easy booking, and clear control over my work and income."
 ---
 ## Design direction
 The visual style must be:
 - modern
 - premium
 - clean
 - soft
 - confident
 - minimal
 - mobile-first
 - conversion-focused
 The emotional tone must be:
 - personal
 - calm
 - aesthetic
 - trustworthy
 - not corporate
 - not aggressive
 - not noisy
 Avoid:
 - enterprise SaaS look
 - complex tables on first screens
 - admin-dashboard feel
 - too much dense UI
 - “business automation” aesthetics
 - generic startup gradients everywhere
 - crypto-like visual language
 - ugly CRM blocks
 - too many borders and widgets
 ---
 ## Product metaphor
 Think of the product as closer to:
 - a personal booking page
 - a professional profile
 - a master’s mini-site
 - a simple scheduling assistant
 Not as:
 - a back office
 - a team management system
 - a reporting center
 ---
 ## UX principles
 Every UI decision must optimize for:
 1. clarity
 2. trust
 3. speed of understanding
 4. emotional comfort
 5. conversion
 The landing must explain the product in a few seconds.
 The visitor should instantly understand:
 - this is for masters
 - this helps with bookings
 - this helps avoid chaos in messages
 - this helps track work and income
 - this gives them a professional online presence
 ---
 ## Hero section rules
 The hero must communicate 3 things immediately:
 1. what the product is
 2. who it is for
 3. what action to take next
 Hero should feel personal, not corporate.
 Bad direction:
 - “Business automation platform”
 - “CRM and analytics for service companies”
 - “Optimize operational efficiency”
 Good direction:
 - “Your personal booking page”
 - “All your clients and appointments in one place”
 - “For masters who want less chaos and more income”
 - “Accept bookings without chats, spreadsheets, and confusion”
 ---
 ## Landing page structure
 Preferred structure:
 1. Hero
 2. Problem
 3. Solution
 4. Product preview
 5. Benefits
 6. How it works
 7. Personal page / profile feature
 8. Social proof or trust block
 9. FAQ
 10. Final CTA
 11. Footer
 ---
 ## Section intent
 ### 1. Hero
 Make the value instantly clear.
 Focus on one master, not a team.
 ### 2. Problem
 Show current pain:
 - bookings in messengers
 - scattered notes
 - forgotten appointments
 - no clear client history
 - no clear income view
 ### 3. Solution
 Monie gives the master one clean place for:
 - profile
 - services
 - booking
 - calendar
 - clients
 - earnings
 ### 4. Product preview
 Show interface as elegant and simple.
 The UI should look closer to a polished consumer product than to CRM software.
 ### 5. Benefits
 Explain outcomes, not enterprise functions.
 Prefer:
 - “clients can book you anytime”
 - “all appointments in one calendar”
 - “see how much you earned”
 - “keep your services and prices in order”
 - “look more professional online”
 Avoid:
 - “automation of business processes”
 - “deep operational analytics”
 - “staff access rights”
 - “warehouse management”
 - “franchise scaling”
 ### 6. How it works
 Keep it simple and linear:
 - create profile
 - add services
 - share link
 - get bookings
 ### 7. Personal page feature
 This is a key product idea.
 The master should get a page like:
 - monie.app/anna-nails
 - monie.app/david-barber
 This page should feel like a major product advantage.
 ### 8. Trust block
 Use trust elements that fit solo specialists:
 - looks professional
 - simple to start
 - saves time
 - helps avoid missed bookings
 ### 9. FAQ
 Answer practical concerns:
 - do I need a website?
 - can I set my own services and prices?
 - can clients book online?
 - is it good for a solo master?
 - can I use it from phone?
 ### 10. Final CTA
 Clear, direct, simple.
 Bring the user back to one primary action.
 ---
 ## Visual system
 ### Layout
 - Use a strong central container
 - Keep generous whitespace
 - Prefer large clean sections
 - Build obvious visual rhythm
 - Make scanning effortless
 ### Spacing
 - Use a consistent spacing system
 - Prefer breathing room over density
 - Never make sections feel cramped
 ### Typography
 - Strong, short headings
 - Short supporting text
 - High contrast and clear hierarchy
 - No long walls of text
 ### Cards
 - Use cards consistently
 - Same radius language across sections
 - Same shadow logic across sections
 - Same padding logic across sections
 Do not invent a new card style in every block.
 ### Buttons
 Primary CTA must be obvious.
 Secondary CTA must be quieter.
 Prefer CTA labels like:
 - Start free
 - Create your page
 - Get started
 - Accept bookings online
 Avoid vague labels like:
 - Learn more
 - Explore platform
 - Discover solution
 ---
 ## UI tone
 The interface should feel like a beautiful assistant for a master.
 It should feel:
 - feminine or neutral depending on styling direction
 - elegant
 - clean
 - easy
 - pleasant to use
 - human
 Never make it feel:
 - bureaucratic
 - operationally heavy
 - manager-oriented
 - back-office first
 ---
 ## Image and mockup direction
 When creating product visuals or mockups:
 - show a personal profile
 - show services and prices
 - show available booking times
 - show simple schedule/calendar
 - show compact client info
 - show income summary in a lightweight way
 Do not center the experience around:
 - employees
 - branches
 - warehouse
 - finance admin
 - payroll management
 - huge analytics dashboards
 ---
 ## Copywriting rules
 Copy must be:
 - short
 - clear
 - benefit-driven
 - emotional but concrete
 - easy to understand instantly
 Prefer:
 - plain language
 - direct promises
 - practical outcomes
 Avoid:
 - buzzwords
 - abstract innovation language
 - B2B corporate phrasing
 - words that sound like enterprise software
 Bad examples:
 - revolutionary service business ecosystem
 - end-to-end operational efficiency
 - scalable management infrastructure
 Good examples:
 - all your bookings in one place
 - your personal booking page
 - simpler scheduling for masters
 - clients can book you online anytime
 - work with less chaos
 ---
 ## Mobile-first rule
 This product is very likely to be discovered and used on phone.
 All design decisions must work beautifully on mobile first:
 - compact hero
 - short copy
 - clear CTA
 - easy card scanning
 - elegant stacked sections
 - no tiny dense UI
 Desktop should feel premium.
 Mobile should feel natural.
 ---
 ## Conversion rule
 This is a landing page, not a documentation page.
 Every section must help the user move toward action.
 If a section does not improve:
 - clarity
 - trust
 - desire
 - conversion
 then remove it.
 ---
 ## What Codex should prioritize
 When improving the landing, always prioritize in this order:
 1. clarity
 2. positioning for masters
 3. emotional appeal
 4. trust
 5. conversion
 6. visual consistency
 7. polish
 ---
 ## Anti-patterns
 Do not create:
 - generic SaaS landing pages
 - enterprise dashboard visuals
 - complex CRM-like layouts
 - feature grids with meaningless buzzwords
 - too many UI styles in one page
 - dark aggressive fintech aesthetics unless explicitly requested
 - overloaded hero sections
 - giant comparison tables unless specifically needed
 - business-owner messaging instead of master messaging
 ---
 ## Component guidance
 Preferred section/component set:
 - HeroSection
 - ProblemSection
 - SolutionSection
 - ProductPreviewSection
 - BenefitsSection
 - HowItWorksSection
 - PersonalPageSection
 - TrustSection
 - FAQSection
 - FinalCTASection
 - Footer
 Keep components modular and readable.
 Prefer explicit names over abstract names.
 ---
 ## denjs-ui usage rule
 Always check and use components from `denjs-ui` first.
 Before creating any custom UI component:
 1. Search in `denjs-ui` (`list_components`, `search_components`, `get_component`).
 2. If a suitable component exists, use it.
 3. Create a custom component only when no suitable `denjs-ui` option exists.
 ---
 ## FSD architecture rule
 All new frontend work must follow Feature-Sliced Design (FSD).
 Required layers:
 - `src/app` — app init, providers, global styles, routing setup
 - `src/pages` — route-level page composition only
 - `src/widgets` — large page blocks/sections (Hero, FAQ, CTA, etc.)
 - `src/features` — user scenarios and interactions (forms, actions, flows)
 - `src/entities` — business entities (`master`, `booking`, `service`, `client`)
 - `src/shared` — reusable UI, lib, config, api, assets
 Rules:
 - Keep strict dependency direction: upper layers can use lower layers only.
 - Do not import across slices directly; use each slice public API (`index.ts`).
 - Do not keep business UI logic directly in route files when it can live in `widgets/features/entities`.
 - New sections/components for the landing should be created as FSD slices, not as flat files.
 ---
 ## Coding guidance
 When generating frontend code:
 - keep components small and reusable
 - keep responsive behavior clean
 - avoid unnecessary dependencies
 - avoid overengineering
 - keep styling tokens consistent
 - use one visual language across the whole landing
 - prefer simple structure over clever abstractions
 ---
 ## Decision filter
 Before adding any element, ask:
 - Does this make the product clearer?
 - Does this make Monie feel more personal for a master?
 - Does this increase trust?
 - Does this improve conversion?
 - Does this still avoid CRM/business-automation aesthetics?
 If not, do not add it.
 ---
 ## One-sentence product definition
 Monie is a simple, beautiful booking and client page for independent masters.
--- a/19
+++ b/19
@@ -0,0 +1,19 @@
 FROM node:24-bookworm-slim AS deps
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci
 FROM node:24-bookworm-slim AS build
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 RUN npm run build && npm prune --omit=dev
 FROM node:24-bookworm-slim AS runner
 WORKDIR /app
 ENV NODE_ENV=production
 COPY package*.json ./
 COPY --from=build /app/node_modules ./node_modules
 COPY --from=build /app/.output ./.output
 EXPOSE 3000
 CMD ["npm", "run", "start"]
--- a/README.md
+++ b/README.md
@@ -0,0 +1,47 @@
 # Monie Landing
 Marketing landing page for **Monie** — a personal booking page for independent masters.
 ## Stack
 - TanStack Start + React
 - TypeScript
 - Tailwind CSS v4 + denjs-ui
 - Paraglide JS (`messages/ru.json`, `messages/en.json`)
 ## Development
 ```bash
 npm install
 npm run dev
 ```
 ## Build / Preview
 ```bash
 npm run build
 npm run start
 ```
 `start` runs `vite preview` on `0.0.0.0:3000`.
 ## Quality checks
 ```bash
 npm run lint
 npm run test
 npx tsc --noEmit
 ```
 ## Localization
 - Project config: `project.inlang/settings.json`
 - Source messages: `messages/*.json`
 - Generated runtime: `src/paraglide/*`
 Paraglide compile runs automatically via Vite plugin.
 ## Notes
 - Keep generated files in `src/paraglide` out of manual edits.
 - Keep landing sections aligned with `AGENTS.md` positioning and tone.
--- a/11
+++ b/11
@@ -0,0 +1,11 @@
 # denjs-ui gaps for monie-landing
 - [ ] `LandingHero` — секция hero для лендинга с `eyebrow`, заголовком, подзаголовком, двумя CTA (как ссылки), слотом под метрики/preview.
 - [ ] `StatsGrid` / `StatCard` — компактные карточки метрик для маркетинговых экранов (`value`, `label`, `hint`).
 - [ ] `FeatureCard` (marketing variant) — единый стиль карточек преимуществ/проблем для лендингов (согласованные padding/radius/shadow).
 - [ ] `StepsTimeline` — линейный блок «как это работает» с шагами, номерами и адаптивным режимом mobile/desktop.
 - [ ] `PersonalPagePreview` — готовый блок превью профиля мастера (URL, услуги, слоты, CTA) без ручной верстки.
 - [ ] `TrustBlock` / `TestimonialCard` — секция доверия для одного специалиста: отзыв, маркеры надежности, микро-метрики.
 - [ ] `LeadFormSection` — готовая секция заявки/демо для лендинга с двухколоночным layout и мобильным стеком.
 - [ ] `LandingHeader` — шапка с поддержкой якорных ссылок, активного состояния роутов и CTA-кнопки (без enterprise dropdown-меню).
 - [ ] `LandingFooter` — настраиваемый футер под продуктовый лендинг (группы ссылок + legal + бренд), без жестко зашитых demo-данных.
--- a/biome.json
+++ b/biome.json
@@ -0,0 +1,41 @@
 {
 	"$schema": "https://biomejs.dev/schemas/2.4.5/schema.json",
 	"vcs": {
 		"enabled": false,
 		"clientKind": "git",
 		"useIgnoreFile": false
 	},
 	"files": {
 		"ignoreUnknown": false,
 		"includes": [
 			"**/src/**/*",
 			"**/.vscode/**/*",
 			"**/index.html",
 			"**/vite.config.ts",
 			"!**/src/routeTree.gen.ts",
 			"!**/src/paraglide/**/*",
 			"!**/src/styles.css"
 		]
 	},
 	"formatter": {
 		"enabled": true,
 		"indentStyle": "tab"
 	},
 	"assist": { "actions": { "source": { "organizeImports": "on" } } },
 	"linter": {
 		"enabled": true,
 		"rules": {
 			"recommended": true
 		}
 	},
 	"javascript": {
 		"formatter": {
 			"quoteStyle": "double"
 		}
 	},
 	"css": {
 		"parser": {
 			"tailwindDirectives": true
 		}
 	}
 }
--- a/instrument.server.mjs
+++ b/instrument.server.mjs
@@ -0,0 +1,17 @@
 import * as Sentry from '@sentry/tanstackstart-react'
 const sentryDsn = import.meta.env?.VITE_SENTRY_DSN ?? process.env.VITE_SENTRY_DSN
 if (!sentryDsn) {
  console.warn('VITE_SENTRY_DSN is not defined. Sentry is not running.')
 } else {
  Sentry.init({
    dsn: sentryDsn,
    // Adds request headers and IP for users, for more info visit:
    // https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/configuration/options/#sendDefaultPii
    sendDefaultPii: true,
    tracesSampleRate: 1.0,
    replaysSessionSampleRate: 1.0,
    replaysOnErrorSampleRate: 1.0,
  })
 }
--- a/messages/en.json
+++ b/messages/en.json
@@ -0,0 +1,168 @@
 {
  "switch_language_aria": "Switch language",
  "header_email_aria": "Email Monie",
  "theme_toggle_mode_auto": "Auto",
  "theme_toggle_mode_dark": "Dark",
  "theme_toggle_mode_light": "Light",
  "theme_toggle_aria_auto": "Theme mode: auto (system). Click to switch to light mode.",
  "theme_toggle_aria_dark": "Theme mode: dark. Click to switch to auto mode.",
  "theme_toggle_aria_light": "Theme mode: light. Click to switch to dark mode.",
  "seo_home_title": "Monie — personal master page with online booking",
  "seo_home_description": "Monie is a simple service for independent masters: personal page, online booking, calendar, clients, and income visibility in one place.",
  "seo_about_title": "About Monie — product for independent masters",
  "seo_about_description": "Monie helps independent masters keep client flow and accept online bookings through a personal page.",
  "header_nav_problem": "Problem",
  "header_nav_solution": "Solution",
  "header_nav_how": "How it works",
  "header_nav_faq": "FAQ",
  "header_create_page": "Create page",
  "header_about": "About",
  "footer_nav_benefits": "Benefits",
  "footer_nav_faq": "FAQ",
  "footer_description": "A simple system for independent masters: personal page, online booking, calendar, clients, and clear income visibility.",
  "footer_rights": "All rights reserved.",
  "footer_about": "About product",
  "footer_demo": "Demo",
  "about_badge": "About Monie",
  "about_title": "We build around the master, not around the salon",
  "about_subtitle": "Monie started from a simple problem: strong masters lose client flow when they change workplace. We provide a stable digital base where profile, services, schedule, and client history belong to the master.",
  "about_focus_title": "Product focus",
  "about_focus_point_1": "Stable client base owned by the master",
  "about_focus_point_2": "Transparent online booking and calendar",
  "about_focus_point_3": "Professional personal page",
  "about_focus_point_4": "Lightweight income visibility without overload",
  "about_principle_title": "Architecture principle",
  "about_principle_text": "Critical business logic and validation live in the backend. Web and mobile clients sync with API as the single source of truth.",
  "about_cta": "Talk implementation",
  "form_name_label": "Name",
  "form_name_placeholder": "Anna",
  "form_phone_label": "Phone",
  "form_specialization_label": "Specialization",
  "form_city_label": "City",
  "form_city_placeholder": "New York",
  "form_comment_label": "Comment",
  "form_comment_placeholder": "What booking task is most important for you right now?",
  "form_privacy_text": "By clicking the button, you agree to the processing of personal data.",
  "form_submit": "Send request",
  "form_submit_busy": "Opening your email app...",
  "form_submit_success": "Draft is ready. Please confirm sending in your email app.",
  "form_submit_error": "Could not open your email app. Please email hello@monie.app.",
  "spec_nails": "Nail artist",
  "spec_brows": "Brow artist",
  "spec_lashes": "Lash maker",
  "spec_barber": "Barber",
  "spec_massage": "Massage specialist",
  "spec_other": "Other specialization",
  "hero_badge": "Monie For Masters",
  "hero_title": "Your personal master page with online booking, clients, and income in one place.",
  "hero_subtitle": "Monie helps independent masters run bookings without chat chaos: profile, services, calendar, and client base in one clear interface.",
  "hero_cta_primary": "Create page",
  "hero_cta_secondary": "How it works",
  "hero_metric_label_1": "clients can book anytime",
  "hero_metric_label_2": "fewer no-shows after switching to Monie",
  "hero_metric_label_3": "repeat visits growth from your client base",
  "problem_eyebrow": "Problem",
  "problem_title": "When bookings live in chats, daily work turns into chaos",
  "problem_subtitle": "Common tools for masters often add complexity and miss the main goal: getting clients booked quickly and calmly.",
  "problem_card_1_title": "Bookings get lost in chats",
  "problem_card_1_text": "Messenger and social inboxes get mixed up, time slots overlap, and clients struggle to pick a time.",
  "problem_card_2_title": "No unified client history",
  "problem_card_2_text": "Notes are scattered across apps and notebooks, making it hard to recall past visits and preferences quickly.",
  "problem_card_3_title": "Income feels unclear",
  "problem_card_3_text": "Without a clear view of visits and services, it is difficult to understand what your practice really earns.",
  "solution_eyebrow": "Solution",
  "solution_title": "Monie brings your entire solo practice into one place",
  "solution_subtitle": "Personal profile, services, booking, and calendar without overloaded enterprise features.",
  "solution_item_1": "Personal master page with your style and a link like monie.app/your-name",
  "solution_item_2": "Online booking without endless chats and manual spreadsheets",
  "solution_item_3": "Simple calendar with all appointments in one place",
  "solution_item_4": "Client base with history and contacts",
  "solution_item_5": "Clear earnings overview by day and service",
  "preview_eyebrow": "Product",
  "preview_title": "An interface that feels like a personal assistant",
  "preview_subtitle": "Monie looks like a polished personal page for a master, not a heavy CRM dashboard.",
  "preview_profile_title": "Master profile",
  "preview_profile_description": "Services, prices, available slots, and booking button are all available to clients right from your link.",
  "preview_service_1_title": "Manicure",
  "preview_service_1_description": "from $25",
  "preview_service_2_title": "Removal + gel polish",
  "preview_service_2_description": "2 h 15 min",
  "preview_schedule_title": "Calendar and clients",
  "preview_appt_1_title": "10:30 — Marina",
  "preview_appt_1_description": "Brow correction",
  "preview_appt_1_badge": "Confirmed",
  "preview_appt_2_title": "13:00 — Olga",
  "preview_appt_2_description": "Lash lamination",
  "preview_appt_2_badge": "New booking",
  "preview_income_title": "Weekly income",
  "preview_income_description": "$680",
  "benefits_eyebrow": "Benefits",
  "benefits_title": "Monie helps you work calmer and earn more consistently",
  "benefit_card_1_title": "Professional online presence",
  "benefit_card_1_text": "Instead of scattered profiles and links, you get one polished page for your clients.",
  "benefit_card_2_title": "Less messaging routine",
  "benefit_card_2_text": "Clients book on their own, and you spend your time on services instead of chat coordination.",
  "benefit_card_3_title": "A clear working day",
  "benefit_card_3_text": "All appointments are in one calendar, without duplicates and missed visits.",
  "benefit_card_4_title": "Income visibility without reports",
  "benefit_card_4_text": "You instantly see your results and workload dynamics without complex analytics.",
  "how_eyebrow": "How it works",
  "how_title": "Four steps from chat chaos to a clear booking flow",
  "how_step_label": "Step",
  "how_step_1_title": "Create your profile",
  "how_step_1_text": "Add photos, bio, services, and prices.",
  "how_step_2_title": "Open booking slots",
  "how_step_2_text": "Set your schedule and booking rules.",
  "how_step_3_title": "Share your link",
  "how_step_3_text": "Send your personal page in Instagram, Telegram, and direct messages.",
  "how_step_4_title": "Get bookings",
  "how_step_4_text": "Clients book online while you manage your day in one app.",
  "personal_eyebrow": "Personal page",
  "personal_title": "A single link that strengthens your personal brand",
  "personal_subtitle": "Your Monie personal page looks professional and helps clients book you faster.",
  "personal_example": "Example: monie.app/anna-nails",
  "personal_card_title": "What you get",
  "personal_point_1": "One link for clients and social media",
  "personal_point_2": "Up-to-date services and prices without manual chat edits",
  "personal_point_3": "Booking in a couple of clicks without long messages",
  "personal_cta": "Create your page",
  "trust_eyebrow": "Trust",
  "trust_title": "Built for masters who work for themselves",
  "trust_card_1_title": "Built for solo practice",
  "trust_card_1_text": "Monie is designed for one master, not for salon admin workflows.",
  "trust_card_2_title": "Works from your phone",
  "trust_card_2_text": "Manage bookings and clients throughout the day without a laptop.",
  "trust_card_3_title": "Fast setup, no onboarding maze",
  "trust_card_3_text": "You can configure your profile, services, and booking in one evening.",
  "faq_eyebrow": "FAQ",
  "faq_title": "Frequently asked questions before you start",
  "faq_item_1_title": "Do I need a separate website?",
  "faq_item_1_text": "No. Monie gives you a personal master page. Share one link and clients can book online right away.",
  "faq_item_2_title": "Can I set my own services and prices?",
  "faq_item_2_text": "Yes. You manage services, duration, and pricing without a developer or technical team.",
  "faq_item_3_title": "Can clients really book on their own?",
  "faq_item_3_text": "Yes. The client picks a service and time slot, and the booking appears in your calendar instantly.",
  "faq_item_4_title": "Is this really for independent masters?",
  "faq_item_4_text": "Yes. Monie is positioned as a personal tool for masters, not a CRM for salons and multi-staff teams.",
  "faq_item_5_title": "Can I use it only from my phone?",
  "faq_item_5_text": "Yes. Core booking and daily workflow scenarios are fully available on mobile.",
  "final_eyebrow": "Final step",
  "final_title": "Launch Monie and accept bookings without chaos",
  "final_subtitle": "Leave your contacts. We will show you how to set up your master profile and open online booking for your exact workflow.",
  "final_hint": "We reply within 1 business day"
 }
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -0,0 +1,168 @@
 {
  "switch_language_aria": "Переключить язык",
  "header_email_aria": "Написать в Monie",
  "theme_toggle_mode_auto": "Авто",
  "theme_toggle_mode_dark": "Темная",
  "theme_toggle_mode_light": "Светлая",
  "theme_toggle_aria_auto": "Режим темы: авто (системный). Нажмите, чтобы переключить на светлую тему.",
  "theme_toggle_aria_dark": "Режим темы: темная. Нажмите, чтобы переключить на авто-режим.",
  "theme_toggle_aria_light": "Режим темы: светлая. Нажмите, чтобы переключить на темную тему.",
  "seo_home_title": "Monie — личная страница мастера с онлайн-записью",
  "seo_home_description": "Monie — простой сервис для частных мастеров: личная страница, онлайн-запись, календарь, клиенты и доход в одном месте.",
  "seo_about_title": "О Monie — продукт для частных мастеров",
  "seo_about_description": "Monie помогает частным мастерам сохранить клиентскую базу и принимать онлайн-запись через личную страницу.",
  "header_nav_problem": "Проблема",
  "header_nav_solution": "Решение",
  "header_nav_how": "Как это работает",
  "header_nav_faq": "FAQ",
  "header_create_page": "Создать страницу",
  "header_about": "О проекте",
  "footer_nav_benefits": "Преимущества",
  "footer_nav_faq": "FAQ",
  "footer_description": "Простая система для мастера: личная страница, онлайн-запись, календарь, клиенты и понятный обзор дохода.",
  "footer_rights": "All rights reserved.",
  "footer_about": "О продукте",
  "footer_demo": "Демо",
  "about_badge": "О Monie",
  "about_title": "Мы строим продукт вокруг мастера, а не вокруг салона",
  "about_subtitle": "Monie появился из простой проблемы: сильные мастера теряют клиентский поток при смене места работы. Мы даем устойчивую цифровую основу, где профиль, услуги, расписание и клиентская история принадлежат мастеру.",
  "about_focus_title": "Продуктовый фокус",
  "about_focus_point_1": "Стабильная клиентская база у мастера",
  "about_focus_point_2": "Прозрачные онлайн-записи и календарь",
  "about_focus_point_3": "Профессиональная личная страница",
  "about_focus_point_4": "Легкий контроль дохода без перегруза",
  "about_principle_title": "Архитектурный принцип",
  "about_principle_text": "Критическая логика и валидация находятся в backend. Web и mobile клиенты синхронизируются с API как с единым источником истины.",
  "about_cta": "Обсудить внедрение",
  "form_name_label": "Имя",
  "form_name_placeholder": "Анна",
  "form_phone_label": "Телефон",
  "form_specialization_label": "Специализация",
  "form_city_label": "Город",
  "form_city_placeholder": "Москва",
  "form_comment_label": "Комментарий",
  "form_comment_placeholder": "Какая задача с записью сейчас самая важная?",
  "form_privacy_text": "Нажимая кнопку, вы соглашаетесь на обработку персональных данных.",
  "form_submit": "Отправить заявку",
  "form_submit_busy": "Открываем почтовый клиент...",
  "form_submit_success": "Черновик письма открыт. Подтвердите отправку в почтовом приложении.",
  "form_submit_error": "Не удалось открыть почтовое приложение. Напишите на hello@monie.app.",
  "spec_nails": "Нейл-мастер",
  "spec_brows": "Бровист",
  "spec_lashes": "Лэшмейкер",
  "spec_barber": "Барбер",
  "spec_massage": "Массажист",
  "spec_other": "Другая специализация",
  "hero_badge": "Monie For Masters",
  "hero_title": "Личная страница мастера с онлайн-записью, клиентами и доходом в одном месте.",
  "hero_subtitle": "Monie помогает частному мастеру вести запись без хаоса в чатах: профиль, услуги, календарь и база клиентов собраны в одном понятном интерфейсе.",
  "hero_cta_primary": "Создать страницу",
  "hero_cta_secondary": "Как это работает",
  "hero_metric_label_1": "клиенты могут записаться в любое время",
  "hero_metric_label_2": "меньше пропусков после перехода в Monie",
  "hero_metric_label_3": "рост повторных визитов по базе клиентов",
  "problem_eyebrow": "Проблема",
  "problem_title": "Когда запись живет в чатах, работа превращается в хаос",
  "problem_subtitle": "Обычные инструменты для мастера часто дают много лишнего и не решают главную задачу: быстро и спокойно принимать клиентов.",
  "problem_card_1_title": "Записи теряются в чатах",
  "problem_card_1_text": "Переписки в мессенджерах и соцсетях смешиваются, слоты пересекаются, клиентам сложно выбрать время.",
  "problem_card_2_title": "Нет единой истории клиентов",
  "problem_card_2_text": "Заметки разбросаны по телефонам и блокнотам, сложно быстро вспомнить предыдущий визит и предпочтения.",
  "problem_card_3_title": "Доход не под контролем",
  "problem_card_3_text": "Без понятной картины по визитам и услугам трудно видеть, сколько реально приносит ваша практика.",
  "solution_eyebrow": "Решение",
  "solution_title": "Monie собирает всю практику мастера в одном месте",
  "solution_subtitle": "Личный профиль, услуги, запись и календарь без перегруза корпоративными функциями.",
  "solution_item_1": "Личная страница мастера с вашим стилем и ссылкой вида monie.app/ваш-ник",
  "solution_item_2": "Онлайн-запись без переписок и ручных таблиц",
  "solution_item_3": "Простой календарь со всеми визитами в одном месте",
  "solution_item_4": "База клиентов с историей и контактами",
  "solution_item_5": "Легкий обзор дохода по дням и услугам",
  "preview_eyebrow": "Продукт",
  "preview_title": "Интерфейс, который ощущается как личный помощник",
  "preview_subtitle": "Monie выглядит как аккуратная персональная страница мастера, а не как тяжелая CRM-панель.",
  "preview_profile_title": "Профиль мастера",
  "preview_profile_description": "Услуги, цены, свободные окна и кнопка записи доступны клиенту сразу по вашей ссылке.",
  "preview_service_1_title": "Маникюр",
  "preview_service_1_description": "от 1 800 ₽",
  "preview_service_2_title": "Снятие + покрытие",
  "preview_service_2_description": "2 ч 15 мин",
  "preview_schedule_title": "Календарь и клиенты",
  "preview_appt_1_title": "10:30 — Марина",
  "preview_appt_1_description": "Коррекция бровей",
  "preview_appt_1_badge": "Подтверждено",
  "preview_appt_2_title": "13:00 — Ольга",
  "preview_appt_2_description": "Ламинирование ресниц",
  "preview_appt_2_badge": "Новая запись",
  "preview_income_title": "Доход за неделю",
  "preview_income_description": "47 800 ₽",
  "benefits_eyebrow": "Преимущества",
  "benefits_title": "Monie помогает работать спокойнее и зарабатывать стабильнее",
  "benefit_card_1_title": "Профессиональный образ онлайн",
  "benefit_card_1_text": "Вместо хаоса в профилях и ссылках у вас одна аккуратная страница для клиентов.",
  "benefit_card_2_title": "Меньше рутины в переписках",
  "benefit_card_2_text": "Клиенты бронируют сами, а вы тратите время на работу, а не на координацию в сообщениях.",
  "benefit_card_3_title": "Понятный рабочий день",
  "benefit_card_3_text": "Все записи в одном календаре, без дублирования и пропущенных визитов.",
  "benefit_card_4_title": "Контроль дохода без отчетов",
  "benefit_card_4_text": "Вы сразу видите результат работы и динамику загрузки без сложной аналитики.",
  "how_eyebrow": "Как это работает",
  "how_title": "Четыре шага от хаоса в чатах к понятной системе записи",
  "how_step_label": "Шаг",
  "how_step_1_title": "Создаете профиль",
  "how_step_1_text": "Добавляете фото, описание, услуги и цены.",
  "how_step_2_title": "Открываете слоты",
  "how_step_2_text": "Настраиваете удобное расписание и правила записи.",
  "how_step_3_title": "Делитесь ссылкой",
  "how_step_3_text": "Отправляете личную страницу в Instagram, Telegram и клиентам.",
  "how_step_4_title": "Получаете записи",
  "how_step_4_text": "Клиенты бронируют онлайн, а вы ведете день в одном приложении.",
  "personal_eyebrow": "Личная страница",
  "personal_title": "Ссылка, которая работает на ваш личный бренд",
  "personal_subtitle": "Ваша персональная страница в Monie выглядит профессионально и помогает клиентам быстрее записываться.",
  "personal_example": "Пример: monie.app/anna-nails",
  "personal_card_title": "Что получает мастер",
  "personal_point_1": "Единая ссылка для всех клиентов и соцсетей",
  "personal_point_2": "Актуальные услуги и цены без ручных правок в чатах",
  "personal_point_3": "Запись в пару кликов без переписки",
  "personal_cta": "Создать свою страницу",
  "trust_eyebrow": "Доверие",
  "trust_title": "Сделано для мастеров, которые работают сами на себя",
  "trust_card_1_title": "Подходит для соло-практики",
  "trust_card_1_text": "Monie сделан для одного мастера, а не для админ-панели салона.",
  "trust_card_2_title": "Работает с телефона",
  "trust_card_2_text": "Можно управлять записью и клиентами в течение дня без ноутбука.",
  "trust_card_3_title": "Быстрый старт без внедрения",
  "trust_card_3_text": "Профиль, услуги и запись можно настроить за один вечер.",
  "faq_eyebrow": "FAQ",
  "faq_title": "Частые вопросы перед стартом",
  "faq_item_1_title": "Нужен ли мне отдельный сайт?",
  "faq_item_1_text": "Нет. Monie дает вам личную страницу мастера. Вы просто делитесь ссылкой, и клиенты записываются онлайн.",
  "faq_item_2_title": "Могу ли я сама настроить услуги и цены?",
  "faq_item_2_text": "Да. Вы управляете услугами, длительностью и стоимостью без разработчика и технической команды.",
  "faq_item_3_title": "Клиенты действительно смогут записываться сами?",
  "faq_item_3_text": "Да. Клиент выбирает услугу и время, а запись сразу появляется в вашем календаре.",
  "faq_item_4_title": "Это точно продукт для частного мастера?",
  "faq_item_4_text": "Да. Monie позиционируется как личный инструмент мастера, а не как CRM для салонов и сетей.",
  "faq_item_5_title": "Можно пользоваться только с телефона?",
  "faq_item_5_text": "Да. Основные сценарии работы и записи доступны с мобильного устройства.",
  "final_eyebrow": "Финальный шаг",
  "final_title": "Запустите Monie и принимайте записи без хаоса",
  "final_subtitle": "Оставьте контакты. Покажем, как быстро собрать профиль мастера и открыть онлайн-запись именно под вашу практику.",
  "final_hint": "Ответим в течение 1 рабочего дня"
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,63 @@
 {
  "name": "monie-landing",
  "private": true,
  "type": "module",
  "imports": {
    "#/*": "./src/*"
  },
  "scripts": {
    "dev": "dotenv -e .env.local -- sh -c \"NODE_OPTIONS='--import ./instrument.server.mjs' vite dev --port 3000\"",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest run",
    "format": "biome format",
    "lint": "biome lint",
    "check": "biome check",
    "start": "vite preview --host 0.0.0.0 --port 3000"
  },
  "dependencies": {
    "@inlang/paraglide-js": "^2.15.1",
    "@posthog/react": "^1.7.0",
    "@sentry/tanstackstart-react": "^10.42.0",
    "@t3-oss/env-core": "^0.13.10",
    "@tailwindcss/vite": "^4.1.18",
    "@tanstack/react-devtools": "latest",
    "@tanstack/react-form": "latest",
    "@tanstack/react-router": "latest",
    "@tanstack/react-router-devtools": "latest",
    "@tanstack/react-router-ssr-query": "latest",
    "@tanstack/react-start": "latest",
    "@tanstack/router-plugin": "^1.132.0",
    "denjs-ui": "file:../denjs-ui-0.0.0.tgz",
    "dotenv-cli": "^11.0.0",
    "lucide-react": "^0.545.0",
    "posthog-js": "^1.358.1",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "tailwindcss": "^4.1.18",
    "zod": "^4.3.6"
  },
  "devDependencies": {
    "@biomejs/biome": "2.4.5",
    "@tailwindcss/typography": "^0.5.16",
    "@tanstack/devtools-vite": "latest",
    "@testing-library/dom": "^10.4.1",
    "@testing-library/react": "^16.3.0",
    "@types/node": "^22.10.2",
    "@types/react": "^19.2.0",
    "@types/react-dom": "^19.2.0",
    "@vitejs/plugin-react": "^5.1.4",
    "babel-plugin-react-compiler": "^1.0.0",
    "jsdom": "^28.1.0",
    "typescript": "^5.7.2",
    "vite": "^7.3.1",
    "vite-tsconfig-paths": "^5.1.4",
    "vitest": "^3.0.5"
  },
  "pnpm": {
    "onlyBuiltDependencies": [
      "esbuild",
      "lightningcss"
    ]
  }
 }
--- a/project.inlang/settings.json
+++ b/project.inlang/settings.json
@@ -0,0 +1,12 @@
 {
  "$schema": "https://inlang.com/schema/project-settings",
  "baseLocale": "ru",
  "locales": ["ru", "en"],
  "modules": [
    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
  ],
  "plugin.inlang.messageFormat": {
    "pathPattern": "./messages/{locale}.json"
  }
 }
--- a/public/Logo.svg
+++ b/public/Logo.svg
@@ -0,0 +1,20 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="222.000000pt" height="132.000000pt" viewBox="0 0 222.000000 132.000000"
 preserveAspectRatio="xMidYMid meet">
 <g transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
 <path d="M1480 1297 c-19 -6 -53 -29 -75 -52 -139 -139 -40 -375 157 -375 85
 0 154 45 193 125 70 142 -23 300 -182 311 -32 2 -74 -2 -93 -9z"/>
 <path d="M643 1115 c-104 -29 -183 -94 -266 -220 -145 -221 -241 -488 -301
 -837 l-7 -38 168 0 168 0 23 107 c73 334 260 783 327 783 21 0 28 -22 65 -196
 85 -397 166 -574 299 -652 41 -24 56 -27 136 -27 74 0 98 4 132 22 69 38 160
 131 228 235 36 54 94 143 131 198 62 95 86 116 97 87 10 -25 28 -234 35 -392
 l7 -160 143 -3 142 -3 0 63 c0 133 -45 440 -77 522 -27 68 -85 139 -139 166
 -39 20 -64 25 -124 25 -136 0 -206 -53 -386 -295 -113 -151 -146 -185 -168
 -177 -30 12 -56 73 -87 207 -82 356 -130 456 -254 535 -89 57 -200 76 -292 50z"/>
 </g>
 </svg>
--- a/public/favicon-dark.svg
+++ b/public/favicon-dark.svg
@@ -0,0 +1,20 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="222.000000pt" height="132.000000pt" viewBox="0 0 222.000000 132.000000"
 preserveAspectRatio="xMidYMid meet">
 <g transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)"
 fill="#FFFFFF" stroke="none">
 <path d="M1480 1297 c-19 -6 -53 -29 -75 -52 -139 -139 -40 -375 157 -375 85
 0 154 45 193 125 70 142 -23 300 -182 311 -32 2 -74 -2 -93 -9z"/>
 <path d="M643 1115 c-104 -29 -183 -94 -266 -220 -145 -221 -241 -488 -301
 -837 l-7 -38 168 0 168 0 23 107 c73 334 260 783 327 783 21 0 28 -22 65 -196
 85 -397 166 -574 299 -652 41 -24 56 -27 136 -27 74 0 98 4 132 22 69 38 160
 131 228 235 36 54 94 143 131 198 62 95 86 116 97 87 10 -25 28 -234 35 -392
 l7 -160 143 -3 142 -3 0 63 c0 133 -45 440 -77 522 -27 68 -85 139 -139 166
 -39 20 -64 25 -124 25 -136 0 -206 -53 -386 -295 -113 -151 -146 -185 -168
 -177 -30 12 -56 73 -87 207 -82 356 -130 456 -254 535 -89 57 -200 76 -292 50z"/>
 </g>
 </svg>
--- a/public/favicon-light.svg
+++ b/public/favicon-light.svg
@@ -0,0 +1,20 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="222.000000pt" height="132.000000pt" viewBox="0 0 222.000000 132.000000"
 preserveAspectRatio="xMidYMid meet">
 <g transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
 <path d="M1480 1297 c-19 -6 -53 -29 -75 -52 -139 -139 -40 -375 157 -375 85
 0 154 45 193 125 70 142 -23 300 -182 311 -32 2 -74 -2 -93 -9z"/>
 <path d="M643 1115 c-104 -29 -183 -94 -266 -220 -145 -221 -241 -488 -301
 -837 l-7 -38 168 0 168 0 23 107 c73 334 260 783 327 783 21 0 28 -22 65 -196
 85 -397 166 -574 299 -652 41 -24 56 -27 136 -27 74 0 98 4 132 22 69 38 160
 131 228 235 36 54 94 143 131 198 62 95 86 116 97 87 10 -25 28 -234 35 -392
 l7 -160 143 -3 142 -3 0 63 c0 133 -45 440 -77 522 -27 68 -85 139 -139 166
 -39 20 -64 25 -124 25 -136 0 -206 -53 -386 -295 -113 -151 -146 -185 -168
 -177 -30 12 -56 73 -87 207 -82 356 -130 456 -254 535 -89 57 -200 76 -292 50z"/>
 </g>
 </svg>
--- a/public/lower_left.svg
+++ b/public/lower_left.svg
@@ -0,0 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 218 78" width="218" height="78">
 <g fill="#000000" fill-rule="evenodd">
 <path d="M 167 39 L 166 40 L 166 47 L 165 48 L 165 53 L 164 54 L 164 59 L 163 60 L 163 61 L 164 62 L 164 63 L 166 65 L 171 65 L 172 64 L 174 64 L 175 63 L 174 62 L 172 62 L 171 61 L 171 56 L 172 55 L 172 49 L 173 48 L 173 43 L 174 42 L 174 41 L 173 40 L 173 39 Z"/>
 <path d="M 130 39 L 129 40 L 129 48 L 128 49 L 128 54 L 127 55 L 127 60 L 126 61 L 126 64 L 133 64 L 133 63 L 134 62 L 134 56 L 135 55 L 135 51 L 142 44 L 143 44 L 144 43 L 148 43 L 149 44 L 149 45 L 150 46 L 150 48 L 149 49 L 149 53 L 148 54 L 148 58 L 147 59 L 147 63 L 149 65 L 154 65 L 155 64 L 157 64 L 158 63 L 157 63 L 155 61 L 155 55 L 156 54 L 156 49 L 157 48 L 157 43 L 156 42 L 156 41 L 154 39 L 148 39 L 147 40 L 145 40 L 143 42 L 142 42 L 141 43 L 140 43 L 138 45 L 138 46 L 137 47 L 136 46 L 136 40 L 135 39 Z"/>
 <path d="M 196 38 L 195 39 L 191 39 L 190 40 L 189 40 L 188 41 L 187 41 L 181 47 L 181 48 L 180 49 L 180 51 L 179 52 L 179 58 L 180 59 L 180 60 L 183 63 L 184 63 L 185 64 L 187 64 L 188 65 L 195 65 L 196 64 L 199 64 L 200 63 L 201 63 L 202 62 L 203 62 L 205 60 L 206 60 L 206 59 L 205 59 L 204 60 L 203 60 L 202 61 L 201 61 L 200 62 L 198 62 L 197 63 L 192 63 L 191 62 L 190 62 L 187 59 L 187 55 L 186 54 L 188 52 L 196 52 L 197 51 L 200 51 L 201 50 L 203 50 L 207 46 L 207 43 L 206 42 L 206 41 L 205 40 L 204 40 L 203 39 L 200 39 L 199 38 Z M 194 40 L 199 40 L 201 42 L 201 46 L 197 50 L 196 50 L 195 51 L 188 51 L 187 50 L 187 49 L 188 48 L 188 47 L 189 46 L 189 45 Z"/>
 <path d="M 108 38 L 107 39 L 103 39 L 102 40 L 101 40 L 100 41 L 99 41 L 98 42 L 97 42 L 96 43 L 96 44 L 94 46 L 94 47 L 93 48 L 93 49 L 92 50 L 92 57 L 93 58 L 93 59 L 94 60 L 94 61 L 95 62 L 96 62 L 98 64 L 101 64 L 102 65 L 109 65 L 110 64 L 113 64 L 114 63 L 115 63 L 120 58 L 120 57 L 121 56 L 121 55 L 122 54 L 122 47 L 121 46 L 121 44 L 117 40 L 116 40 L 115 39 L 112 39 L 111 38 Z M 106 41 L 107 40 L 111 40 L 114 43 L 114 44 L 115 45 L 115 53 L 114 54 L 114 56 L 113 57 L 113 58 L 112 59 L 112 60 L 109 63 L 108 63 L 107 64 L 105 64 L 104 63 L 103 63 L 100 60 L 100 49 L 101 48 L 101 46 L 102 45 L 102 44 L 105 41 Z"/>
 <path d="M 173 23 L 172 24 L 170 24 L 169 25 L 169 26 L 168 27 L 168 30 L 170 32 L 173 32 L 174 31 L 175 31 L 177 29 L 177 25 L 176 24 L 175 24 L 174 23 Z"/>
 <path d="M 52 10 L 51 11 L 47 11 L 46 12 L 45 12 L 44 13 L 43 13 L 41 15 L 40 15 L 30 25 L 30 26 L 27 29 L 27 30 L 25 32 L 25 33 L 23 35 L 23 36 L 22 37 L 22 38 L 21 39 L 21 40 L 19 42 L 19 43 L 18 44 L 18 45 L 17 46 L 17 47 L 16 48 L 16 49 L 15 50 L 15 51 L 14 52 L 14 54 L 13 55 L 13 56 L 12 57 L 12 58 L 11 59 L 11 61 L 10 62 L 10 65 L 11 66 L 13 66 L 14 67 L 18 67 L 19 66 L 21 66 L 22 65 L 23 65 L 25 63 L 25 61 L 26 60 L 26 59 L 27 58 L 27 56 L 28 55 L 28 53 L 29 52 L 29 50 L 30 49 L 30 47 L 31 46 L 31 45 L 32 44 L 32 43 L 33 42 L 33 41 L 34 40 L 34 39 L 35 38 L 35 37 L 36 36 L 36 35 L 37 34 L 37 33 L 39 31 L 39 30 L 41 28 L 41 27 L 47 21 L 48 22 L 48 25 L 47 26 L 47 29 L 46 30 L 46 32 L 45 33 L 45 36 L 44 37 L 44 40 L 43 41 L 43 45 L 42 46 L 42 54 L 43 55 L 43 57 L 46 60 L 47 60 L 48 61 L 53 61 L 54 60 L 55 60 L 57 58 L 58 58 L 59 57 L 59 56 L 62 53 L 62 52 L 63 51 L 63 50 L 65 48 L 65 47 L 66 46 L 66 45 L 68 43 L 68 42 L 69 41 L 69 40 L 71 38 L 71 37 L 73 35 L 73 34 L 76 31 L 76 30 L 79 27 L 80 27 L 81 28 L 80 29 L 80 31 L 79 32 L 79 34 L 78 35 L 78 37 L 77 38 L 77 40 L 76 41 L 76 44 L 75 45 L 75 48 L 74 49 L 74 54 L 73 55 L 73 57 L 74 58 L 74 61 L 75 62 L 75 63 L 77 65 L 78 65 L 79 66 L 81 66 L 82 67 L 90 67 L 91 66 L 89 66 L 88 65 L 87 65 L 85 63 L 85 62 L 84 61 L 84 50 L 85 49 L 85 46 L 86 45 L 86 42 L 87 41 L 87 38 L 88 37 L 88 34 L 89 33 L 89 31 L 90 30 L 90 27 L 91 26 L 91 23 L 92 22 L 92 19 L 90 17 L 84 17 L 83 18 L 82 18 L 80 20 L 79 20 L 73 26 L 73 27 L 69 31 L 69 32 L 66 35 L 66 36 L 64 38 L 64 39 L 62 41 L 62 42 L 59 45 L 59 46 L 56 49 L 55 49 L 54 48 L 54 47 L 53 46 L 53 44 L 54 43 L 54 38 L 55 37 L 55 34 L 56 33 L 56 31 L 57 30 L 57 27 L 58 26 L 58 24 L 59 23 L 59 19 L 60 18 L 60 16 L 59 15 L 59 13 L 58 12 L 57 12 L 56 11 L 53 11 Z"/>
 </g></svg>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,28 @@
 {
  "short_name": "Monie",
  "name": "Monie — booking page for independent masters",
  "icons": [
    {
      "src": "Logo.svg",
      "type": "image/svg+xml",
      "sizes": "any",
      "purpose": "any"
    },
    {
      "src": "favicon-light.svg",
      "type": "image/svg+xml",
      "sizes": "any",
      "purpose": "any"
    },
    {
      "src": "favicon-dark.svg",
      "type": "image/svg+xml",
      "sizes": "any",
      "purpose": "any"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#4fb8b2",
  "background_color": "#e7f3ec"
 }
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
 Disallow:
--- a/public/theme-init.js
+++ b/public/theme-init.js
@@ -0,0 +1,23 @@
 (function () {
 	try {
 		var stored = window.localStorage.getItem("theme");
 		var mode =
 			stored === "light" || stored === "dark" || stored === "auto"
 				? stored
 				: "auto";
 		var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 		var resolved = mode === "auto" ? (prefersDark ? "dark" : "light") : mode;
 		var root = document.documentElement;
 		root.classList.remove("light", "dark");
 		root.classList.add(resolved);
 		if (mode === "auto") {
 			root.removeAttribute("data-theme");
 		} else {
 			root.setAttribute("data-theme", mode);
 		}
 		root.style.colorScheme = resolved;
 	} catch {}
 })();
--- a/src/app/providers/index.ts
+++ b/src/app/providers/index.ts
@@ -0,0 +1,2 @@
 export { LocaleProvider } from "#/shared/lib/i18n";
 export { PostHogProvider } from "./posthog-provider";
--- a/src/app/providers/posthog-provider.tsx
+++ b/src/app/providers/posthog-provider.tsx
@@ -0,0 +1,20 @@
 import { PostHogProvider as BasePostHogProvider } from "@posthog/react";
 import posthog from "posthog-js";
 import type { ReactNode } from "react";
 if (typeof window !== "undefined" && import.meta.env.VITE_POSTHOG_KEY) {
 	posthog.init(import.meta.env.VITE_POSTHOG_KEY, {
 		api_host: import.meta.env.VITE_POSTHOG_HOST || "https://us.i.posthog.com",
 		person_profiles: "identified_only",
 		capture_pageview: false,
 		defaults: "2025-11-30",
 	});
 }
 interface PostHogProviderProps {
 	children: ReactNode;
 }
 export function PostHogProvider({ children }: PostHogProviderProps) {
 	return <BasePostHogProvider client={posthog}>{children}</BasePostHogProvider>;
 }
--- a/src/app/styles/index.css
+++ b/src/app/styles/index.css
@@ -0,0 +1,269 @@
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");
@import "denjs-ui/styles.css";
@import "tailwindcss";
@import "../../styles/tokens.css";
@import "../../styles/light.css";
@import "../../styles/dark.css";
@plugin "@tailwindcss/typography";
@theme {
 	--font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
 }
 :root {
 	--sea-ink: #173a40;
 	--sea-ink-soft: #416166;
 	--lagoon: #4fb8b2;
 	--lagoon-deep: #328f97;
 	--coral: #e68061;
 	--palm: #2f6a4a;
 	--sand: #e7f0e8;
 	--foam: #f3faf5;
 	--glass-surface: rgba(255, 255, 255, 0.74);
 	--surface-strong: rgba(255, 255, 255, 0.9);
 	--line: rgba(23, 58, 64, 0.14);
 	--inset-glint: rgba(255, 255, 255, 0.82);
 	--kicker: rgba(47, 106, 74, 0.9);
 	--bg-base: #e7f3ec;
 	--header-bg: rgba(251, 255, 248, 0.84);
 	--chip-bg: rgba(255, 255, 255, 0.8);
 	--chip-line: rgba(47, 106, 74, 0.18);
 	--link-bg-hover: rgba(255, 255, 255, 0.9);
 	--hero-a: rgba(79, 184, 178, 0.36);
 	--hero-b: rgba(47, 106, 74, 0.2);
 }
 :root[data-theme="dark"] {
 	--sea-ink: #d7ece8;
 	--sea-ink-soft: #afcdc8;
 	--lagoon: #60d7cf;
 	--lagoon-deep: #8de5db;
 	--palm: #6ec89a;
 	--sand: #0f1a1e;
 	--foam: #101d22;
 	--glass-surface: rgba(16, 30, 34, 0.8);
 	--surface-strong: rgba(15, 27, 31, 0.92);
 	--line: rgba(141, 229, 219, 0.18);
 	--inset-glint: rgba(194, 247, 238, 0.14);
 	--kicker: #b8efe5;
 	--bg-base: #0a1418;
 	--header-bg: rgba(10, 20, 24, 0.8);
 	--chip-bg: rgba(13, 28, 32, 0.9);
 	--chip-line: rgba(141, 229, 219, 0.24);
 	--link-bg-hover: rgba(24, 44, 49, 0.8);
 	--hero-a: rgba(96, 215, 207, 0.18);
 	--hero-b: rgba(110, 200, 154, 0.12);
 }
@media (prefers-color-scheme: dark) {
 	:root:not([data-theme="light"]) {
 		--sea-ink: #d7ece8;
 		--sea-ink-soft: #afcdc8;
 		--lagoon: #60d7cf;
 		--lagoon-deep: #8de5db;
 		--palm: #6ec89a;
 		--sand: #0f1a1e;
 		--foam: #101d22;
 		--glass-surface: rgba(16, 30, 34, 0.8);
 		--surface-strong: rgba(15, 27, 31, 0.92);
 		--line: rgba(141, 229, 219, 0.18);
 		--inset-glint: rgba(194, 247, 238, 0.14);
 		--kicker: #b8efe5;
 		--bg-base: #0a1418;
 		--header-bg: rgba(10, 20, 24, 0.8);
 		--chip-bg: rgba(13, 28, 32, 0.9);
 		--chip-line: rgba(141, 229, 219, 0.24);
 		--link-bg-hover: rgba(24, 44, 49, 0.8);
 		--hero-a: rgba(96, 215, 207, 0.18);
 		--hero-b: rgba(110, 200, 154, 0.12);
 	}
 }
 * {
 	box-sizing: border-box;
 }
 html,
 body,
 #app {
 	min-height: 100%;
 }
 html {
 	scroll-behavior: smooth;
 	scroll-padding-top: 86px;
 }
 body {
 	margin: 0;
 	color: var(--sea-ink);
 	font-family: var(--font-sans);
 	background:
 		radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
 		radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
 		radial-gradient(
 			720px 380px at 50% 115%,
 			rgba(79, 184, 178, 0.1),
 			transparent 68%
 		),
 		linear-gradient(
 			180deg,
 			color-mix(in oklab, var(--sand) 68%, white) 0%,
 			var(--foam) 44%,
 			var(--bg-base) 100%
 		);
 	overflow-x: hidden;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
 body::before {
 	content: "";
 	position: fixed;
 	inset: 0;
 	pointer-events: none;
 	z-index: -1;
 	opacity: 0.28;
 	background:
 		radial-gradient(
 			circle at 20% 15%,
 			rgba(255, 255, 255, 0.8),
 			transparent 34%
 		),
 		radial-gradient(circle at 78% 26%, rgba(79, 184, 178, 0.2), transparent 42%),
 		radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%);
 }
 body::after {
 	content: "";
 	position: fixed;
 	inset: 0;
 	pointer-events: none;
 	z-index: -1;
 	opacity: 0.14;
 	background-image:
 		linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
 		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
 	background-size: 28px 28px;
 	mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%);
 }
 a:not([class]) {
 	color: var(--lagoon-deep);
 	text-decoration-color: rgba(50, 143, 151, 0.4);
 	text-decoration-thickness: 1px;
 	text-underline-offset: 2px;
 }
 a:not([class]):hover {
 	color: #246f76;
 }
 code {
 	font-size: 0.9em;
 	border: 1px solid var(--line);
 	background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
 	border-radius: 7px;
 	padding: 2px 7px;
 }
 pre code {
 	border: 0;
 	background: transparent;
 	padding: 0;
 	border-radius: 0;
 	font-size: inherit;
 	color: inherit;
 }
 .page-wrap {
 	width: min(1080px, calc(100% - 2rem));
 	margin-inline: auto;
 }
 .display-title {
 	font-family: "Fraunces", Georgia, serif;
 }
 .island-shell {
 	border: 1px solid var(--line);
 	background: linear-gradient(
 		165deg,
 		var(--surface-strong),
 		var(--glass-surface)
 	);
 	box-shadow:
 		0 1px 0 var(--inset-glint) inset,
 		0 22px 44px rgba(30, 90, 72, 0.1),
 		0 6px 18px rgba(23, 58, 64, 0.08);
 	backdrop-filter: blur(4px);
 }
 .feature-card {
 	background: linear-gradient(
 		165deg,
 		color-mix(in oklab, var(--surface-strong) 93%, white 7%),
 		var(--glass-surface)
 	);
 	box-shadow:
 		0 1px 0 var(--inset-glint) inset,
 		0 18px 34px rgba(30, 90, 72, 0.1),
 		0 4px 14px rgba(23, 58, 64, 0.06);
 }
 .feature-card:hover {
 	transform: translateY(-2px);
 	border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
 }
 .metric-card {
 	border: 1px solid color-mix(in oklab, var(--line) 82%, white 18%);
 	background: linear-gradient(
 		165deg,
 		color-mix(in oklab, white 82%, var(--lagoon) 18%),
 		color-mix(in oklab, white 90%, var(--coral) 10%)
 	);
 	box-shadow:
 		0 1px 0 rgba(255, 255, 255, 0.85) inset,
 		0 16px 28px rgba(23, 58, 64, 0.09);
 }
 button,
 .island-shell,
 a {
 	transition:
 		background-color 180ms ease,
 		color 180ms ease,
 		border-color 180ms ease,
 		transform 180ms ease;
 }
 .island-kicker {
 	letter-spacing: 0.16em;
 	text-transform: uppercase;
 	font-weight: 700;
 	font-size: 0.69rem;
 	color: var(--kicker);
 }
@keyframes rise-in {
 	from {
 		opacity: 0;
 		transform: translateY(12px);
 	}
 	to {
 		opacity: 1;
 		transform: translateY(0);
 	}
 }
 .rise-in {
 	animation: rise-in 560ms var(--ease) both;
 }
@media (prefers-reduced-motion: reduce) {
 	.rise-in {
 		animation: none;
 	}
 }
--- a/src/entities/landing/index.ts
+++ b/src/entities/landing/index.ts
@@ -0,0 +1 @@
 export * from "./model/content";
--- a/src/entities/landing/model/content.ts
+++ b/src/entities/landing/model/content.ts
@@ -0,0 +1,148 @@
 import type { m } from "#/paraglide/messages";
 type Messages = typeof m;
 export type MetricItem = {
 	value: string;
 	label: string;
 };
 export type ContentCardItem = {
 	title: string;
 	text: string;
 };
 export type StepItem = {
 	title: string;
 	text: string;
 };
 export type FaqItem = {
 	value: string;
 	title: string;
 	content: string;
 };
 export function getHeroMetrics(messages: Messages): MetricItem[] {
 	return [
 		{ value: "24/7", label: messages.hero_metric_label_1() },
 		{ value: "-18%", label: messages.hero_metric_label_2() },
 		{ value: "+26%", label: messages.hero_metric_label_3() },
 	];
 }
 export function getProblems(messages: Messages): ContentCardItem[] {
 	return [
 		{
 			title: messages.problem_card_1_title(),
 			text: messages.problem_card_1_text(),
 		},
 		{
 			title: messages.problem_card_2_title(),
 			text: messages.problem_card_2_text(),
 		},
 		{
 			title: messages.problem_card_3_title(),
 			text: messages.problem_card_3_text(),
 		},
 	];
 }
 export function getSolutionItems(messages: Messages): string[] {
 	return [
 		messages.solution_item_1(),
 		messages.solution_item_2(),
 		messages.solution_item_3(),
 		messages.solution_item_4(),
 		messages.solution_item_5(),
 	];
 }
 export function getBenefits(messages: Messages): ContentCardItem[] {
 	return [
 		{
 			title: messages.benefit_card_1_title(),
 			text: messages.benefit_card_1_text(),
 		},
 		{
 			title: messages.benefit_card_2_title(),
 			text: messages.benefit_card_2_text(),
 		},
 		{
 			title: messages.benefit_card_3_title(),
 			text: messages.benefit_card_3_text(),
 		},
 		{
 			title: messages.benefit_card_4_title(),
 			text: messages.benefit_card_4_text(),
 		},
 	];
 }
 export function getSteps(messages: Messages): StepItem[] {
 	return [
 		{
 			title: messages.how_step_1_title(),
 			text: messages.how_step_1_text(),
 		},
 		{
 			title: messages.how_step_2_title(),
 			text: messages.how_step_2_text(),
 		},
 		{
 			title: messages.how_step_3_title(),
 			text: messages.how_step_3_text(),
 		},
 		{
 			title: messages.how_step_4_title(),
 			text: messages.how_step_4_text(),
 		},
 	];
 }
 export function getTrustItems(messages: Messages): ContentCardItem[] {
 	return [
 		{
 			title: messages.trust_card_1_title(),
 			text: messages.trust_card_1_text(),
 		},
 		{
 			title: messages.trust_card_2_title(),
 			text: messages.trust_card_2_text(),
 		},
 		{
 			title: messages.trust_card_3_title(),
 			text: messages.trust_card_3_text(),
 		},
 	];
 }
 export function getFaqItems(messages: Messages): FaqItem[] {
 	return [
 		{
 			value: "need-website",
 			title: messages.faq_item_1_title(),
 			content: messages.faq_item_1_text(),
 		},
 		{
 			value: "services-prices",
 			title: messages.faq_item_2_title(),
 			content: messages.faq_item_2_text(),
 		},
 		{
 			value: "online-booking",
 			title: messages.faq_item_3_title(),
 			content: messages.faq_item_3_text(),
 		},
 		{
 			value: "solo-only",
 			title: messages.faq_item_4_title(),
 			content: messages.faq_item_4_text(),
 		},
 		{
 			value: "mobile",
 			title: messages.faq_item_5_title(),
 			content: messages.faq_item_5_text(),
 		},
 	];
 }
--- a/src/env.ts
+++ b/src/env.ts
@@ -0,0 +1,39 @@
 import { createEnv } from "@t3-oss/env-core";
 import { z } from "zod";
 export const env = createEnv({
 	server: {
 		SERVER_URL: z.string().url().optional(),
 	},
 	/**
 	 * The prefix that client-side variables must have. This is enforced both at
 	 * a type-level and at runtime.
 	 */
 	clientPrefix: "VITE_",
 	client: {
 		VITE_APP_TITLE: z.string().min(1).optional(),
 	},
 	/**
 	 * What object holds the environment variables at runtime. This is usually
 	 * `process.env` or `import.meta.env`.
 	 */
 	runtimeEnv: import.meta.env,
 	/**
 	 * By default, this library will feed the environment variables directly to
 	 * the Zod validator.
 	 *
 	 * This means that if you have an empty string for a value that is supposed
 	 * to be a number (e.g. `PORT=` in a ".env" file), Zod will incorrectly flag
 	 * it as a type mismatch violation. Additionally, if you have an empty string
 	 * for a value that is supposed to be a string with a default value (e.g.
 	 * `DOMAIN=` in an ".env" file), the default value will never be applied.
 	 *
 	 * In order to solve these issues, we recommend that all new projects
 	 * explicitly specify this option as true.
 	 */
 	emptyStringAsUndefined: true,
 });
--- a/src/features/change-language/index.ts
+++ b/src/features/change-language/index.ts
@@ -0,0 +1 @@
 export { LanguageSwitcher } from "./ui/language-switcher";
--- a/src/features/change-language/ui/language-switcher.tsx
+++ b/src/features/change-language/ui/language-switcher.tsx
@@ -0,0 +1,26 @@
 import { ToggleGroup } from "denjs-ui";
 import { useLocale, useMessages } from "#/shared/lib/i18n";
 export function LanguageSwitcher() {
 	const m = useMessages();
 	const { locale, setLocale } = useLocale();
 	return (
 		<ToggleGroup
 			type="single"
 			size="sm"
 			value={locale}
 			aria-label={m.switch_language_aria()}
 			className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] p-0.5"
 			items={[
 				{ value: "ru", label: "RU" },
 				{ value: "en", label: "EN" },
 			]}
 			onValueChange={async (value) => {
 				if (value === "ru" || value === "en") {
 					await setLocale(value);
 				}
 			}}
 		/>
 	);
 }
--- a/src/features/request-demo/index.ts
+++ b/src/features/request-demo/index.ts
@@ -0,0 +1 @@
 export { RequestDemoForm } from "./ui/request-demo-form";
--- a/src/features/request-demo/model/build-demo-request-mailto.test.ts
+++ b/src/features/request-demo/model/build-demo-request-mailto.test.ts
@@ -0,0 +1,59 @@
 import { describe, expect, it } from "vitest";
 import { buildDemoRequestMailto } from "./build-demo-request-mailto";
 function parseMailtoQuery(mailtoHref: string) {
 	const query = mailtoHref.split("?")[1] ?? "";
 	const params = new URLSearchParams(query);
 	return {
 		subject: params.get("subject"),
 		body: params.get("body"),
 	};
 }
 describe("buildDemoRequestMailto", () => {
 	it("builds a mailto link with normalized payload fields", () => {
 		const mailtoHref = buildDemoRequestMailto({
 			name: "  Anna ",
 			phone: " +1 555 1234 ",
 			specialization: "Nail artist",
 			city: "Moscow",
 			comment: "Need migration help",
 			locale: "ru",
 			pageUrl: "https://monie.app/",
 		});
 		const { subject, body } = parseMailtoQuery(mailtoHref);
 		expect(mailtoHref.startsWith("mailto:hello@monie.app?")).toBe(true);
 		expect(subject).toBe("Monie demo request - Anna");
 		expect(body).toContain("Name: Anna");
 		expect(body).toContain("Phone: +1 555 1234");
 		expect(body).toContain("Specialization: Nail artist");
 		expect(body).toContain("City: Moscow");
 		expect(body).toContain("Comment: Need migration help");
 		expect(body).toContain("Locale: ru");
 		expect(body).toContain("Page: https://monie.app/");
 	});
 	it("uses dash fallback for empty fields and keeps base subject", () => {
 		const mailtoHref = buildDemoRequestMailto({
 			name: " ",
 			phone: " ",
 			specialization: " ",
 			city: "",
 			comment: "",
 			locale: "",
 			pageUrl: "",
 		});
 		const { subject, body } = parseMailtoQuery(mailtoHref);
 		expect(subject).toBe("Monie demo request");
 		expect(body).toContain("Name: -");
 		expect(body).toContain("Phone: -");
 		expect(body).toContain("Specialization: -");
 		expect(body).toContain("City: -");
 		expect(body).toContain("Comment: -");
 		expect(body).toContain("Locale: -");
 		expect(body).toContain("Page: -");
 	});
 });
--- a/src/features/request-demo/model/build-demo-request-mailto.ts
+++ b/src/features/request-demo/model/build-demo-request-mailto.ts
@@ -0,0 +1,36 @@
 type DemoRequestMailtoPayload = {
 	name: string;
 	phone: string;
 	specialization: string;
 	city: string;
 	comment: string;
 	locale: string;
 	pageUrl: string;
 };
 function normalizeField(value: string): string {
 	const trimmed = value.trim();
 	return trimmed.length > 0 ? trimmed : "-";
 }
 export function buildDemoRequestMailto(
 	payload: DemoRequestMailtoPayload,
 ): string {
 	const name = payload.name.trim();
 	const subject = encodeURIComponent(
 		`Monie demo request${name ? ` - ${name}` : ""}`,
 	);
 	const body = encodeURIComponent(
 		[
 			`Name: ${normalizeField(payload.name)}`,
 			`Phone: ${normalizeField(payload.phone)}`,
 			`Specialization: ${normalizeField(payload.specialization)}`,
 			`City: ${normalizeField(payload.city)}`,
 			`Comment: ${normalizeField(payload.comment)}`,
 			`Locale: ${normalizeField(payload.locale)}`,
 			`Page: ${normalizeField(payload.pageUrl)}`,
 		].join("\n"),
 	);
 	return `mailto:hello@monie.app?subject=${subject}&body=${body}`;
 }
--- a/src/features/request-demo/model/specialization-options.ts
+++ b/src/features/request-demo/model/specialization-options.ts
@@ -0,0 +1,14 @@
 import type { m } from "#/paraglide/messages";
 type Messages = typeof m;
 export function getSpecializationOptions(messages: Messages) {
 	return [
 		{ value: "nails", label: messages.spec_nails() },
 		{ value: "brows", label: messages.spec_brows() },
 		{ value: "lashes", label: messages.spec_lashes() },
 		{ value: "barber", label: messages.spec_barber() },
 		{ value: "massage", label: messages.spec_massage() },
 		{ value: "other", label: messages.spec_other() },
 	];
 }
--- a/src/features/request-demo/ui/request-demo-form.tsx
+++ b/src/features/request-demo/ui/request-demo-form.tsx
@@ -0,0 +1,150 @@
 import { Button, Field, Input, NativeSelect, Text, Textarea } from "denjs-ui";
 import { type FormEvent, useMemo, useState } from "react";
 import { useMessages } from "#/shared/lib/i18n";
 import { buildDemoRequestMailto } from "../model/build-demo-request-mailto";
 import { getSpecializationOptions } from "../model/specialization-options";
 export function RequestDemoForm() {
 	const m = useMessages();
 	const [submitState, setSubmitState] = useState<
 		"idle" | "sending" | "success" | "error"
 	>("idle");
 	const options = useMemo(() => getSpecializationOptions(m), [m]);
 	const specializationByValue = useMemo(
 		() => Object.fromEntries(options.map((item) => [item.value, item.label])),
 		[options],
 	);
 	const onSubmit = (event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
 		if (typeof window === "undefined") {
 			setSubmitState("error");
 			return;
 		}
 		setSubmitState("sending");
 		try {
 			const formData = new FormData(event.currentTarget);
 			const name = String(formData.get("name") ?? "").trim();
 			const phone = String(formData.get("phone") ?? "").trim();
 			const specializationValue = String(
 				formData.get("specialization") ?? "",
 			).trim();
 			const city = String(formData.get("city") ?? "").trim();
 			const comment = String(formData.get("comment") ?? "").trim();
 			const specialization =
 				specializationByValue[specializationValue] ?? specializationValue;
 			window.location.href = buildDemoRequestMailto({
 				name,
 				phone,
 				specialization,
 				city,
 				comment,
 				locale: document.documentElement.lang,
 				pageUrl: window.location.href,
 			});
 			setSubmitState("success");
 		} catch {
 			setSubmitState("error");
 		}
 	};
 	return (
 		<form
 			className="rise-in grid gap-3 rounded-2xl border border-[var(--line)] bg-white/75 p-4 sm:grid-cols-2 sm:p-5"
 			style={{ animationDelay: "220ms" }}
 			onSubmit={onSubmit}
 		>
 			<Field label={m.form_name_label()} controlId="demo-name" required>
 				<Input
 					id="demo-name"
 					name="name"
 					placeholder={m.form_name_placeholder()}
 				/>
 			</Field>
 			<Field label={m.form_phone_label()} controlId="demo-phone" required>
 				<Input
 					id="demo-phone"
 					type="tel"
 					name="phone"
 					placeholder="+7 (999) 000-00-00"
 				/>
 			</Field>
 			<Field
 				label={m.form_specialization_label()}
 				controlId="demo-specialization"
 				required
 			>
 				<NativeSelect
 					id="demo-specialization"
 					name="specialization"
 					options={options}
 				/>
 			</Field>
 			<Field label={m.form_city_label()} controlId="demo-city">
 				<Input
 					id="demo-city"
 					name="city"
 					placeholder={m.form_city_placeholder()}
 				/>
 			</Field>
 			<Field
 				label={m.form_comment_label()}
 				controlId="demo-comment"
 				className="sm:col-span-2"
 			>
 				<Textarea
 					id="demo-comment"
 					name="comment"
 					rows={4}
 					placeholder={m.form_comment_placeholder()}
 					resizable={false}
 				/>
 			</Field>
 			<div className="sm:col-span-2 flex flex-wrap items-center justify-between gap-3 pt-1">
 				<Text
 					as="p"
 					size="sm"
 					tone="muted"
 					className="m-0 max-w-[36ch] text-xs text-[var(--sea-ink-soft)]"
 				>
 					{m.form_privacy_text()}
 				</Text>
 				<Button
 					type="submit"
 					size="large"
 					className="rounded-full"
 					disabled={submitState === "sending"}
 				>
 					{submitState === "sending" ? m.form_submit_busy() : m.form_submit()}
 				</Button>
 				{submitState === "success" && (
 					<Text
 						as="p"
 						size="sm"
 						className="m-0 w-full text-xs text-[var(--palm)]"
 					>
 						{m.form_submit_success()}
 					</Text>
 				)}
 				{submitState === "error" && (
 					<Text
 						as="p"
 						size="sm"
 						className="m-0 w-full text-xs text-[var(--coral)]"
 					>
 						{m.form_submit_error()}
 					</Text>
 				)}
 			</div>
 		</form>
 	);
 }
--- a/src/features/theme-toggle/ThemeToggle.tsx
+++ b/src/features/theme-toggle/ThemeToggle.tsx
@@ -0,0 +1,92 @@
 import { useEffect, useState } from "react";
 import { useMessages } from "#/shared/lib/i18n";
 import {
 	getNextThemeMode,
 	parseThemeMode,
 	resolveThemeMode,
 	type ThemeMode,
 } from "./model/theme-mode";
 function getInitialMode(): ThemeMode {
 	if (typeof window === "undefined") {
 		return "auto";
 	}
 	return parseThemeMode(window.localStorage.getItem("theme"));
 }
 function applyThemeMode(mode: ThemeMode) {
 	const resolved = resolveThemeMode(
 		mode,
 		window.matchMedia("(prefers-color-scheme: dark)").matches,
 	);
 	document.documentElement.classList.remove("light", "dark");
 	document.documentElement.classList.add(resolved);
 	if (mode === "auto") {
 		document.documentElement.removeAttribute("data-theme");
 	} else {
 		document.documentElement.setAttribute("data-theme", mode);
 	}
 	document.documentElement.style.colorScheme = resolved;
 }
 export function ThemeToggle() {
 	const m = useMessages();
 	const [mode, setMode] = useState<ThemeMode>("auto");
 	useEffect(() => {
 		const initialMode = getInitialMode();
 		setMode(initialMode);
 		applyThemeMode(initialMode);
 	}, []);
 	useEffect(() => {
 		if (mode !== "auto") {
 			return;
 		}
 		const media = window.matchMedia("(prefers-color-scheme: dark)");
 		const onChange = () => applyThemeMode("auto");
 		media.addEventListener("change", onChange);
 		return () => {
 			media.removeEventListener("change", onChange);
 		};
 	}, [mode]);
 	function toggleMode() {
 		const nextMode = getNextThemeMode(mode);
 		setMode(nextMode);
 		applyThemeMode(nextMode);
 		window.localStorage.setItem("theme", nextMode);
 	}
 	const label =
 		mode === "auto"
 			? m.theme_toggle_aria_auto()
 			: mode === "dark"
 				? m.theme_toggle_aria_dark()
 				: m.theme_toggle_aria_light();
 	const modeLabel =
 		mode === "auto"
 			? m.theme_toggle_mode_auto()
 			: mode === "dark"
 				? m.theme_toggle_mode_dark()
 				: m.theme_toggle_mode_light();
 	return (
 		<button
 			type="button"
 			onClick={toggleMode}
 			aria-label={label}
 			title={label}
 			className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm font-semibold text-[var(--sea-ink)] shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"
 		>
 			{modeLabel}
 		</button>
 	);
 }
--- a/src/features/theme-toggle/model/theme-mode.test.ts
+++ b/src/features/theme-toggle/model/theme-mode.test.ts
@@ -0,0 +1,29 @@
 import { describe, expect, it } from "vitest";
 import {
 	getNextThemeMode,
 	parseThemeMode,
 	resolveThemeMode,
 } from "./theme-mode";
 describe("theme-mode helpers", () => {
 	it("parses stored mode and falls back to auto for unknown values", () => {
 		expect(parseThemeMode("light")).toBe("light");
 		expect(parseThemeMode("dark")).toBe("dark");
 		expect(parseThemeMode("auto")).toBe("auto");
 		expect(parseThemeMode("night")).toBe("auto");
 		expect(parseThemeMode(null)).toBe("auto");
 	});
 	it("resolves auto mode based on system preference", () => {
 		expect(resolveThemeMode("auto", true)).toBe("dark");
 		expect(resolveThemeMode("auto", false)).toBe("light");
 		expect(resolveThemeMode("dark", false)).toBe("dark");
 		expect(resolveThemeMode("light", true)).toBe("light");
 	});
 	it("cycles modes in expected order", () => {
 		expect(getNextThemeMode("light")).toBe("dark");
 		expect(getNextThemeMode("dark")).toBe("auto");
 		expect(getNextThemeMode("auto")).toBe("light");
 	});
 });
--- a/src/features/theme-toggle/model/theme-mode.ts
+++ b/src/features/theme-toggle/model/theme-mode.ts
@@ -0,0 +1,33 @@
 export type ThemeMode = "light" | "dark" | "auto";
 type ResolvedThemeMode = Exclude<ThemeMode, "auto">;
 export function parseThemeMode(value: string | null | undefined): ThemeMode {
 	if (value === "light" || value === "dark" || value === "auto") {
 		return value;
 	}
 	return "auto";
 }
 export function resolveThemeMode(
 	mode: ThemeMode,
 	prefersDark: boolean,
 ): ResolvedThemeMode {
 	if (mode === "auto") {
 		return prefersDark ? "dark" : "light";
 	}
 	return mode;
 }
 export function getNextThemeMode(mode: ThemeMode): ThemeMode {
 	if (mode === "light") {
 		return "dark";
 	}
 	if (mode === "dark") {
 		return "auto";
 	}
 	return "light";
 }
--- a/src/pages/about/index.ts
+++ b/src/pages/about/index.ts
@@ -0,0 +1 @@
 export { AboutPage } from "./ui/about-page";
--- a/src/pages/about/ui/about-page.tsx
+++ b/src/pages/about/ui/about-page.tsx
@@ -0,0 +1,67 @@
 import { Badge, Button, Card, SectionHeader, Text } from "denjs-ui";
 import { scrollToSectionOrNavigateHome } from "#/shared/lib/dom";
 import { useMessages } from "#/shared/lib/i18n";
 export function AboutPage() {
 	const m = useMessages();
 	return (
 		<main className="page-wrap px-4 py-12 sm:py-14">
 			<Card padding="lg" className="island-shell rounded-2xl sm:p-8">
 				<Badge
 					color="teal"
 					rounded="full"
 					bordered
 					className="mb-3 w-fit px-3 py-1 text-[11px] tracking-[0.12em] uppercase"
 				>
 					{m.about_badge()}
 				</Badge>
 				<SectionHeader
 					title={m.about_title()}
 					subtitle={m.about_subtitle()}
 					align="left"
 					titleAs="h1"
 					className="max-w-3xl"
 				/>
 			</Card>
 			<section className="mt-6 grid gap-4 md:grid-cols-2">
 				<Card
 					padding="lg"
 					title={m.about_focus_title()}
 					className="island-shell rounded-2xl"
 				>
 					<ul className="m-0 space-y-2 pl-5 text-sm leading-7 text-[var(--sea-ink-soft)]">
 						<li>{m.about_focus_point_1()}</li>
 						<li>{m.about_focus_point_2()}</li>
 						<li>{m.about_focus_point_3()}</li>
 						<li>{m.about_focus_point_4()}</li>
 					</ul>
 				</Card>
 				<Card
 					padding="lg"
 					title={m.about_principle_title()}
 					className="island-shell rounded-2xl"
 				>
 					<Text
 						as="p"
 						tone="muted"
 						className="m-0 text-sm leading-7 text-[var(--sea-ink-soft)]"
 					>
 						{m.about_principle_text()}
 					</Text>
 					<Button
 						size="large"
 						className="mt-5 rounded-full"
 						onClick={() => scrollToSectionOrNavigateHome("demo")}
 					>
 						{m.about_cta()}
 					</Button>
 				</Card>
 			</section>
 		</main>
 	);
 }
--- a/src/pages/home/index.ts
+++ b/src/pages/home/index.ts
@@ -0,0 +1 @@
 export { HomePage } from "./ui/home-page";
--- a/src/pages/home/ui/home-page.tsx
+++ b/src/pages/home/ui/home-page.tsx
@@ -0,0 +1,29 @@
 import {
 	BenefitsSection,
 	FaqSection,
 	FinalCtaSection,
 	HeroSection,
 	HowItWorksSection,
 	PersonalPageSection,
 	ProblemSection,
 	ProductPreviewSection,
 	SolutionSection,
 	TrustSection,
 } from "#/widgets/landing";
 export function HomePage() {
 	return (
 		<main className="page-wrap px-4 pb-16 pt-10 sm:pt-14">
 			<HeroSection />
 			<ProblemSection />
 			<SolutionSection />
 			<ProductPreviewSection />
 			<BenefitsSection />
 			<HowItWorksSection />
 			<PersonalPageSection />
 			<TrustSection />
 			<FaqSection />
 			<FinalCtaSection />
 		</main>
 	);
 }
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -0,0 +1,86 @@
 /* eslint-disable */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // This file was automatically generated by TanStack Router.
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as AboutRouteImport } from './routes/about'
 import { Route as IndexRouteImport } from './routes/index'
 const AboutRoute = AboutRouteImport.update({
  id: '/about',
  path: '/about',
  getParentRoute: () => rootRouteImport,
 } as any)
 const IndexRoute = IndexRouteImport.update({
  id: '/',
  path: '/',
  getParentRoute: () => rootRouteImport,
 } as any)
 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '/about': typeof AboutRoute
 }
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '/about': typeof AboutRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
  '/about': typeof AboutRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: '/' | '/about'
  fileRoutesByTo: FileRoutesByTo
  to: '/' | '/about'
  id: '__root__' | '/' | '/about'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AboutRoute: typeof AboutRoute
 }
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
    '/about': {
      id: '/about'
      path: '/about'
      fullPath: '/about'
      preLoaderRoute: typeof AboutRouteImport
      parentRoute: typeof rootRouteImport
    }
    '/': {
      id: '/'
      path: '/'
      fullPath: '/'
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
  }
 }
 const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  AboutRoute: AboutRoute,
 }
 export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes<FileRouteTypes>()
 import type { getRouter } from './router.tsx'
 import type { createStart } from '@tanstack/react-start'
 declare module '@tanstack/react-start' {
  interface Register {
    ssr: true
    router: Awaited<ReturnType<typeof getRouter>>
  }
 }
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -0,0 +1,19 @@
 import { createRouter as createTanStackRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen";
 export function getRouter() {
 	const router = createTanStackRouter({
 		routeTree,
 		scrollRestoration: true,
 		defaultPreload: "intent",
 		defaultPreloadStaleTime: 0,
 	});
 	return router;
 }
 declare module "@tanstack/react-router" {
 	interface Register {
 		router: ReturnType<typeof getRouter>;
 	}
 }
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -0,0 +1,75 @@
 import { TanStackDevtools } from "@tanstack/react-devtools";
 import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 import { Footer, FooterSimpleRow } from "denjs-ui";
 import { LocaleProvider, PostHogProvider } from "#/app/providers";
 import appCss from "#/app/styles/index.css?url";
 import { m } from "#/paraglide/messages";
 import { getLocale } from "#/paraglide/runtime";
 import { Header } from "#/widgets/layout";
 export const Route = createRootRoute({
 	head: () => ({
 		meta: [
 			{
 				charSet: "utf-8",
 			},
 			{
 				name: "viewport",
 				content: "width=device-width, initial-scale=1",
 			},
 			{
 				title: m.seo_home_title(),
 			},
 			{
 				name: "description",
 				content: m.seo_home_description(),
 			},
 		],
 		links: [
 			{
 				rel: "icon",
 				type: "image/svg+xml",
 				href: "/favicon-light.svg",
 				id: "app-favicon",
 			},
 			{
 				rel: "stylesheet",
 				href: appCss,
 			},
 		],
 	}),
 	shellComponent: RootDocument,
 });
 function RootDocument({ children }: { children: React.ReactNode }) {
 	return (
 		<html lang={getLocale()} suppressHydrationWarning>
 			<head>
 				<script src="/theme-init.js" />
 				<HeadContent />
 			</head>
 			<body className="font-sans antialiased wrap-anywhere">
 				<PostHogProvider>
 					<LocaleProvider>
 						<Header />
 						{children}
 						<FooterSimpleRow />
 						<TanStackDevtools
 							config={{
 								position: "bottom-right",
 							}}
 							plugins={[
 								{
 									name: "Tanstack Router",
 									render: <TanStackRouterDevtoolsPanel />,
 								},
 							]}
 						/>
 					</LocaleProvider>
 				</PostHogProvider>
 				<Scripts />
 			</body>
 		</html>
 	);
 }
--- a/src/routes/about.tsx
+++ b/src/routes/about.tsx
@@ -0,0 +1,18 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { AboutPage } from "#/pages/about";
 import { m } from "#/paraglide/messages";
 export const Route = createFileRoute("/about")({
 	head: () => ({
 		meta: [
 			{
 				title: m.seo_about_title(),
 			},
 			{
 				name: "description",
 				content: m.seo_about_description(),
 			},
 		],
 	}),
 	component: AboutPage,
 });
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -0,0 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { HomePage } from "#/pages/home";
 export const Route = createFileRoute("/")({
 	component: HomePage,
 });
--- a/src/shared/lib/dom/index.ts
+++ b/src/shared/lib/dom/index.ts
@@ -0,0 +1 @@
 export * from "./scroll-to-section";
--- a/src/shared/lib/dom/scroll-to-section.ts
+++ b/src/shared/lib/dom/scroll-to-section.ts
@@ -0,0 +1,33 @@
 export function scrollToSection(id: string) {
 	if (typeof document === "undefined") {
 		return;
 	}
 	const section = document.getElementById(id);
 	if (!section) {
 		return;
 	}
 	section.scrollIntoView({ behavior: "smooth", block: "start" });
 }
 export function scrollToSectionOrNavigateHome(id: string) {
 	if (typeof window === "undefined") {
 		return;
 	}
 	if (window.location.pathname !== "/") {
 		window.location.href = `/#${id}`;
 		return;
 	}
 	const section = document.getElementById(id);
 	if (!section) {
 		window.location.hash = `#${id}`;
 		return;
 	}
 	section.scrollIntoView({ behavior: "smooth", block: "start" });
 }
--- a/src/shared/lib/i18n/index.ts
+++ b/src/shared/lib/i18n/index.ts
@@ -0,0 +1 @@
 export * from "./locale-context";
--- a/src/shared/lib/i18n/locale-context.tsx
+++ b/src/shared/lib/i18n/locale-context.tsx
@@ -0,0 +1,125 @@
 import { useRouterState } from "@tanstack/react-router";
 import type { ReactNode } from "react";
 import {
 	createContext,
 	useCallback,
 	useContext,
 	useEffect,
 	useMemo,
 	useState,
 } from "react";
 import { m } from "#/paraglide/messages";
 import type { locales } from "#/paraglide/runtime";
 import {
 	getLocale,
 	setLocale as setParaglideLocale,
 } from "#/paraglide/runtime";
 import { resolveSeoPage } from "./seo";
 type Locale = (typeof locales)[number];
 type LocaleContextValue = {
 	locale: Locale;
 	setLocale: (locale: Locale) => Promise<void>;
 };
 const LocaleContext = createContext<LocaleContextValue | null>(null);
 function getCurrentLocale(): Locale {
 	return getLocale() as Locale;
 }
 export function LocaleProvider({ children }: { children: ReactNode }) {
 	const [locale, setLocaleState] = useState<Locale>(getCurrentLocale);
 	const pathname = useRouterState({
 		select: (state) => state.location.pathname,
 	});
 	const setLocale = useCallback(async (nextLocale: Locale) => {
 		await setParaglideLocale(nextLocale, { reload: false });
 		setLocaleState(getCurrentLocale());
 	}, []);
 	useEffect(() => {
 		if (typeof document !== "undefined") {
 			document.documentElement.lang = locale;
 			const seoPage = resolveSeoPage(pathname);
 			document.title =
 				seoPage === "about" ? m.seo_about_title() : m.seo_home_title();
 			const descriptionMeta = document.querySelector(
 				'meta[name="description"]',
 			);
 			if (descriptionMeta) {
 				descriptionMeta.setAttribute(
 					"content",
 					seoPage === "about"
 						? m.seo_about_description()
 						: m.seo_home_description(),
 				);
 			}
 		}
 	}, [locale, pathname]);
 	useEffect(() => {
 		if (typeof document === "undefined" || typeof window === "undefined") {
 			return;
 		}
 		const link = document.querySelector<HTMLLinkElement>("link#app-favicon");
 		if (!link) {
 			return;
 		}
 		const applyFavicon = () => {
 			const explicitTheme = document.documentElement.getAttribute("data-theme");
 			const prefersDark = window.matchMedia(
 				"(prefers-color-scheme: dark)",
 			).matches;
 			const isDark =
 				explicitTheme === "dark" || (explicitTheme !== "light" && prefersDark);
 			link.href = isDark ? "/favicon-dark.svg" : "/favicon-light.svg";
 		};
 		const media = window.matchMedia("(prefers-color-scheme: dark)");
 		const observer = new MutationObserver(applyFavicon);
 		applyFavicon();
 		media.addEventListener("change", applyFavicon);
 		observer.observe(document.documentElement, {
 			attributes: true,
 			attributeFilter: ["data-theme"],
 		});
 		return () => {
 			media.removeEventListener("change", applyFavicon);
 			observer.disconnect();
 		};
 	}, []);
 	const value = useMemo(
 		() => ({
 			locale,
 			setLocale,
 		}),
 		[locale, setLocale],
 	);
 	return (
 		<LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
 	);
 }
 export function useLocale() {
 	const context = useContext(LocaleContext);
 	if (!context) {
 		throw new Error("useLocale must be used within LocaleProvider");
 	}
 	return context;
 }
 export function useMessages() {
 	useLocale();
 	return m;
 }
--- a/src/shared/lib/i18n/messages-parity.test.ts
+++ b/src/shared/lib/i18n/messages-parity.test.ts
@@ -0,0 +1,33 @@
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 import { describe, expect, it } from "vitest";
 function readMessages(locale: "ru" | "en") {
 	const filepath = resolve(process.cwd(), "messages", `${locale}.json`);
 	return JSON.parse(readFileSync(filepath, "utf-8")) as Record<string, string>;
 }
 describe("message catalogs", () => {
 	it("have the same keyset for ru and en", () => {
 		const ru = readMessages("ru");
 		const en = readMessages("en");
 		const ruKeys = Object.keys(ru).sort();
 		const enKeys = Object.keys(en).sort();
 		expect(ruKeys).toEqual(enKeys);
 	});
 	it("have non-empty translations", () => {
 		const catalogs = [readMessages("ru"), readMessages("en")];
 		for (const catalog of catalogs) {
 			for (const [key, value] of Object.entries(catalog)) {
 				expect(
 					value.trim().length,
 					`Empty translation for key: ${key}`,
 				).toBeGreaterThan(0);
 			}
 		}
 	});
 });
--- a/src/shared/lib/i18n/seo.test.ts
+++ b/src/shared/lib/i18n/seo.test.ts
@@ -0,0 +1,15 @@
 import { describe, expect, it } from "vitest";
 import { resolveSeoPage } from "./seo";
 describe("resolveSeoPage", () => {
 	it("returns about page for /about and nested about routes", () => {
 		expect(resolveSeoPage("/about")).toBe("about");
 		expect(resolveSeoPage("/about/team")).toBe("about");
 	});
 	it("returns home page for non-about routes", () => {
 		expect(resolveSeoPage("/")).toBe("home");
 		expect(resolveSeoPage("/pricing")).toBe("home");
 		expect(resolveSeoPage("/aboutness")).toBe("home");
 	});
 });
--- a/src/shared/lib/i18n/seo.ts
+++ b/src/shared/lib/i18n/seo.ts
@@ -0,0 +1,9 @@
 export type SeoPage = "home" | "about";
 export function resolveSeoPage(pathname: string): SeoPage {
 	if (pathname === "/about" || pathname.startsWith("/about/")) {
 		return "about";
 	}
 	return "home";
 }
--- a/src/shared/ui/lower-left-logo.tsx
+++ b/src/shared/ui/lower-left-logo.tsx
@@ -0,0 +1,26 @@
 import type { SVGProps } from "react";
 type LowerLeftLogoProps = SVGProps<SVGSVGElement>;
 export function LowerLeftLogo({ className, ...props }: LowerLeftLogoProps) {
 	return (
 		<svg
 			viewBox="0 0 218 78"
 			width="218"
 			height="78"
 			className={className}
 			xmlns="http://www.w3.org/2000/svg"
 			{...props}
 		>
 			<title>Monie</title>
 			<g fill="currentColor" fillRule="evenodd">
 				<path d="M 167 39 L 166 40 L 166 47 L 165 48 L 165 53 L 164 54 L 164 59 L 163 60 L 163 61 L 164 62 L 164 63 L 166 65 L 171 65 L 172 64 L 174 64 L 175 63 L 174 62 L 172 62 L 171 61 L 171 56 L 172 55 L 172 49 L 173 48 L 173 43 L 174 42 L 174 41 L 173 40 L 173 39 Z" />
 				<path d="M 130 39 L 129 40 L 129 48 L 128 49 L 128 54 L 127 55 L 127 60 L 126 61 L 126 64 L 133 64 L 133 63 L 134 62 L 134 56 L 135 55 L 135 51 L 142 44 L 143 44 L 144 43 L 148 43 L 149 44 L 149 45 L 150 46 L 150 48 L 149 49 L 149 53 L 148 54 L 148 58 L 147 59 L 147 63 L 149 65 L 154 65 L 155 64 L 157 64 L 158 63 L 157 63 L 155 61 L 155 55 L 156 54 L 156 49 L 157 48 L 157 43 L 156 42 L 156 41 L 154 39 L 148 39 L 147 40 L 145 40 L 143 42 L 142 42 L 141 43 L 140 43 L 138 45 L 138 46 L 137 47 L 136 46 L 136 40 L 135 39 Z" />
 				<path d="M 196 38 L 195 39 L 191 39 L 190 40 L 189 40 L 188 41 L 187 41 L 181 47 L 181 48 L 180 49 L 180 51 L 179 52 L 179 58 L 180 59 L 180 60 L 183 63 L 184 63 L 185 64 L 187 64 L 188 65 L 195 65 L 196 64 L 199 64 L 200 63 L 201 63 L 202 62 L 203 62 L 205 60 L 206 60 L 206 59 L 205 59 L 204 60 L 203 60 L 202 61 L 201 61 L 200 62 L 198 62 L 197 63 L 192 63 L 191 62 L 190 62 L 187 59 L 187 55 L 186 54 L 188 52 L 196 52 L 197 51 L 200 51 L 201 50 L 203 50 L 207 46 L 207 43 L 206 42 L 206 41 L 205 40 L 204 40 L 203 39 L 200 39 L 199 38 Z M 194 40 L 199 40 L 201 42 L 201 46 L 197 50 L 196 50 L 195 51 L 188 51 L 187 50 L 187 49 L 188 48 L 188 47 L 189 46 L 189 45 Z" />
 				<path d="M 108 38 L 107 39 L 103 39 L 102 40 L 101 40 L 100 41 L 99 41 L 98 42 L 97 42 L 96 43 L 96 44 L 94 46 L 94 47 L 93 48 L 93 49 L 92 50 L 92 57 L 93 58 L 93 59 L 94 60 L 94 61 L 95 62 L 96 62 L 98 64 L 101 64 L 102 65 L 109 65 L 110 64 L 113 64 L 114 63 L 115 63 L 120 58 L 120 57 L 121 56 L 121 55 L 122 54 L 122 47 L 121 46 L 121 44 L 117 40 L 116 40 L 115 39 L 112 39 L 111 38 Z M 106 41 L 107 40 L 111 40 L 114 43 L 114 44 L 115 45 L 115 53 L 114 54 L 114 56 L 113 57 L 113 58 L 112 59 L 112 60 L 109 63 L 108 63 L 107 64 L 105 64 L 104 63 L 103 63 L 100 60 L 100 49 L 101 48 L 101 46 L 102 45 L 102 44 L 105 41 Z" />
 				<path d="M 173 23 L 172 24 L 170 24 L 169 25 L 169 26 L 168 27 L 168 30 L 170 32 L 173 32 L 174 31 L 175 31 L 177 29 L 177 25 L 176 24 L 175 24 L 174 23 Z" />
 				<path d="M 52 10 L 51 11 L 47 11 L 46 12 L 45 12 L 44 13 L 43 13 L 41 15 L 40 15 L 30 25 L 30 26 L 27 29 L 27 30 L 25 32 L 25 33 L 23 35 L 23 36 L 22 37 L 22 38 L 21 39 L 21 40 L 19 42 L 19 43 L 18 44 L 18 45 L 17 46 L 17 47 L 16 48 L 16 49 L 15 50 L 15 51 L 14 52 L 14 54 L 13 55 L 13 56 L 12 57 L 12 58 L 11 59 L 11 61 L 10 62 L 10 65 L 11 66 L 13 66 L 14 67 L 18 67 L 19 66 L 21 66 L 22 65 L 23 65 L 25 63 L 25 61 L 26 60 L 26 59 L 27 58 L 27 56 L 28 55 L 28 53 L 29 52 L 29 50 L 30 49 L 30 47 L 31 46 L 31 45 L 32 44 L 32 43 L 33 42 L 33 41 L 34 40 L 34 39 L 35 38 L 35 37 L 36 36 L 36 35 L 37 34 L 37 33 L 39 31 L 39 30 L 41 28 L 41 27 L 47 21 L 48 22 L 48 25 L 47 26 L 47 29 L 46 30 L 46 32 L 45 33 L 45 36 L 44 37 L 44 40 L 43 41 L 43 45 L 42 46 L 42 54 L 43 55 L 43 57 L 46 60 L 47 60 L 48 61 L 53 61 L 54 60 L 55 60 L 57 58 L 58 58 L 59 57 L 59 56 L 62 53 L 62 52 L 63 51 L 63 50 L 65 48 L 65 47 L 66 46 L 66 45 L 68 43 L 68 42 L 69 41 L 69 40 L 71 38 L 71 37 L 73 35 L 73 34 L 76 31 L 76 30 L 79 27 L 80 27 L 81 28 L 80 29 L 80 31 L 79 32 L 79 34 L 78 35 L 78 37 L 77 38 L 77 40 L 76 41 L 76 44 L 75 45 L 75 48 L 74 49 L 74 54 L 73 55 L 73 57 L 74 58 L 74 61 L 75 62 L 75 63 L 77 65 L 78 65 L 79 66 L 81 66 L 82 67 L 90 67 L 91 66 L 89 66 L 88 65 L 87 65 L 85 63 L 85 62 L 84 61 L 84 50 L 85 49 L 85 46 L 86 45 L 86 42 L 87 41 L 87 38 L 88 37 L 88 34 L 89 33 L 89 31 L 90 30 L 90 27 L 91 26 L 91 23 L 92 22 L 92 19 L 90 17 L 84 17 L 83 18 L 82 18 L 80 20 L 79 20 L 73 26 L 73 27 L 69 31 L 69 32 L 66 35 L 66 36 L 64 38 L 64 39 L 62 41 L 62 42 L 59 45 L 59 46 L 56 49 L 55 49 L 54 48 L 54 47 L 53 46 L 53 44 L 54 43 L 54 38 L 55 37 L 55 34 L 56 33 L 56 31 L 57 30 L 57 27 L 58 26 L 58 24 L 59 23 L 59 19 L 60 18 L 60 16 L 59 15 L 59 13 L 58 12 L 57 12 L 56 11 L 53 11 Z" />
 			</g>
 		</svg>
 	);
 }
--- a/src/styles/dark.css
+++ b/src/styles/dark.css
@@ -0,0 +1,93 @@
 :root[data-theme="dark"] {
 	color-scheme: dark;
 	--background: #000000; /* --geist-background in dark */
 	--foreground: #ffffff; /* --geist-foreground in dark */
 	--surface: #111111; /* --accents-1 */
 	--surface-muted: #111111; /* --accents-1 */
 	--surface-hover: #333333; /* --accents-2 */
 	--border: #333333; /* --accents-2 */
 	--input: #000000;
 	--input-border: #333333;
 	--muted: #111111; /* --accents-1 */
 	--muted-foreground: #888888; /* --accents-5 */
 	/* In dark, primary often uses a light button */
 	--primary: #fafafa; /* --accents-8 */
 	--primary-foreground: #000000;
 	--primary-hover: #eaeaea; /* --accents-7 */
 	--primary-muted: #333333; /* --accents-2 */
 	--accent: #3291ff; /* --geist-success-light */
 	--accent-foreground: #000000;
 	--accent-text: #3291ff;
 	--card: var(--surface);
 	--card-foreground: var(--foreground);
 	--popover: var(--surface);
 	--popover-foreground: var(--foreground);
 	--secondary: #111111;
 	--secondary-foreground: #fafafa;
 	--ring: #3291ff;
 	--focus: #3291ff;
 	--success: #3291ff;
 	--success-foreground: #000000;
 	--warning: #f7b955; /* --geist-warning-light */
 	--warning-foreground: #000000;
 	--danger: #ff1a1a; /* --geist-error-light */
 	--danger-foreground: #000000;
 	--disabled: rgba(255, 255, 255, 0.1);
 	--disabled-foreground: rgba(255, 255, 255, 0.5);
 }
 /* Optional: OS auto-dark when no explicit theme set */
@media (prefers-color-scheme: dark) {
 	:root:not([data-theme]) {
 		color-scheme: dark;
 		--background: #000000;
 		--foreground: #ffffff;
 		--surface: #111111;
 		--surface-muted: #111111;
 		--surface-hover: #333333;
 		--border: #333333;
 		--input: #000000;
 		--input-border: #333333;
 		--muted: #111111;
 		--muted-foreground: #888888;
 		--primary: #fafafa;
 		--primary-foreground: #000000;
 		--primary-hover: #eaeaea;
 		--primary-muted: #333333;
 		--accent: #3291ff;
 		--accent-foreground: #000000;
 		--accent-text: #3291ff;
 		--card: var(--surface);
 		--card-foreground: var(--foreground);
 		--popover: var(--surface);
 		--popover-foreground: var(--foreground);
 		--secondary: #111111;
 		--secondary-foreground: #fafafa;
 		--ring: #3291ff;
 		--focus: #3291ff;
 	}
 }
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -0,0 +1,4 @@
@import "tailwindcss";
@import "./tokens.css";
@import "./light.css";
@import "./dark.css";
--- a/src/styles/light.css
+++ b/src/styles/light.css
@@ -0,0 +1,70 @@
 :root {
 	color-scheme: light;
 	/* ===== Core surfaces ===== */
 	--background: #ffffff; /* --geist-background */
 	--foreground: #000000; /* --geist-foreground */
 	--surface: #ffffff;
 	--surface-muted: #fafafa; /* --accents-1 */
 	--surface-hover: #eaeaea; /* --accents-2 */
 	/* ===== Borders / inputs ===== */
 	--border: #eaeaea; /* --accents-2 */
 	--input: #ffffff;
 	--input-border: #eaeaea;
 	/* ===== Text tokens ===== */
 	--muted: #fafafa; /* --accents-1 */
 	--muted-foreground: #666666; /* --accents-5 */
 	/* ===== Brand tokens (Next/Vercel) ===== */
 	--primary: #111111; /* close to black UI: --accents-8 */
 	--primary-foreground: #ffffff;
 	--primary-hover: #333333; /* --accents-7 */
 	--primary-muted: #eaeaea; /* --accents-2 */
 	--accent: #0070f3; /* --geist-success */
 	--accent-foreground: #ffffff;
 	--accent-text: #0070f3;
 	/* ===== Semantic component tokens (shadcn-like) ===== */
 	--card: var(--surface);
 	--card-foreground: var(--foreground);
 	--popover: var(--surface);
 	--popover-foreground: var(--foreground);
 	--secondary: #fafafa; /* --accents-1 */
 	--secondary-foreground: #111111;
 	--ring: #0070f3; /* --geist-success */
 	--focus: #0070f3;
 	/* ===== States (Geist palette) ===== */
 	--success: #0070f3; /* Geist "success" is blue */
 	--success-foreground: #ffffff;
 	--warning: #f5a623;
 	--warning-foreground: #111111;
 	--danger: #ee0000; /* --geist-error */
 	--danger-foreground: #ffffff;
 	/* Disabled */
 	--disabled: rgba(0, 0, 0, 0.08);
 	--disabled-foreground: rgba(0, 0, 0, 0.45);
 	/* ===== Data viz (Geist highlights) ===== */
 	--chart-1: #60a5fa; /* light blue */
 	--chart-2: #c084fc; /* light violet */
 	--chart-3: #34d399; /* mint */
 	--chart-4: #f472b6; /* pink */
 	--chart-5: #fbbf24; /* amber */
 	--chart-6: #22d3ee; /* sky/cyan */
 	/* ===== Motion ===== */
 	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
 	--dur-1: 120ms;
 	--dur-2: 200ms;
 	--dur-3: 320ms;
 }
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -0,0 +1,62 @@
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
@theme {
 	/* colors */
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
 	--color-surface: var(--surface);
 	--color-surfaceMuted: var(--surface-muted);
 	--color-surfaceHover: var(--surface-hover);
 	--color-border: var(--border);
 	--color-input: var(--input);
 	--color-input-border: var(--input-border);
 	--color-muted: var(--muted);
 	--color-mutedForeground: var(--muted-foreground);
 	--color-primary: var(--primary);
 	--color-primaryForeground: var(--primary-foreground);
 	--color-primaryHover: var(--primary-hover);
 	--color-primaryMuted: var(--primary-muted);
 	--color-accent: var(--accent);
 	--color-accentForeground: var(--accent-foreground);
 	--color-accentText: var(--accent-text);
 	--color-card: var(--card);
 	--color-cardForeground: var(--card-foreground);
 	--color-popover: var(--popover);
 	--color-popoverForeground: var(--popover-foreground);
 	--color-secondary: var(--secondary);
 	--color-secondaryForeground: var(--secondary-foreground);
 	--color-success: var(--success);
 	--color-successForeground: var(--success-foreground);
 	--color-warning: var(--warning);
 	--color-warningForeground: var(--warning-foreground);
 	--color-danger: var(--danger);
 	--color-dangerForeground: var(--danger-foreground);
 	--color-ring: var(--ring);
 	--color-focus: var(--focus);
 	/* motion */
 	--ease: var(--ease);
 	--dur-1: var(--dur-1);
 	--dur-2: var(--dur-2);
 	--dur-3: var(--dur-3);
 	/* charts */
 	--chart-1: var(--chart-1);
 	--chart-2: var(--chart-2);
 	--chart-3: var(--chart-3);
 	--chart-4: var(--chart-4);
 	--chart-5: var(--chart-5);
 	--chart-6: var(--chart-6);
 }
--- a/src/widgets/landing/benefits-section/ui/benefits-section.tsx
+++ b/src/widgets/landing/benefits-section/ui/benefits-section.tsx
@@ -0,0 +1,31 @@
 import { Card, SectionHeader } from "denjs-ui";
 import { getBenefits } from "#/entities/landing";
 import { useMessages } from "#/shared/lib/i18n";
 export function BenefitsSection() {
 	const m = useMessages();
 	return (
 		<section id="benefits" className="mt-10 sm:mt-14">
 			<SectionHeader
 				eyebrow={m.benefits_eyebrow()}
 				title={m.benefits_title()}
 				align="left"
 				className="max-w-3xl"
 			/>
 			<div className="mt-5 grid gap-4 md:grid-cols-2">
 				{getBenefits(m).map((item, index) => (
 					<Card
 						key={item.title}
 						title={item.title}
 						description={item.text}
 						padding="lg"
 						className="feature-card rise-in rounded-2xl"
 						style={{ animationDelay: `${index * 90 + 100}ms` }}
 					/>
 				))}
 			</div>
 		</section>
 	);
 }
--- a/src/widgets/landing/faq-section/ui/faq-section.tsx
+++ b/src/widgets/landing/faq-section/ui/faq-section.tsx
@@ -0,0 +1,37 @@
 import { Accordion, SectionHeader, Text } from "denjs-ui";
 import { getFaqItems } from "#/entities/landing";
 import { useMessages } from "#/shared/lib/i18n";
 export function FaqSection() {
 	const m = useMessages();
 	return (
 		<section id="faq" className="mt-10 sm:mt-14">
 			<SectionHeader
 				eyebrow={m.faq_eyebrow()}
 				title={m.faq_title()}
 				align="left"
 				className="max-w-3xl"
 			/>
 			<Accordion
 				className="mt-5 rounded-2xl border border-[var(--line)] bg-[var(--glass-surface)]"
 				items={getFaqItems(m).map((item) => ({
 					value: item.value,
 					title: item.title,
 					content: (
 						<Text
 							as="p"
 							tone="muted"
 							className="m-0 text-sm leading-6 text-[var(--sea-ink-soft)]"
 						>
 							{item.content}
 						</Text>
 					),
 				}))}
 				type="single"
 				collapsible
 			/>
 		</section>
 	);
 }
--- a/src/widgets/landing/final-cta-section/ui/final-cta-section.tsx
+++ b/src/widgets/landing/final-cta-section/ui/final-cta-section.tsx
@@ -0,0 +1,32 @@
 import { Card, SectionHeader } from "denjs-ui";
 import { RequestDemoForm } from "#/features/request-demo";
 import { useMessages } from "#/shared/lib/i18n";
 export function FinalCtaSection() {
 	const m = useMessages();
 	return (
 		<section id="demo" className="mt-10 sm:mt-14">
 			<Card
 				padding="lg"
 				className="island-shell rounded-[2rem] border-[rgba(31,96,99,0.3)] bg-[linear-gradient(160deg,rgba(255,255,255,0.95),rgba(220,245,241,0.8))] sm:p-10"
 			>
 				<div className="grid gap-6 lg:grid-cols-[1fr_1.08fr]">
 					<div className="rise-in" style={{ animationDelay: "120ms" }}>
 						<SectionHeader
 							eyebrow={m.final_eyebrow()}
 							title={m.final_title()}
 							subtitle={m.final_subtitle()}
 							align="left"
 						/>
 						<div className="mt-4 inline-flex rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1 text-xs font-semibold text-[var(--sea-ink-soft)]">
 							{m.final_hint()}
 						</div>
 					</div>
 					<RequestDemoForm />
 				</div>
 			</Card>
 		</section>
 	);
 }
--- a/src/widgets/landing/hero-section/ui/hero-section.tsx
+++ b/src/widgets/landing/hero-section/ui/hero-section.tsx
@@ -0,0 +1,84 @@
 import { Badge, Button, Card, Heading, Text } from "denjs-ui";
 import { getHeroMetrics } from "#/entities/landing";
 import { scrollToSection } from "#/shared/lib/dom";
 import { useMessages } from "#/shared/lib/i18n";
 export function HeroSection() {
 	const m = useMessages();
 	return (
 		<section className="island-shell rise-in relative overflow-hidden rounded-[2.2rem] px-6 py-10 sm:px-10 sm:py-14">
 			<div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
 			<div className="pointer-events-none absolute -bottom-24 -right-16 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(230,128,97,0.2),transparent_66%)]" />
 			<Badge
 				color="teal"
 				rounded="full"
 				bordered
 				className="w-fit px-3 py-1 text-[11px] tracking-[0.12em] uppercase"
 			>
 				{m.hero_badge()}
 			</Badge>
 			<Heading
 				level={1}
 				className="mt-4 max-w-4xl text-4xl leading-[0.98] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl"
 			>
 				{m.hero_title()}
 			</Heading>
 			<Text
 				size="lg"
 				tone="muted"
 				className="mt-5 max-w-3xl text-base leading-7 text-[var(--sea-ink-soft)] sm:text-lg"
 			>
 				{m.hero_subtitle()}
 			</Text>
 			<div className="mt-8 flex flex-wrap gap-3">
 				<Button
 					size="large"
 					className="rounded-full"
 					onClick={() => scrollToSection("demo")}
 				>
 					{m.hero_cta_primary()}
 				</Button>
 				<Button
 					tone="secondary"
 					size="large"
 					className="rounded-full"
 					onClick={() => scrollToSection("how")}
 				>
 					{m.hero_cta_secondary()}
 				</Button>
 			</div>
 			<div className="mt-8 grid gap-3 sm:grid-cols-3">
 				{getHeroMetrics(m).map((item, index) => (
 					<Card
 						key={item.label}
 						padding="md"
 						className="metric-card rise-in rounded-2xl"
 						style={{ animationDelay: `${index * 100 + 80}ms` }}
 					>
 						<Text
 							as="p"
 							weight="semibold"
 							className="m-0 text-2xl font-extrabold text-[var(--sea-ink)]"
 						>
 							{item.value}
 						</Text>
 						<Text
 							as="p"
 							size="sm"
 							tone="muted"
 							className="mt-1 text-[var(--sea-ink-soft)]"
 						>
 							{item.label}
 						</Text>
 					</Card>
 				))}
 			</div>
 		</section>
 	);
 }
--- a/src/widgets/landing/how-it-works-section/ui/how-it-works-section.tsx
+++ b/src/widgets/landing/how-it-works-section/ui/how-it-works-section.tsx
@@ -0,0 +1,49 @@
 import { Badge, Card, Heading, SectionHeader, Text } from "denjs-ui";
 import { getSteps } from "#/entities/landing";
 import { useMessages } from "#/shared/lib/i18n";
 export function HowItWorksSection() {
 	const m = useMessages();
 	return (
 		<section id="how" className="mt-10 sm:mt-14">
 			<SectionHeader
 				eyebrow={m.how_eyebrow()}
 				title={m.how_title()}
 				align="left"
 				className="max-w-3xl"
 			/>
 			<div className="mt-5 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
 				{getSteps(m).map((step, index) => (
 					<Card
 						key={step.title}
 						padding="lg"
 						className="island-shell rise-in rounded-2xl"
 						style={{ animationDelay: `${index * 80 + 120}ms` }}
 					>
 						<Badge
 							color="teal"
 							rounded="full"
 							className="mb-3 w-fit px-2.5 py-1 text-[11px] font-semibold"
 						>
 							{m.how_step_label()} {index + 1}
 						</Badge>
 						<Heading
 							level={4}
 							className="text-base font-semibold text-[var(--sea-ink)]"
 						>
 							{step.title}
 						</Heading>
 						<Text
 							tone="muted"
 							className="mt-2 text-sm leading-6 text-[var(--sea-ink-soft)]"
 						>
 							{step.text}
 						</Text>
 					</Card>
 				))}
 			</div>
 		</section>
 	);
 }
--- a/src/widgets/landing/index.ts
+++ b/src/widgets/landing/index.ts
@@ -0,0 +1,10 @@
 export { BenefitsSection } from "./benefits-section/ui/benefits-section";
 export { FaqSection } from "./faq-section/ui/faq-section";
 export { FinalCtaSection } from "./final-cta-section/ui/final-cta-section";
 export { HeroSection } from "./hero-section/ui/hero-section";
 export { HowItWorksSection } from "./how-it-works-section/ui/how-it-works-section";
 export { PersonalPageSection } from "./personal-page-section/ui/personal-page-section";
 export { ProblemSection } from "./problem-section/ui/problem-section";
 export { ProductPreviewSection } from "./product-preview-section/ui/product-preview-section";
 export { SolutionSection } from "./solution-section/ui/solution-section";
 export { TrustSection } from "./trust-section/ui/trust-section";
--- a/src/widgets/landing/personal-page-section/ui/personal-page-section.tsx
+++ b/src/widgets/landing/personal-page-section/ui/personal-page-section.tsx
@@ -0,0 +1,56 @@
 import { Button, Card, SectionHeader, Text } from "denjs-ui";
 import { scrollToSection } from "#/shared/lib/dom";
 import { useMessages } from "#/shared/lib/i18n";
 export function PersonalPageSection() {
 	const m = useMessages();
 	return (
 		<section id="personal" className="mt-10 sm:mt-14">
 			<Card
 				padding="lg"
 				className="island-shell rounded-[2rem] border-[rgba(31,96,99,0.28)] bg-[linear-gradient(155deg,rgba(255,255,255,0.95),rgba(220,245,241,0.74))] sm:p-10"
 			>
 				<div className="grid gap-6 lg:grid-cols-[1.1fr_1fr] lg:items-center">
 					<div>
 						<SectionHeader
 							eyebrow={m.personal_eyebrow()}
 							title={m.personal_title()}
 							subtitle={m.personal_subtitle()}
 							align="left"
 						/>
 						<div className="mt-4 inline-flex rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1 text-xs font-semibold text-[var(--sea-ink-soft)]">
 							{m.personal_example()}
 						</div>
 					</div>
 					<Card
 						padding="lg"
 						className="rounded-2xl border border-[var(--line)] bg-white/82"
 					>
 						<Text
 							as="p"
 							size="sm"
 							tone="muted"
 							className="m-0 text-[var(--sea-ink-soft)]"
 						>
 							{m.personal_card_title()}
 						</Text>
 						<ul className="m-0 mt-3 space-y-2 pl-5 text-sm leading-6 text-[var(--sea-ink-soft)]">
 							<li>{m.personal_point_1()}</li>
 							<li>{m.personal_point_2()}</li>
 							<li>{m.personal_point_3()}</li>
 						</ul>
 						<Button
 							size="large"
 							className="mt-5 w-full rounded-full"
 							onClick={() => scrollToSection("demo")}
 						>
 							{m.personal_cta()}
 						</Button>
 					</Card>
 				</div>
 			</Card>
 		</section>
 	);
 }
--- a/src/widgets/landing/problem-section/ui/problem-section.tsx
+++ b/src/widgets/landing/problem-section/ui/problem-section.tsx
@@ -0,0 +1,32 @@
 import { Card, SectionHeader } from "denjs-ui";
 import { getProblems } from "#/entities/landing";
 import { useMessages } from "#/shared/lib/i18n";
 export function ProblemSection() {
 	const m = useMessages();
 	return (
 		<section id="problem" className="mt-10 sm:mt-14">
 			<SectionHeader
 				eyebrow={m.problem_eyebrow()}
 				title={m.problem_title()}
 				subtitle={m.problem_subtitle()}
 				align="left"
 				className="max-w-3xl"
 			/>
 			<div className="mt-5 grid gap-4 md:grid-cols-3">
 				{getProblems(m).map((item, index) => (
 					<Card
 						key={item.title}
 						title={item.title}
 						description={item.text}
 						padding="lg"
 						className="feature-card rise-in rounded-2xl"
 						style={{ animationDelay: `${index * 90 + 110}ms` }}
 					/>
 				))}
 			</div>
 		</section>
 	);
 }
--- a/src/widgets/landing/product-preview-section/ui/product-preview-section.tsx
+++ b/src/widgets/landing/product-preview-section/ui/product-preview-section.tsx
@@ -0,0 +1,96 @@
 import { Badge, Card, Heading, SectionHeader, Text } from "denjs-ui";
 import { useMessages } from "#/shared/lib/i18n";
 export function ProductPreviewSection() {
 	const m = useMessages();
 	return (
 		<section id="preview" className="mt-10 sm:mt-14">
 			<SectionHeader
 				eyebrow={m.preview_eyebrow()}
 				title={m.preview_title()}
 				subtitle={m.preview_subtitle()}
 				align="left"
 				className="max-w-3xl"
 			/>
 			<div className="mt-5 grid gap-4 lg:grid-cols-[1.1fr_1fr]">
 				<Card padding="lg" className="island-shell rounded-2xl">
 					<Text as="p" size="sm" tone="muted" className="island-kicker mb-2">
 						{m.preview_profile_title()}
 					</Text>
 					<Heading
 						level={3}
 						className="text-2xl font-semibold text-[var(--sea-ink)] sm:text-3xl"
 					>
 						monie.app/anna-nails
 					</Heading>
 					<Text
 						tone="muted"
 						className="mt-3 text-sm leading-6 text-[var(--sea-ink-soft)]"
 					>
 						{m.preview_profile_description()}
 					</Text>
 					<div className="mt-4 grid gap-3 sm:grid-cols-2">
 						<Card
 							padding="sm"
 							title={m.preview_service_1_title()}
 							description={m.preview_service_1_description()}
 							className="rounded-xl border border-[var(--line)] bg-white/76"
 						/>
 						<Card
 							padding="sm"
 							title={m.preview_service_2_title()}
 							description={m.preview_service_2_description()}
 							className="rounded-xl border border-[var(--line)] bg-white/76"
 						/>
 					</div>
 				</Card>
 				<Card padding="lg" className="island-shell rounded-2xl">
 					<Text as="p" size="sm" tone="muted" className="island-kicker mb-2">
 						{m.preview_schedule_title()}
 					</Text>
 					<div className="space-y-3">
 						<Card
 							padding="sm"
 							title={m.preview_appt_1_title()}
 							description={m.preview_appt_1_description()}
 							className="rounded-xl border border-[var(--line)] bg-white/80"
 							footer={
 								<Badge
 									color="emerald"
 									rounded="full"
 									className="w-fit px-2 py-0.5 text-[11px]"
 								>
 									{m.preview_appt_1_badge()}
 								</Badge>
 							}
 						/>
 						<Card
 							padding="sm"
 							title={m.preview_appt_2_title()}
 							description={m.preview_appt_2_description()}
 							className="rounded-xl border border-[var(--line)] bg-white/80"
 							footer={
 								<Badge
 									color="sky"
 									rounded="full"
 									className="w-fit px-2 py-0.5 text-[11px]"
 								>
 									{m.preview_appt_2_badge()}
 								</Badge>
 							}
 						/>
 						<Card
 							padding="sm"
 							title={m.preview_income_title()}
 							description={m.preview_income_description()}
 							className="rounded-xl border border-[var(--line)] bg-white/80"
 						/>
 					</div>
 				</Card>
 			</div>
 		</section>
 	);
 }
--- a/src/widgets/landing/solution-section/ui/solution-section.tsx
+++ b/src/widgets/landing/solution-section/ui/solution-section.tsx
@@ -0,0 +1,32 @@
 import { Card, SectionHeader } from "denjs-ui";
 import { getSolutionItems } from "#/entities/landing";
 import { useMessages } from "#/shared/lib/i18n";
 export function SolutionSection() {
 	const m = useMessages();
 	return (
 		<section
 			id="solution"
 			className="mt-10 grid gap-6 lg:grid-cols-[1.05fr_1fr] sm:mt-14"
 		>
 			<Card padding="lg" className="island-shell rounded-2xl">
 				<SectionHeader
 					eyebrow={m.solution_eyebrow()}
 					title={m.solution_title()}
 					subtitle={m.solution_subtitle()}
 					align="left"
 					className="max-w-2xl"
 				/>
 			</Card>
 			<Card padding="lg" className="island-shell rounded-2xl">
 				<ul className="m-0 space-y-3 pl-5 text-sm leading-6 text-[var(--sea-ink-soft)]">
 					{getSolutionItems(m).map((item) => (
 						<li key={item}>{item}</li>
 					))}
 				</ul>
 			</Card>
 		</section>
 	);
 }
--- a/src/widgets/landing/trust-section/ui/trust-section.tsx
+++ b/src/widgets/landing/trust-section/ui/trust-section.tsx
@@ -0,0 +1,31 @@
 import { Card, SectionHeader } from "denjs-ui";
 import { getTrustItems } from "#/entities/landing";
 import { useMessages } from "#/shared/lib/i18n";
 export function TrustSection() {
 	const m = useMessages();
 	return (
 		<section id="trust" className="mt-10 sm:mt-14">
 			<SectionHeader
 				eyebrow={m.trust_eyebrow()}
 				title={m.trust_title()}
 				align="left"
 				className="max-w-3xl"
 			/>
 			<div className="mt-5 grid gap-4 md:grid-cols-3">
 				{getTrustItems(m).map((item, index) => (
 					<Card
 						key={item.title}
 						title={item.title}
 						description={item.text}
 						padding="lg"
 						className="feature-card rise-in rounded-2xl"
 						style={{ animationDelay: `${index * 90 + 100}ms` }}
 					/>
 				))}
 			</div>
 		</section>
 	);
 }
--- a/src/widgets/layout/index.ts
+++ b/src/widgets/layout/index.ts
@@ -0,0 +1,2 @@
 export { Footer } from "./ui/footer";
 export { Header } from "./ui/header";
--- a/src/widgets/layout/ui/footer.tsx
+++ b/src/widgets/layout/ui/footer.tsx
@@ -0,0 +1,105 @@
 import { Link as RouterLink } from "@tanstack/react-router";
 import { Card, Divider, Link, Text } from "denjs-ui";
 import { useMessages } from "#/shared/lib/i18n";
 export function Footer() {
 	const m = useMessages();
 	const year = new Date().getFullYear();
 	return (
 		<footer className="site-footer mt-16 px-4 pb-12 pt-10 text-[var(--sea-ink-soft)]">
 			<div className="page-wrap">
 				<Card
 					padding="lg"
 					className="island-shell rounded-[1.8rem] border-[var(--line)] bg-[linear-gradient(165deg,var(--surface-strong),var(--glass-surface))]"
 				>
 					<div className="grid gap-6 md:grid-cols-[1.1fr_1fr] md:items-end">
 						<div>
 							<Text
 								as="p"
 								weight="semibold"
 								className="m-0 text-sm text-[var(--sea-ink)]"
 							>
 								Monie
 							</Text>
 							<Text
 								as="p"
 								tone="muted"
 								className="m-0 mt-2 max-w-md text-sm leading-6 text-[var(--sea-ink-soft)]"
 							>
 								{m.footer_description()}
 							</Text>
 						</div>
 						<nav className="flex flex-wrap justify-start gap-4 text-sm md:justify-end">
 							<Link
 								href="/#benefits"
 								tone="muted"
 								underline="hover"
 								className="text-sm font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
 							>
 								{m.footer_nav_benefits()}
 							</Link>
 							<Link
 								href="/#faq"
 								tone="muted"
 								underline="hover"
 								className="text-sm font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
 							>
 								{m.footer_nav_faq()}
 							</Link>
 							<Link
 								href="mailto:hello@monie.app"
 								external
 								tone="muted"
 								underline="hover"
 								className="text-sm font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
 							>
 								hello@monie.app
 							</Link>
 						</nav>
 					</div>
 					<Divider className="my-6" tone="muted" />
 					<div className="flex flex-wrap items-center justify-between gap-3 text-xs">
 						<Text
 							as="p"
 							size="sm"
 							tone="muted"
 							className="m-0 text-xs text-[var(--sea-ink-soft)]"
 						>
 							&copy; {year} Monie. {m.footer_rights()}
 						</Text>
 						<div className="flex gap-4">
 							<RouterLink
 								to="/about"
 								className="text-xs font-medium text-[var(--sea-ink-soft)] no-underline transition hover:text-[var(--sea-ink)]"
 							>
 								{m.footer_about()}
 							</RouterLink>
 							<Link
 								href="/#demo"
 								tone="muted"
 								underline="hover"
 								className="text-xs font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
 							>
 								{m.footer_demo()}
 							</Link>
 							<Link
 								href="mailto:legal@monie.app"
 								external
 								tone="muted"
 								underline="hover"
 								className="text-xs font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
 							>
 								legal@monie.app
 							</Link>
 						</div>
 					</div>
 				</Card>
 			</div>
 		</footer>
 	);
 }
--- a/src/widgets/layout/ui/header.tsx
+++ b/src/widgets/layout/ui/header.tsx
@@ -0,0 +1,85 @@
 import { Header as DenjsHeader } from "denjs-ui";
 import {
 	AlertCircle,
 	CircleHelp,
 	Lightbulb,
 	Mail,
 	PlayCircle,
 	WandSparkles,
 } from "lucide-react";
 import { LanguageSwitcher } from "#/features/change-language";
 import { ThemeToggle } from "#/features/theme-toggle/ThemeToggle";
 import { useMessages } from "#/shared/lib/i18n";
 import { LowerLeftLogo } from "#/shared/ui/lower-left-logo";
 export function Header() {
 	const m = useMessages();
 	return (
 		<DenjsHeader
 			brand={
 				<div className="flex items-center gap-3">
 					<a
 						href="/"
 						className="inline-flex no-underline"
 						aria-label="Monie home"
 					>
 						<LowerLeftLogo
 							aria-label="Monie"
 							className="h-8 w-auto max-w-40 select-none text-foreground transition-colors"
 						/>
 					</a>
 					<div className="hidden lg:flex items-center gap-2">
 						<LanguageSwitcher />
 						<ThemeToggle />
 					</div>
 				</div>
 			}
 			productLabel={m.header_nav_solution()}
 			products={[
 				{
 					name: m.header_nav_problem(),
 					href: "/#problem",
 					icon: AlertCircle,
 				},
 				{
 					name: m.header_nav_solution(),
 					href: "/#solution",
 					icon: Lightbulb,
 				},
 				{
 					name: m.header_nav_how(),
 					href: "/#how",
 					icon: WandSparkles,
 				},
 				{
 					name: m.header_nav_faq(),
 					href: "/#faq",
 					icon: CircleHelp,
 				},
 			]}
 			callsToAction={[
 				{
 					name: m.header_create_page(),
 					href: "/#demo",
 					icon: PlayCircle,
 				},
 				{
 					name: m.header_email_aria(),
 					href: "mailto:hello@monie.app",
 					icon: Mail,
 				},
 			]}
 			links={[
 				{
 					name: m.header_about(),
 					href: "/about",
 				},
 			]}
 			loginLink={{
 				name: m.header_create_page(),
 				href: "/#demo",
 			}}
 		/>
 	);
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,29 @@
 {
  "include": ["**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "target": "ES2022",
    "jsx": "react-jsx",
    "module": "ESNext",
    "baseUrl": ".",
    "paths": {
      "#/*": ["./src/*"],
      "@/*": ["./src/*"]
    },
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "types": ["vite/client"],
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,
    /* Linting */
    "skipLibCheck": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  }
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,30 @@
 import { paraglideVitePlugin } from "@inlang/paraglide-js";
 import tailwindcss from "@tailwindcss/vite";
 import { devtools } from "@tanstack/devtools-vite";
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import viteReact from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 const config = defineConfig({
 	plugins: [
 		devtools(),
 		tsconfigPaths({ projects: ["./tsconfig.json"] }),
 		paraglideVitePlugin({
 			project: "./project.inlang",
 			outdir: "./src/paraglide",
 			strategy: ["localStorage", "preferredLanguage", "baseLocale"],
 			localStorageKey: "monie.locale",
 			emitTsDeclarations: true,
 		}),
 		tailwindcss(),
 		tanstackStart(),
 		viteReact({
 			babel: {
 				plugins: ["babel-plugin-react-compiler"],
 			},
 		}),
 	],
 });
 export default config;
		`@@ -0,0 +1,2 @@`
							`export { LocaleProvider } from "#/shared/lib/i18n";`
							`export { PostHogProvider } from "./posthog-provider";`
		`@@ -0,0 +1 @@`
							`export { LanguageSwitcher } from "./ui/language-switcher";`
		`@@ -0,0 +1 @@`
							`export { RequestDemoForm } from "./ui/request-demo-form";`
		`@@ -0,0 +1 @@`
							`export { AboutPage } from "./ui/about-page";`
		`@@ -0,0 +1,2 @@`
							`export { Footer } from "./ui/footer";`
							`export { Header } from "./ui/header";`