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

# Creator Media Kit Page

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

## Brief
Build a polished one-page media kit for [BRAND], an independent creator working in [CREATOR_NICHE]. Write for [AUDIENCE], use [MEDIA_KIT_TAGLINE] as the hero message, and set the creator in [LOCATION]. The page must combine a personal introduction, sample audience analytics, content-channel fit, fictional partnership cases, clear sample rates, and a client-only sponsorship inquiry draft.

- Audience: Independent creators and freelancers who need to present their work to sponsors, plus the marketers, founders, and small-brand teams evaluating a potential partnership.
- Goal: Help a prospective sponsor understand the creator's audience, see the available content formats and collaboration evidence, compare packages, and turn their project details into a copyable inquiry without implying that anything was transmitted.
- Tone: Warm, assured, specific, and editorial; commercially useful without sounding corporate, and transparent about every illustrative statistic, outcome, price, and local-only interaction.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: React + ReactDOM (MIT), Tailwind CSS (MIT), lucide-react (ISC)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Configure vite.config.ts with base './' and build.sourcemap false for a single index.html entry and a self-contained static build.
  - Extend the Tailwind theme with the exact Design colors and font families; put chart transitions, reveal keyframes, focus-visible rings, disclosure states, and reduced-motion overrides in src/index.css.
  - Keep every headline, paragraph, sample metric, chart datum, channel, case study, package, form label, image path, alt text, and link in src/content.ts, keyed by section. The supplied copy is for the default variable values; whenever values change, coherently rewrite every dependent proper noun, statistic context, campaign, package description, and image alt text and remove all default-only references.
  - Build all charts with local React components and inline SVG; use no charting package. Give each chart visible labels and values, a concise screen-reader summary, and keyboard-focusable data points when tooltips are available.
  - Self-host Newsreader, Inter, and IBM Plex Mono by importing the specified Fontsource packages in src/main.tsx; never use a font CDN.
  - Create an original four-petal spark favicon in SVG from the Design colors and set only a plain document title containing [BRAND] and 'Media Kit'; do not add SEO metadata beyond that.

## Variables
- [BRAND] — Creator name or public identity (default: "Nora Vale"). An invented creator identity used in the wordmark, biography, footer, document title, and inquiry copy.
- [CREATOR_NICHE] — Creator subject and content niche (default: "small-space gardening and mindful city living"). A concise niche phrase that drives channel descriptions, audience interests, and campaign examples.
- [AUDIENCE] — Primary content audience (default: "urban renters, first-time gardeners, and slow-living enthusiasts"). The community the creator serves; rewrite audience labels and partnership fit when this changes.
- [LOCATION] — Creator home base (default: "Portland, Oregon"). A short city-and-region label, not a street address.
- [MEDIA_KIT_TAGLINE] — Media kit hero tagline (default: "Make room for a greener everyday."). An original short line expressing the creator's point of view.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/creator-media-kit-page 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
- Canvas `#F3F0E8` — Primary warm page background and generous negative space
- Paper `#FFFCF6` — Chart, form, rate-card, and case-study surfaces
- Ink `#1E241F` — Primary text, dark buttons, footer, and strong chart strokes
- Muted Ink `#65675F` — Secondary copy and metadata at readable contrast
- Persimmon `#E86A47` — Primary graphic accent, chart highlights, selection marks, and dark-text button fills
- Soft Persimmon `#F4C9B9` — Secondary chart areas, tags, and quiet highlighted surfaces
- Moss `#68775E` — Secondary data series, botanical details, and muted decorative strokes

