monie-landing/AGENTS.md

# 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.