The live demo was built from exactly this text — nothing added.

# Freelancer Marketplace Homepage

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build an original four-page marketplace website for [BRAND], a fictional directory connecting [AUDIENCE] through [MARKET_FOCUS]. The default brand is Workkind, based in [LOCATION], with the headline [HERO_HEADLINE]. Include a polished homepage, a query-driven talent category page, individual profile views, and a four-step post-a-project experience. Every person, company, rating, review, price, and availability note is invented sample content.

- Audience: The primary audience is [AUDIENCE]. For the defaults, this means small studio founders, startup operators, and independent creative or technical specialists in and around [LOCATION]. Speak equally clearly to clients comparing help and freelancers deciding whether to join.
- Goal: Help a visitor move from a broad need to a relevant sample freelancer, understand both sides of the marketplace, and assemble a useful project brief. Search, filters, sorting, profile links, local draft persistence, brief copying, and text download must work entirely in the browser.
- Tone: Warm, capable, plain-spoken, and human. Favor specific skills and practical expectations over marketplace hype. Never imply that the fictional profiles, ratings, companies, availability, or submissions are real.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: motion (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL), @fontsource-variable/inter (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set Vite base to './' and disable source maps in the production config.
  - Configure Vite multi-page inputs for index.html, category.html, profile.html, and post-project.html; each HTML file loads the same typed React entry, which selects the page from window.location.pathname.
  - Use Tailwind for layout and state styling, with a small CSS file for tokens, keyframes, focus rings, image treatment, and reduced-motion overrides.
  - Keep all variable-derived copy, navigation labels, categories, profiles, portfolio items, FAQs, filter options, and form options in src/content.ts; derive every view from [BRAND], [MARKET_FOCUS], [AUDIENCE], [HERO_HEADLINE], and [LOCATION] rather than scattering default-only copy through components.
  - Import Fraunces Variable and Inter Variable from their Fontsource packages and declare the font families in the Tailwind theme.
  - Use URLSearchParams for search, category, profile, and preselected-freelancer state; no router package is needed.
  - Store only the project-form draft and dismissed mobile-menu state in browser memory or localStorage; include a visible Clear draft action.
  - Default profile data for Maya Reed (id maya): category Design, remoteCollaboration true, biography 'Maya turns early, tangled ideas into identity systems that small teams can actually use. Her calm workshops connect verbal direction, visual principles, and a practical first rollout.' Concept projects: 'Alder & Field identity — a warmer but still precise system for a landscape studio', 'Papercup Pantry packaging — a flexible shelf language for a fictional neighborhood provisions brand', and 'Stillwater Journal launch — an editorial identity and rollout kit for an invented independent publication'.
  - Default profile data for Theo Park (id theo): category Development, remoteCollaboration true, biography 'Theo builds approachable front ends where motion supports the content and the component system stays easy to maintain. He is at his best translating a strong visual idea into responsive, accessible product UI.' Concept projects: 'Pollen analytics dashboard — a legible responsive reporting interface for an invented research tool', 'Common Table ordering flow — an accessible menu and cart prototype for a fictional supper club', and 'Waypoint UI kit — a compact component library with interaction and usage notes'.
  - Default profile data for Inés Alvarez (id ines): categories Writing and Business Support, remoteCollaboration true, biography 'Inés helps thoughtful teams say the useful thing clearly. She combines customer interviews, message architecture, and editorial systems, then leaves writers with practical guidance rather than a static document.' Concept projects: 'Nolla Home message map — a plain-spoken positioning system for an invented modular furniture studio', 'Good Measure onboarding — a supportive email and in-product copy sequence for a fictional habits service', and 'Fieldnote editorial desk — a repeatable interview and publishing workflow for an imagined research collective'.
  - Default profile data for Owen Bennett (id owen): category Video & Motion, remoteCollaboration false, biography 'Owen creates compact motion languages for products and places, with an emphasis on timing, transitions, and stories that remain clear without sound. His process moves from frame studies to a reusable motion toolkit.' Concept projects: 'Lantern House wayfinding — a restrained animated signage study for an invented arts venue', 'Daybreak product loop — a twelve-second feature story for a fictional morning-planning app', and 'Small Planet title sequence — an editorial frame system for an imagined short documentary'.
  - Default profile data for Amara Rao (id amara): category Marketing, remoteCollaboration true, biography 'Amara plans measured launches for small, useful products. She connects audience research, channel choices, and lifecycle messages so a team can learn from the work instead of chasing every new tactic.' Concept projects: 'Mellow Workshop launch — a focused waitlist and referral plan for an invented creative class platform', 'Open Pantry lifecycle — a helpful retention sequence for a fictional recipe club', and 'Little Signal campaign — a three-channel experiment plan for an imagined family podcast'.
  - Create an original abstract brand mark in inline SVG from two interlocking rounded rectangles; pair it with the [BRAND] wordmark and do not imitate an existing logo.

## Variables
- [BRAND] — Marketplace name (default: "Workkind"). An invented, short marketplace name with no connection to a real service.
- [MARKET_FOCUS] — Talent market (default: "independent creative and technical talent"). The professional niche; rewrite categories, profiles, skills, and examples to fit.
- [AUDIENCE] — Two-sided audience (default: "small teams and independent specialists"). Describe both the people hiring and the people offering services.
- [HERO_HEADLINE] — Homepage headline (default: "Good work starts with the right people."). A concise, warm promise suited to the chosen talent market.
- [LOCATION] — Home location (default: "Portland, Oregon"). An invented marketplace home base; use it in hero support copy and footer details.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/freelancer-marketplace-homepage in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Paper `#F5F1E8` — Main page background and generous editorial negative space
- Cream `#FFFDF8` — Cards, search panel, form surfaces, and header background
- Forest Ink `#183A32` — Headlines, body emphasis, primary buttons, and dark footer
- Slate Green `#64736C` — Secondary copy, metadata, and inactive controls
- Coral `#D86F4B` — Small highlights, active chips, rating accents, and brand mark; never white text on this color
- Sage `#DDE8D5` — Selected states, informational panels, and step-progress fills
- Line `#D6DDD3` — Hairline borders, dividers, input outlines, and card boundaries

### Typography
- Display and editorial headings: Fraunces Variable (OFL), weights 500/600/700
- Body, navigation, forms, cards, and metadata: Inter Variable (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use a 4px base scale with a 1280px max-width content container and 40px desktop gutters. Desktop sections have 104px vertical padding, compact directory sections 64px, and mobile sections 64px with 20px gutters. Hero uses a 12-column grid with 64px gaps. Card interiors use 20–24px; form fields have 12px vertical and 16px horizontal padding.
- Radius: Use 18px on cards, 24px on photographic panels and major callouts, 12px on inputs and buttons, and full rounding only for chips and compact status pills. Keep shadows sparse: one soft 0 16px 50px rgba(24,58,50,0.10) elevation for the floating search panel and mobile menu.
- Motion: On initial load, fade and translate the hero copy upward by 18px over 500ms, then reveal the photograph with a 24px clip-path inset resolving over 650ms; stagger only these two groups.
- Motion: Reveal major homepage sections once as they enter the viewport with 16px upward travel and 450ms easing; never hide core copy waiting for JavaScript.
- Motion: Give category chips, profile-card arrows, and buttons 160–200ms color, border, and 2px directional transforms; filtering updates crossfade results in 180ms without layout jumps.
- Motion: Advance the project form with a 220ms horizontal fade of 12px and animate the progress fill; preserve focus by moving it to the new step heading.
- Motion: Disable smooth scrolling, reveals, parallax, and nonessential transitions under prefers-reduced-motion; all content and controls remain immediately visible.
- Imagery: Use six locally hosted, generated editorial photographs as one coherent shoot: warm cream interiors, forest-green and terracotta clothing or props, natural window light, realistic skin texture, gentle film grain, and uncluttered composition. The hero is a wide collaborative scene with environmental space, never a tight face close-up. The five freelancer images are natural working portraits of explicitly fictional adults with varied ages and ethnicities, not resembling any real individual. Use consistent 3:4 crops for profile cards and a 4:3 crop for the hero. Portfolio thumbnails are original CSS and SVG compositions, not extra photographs. Use Lucide icons only, with no third-party brand marks.

## Pages & Sections
### Marketplace home (`index.html`)
1. **Shared header and mobile navigation** — Sticky header with the original interlocking-rounded-rectangle mark, [BRAND] wordmark, Find talent linking to ./category.html, How it works linking to ./index.html#how-it-works, For freelancers linking to ./index.html#for-freelancers, and a dark Forest Ink Post a project button linking to ./post-project.html. The same header and navigation appear on every page, with the current page indicated by weight and a small coral dot rather than a large active tab.
   Layout: 72px high on desktop inside a translucent Cream bar with a bottom Line border and subtle backdrop blur. Desktop navigation sits right with 28px gaps. At 390px show the brand and a 44px Menu icon button; the expanded panel contains all four links in a Cream card below the header and closes after selection or Escape.
   Motion: Header background becomes slightly more opaque after 16px of scroll. Mobile menu fades and shifts down 8px over 180ms; no animated sticky resizing.
2. **Editorial search hero** — Small uppercase eyebrow 'INDEPENDENT TALENT, THOUGHTFULLY MATCHED'. H1 is [HERO_HEADLINE], default 'Good work starts with the right people.' Supporting copy: 'Meet [MARKET_FOCUS] for thoughtful collaborations, clear scopes, and work that feels like a good fit from the start. Browse from [LOCATION] and beyond.' Primary search asks 'What do you need help with?' with placeholder 'Try brand identity, a website, or launch copy', a category select defaulting to All categories, and a Find your freelancer button. Beneath it show six category chips: Design, Development, Writing, Marketing, Video & Motion, and Business Support. Submitting search goes to ./category.html?q=<encoded query>&category=<encoded category>; each chip goes to its corresponding category query.
   Layout: Desktop 12-column hero with copy and search spanning 7 columns and the 4:3 hero-studio.webp photograph spanning 5 columns, both vertically centered. Set the H1 at clamp(48px,5.2vw,76px) with 0.96 line height and a maximum of 10 words per line. The search form is a Cream elevated panel overlapping the photograph by 40px at its lower-left edge; category chips wrap below in two loose rows. On mobile stack copy, search, chips, then photograph; remove overlap, use a 42px H1, and make search fields full width.
   Motion: Use the specified hero copy and photograph entrance. Category chips lift 2px on hover; the hero photograph remains static.
3. **Featured freelancer gallery** — Heading 'A good fit is more than a skill match.' Intro: 'Compare craft, communication style, and the shape of a typical collaboration.' Add the visible label 'Fictional profiles · sample ratings and rates'. Maya Reed is a brand designer in Seattle at $68/hr with 4.9 from 23 sample reviews, skills Brand identity and Art direction, using freelancer-maya.webp. Theo Park is a front-end developer in Austin at $74/hr with 5.0 from 18 sample reviews, skills React and Design systems, using freelancer-theo.webp. Inés Alvarez is a content strategist in Chicago at $58/hr with 4.8 from 31 sample reviews, skills Messaging and Editorial, using freelancer-ines.webp. Owen Bennett is a motion designer in Denver at $82/hr with 4.9 from 27 sample reviews, skills Motion identity and Product film, using freelancer-owen.webp. Amara Rao is a growth marketer in Brooklyn at $64/hr with 4.9 from 21 sample reviews, skills Launches and Lifecycle, using freelancer-amara.webp. Each card links to ./profile.html?id=<id> using ids maya, theo, ines, owen, and amara. CTA below: Browse all sample profiles.
   Layout: At desktop use a 12-column asymmetric mosaic: Maya's feature card spans 6 columns and both rows with a tall portrait and two-line biography; the other four cards each span 3 columns in a 2×2 arrangement. Every card has a visible rating, location, hourly rate, two skill pills, and a small arrow. At tablet use two equal columns; at mobile use one column with 180px-high portrait crops rather than a horizontal carousel.
   Motion: Stagger card entrance by 60ms within the section. On hover, only the portrait scales to 1.025 and the arrow moves 3px; text never shifts.
4. **Two-sided how it works** — Section id how-it-works. Eyebrow 'ONE MARKETPLACE, TWO CLEAR PATHS'. Heading 'Clarity on both sides of the brief.' Client panel titled For clients has steps: 01 Share the brief — 'Tell us what you are making, where you are stuck, and what a useful outcome looks like.' 02 Compare the fit — 'Review relevant craft, working preferences, sample rates, and portfolio details side by side.' 03 Start with alignment — 'Use the brief to agree on scope, communication, and the first milestone.' Freelancer panel id for-freelancers titled For freelancers has steps: 01 Show how you work — 'Lead with a focused profile, selected work, and the problems you solve best.' 02 Choose aligned briefs — 'Look for scope, timing, and budget that match the way you want to work.' 03 Set expectations early — 'Turn a good conversation into clear deliverables and a calm first step.'
   Layout: Two large side-by-side panels on a Sage-tinted full-width band: client panel Cream, freelancer panel Forest Ink with Cream text. Each panel has three horizontal numbered steps separated by hairlines and a compact action link: Post a project to ./post-project.html or Explore sample profiles to ./category.html. Stack panels on mobile with no horizontal scrolling.
   Motion: Reveal panels together, then their steps with a restrained 50ms stagger. Do not use tabs, autoplay, or pinned scrolling.
5. **Project brief callout** — Heading 'A better first brief makes better work possible.' Copy: 'You do not need every answer. Start with the outcome, the constraints, and what you already know.' Show three compact prompts with original line icons: Outcome — 'What should be different when this is done?', Scope — 'Which deliverables matter first?', Working style — 'How often should we check in?' CTA Build your project brief links to ./post-project.html and secondary link See how profiles work goes to ./profile.html.
   Layout: A 24px-radius Coral-tinted Cream callout with left copy spanning 7 columns and three prompt cards stacked on the right 5 columns. Add an original loose hand-drawn underline in SVG below 'better first brief'. On mobile place prompts after the CTA and keep all buttons full width.
   Motion: Draw the SVG underline once when visible over 500ms. Prompt cards have no floating animation.
6. **Practical FAQ** — Heading 'Before you begin.' Four accessible accordions: How does matching work? — 'Start with a category or a search phrase, then compare each sample profile’s skills, portfolio, rate, and working notes.' What should a project brief include? — 'A useful outcome, the first deliverables, a realistic range, and any constraints your collaborator should know.' Can I browse before posting? — 'Yes. Every sample category and profile is available without an account.' Is this a live marketplace? — 'No. This is a fictional website demonstration. Profiles, ratings, availability, and briefs are sample content; nothing is sent to a server.' Only one answer is open at a time, with the first open initially.
   Layout: Two-column section with sticky heading on the left 4 columns and accordion list on the right 8 columns. Questions are 18px semibold with Plus icons that rotate to an X-like close state; answers measure no more than 62 characters per line. On mobile remove sticky positioning.
   Motion: Accordion height and opacity animate over 200ms, with instant expansion under reduced motion.
7. **Shared footer and demo disclosure** — Footer headline 'Find the people who make the work feel possible.' Include [BRAND], 'An independent talent marketplace concept rooted in [LOCATION].', navigation to ./category.html, ./post-project.html, ./index.html#how-it-works, and ./index.html#for-freelancers, plus a plain-text sample categories list. Add the disclosure: 'Fictional marketplace demo. People, companies, ratings, reviews, and availability are invented. Project drafts stay in your browser and are never submitted.' Include the optional [CREDIT] link without making it prominent.
   Layout: Forest Ink footer with Cream text, a large Fraunces headline on the left and three compact link groups on the right. A top CTA links to ./post-project.html. Bottom disclosure spans the full width above a subtle Line divider. Mobile stacks all groups with 32px gaps and retains readable 14px minimum text.
   Motion: No looping or scroll motion in the footer; links use simple underline reveals.

### Browse talent categories (`category.html`)
1. **Category introduction and search** — Read category and q from the query string. With no category, default to Design rather than showing an empty state. Eyebrow 'BROWSE [MARKET_FOCUS]'. H1 dynamically reads '<Category> specialists with a thoughtful approach', or 'Find your freelance collaborator' for All categories. Supporting copy adapts the selected category and [AUDIENCE]. Repeat the homepage keyword search and category select, preserving current values on submit. Show 'Sample directory — all people and ratings are fictional' near the results count.
   Layout: Compact Cream hero below the shared header with a maximum 760px H1 at 52px desktop and 38px mobile. Place the search panel beneath the copy, not overlapping any photograph. Keep this introduction under 420px tall on desktop so results appear in the first screen.
   Motion: Simple 240ms fade when the selected category changes; do not replay a full hero entrance on every keystroke.
2. **Filterable profile results** — Use the same five photographed homepage profiles from src/content.ts, assigning Business Support as a second category to Inés so every homepage chip has a relevant result. Filters: category chips, minimum rating select, maximum hourly-rate range from $50 to $90, Remote collaboration checkbox, and sort options Recommended, Rate: low to high, and Rating: high to low. Result count, active-filter pills, profile order, and empty state update immediately. Empty state says 'No sample profiles match those filters yet' with a Clear filters button. Every result links to ./profile.html?id=<id>; profile.html without an id defaults to Maya.
   Layout: Desktop grid has a 3-column filter rail and 9-column results area. Filter rail is sticky below the header and grouped with labels, not hidden in a modal. Results use two equal cards per row with landscape content arrangement: portrait or artwork left, details right. Mobile provides a Filters button opening an inline collapsible panel above one-column results, plus a persistent Clear action when filters are active.
   Motion: Crossfade updated results over 180ms and announce the new count through an aria-live region. Do not animate the range slider or reorder cards with large movement.
3. **Category-specific project prompt** — Dynamic heading 'Not sure which <Category> profile fits?' Copy: 'Start with the outcome and a few constraints. The brief builder will help you organize the rest.' Button Start a project brief links to ./post-project.html?category=<current category>.
   Layout: Full-width Sage band with copy left, dark button right, and an original SVG cluster of three overlapping brief cards behind the button. Stack on mobile and avoid extra photography.
   Motion: Brief-card SVG layers separate by 4px on hover only.

### Freelancer profile detail (`profile.html`)
1. **Profile overview** — Read id from the query string and show Maya Reed when it is missing or unrecognized. Display the selected profile’s portrait where available, name, specialty, location, sample rating and review count, hourly rate, two to four skills, a concise biography, and static sample working notes such as 'Prefers a written brief' and 'Weekly check-in'. Button Start a project with <first name> links to ./post-project.html?freelancer=<id>. Secondary Back to talent links to ./category.html. Add 'Fictional profile · sample details' visibly near the name.
   Layout: Breadcrumb above a 12-column overview. Left 5 columns contain a 3:4 portrait with 24px radius; right 7 columns contain name at 56px, role, biography, rate, skills, and CTA row. Additional profiles without photos use a large original SVG composition based on their specialty. Mobile stacks image, identity, actions, then details, with H1 at 40px.
   Motion: Image and text use one restrained shared entrance; no follower count, animated rating, or online indicator.
2. **Selected work and collaboration notes** — Show three invented portfolio studies relevant to the selected person, each with a specific project title, one-sentence challenge, contribution, and deliverable list; label all as 'Concept work'. Use original CSS/SVG artwork: identity grids for design, interface wireframes for development, editorial layouts for writing, campaign diagrams for marketing, and frame sequences for motion. Alongside, a collaboration panel lists Typical first milestone, Best-fit projects, Preferred communication, and Sample capacity using qualitative wording such as 'One focused project at a time', never live availability.
   Layout: Three portfolio cards in a row with 4:3 art and text below, followed by a two-column biography and collaboration panel. On mobile portfolio cards stack; SVG text is illustrative only and must not contain readable brand names.
   Motion: Portfolio art reveals with a clipped 12px rise on section entry. No lightbox is needed.
3. **Sample feedback and next step** — Two clearly labeled Sample feedback cards written for the selected profile, with fictional client first names and invented company names such as 'Elliot at Alder & Field' and 'Priya at Small Hours Studio'. Do not use real company names or verifiable claims. End with heading 'Have a project that fits <first name>’s work?' and CTA Build a brief linking to the preselected project form.
   Layout: Two equal quote cards above a centered Cream CTA panel with 24px radius. Use oversized decorative quotation marks in Coral, not photographs of clients. Mobile stacks quotes and keeps the CTA visible without sticky positioning.
   Motion: Quote cards fade in together; CTA button has the standard hover shift only.

### Post a project brief (`post-project.html`)
1. **Brief builder introduction** — Eyebrow 'A LOCAL, FOUR-STEP BRIEF BUILDER'. H1 'Start with what you know.' Copy: 'Shape the essentials now. You can refine the details with your freelancer later.' Disclosure before the form: 'Demo only: this brief is saved in your browser, never sent to [BRAND] or any freelancer.' Read freelancer and category query parameters and preselect the matching sample person or category when valid.
   Layout: Narrow centered heading above a 12-column workspace: form occupies 8 columns and a persistent brief summary occupies 4 columns. On mobile the summary becomes a collapsed details panel above the form. Keep the primary Next step button in normal document flow, never as a screen-covering sticky bar.
   Motion: Intro fades once. The summary updates without motion.
2. **Four validated form steps** — Progress labels are 01 Basics, 02 Scope, 03 Contact, 04 Review. Basics requires Project title, Category, and a Project outcome textarea of at least 40 characters; show helper text 'What should be different when this work is complete?' Scope requires deliverable checkboxes, a budget radio group ($1k–$3k, $3k–$6k, $6k–$10k, Not sure yet), timeline select (2–4 weeks, 1–2 months, 3+ months, Flexible), and working-style select (One weekly call, Async updates, A mix of both). Contact requires Name and a syntactically valid Email plus optional Company and Notes; explain that contact details are used only to label the downloadable demo brief. Review renders every answer, the selected sample freelancer if any, and a checked acknowledgment: 'I understand this is a local demo and nothing will be submitted.' Validate on Next step with inline messages and focus the first invalid field. Back preserves values. Save draft writes to localStorage; Clear draft removes it after an inline confirmation.
   Layout: Cream form card with a Sage progress track and four numbered labels. Each step has a 36px Fraunces heading, clear field labels above inputs, 16px vertical field rhythm, and Back / Next actions at the bottom. Review uses definition-list rows with Edit links returning to the relevant step. At mobile, progress labels shorten to numbers with the current label announced visibly above the form.
   Motion: Apply the specified 220ms horizontal step fade and progress fill. Focus moves to the new step heading, and validation errors appear without shaking.
3. **Local confirmation and export** — After validation and acknowledgment, replace the form with a success panel headed 'Your project brief is ready.' Copy: 'Nothing was sent. Your demo brief is saved only in this browser.' Show a compact summary and actions Copy brief, Download .txt, Edit brief, and Start another. Copy writes a plain-text version to the clipboard with fallback selection; Download creates a local Blob named from a generic project-brief slug; Start another clears the saved draft after confirmation. Do not show a fake project ID, submission timestamp, response-time promise, or success message claiming a freelancer was contacted.
   Layout: Centered Cream confirmation card with an original SVG check made from two interlocking rounded shapes, summary below, and two rows of buttons. Keep the local-only disclosure next to the export actions. Mobile buttons are full width.
   Motion: One 300ms check-stroke animation and content fade; no confetti or looping celebration.

## Assets
- image: Hero collaboration image: https://media.vibefather.ai/assets/3f5d2967-68c6-4170-b1c4-c8d4e3b43075/hero-studio.webp downloaded to public/images/hero-studio.webp. Default alt: 'Four freelance collaborators exchanging ideas around a sunlit studio table'. Used in the homepage hero. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the same credit in ASSETS.md.
- image: Maya profile image: https://media.vibefather.ai/assets/3f5d2967-68c6-4170-b1c4-c8d4e3b43075/freelancer-maya.webp downloaded to public/images/freelancer-maya.webp. Default alt: 'Brand designer reviewing sketches at a studio desk'. Used for Maya Reed on home, category, and profile pages. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the same credit in ASSETS.md.
- image: Theo profile image: https://media.vibefather.ai/assets/3f5d2967-68c6-4170-b1c4-c8d4e3b43075/freelancer-theo.webp downloaded to public/images/freelancer-theo.webp. Default alt: 'Front-end developer working beside a bright studio window'. Used for Theo Park on home, category, and profile pages. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the same credit in ASSETS.md.
- image: Inés profile image: https://media.vibefather.ai/assets/3f5d2967-68c6-4170-b1c4-c8d4e3b43075/freelancer-ines.webp downloaded to public/images/freelancer-ines.webp. Default alt: 'Content strategist making notes at a warm paper-covered desk'. Used for Inés Alvarez on home, category, and profile pages. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the same credit in ASSETS.md.
- image: Owen profile image: https://media.vibefather.ai/assets/3f5d2967-68c6-4170-b1c4-c8d4e3b43075/freelancer-owen.webp downloaded to public/images/freelancer-owen.webp. Default alt: 'Motion designer reviewing frame studies in a quiet studio'. Used for Owen Bennett on home, category, and profile pages. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the same credit in ASSETS.md.
- image: Amara profile image: https://media.vibefather.ai/assets/3f5d2967-68c6-4170-b1c4-c8d4e3b43075/freelancer-amara.webp downloaded to public/images/freelancer-amara.webp. Default alt: 'Growth marketer planning a campaign beside a bright worktable'. Used for Amara Rao on home, category, and profile pages. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the same credit in ASSETS.md.
- icon: Use lucide-react ISC icons for Search, ArrowRight, MapPin, Star, Check, Plus, Menu, X, SlidersHorizontal, Download, Copy, and ChevronLeft. Draw the original brand mark, portfolio studies, brief cards, and confirmation mark locally in SVG/CSS. Do not use third-party logos or recognizable icon systems from an existing marketplace.
- font: Self-host Fraunces Variable and Inter Variable through @fontsource-variable/fraunces and @fontsource-variable/inter, both OFL. Import the package CSS locally and list package names and licenses in ASSETS.md; never request a font CDN.
- image: ASSETS.md must list every generated photograph with its local path, exact source URL, credit 'Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template', and use. All other artwork is original SVG/CSS and needs no external image source.

## Don'ts
- Do not use or imitate any real marketplace name, logo, slogan, interface copy, exact palette, proprietary illustration, or custom iconography.
- Do not use real people, recognizable likenesses, real freelancer biographies, real client companies, or verifiable testimonials; every profile, rating, review, price, company, and working note is fictional sample content.
- Do not claim real marketplace scale, verified earnings, guaranteed outcomes, live online status, current availability, response times, successful placement, or actual project submission.
- Do not add backend logic, API routes, databases, authentication, payments, messaging, identity verification, external form endpoints, analytics, or third-party API calls. Search, filtering, profiles, draft storage, and exports must remain client-side.
- Do not hotlink assets or load scripts, styles, icons, images, or fonts from a CDN. Download the six specified generated images into public/images and use the local paths in the site.
- Do not use Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, CC BY-NC or CC BY-SA material, commercial fonts, or any dependency outside the permitted licenses.
- Do not generate recognizable celebrity or public-figure likenesses. The generated people are fictional adults, varied in age and ethnicity, with no logos, readable screens, watermarks, or text in the photographs.
- Do not display current dates, timestamps, dynamically changing availability, fake project IDs, or a fake submitted state. Use relative timelines and clearly labeled static sample details.
- Do not leave profile.html without a valid id or category.html without a valid category in an empty or not-found state; default respectively to Maya Reed and Design while keeping the controls usable.
- Do not use bare-directory links. Every internal navigation target must be an explicit HTML file such as ./index.html, ./category.html, ./profile.html, or ./post-project.html, with hash anchors or query parameters where specified.
- Do not output absolute asset paths that break nested static hosting. Use Vite base './', relative built assets, minified production files, and no source maps; do not copy src/ into dist/ and keep dist/ under 20 MB.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemaps, or keyword-stuffed copy. A plain document title containing [BRAND] and a local original favicon are enough.
- Do not make any core content dependent on animation, hover, autoplay, or JavaScript-only visibility. Honor prefers-reduced-motion, preserve keyboard focus, and maintain zero console errors at 1440×900 and 390×844.
- Do not hide the local-only form disclosure or simulate network success. Copy and Download .txt must operate on the current brief, and Clear draft and Start another must remove the local draft as described.
- Do not hard-code default-only names or niche copy outside src/content.ts. Rewrite profiles, categories, examples, alt text, labels, and FAQ answers coherently when [BRAND], [MARKET_FOCUS], [AUDIENCE], [HERO_HEADLINE], or [LOCATION] changes.
- Do not mention VibeFather anywhere in the rendered site except the optional [CREDIT] footer link; the required generation credits belong in ASSETS.md, not visible marketplace copy.

---
— Prompt by VibeFather · https://vibefather.ai/t/freelancer-marketplace-homepage · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.