### Typography
- Display headlines, campaign titles, and large pull quotes: Newsreader Variable (OFL), weights 400/500/600
- Body copy, navigation, buttons, and form controls: Inter Variable (OFL), weights 400/500/600/700
- Statistics, chart labels, package prices, and eyebrows: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use a 4px base unit, a maximum content width of 1320px, 20px mobile and 48px desktop gutters, and a 12-column desktop grid with 24px gaps. Section padding is 72px mobile and 112px desktop, with compact 32px stat-band spacing. Card padding is 24–32px. Keep reading copy to 62 characters per line and never let large metrics force horizontal overflow.
- Radius: Use 2px on small labels, 10px on buttons and inputs, 20px on charts and case cards, and 28px on the hero photograph and large feature panels. Use 999px only for compact filter-like tags. Borders are 1px Ink at 14% opacity; shadows are limited to a subtle 0 12px 36px Ink at 7% on the hero and inquiry panels.
- Motion: Reveal major sections once with IntersectionObserver: opacity 0 to 1 and translateY 18px to 0 over 450ms, with a 70ms stagger between siblings and no scroll-jacking.
- Motion: When the audience section first enters, count numeric values from zero to their final displayed values over 800ms, scale horizontal bars from the left, and draw the line chart with stroke-dashoffset; screen readers receive final values immediately.
- Motion: Buttons, campaign disclosures, chart points, and navigation links respond within 160–220ms using color, underline, arrow translation of 4px, or chevron rotation rather than bouncing.
- Motion: Selecting a rate package updates the inquiry selection and scrolls to the form only after the explicit click; the destination field receives a visible focus indicator without unexpected form submission.
- Motion: Under prefers-reduced-motion, show final numbers and complete charts immediately, remove reveals and smooth scrolling, and keep every disclosure, selection, tooltip, and form state fully functional.
- Imagery: Use exactly the two coordinated generated photographs listed in Assets: a spacious environmental working portrait as the first-screen anchor and a close crop of the same fictional creator's hands at a worktable in the collaboration section. The person is fictional, does not resemble any real individual, and is shown from behind or by hands only so no face is recognizable. Both images share a lived-in home studio, moss linen, parchment walls, persimmon ceramics, leafy green plants, soft morning window light, and restrained editorial film grain. Draw all three partnership covers locally as original SVG compositions of leaves, arcs, grids, circles, and abstract packaging shapes in Canvas, Persimmon, Soft Persimmon, Moss, and Ink; the invented partner name is the only text. Do not add any other photographs, people, client artwork, external logos, or recognizable product designs.

