ea5775da25
Next.js app showcasing WhyRating brand guidelines with interactive tabs for colors, typography, proportions, logos, voice, downloads, and AI context. Includes email templates (headers, signatures, CTAs) and presentation component. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
307 lines
10 KiB
TypeScript
307 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo } from 'react';
|
|
import { marked } from 'marked';
|
|
import { Section } from '../ui/Section';
|
|
|
|
// AI context markdown - condensed brand guidelines for AI systems
|
|
export const AI_CONTEXT_MARKDOWN = `# whyrating.com Brand Context for AI Systems
|
|
|
|
> **Purpose:** This document provides AI systems with comprehensive brand guidelines for generating content, designs, copy, and code related to whyrating.com.
|
|
|
|
---
|
|
|
|
## Brand Identity
|
|
|
|
### What whyrating.com Is
|
|
A review intelligence tool that helps local business owners understand what's really driving their Google rating — enterprise-grade insights at a small business price, no subscription required.
|
|
|
|
### Target Audience
|
|
Small and medium business owners: bakery owners, dentists, auto shop managers, local service providers. People who want actionable insights without complexity, jargon, or enterprise pricing.
|
|
|
|
### Core Positioning
|
|
|
|
| Attribute | Value |
|
|
|-----------|-------|
|
|
| Tagline | "The story behind your stars" |
|
|
| Primary CTA | "Analyze my reviews" |
|
|
| Value Proposition | "Enterprise-grade insights. Small business price." |
|
|
| Voice | Helpful expert, not salesy |
|
|
| Feel | Professional but approachable |
|
|
|
|
### The Logo Story (One Sentence)
|
|
"Your Google rating (yellow star) hides insights (dark magnifier) that reveal a path to growth (green bars)."
|
|
|
|
---
|
|
|
|
## Design System
|
|
|
|
### Key Principle
|
|
> **Logo = Distinctive.** Creates recognition and differentiation.
|
|
> **UI = Familiar.** Feels like tools users already know.
|
|
|
|
### Logo Colors (Reserved for Brand Mark Only)
|
|
|
|
| Element | HEX | RGB | Usage |
|
|
|---------|-----|-----|-------|
|
|
| Star | \`#FBBC05\` | rgb(251, 188, 5) | Google Yellow — instant recognition |
|
|
| Magnifier | \`#1E293B\` | rgb(30, 41, 59) | Dark Slate — "we see deeper" |
|
|
| Lens | \`#FEF3C7\` | rgb(254, 243, 199) | Light amber interior |
|
|
| Bar Light | \`#86EFAC\` | rgb(134, 239, 172) | Shortest growth bar |
|
|
| Bar Mid | \`#22C55E\` | rgb(34, 197, 94) | Medium growth bar |
|
|
| Bar Dark | \`#15803D\` | rgb(21, 128, 61) | Tallest growth bar |
|
|
|
|
### UI Colors (Product Interface & Marketing)
|
|
|
|
| Role | HEX | RGB | Usage |
|
|
|------|-----|-----|-------|
|
|
| Primary | \`#4285F4\` | rgb(66, 133, 244) | CTAs, links, buttons, focus states |
|
|
| Secondary | \`#1E40AF\` | rgb(30, 64, 175) | Hover states, depth |
|
|
| Accent | \`#F59E0B\` | rgb(245, 158, 11) | Highlights, \`.com\` in wordmark |
|
|
| Success | \`#34A853\` | rgb(52, 168, 83) | Success states, positive metrics |
|
|
| Error | \`#EA4335\` | rgb(234, 67, 53) | Errors, warnings |
|
|
| Dark | \`#1E293B\` | rgb(30, 41, 59) | Primary text |
|
|
| Slate | \`#64748B\` | rgb(100, 116, 139) | Secondary text |
|
|
| Light | \`#F8FAFC\` | rgb(248, 250, 252) | Page backgrounds |
|
|
| Card | \`#FFFFFF\` | rgb(255, 255, 255) | Card backgrounds |
|
|
| Dark BG | \`#1C1917\` | rgb(28, 25, 23) | Dark mode background (Stone 900) |
|
|
|
|
### Typography
|
|
|
|
| Context | Font | Weight | Size |
|
|
|---------|------|--------|------|
|
|
| Wordmark only | Nunito | 700 | Variable |
|
|
| H1 | Inter | 700 | 36px |
|
|
| H2 | Inter | 600 | 30px |
|
|
| H3 | Inter | 600 | 24px |
|
|
| H4 | Inter | 500 | 20px |
|
|
| Body | Inter | 400 | 16px |
|
|
| Small | Inter | 400 | 14px |
|
|
| Caption | Inter | 400 | 12px |
|
|
|
|
**Line Heights:** Headings 1.2-1.3, Body 1.5-1.6
|
|
|
|
**Font Loading:**
|
|
\`\`\`html
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@700&display=swap" rel="stylesheet">
|
|
\`\`\`
|
|
|
|
### Border Radius
|
|
- Brand radius: \`10px\` (professional yet approachable)
|
|
|
|
---
|
|
|
|
## Brand Voice
|
|
|
|
### Tone Principles
|
|
1. **Helpful expert** — knowledgeable but never condescending
|
|
2. **Plain language** — no jargon, no buzzwords
|
|
3. **Respectful of time** — get to the point
|
|
4. **Encouraging** — problems are fixable
|
|
|
|
### Writing Examples
|
|
|
|
#### DO ✅
|
|
|
|
| Context | Example |
|
|
|---------|---------|
|
|
| Headlines | "See exactly what's frustrating your customers" |
|
|
| Value prop | "Fix the right problems first" |
|
|
| Pricing | "Enterprise-grade insights. Small business price." |
|
|
| CTA | "Analyze my reviews" |
|
|
| Feature | "We read every review so you don't have to" |
|
|
| Support | "Questions? Just reply to this email." |
|
|
|
|
#### DON'T ❌
|
|
|
|
| Context | Bad Example | Why |
|
|
|---------|-------------|-----|
|
|
| Headlines | "Leverage AI-powered sentiment analysis" | Jargon |
|
|
| Value prop | "Unlock synergies in your feedback pipeline" | Buzzwords |
|
|
| Pricing | "🚨 LIMITED TIME: 50% OFF!" | Salesy/desperate |
|
|
| CTA | "Get started now!" | Generic, pushy |
|
|
| Feature | "Revolutionary disruptive solution" | Empty hype |
|
|
| Support | "Please submit a ticket" | Cold, corporate |
|
|
|
|
### Email Subject Lines
|
|
- ✅ "Your June review summary is ready"
|
|
- ✅ "3 things customers mentioned this week"
|
|
- ❌ "🚨 URGENT: Don't miss your analytics!"
|
|
- ❌ "You won't BELIEVE what customers said"
|
|
|
|
---
|
|
|
|
## Logo Usage Rules
|
|
|
|
### Logo Variants
|
|
1. **Icon Only** — Star + magnifier + bars, no text (favicons, app icons, watermarks)
|
|
2. **Primary (Vertical)** — Icon above, wordmark below (landing pages, marketing)
|
|
3. **Full (Vertical)** — Icon + wordmark + tagline (splash screens, presentations)
|
|
4. **Horizontal** — Icon left, wordmark right (headers, email signatures)
|
|
5. **Horizontal Full** — Icon + wordmark + tagline horizontal (documentation)
|
|
|
|
### Minimum Sizes
|
|
- **Full logo:** 120px width minimum
|
|
- **Icon only:** 32px minimum
|
|
|
|
### Logo Misuse — DO NOT:
|
|
- Change logo colors outside approved variations
|
|
- Stretch, skew, or distort the logo
|
|
- Add effects (shadows, gradients, outlines)
|
|
- Place on busy backgrounds without contrast
|
|
- Rearrange logo elements
|
|
- Use Google Blue for the magnifier (makes us look like a Google product)
|
|
|
|
---
|
|
|
|
## CSS Variables Reference
|
|
|
|
\`\`\`css
|
|
:root {
|
|
/* Brand Logo Colors */
|
|
--brand-star: #FBBC05;
|
|
--brand-magnifier: #1E293B;
|
|
--brand-lens: #FEF3C7;
|
|
--brand-bar-light: #86EFAC;
|
|
--brand-bar-mid: #22C55E;
|
|
--brand-bar-dark: #15803D;
|
|
--brand-accent: #F59E0B;
|
|
|
|
/* UI Colors */
|
|
--ui-primary: #4285F4;
|
|
--ui-primary-hover: #1E40AF;
|
|
--ui-success: #34A853;
|
|
--ui-error: #EA4335;
|
|
|
|
/* Surface Colors */
|
|
--surface-page: #F8FAFC;
|
|
--surface-card: #FFFFFF;
|
|
--surface-muted: #F1F5F9;
|
|
|
|
/* Fonts */
|
|
--font-sans: 'Inter', sans-serif;
|
|
--font-wordmark: 'Nunito', sans-serif;
|
|
|
|
/* Border radius */
|
|
--radius-brand: 10px;
|
|
}
|
|
|
|
/* Dark mode */
|
|
.dark {
|
|
--surface-page: #1C1917;
|
|
--surface-card: #292524;
|
|
--surface-muted: #44403C;
|
|
}
|
|
\`\`\`
|
|
|
|
---
|
|
|
|
## AI Generation Rules
|
|
|
|
When generating content for whyrating.com:
|
|
|
|
### Copy/Text
|
|
1. Use plain language — avoid jargon like "leverage", "synergy", "pipeline"
|
|
2. Be direct and respectful of time
|
|
3. Frame problems as fixable, tone should be encouraging
|
|
4. Never use desperate/salesy language (🚨, "URGENT", "LIMITED TIME")
|
|
5. Primary CTA is always "Analyze my reviews" or close variation
|
|
|
|
### Design/UI
|
|
1. Use \`#4285F4\` (Primary Blue) for interactive elements
|
|
2. Use \`#1E293B\` (Dark) for primary text
|
|
3. Reserve logo colors for the logo only — don't use \`#FBBC05\` or greens in UI
|
|
4. Use \`#F59E0B\` (Accent) sparingly for warmth and star-related visuals
|
|
5. Border radius should be \`10px\` for cards/buttons
|
|
6. Always support dark mode with warm Stone palette
|
|
|
|
### Code
|
|
1. Use Inter font family for UI, Nunito only for wordmark
|
|
2. Include font preconnect for performance
|
|
3. Use CSS variables for colors
|
|
4. Tailwind classes follow brand system
|
|
|
|
---
|
|
|
|
## Quick Copy Reference
|
|
|
|
| Need | Copy |
|
|
|------|------|
|
|
| Tagline | "The story behind your stars" |
|
|
| Primary CTA | "Analyze my reviews" |
|
|
| Value prop | "Enterprise-grade insights. Small business price." |
|
|
| Problem statement | "Your Google rating tells customers whether to visit — but it doesn't tell you why it's dropping." |
|
|
| Solution | "whyrating.com analyzes every review and shows you exactly what's frustrating customers, what they love, and what to fix first." |
|
|
|
|
---
|
|
|
|
*Version: 2.0 | Last updated: January 2025*
|
|
`;
|
|
|
|
export function AIContextTab() {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const htmlContent = useMemo(() => {
|
|
return marked.parse(AI_CONTEXT_MARKDOWN) as string;
|
|
}, []);
|
|
|
|
const copyToClipboard = () => {
|
|
navigator.clipboard.writeText(AI_CONTEXT_MARKDOWN).then(() => {
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
});
|
|
};
|
|
|
|
const downloadMarkdown = () => {
|
|
const blob = new Blob([AI_CONTEXT_MARKDOWN], { type: 'text/markdown' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'whyrating-ai-context.md';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Section
|
|
title="AI Context Document"
|
|
description="Use this markdown as context/system prompt for AI systems generating whyrating.com content"
|
|
>
|
|
<div className="flex flex-wrap gap-3 mb-6">
|
|
<button
|
|
onClick={downloadMarkdown}
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--ui-primary)] text-white rounded-lg text-sm font-medium hover:bg-[var(--ui-primary-hover)] transition-colors cursor-pointer"
|
|
>
|
|
↓ Download .md
|
|
</button>
|
|
<button
|
|
onClick={copyToClipboard}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors cursor-pointer ${
|
|
copied
|
|
? 'bg-green-500 text-white'
|
|
: 'bg-slate-100 dark:bg-stone-800 border border-slate-100 dark:border-stone-700 text-slate-700 dark:text-stone-300 hover:bg-slate-100 dark:hover:bg-stone-700/70'
|
|
}`}
|
|
>
|
|
{copied ? '✓ Copied!' : 'Copy to clipboard'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
|
|
<p className="text-sm text-amber-800 dark:text-amber-200">
|
|
<strong>Usage:</strong> Copy this document and include it in your AI system prompt, Claude Project Knowledge,
|
|
or as context when asking AI to generate content, code, or designs for whyrating.com.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="markdown-content bg-slate-50 dark:bg-stone-800 rounded-xl p-6 border border-slate-100 dark:border-stone-700"
|
|
dangerouslySetInnerHTML={{ __html: htmlContent }}
|
|
/>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|