## Pages & Sections
### Creator media kit and sponsorship inquiry (`index.html`)
1. **Shared header and footer** — The header contains the original four-petal spark, [BRAND], text links Audience (#audience), Partnerships (#partnerships), and Rates (#rates), plus a dark 'Start a partnership' button linking to #inquiry. The mobile Menu button opens an accessible disclosure with the same anchor links and closes after selection or Escape. The footer repeats [BRAND] and [MEDIA_KIT_TAGLINE], a line reading 'Independent creator · [LOCATION]', the same anchor navigation, and the optional [CREDIT] link.
   Layout: Sticky top header on Canvas at 92% opacity with backdrop blur and a fine bottom rule, 72px desktop and 64px mobile. Desktop navigation sits right; mobile navigation expands beneath the header without covering the page. Footer is an Ink band with Canvas text, a two-column desktop layout, and stacked mobile content.
   Motion: Anchor links underline from left on hover. The mobile disclosure fades and moves down 6px over 180ms; no animated header resizing or scroll-jacking.
2. **Creator introduction hero** — Eyebrow: 'CREATOR MEDIA KIT · [LOCATION]'. H1: '[MEDIA_KIT_TAGLINE]'. Supporting copy: 'I make [CREATOR_NICHE] content for [AUDIENCE]—and build thoughtful partnerships that feel native to the story.' Primary CTA 'Plan a partnership' links to #inquiry; secondary CTA 'Explore the audience' links to #audience. Add a small mono note: 'Independent creator · Video, short-form & newsletters'. Use hero-creator.webp with its specified alt text. A compact floating caption on the image reads 'Stories made at home, shared widely.'
   Layout: At desktop, the hero is a 12-column composition with copy in columns 1–6 and the photograph in columns 7–12. The H1 is 72–84px with 0.95 line height, the supporting copy is at most 54 characters per line, and CTAs sit in one row. The photograph uses a 4:3 crop and occupies at least 44% of the hero width; its caption sits inside the lower-left edge. At mobile, stack eyebrow, H1 at 48px, copy, CTAs, then the full photograph, with the image beginning within the first 844px and no cropped headline or horizontal overflow.
   Motion: Hero copy and photograph use the standard reveal once. The primary arrow translates 4px on hover; the photograph remains still with no parallax or autoplay.
3. **Illustrative reach snapshot** — Place a visible label above the figures: 'ILLUSTRATIVE AUDIENCE SNAPSHOT · SAMPLE DATA'. Show four figures: '182K' Combined channel community, '1.2M' Average monthly content views, '4.8%' Average engagement, and '63%' Audience who saves or shares. Supporting note: 'A realistic example profile for layout demonstration; replace with verified creator figures before publishing.'
   Layout: A full-width Ink band divided into four equal columns with thin vertical Canvas/20 rules. Numbers use IBM Plex Mono at 36–44px, with short Canvas labels below. At 390px use a two-by-two grid with no tiny values or clipped labels; the sample-data note spans the full band beneath.
   Motion: Count each value to its final number when the band enters view, respecting reduced motion. Do not loop the count-up or animate between fake live values.
4. **Audience analytics** — Anchor id='audience'. Eyebrow: 'WHO IS LISTENING'. H2: 'A community that grows together.' Intro: 'Practical ideas bring people in; a shared pace keeps them coming back. Every figure below is sample data.' Build three coordinated charts. Age distribution horizontal bars: 18–24 = 21%, 25–34 = 46%, 35–44 = 24%, 45+ = 9%. Content views across six recent publishing periods P1–P6: 0.72M, 0.81M, 0.88M, 0.96M, 1.08M, 1.20M, rendered as a line and soft area chart with a dot and exact value tooltip on every point. Audience interests as three stacked horizontal segments with a legend: Practical how-tos 44%, Small-space inspiration 31%, Sustainable routines 25%. Include a concise takeaway beside the charts: 'The core audience is 25–34, with the strongest response to useful, saveable tutorials.'
   Layout: Section heading spans columns 1–6 and intro spans columns 8–12. Below, the age chart occupies a Paper panel in columns 1–5, while the larger views chart spans columns 6–12. The interest bar and takeaway sit in one full-width Paper strip below, with the bar taking 8 columns and takeaway 4. On mobile, stack all panels in reading order; every axis label, percentage, and tooltip remains inside its panel and charts have a minimum 220px height.
   Motion: Use the chart entrance animations from Design. Hover or keyboard focus on a bar or point reveals its exact value in a non-layout-shifting tooltip; no automatic carousel or looping motion.
5. **Channels and content formats** — Eyebrow: 'WHERE THE STORY LIVES'. H2: 'One voice, three useful formats.' Intro: 'Each channel has a distinct job, so a partnership can feel considered rather than repeated.' Show three channel cards with generic Lucide icons and sample metrics: Long-form video — '96K community · Weekly 8–12 minute videos' — best for 'Detailed tutorials, integrations, and searchable evergreen stories.'; Short-form video — '68K community · Three posts each week' — best for 'Quick transformations, product rituals, and campaign teasers.'; Weekly newsletter — '18K readers · 46% sample open rate' — best for 'Personal notes, curated resources, and direct response.' Add a small footer to the grid: 'Channel figures are illustrative sample data.'
   Layout: Three equal Paper cards in a 12-column row, each with a 48px icon tile, channel title, large mono metric, cadence, divider, and 'Best for' copy. Differentiate the cards with a small Persimmon, Moss, or Ink top rule rather than unrelated colors. Mobile stacks the cards at full width with 16px gaps.
   Motion: Cards reveal with the standard stagger. Icon arrows and card borders respond subtly on hover; no logo marquees or floating animation.
6. **Selected partnership cases** — Anchor id='partnerships'. Eyebrow: 'SELECTED PARTNERSHIPS · INVENTED EXAMPLES'. H2: 'Useful stories, measurable by design.' Intro: 'Three fictional campaigns show how a brief becomes audience-first content. All outcomes are illustrative sample data.' Case 1: Fern & Fold, 'The Balcony Growing Plan', deliverable 'Three-part container garden video series', outcome '412K sample views · 5.6% sample engagement', campaign note 'A seasonal plan moved from bare railing to first harvest, with one practical product step in each chapter.' Case 2: Still Sunday, 'A Slower Morning Ritual', deliverable 'Four-week newsletter residency and one long-form integration', outcome '48% sample open rate · 2.8K sample clicks', campaign note 'A recurring Sunday format paired a quiet personal ritual with a concise brewing guide.' Case 3: Patio & Pollen, 'Six Weeks to Herbs', deliverable 'Launch diary across long-form, short-form, and newsletter', outcome '7.1K sample saves · 3.4% sample CTR', campaign note 'A progress journal made the product part of an honest learning curve rather than a one-off reveal.' Each card has an original code-drawn SVG cover, invented partner name, project title, deliverable, outcome, and a 'Read campaign note' disclosure.
   Layout: Three equal vertical cards with 16:10 SVG covers, 24px padding, and aligned outcome rows. Campaign notes expand inline below the deliverable without a modal or changing other cards. At mobile, stack cards and preserve the complete cover ratio and readable 16px body copy.
   Motion: Reveal cards with the standard stagger. Disclosure chevrons rotate 90 degrees and note content expands over 200ms; reduced motion makes expansion immediate.
7. **Creator approach and collaboration process** — Use studio-hands.webp with its specified alt text. Eyebrow: 'HOW WE WILL WORK'. H2: 'A partner, not a placement.' Bio: 'I am [BRAND], a creator focused on [CREATOR_NICHE]. From my [LOCATION] studio, I turn small experiments into clear, useful stories for [AUDIENCE].' Process steps: 01 Align — 'We agree on the audience problem, deliverables, usage, and what success should mean.'; 02 Make — 'I share a concept, create in my own voice, and include one structured revision.'; 03 Review — 'You receive the agreed files and a simple results summary using verified campaign data.'
   Layout: A large Paper panel with the 16:9 photograph across columns 1–7 and the bio and three numbered process rows in columns 8–12. The process rows use fine dividers rather than separate floating cards. At mobile, stack the photograph, bio, then steps; never crop hands out of the image.
   Motion: Single standard reveal for the photograph and process rows. No parallax, video treatment, or fake play button.
8. **Sample rate card** — Anchor id='rates'. Eyebrow: 'SAMPLE PARTNERSHIP RATES'. H2: 'Clear ways to work together.' Intro: 'Straightforward starting points for a fictional creator, with room to shape the right scope.' Package 1: Story Integration — '$1,200' — 'One 60–90 second integration in a long-form video', 'One concept revision', '30-day organic usage', button 'Select Story Integration'. Package 2: Creator Series — '$2,800' — 'Three connected short-form videos', 'One long-form integration', '30-day organic usage', button 'Select Creator Series'; mark this package 'MOST VERSATILE'. Package 3: Cross-Channel Campaign — '$4,600' — 'One dedicated long-form video', 'Three short-form videos and one newsletter feature', '60-day organic usage', button 'Select Cross-Channel Campaign'. Footnote: 'Sample rates in USD. Final scope, usage, and exclusivity are confirmed together.' Each selection sets the matching inquiry-form package and moves focus to that field.
   Layout: Three equal cards aligned at the top, with package name, large mono price, three checkmarked inclusions, and a full-width selection button. The middle card uses Ink with Canvas text and a Persimmon badge; the other cards use Paper. Mobile stacks the cards in the same order, with no horizontal price table or clipped package names.
   Motion: Standard staggered reveal. Selection fills the button and shows a Check icon before the deliberate scroll to #inquiry; no pricing toggles or changing prices.
9. **Sponsorship inquiry draft** — Anchor id='inquiry'. Eyebrow: 'START A CONVERSATION'. H2: 'Tell me what you are planning.' Intro: 'Shape the idea, the audience fit, and the practical scope. This demo creates a local brief you can copy; it does not send your details anywhere.' Build a validated form with visible labels for Your name, Work email, Company or brand, Partnership package (a select containing Story Integration, Creator Series, Cross-Channel Campaign, and Custom scope), Budget range (select $1K–$3K, $3K–$5K, $5K–$10K, $10K+), and Project notes (textarea with placeholder 'What are you making, who is it for, and what would a useful partnership look like?'). Require name, valid email format, company, package, budget, and at least 30 characters of notes. Submit button: 'Create inquiry summary'. On valid submission, replace only the form area with 'Your inquiry draft is ready', a readable summary of the entered values, and explicit text 'Nothing has been sent. Copy this brief to start the conversation.' Provide a working 'Copy inquiry' button using the clipboard with a fallback selection method, changing to 'Copied' for two seconds, plus 'Edit details' to return to the preserved form. Do not save personal entries to localStorage.
   Layout: An Ink section containing a Paper panel. Heading and intro occupy columns 1–4; the form occupies columns 6–12 in a two-column grid, with Project notes full width. Inputs have 48px minimum height, 10px radius, visible Ink/25 borders, and inline error text linked with aria-describedby. The summary uses the same footprint to avoid layout shift. At mobile, stack the heading and a one-column form with full-width buttons and no overflow.
   Motion: Reveal the panel once. Inline errors appear immediately after blur or attempted submission; the summary crossfades over 180ms and copy feedback remains visible for two seconds. Reduced motion makes both immediate.

## Assets
- image: Download https://media.vibefather.ai/assets/c0e27519-c367-4f98-9c1b-353d28ee3062/hero-creator.webp to public/images/hero-creator.webp. Alt: 'A fictional creator working with plants at a sunlit home-studio table.' Use as the large first-screen hero anchor. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the same credit and source URL in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/c0e27519-c367-4f98-9c1b-353d28ee3062/studio-hands.webp to public/images/studio-hands.webp. Alt: 'A fictional creator's hands arranging green cuttings beside a blank notebook.' Use in the creator approach and collaboration section. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the same credit and source URL in ASSETS.md.
- icon: Use lucide-react (ISC) only for generic interface and format icons: Menu, X, ArrowRight, Play, Clapperboard, Mail, Check, ChevronDown, Copy, and Sparkles. Render with currentColor and accessible labels; do not use social-network or partner-brand icons. Document the package and license in ASSETS.md.
- font: Install and self-host @fontsource-variable/newsreader, @fontsource-variable/inter, and @fontsource/ibm-plex-mono (400 and 500), all OFL. Import the required weights locally and list every package and license in ASSETS.md; do not use Google Fonts URLs.

## Don'ts
- Do not use real creator names, recognizable people, copied biographies, real audience figures, testimonials, or performance claims. The creator and every partner must be fictional, and all metrics, outcomes, and prices must retain visible sample-data labels.
- Do not use existing social-platform logos, partner logos, brand marks, slogans, campaign artwork, proprietary interface screenshots, or recognizable product designs. Use generic channel names, permissive Lucide icons, and the specified original SVG campaign covers.
- Do not hotlink any asset in the finished site, use placeholder-image services, or add Unsplash, Pexels, Pixabay, Google Images, CC BY-NC, or CC BY-SA material. Keep exactly the two supplied generated photographs local and preserve their credits in ASSETS.md.
- Do not add other people, portraits, faces, brand mascots, anime or game characters, signature illustrations, or external artwork. The hero and process imagery must remain the two specified generated images with no recognizable face.
- Do not load commercial fonts, fonts.googleapis.com, fonts.gstatic.com, Adobe Fonts, CDN scripts, CDN stylesheets, analytics, live audience services, social-media APIs, or any third-party API. Self-host every font, icon, image, and script.
- Do not use Aceternity UI source, Tailwind Plus or Tailwind UI source, purchased templates, packages without allowed licenses, restricted component source, or a charting library; implement the specified charts as local SVG.
- Do not add a backend, server code, API routes, database, authentication, external form submission, real email capture, or persistent storage of inquiry entries. Validation, package selection, disclosures, tooltips, and the copyable inquiry draft must work entirely in the browser and never claim that an inquiry was sent.
- Do not use bare-directory internal links or client routes requiring rewrites. This is one index.html page with file-anchor navigation only, and every CTA must reach its real section or perform its described local action.
- Do not ship source maps, source files in dist/, assets over the 20 MB total limit, console errors, horizontal page overflow, unlabeled controls, or inaccessible charts. Verify at 1440×900 and 390×844 and provide visible focus states and readable contrast.
- Do not autoplay media, scroll-jack, loop count-up animations, hide essential values behind motion, or ignore prefers-reduced-motion. All final statistics and interactions must remain available with motion disabled.
- Do not add SEO descriptions, Open Graph tags, JSON-LD, sitemaps, keyword-stuffed headings, or decorative publication dates; a plain [BRAND] media-kit title and favicon are sufficient.
- Do not leave default names, niche references, audience descriptions, campaign examples, package context, or alt text unchanged when variables change; all dependent content must be rewritten coherently from src/content.ts while the layout and design remain fixed.

---
— Prompt by VibeFather · https://vibefather.ai/t/creator-media-kit-page · 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.