alezmad/nuc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add WhyRating Templates - brand identity system

Browse Source 
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>
This commit is contained in:
Alejandro Gutiérrez
2026-02-18 15:17:42 +01:00
parent 9a0881e852
commit ea5775da25
68 changed files with 15159 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
whyrating-templates/public/WHYMYRATING_AI_CONTEXT.md Normal file
View File

@@ -0,0 +1,285 @@
# actionkitnow.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 actionkitnow.com.com.
---
## Brand Identity
### What actionkitnow.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"
### Handling Objections
**"I don't have time for another tool"**
- ✅ "That's exactly why we built this — 5 minutes gives you what used to take hours."
- ❌ "Our platform is incredibly easy to use with minimal onboarding!"
**"I already read my reviews"**
- ✅ "You know what they said. We show you the patterns you'd miss."
- ❌ "Our AI provides deeper insights than manual review reading."
---
## 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
### Single Color Versions
Available in Dark (`#1E293B`) or White (`#FFFFFF`) for:
- Watermarks
- Single-color printing
- Embroidery
### 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)
---
## Design Rationale (For Context)
### Why Two Color Systems?
| System | Colors | Purpose |
|--------|--------|---------|
| Logo | Yellow, Dark, Custom Greens | Distinctive brand mark |
| UI | Google-inspired blues | Familiar interface |
Users spend seconds on the logo but hours in the UI. Logo = memorable. UI = familiar.
### Why Dark Magnifier (Not Google Blue)?
- Google Blue = "We're part of Google"
- Dark = "We see what Google doesn't show you"
The dark magnifier differentiates us from looking like a Google product.
### Why Custom Green Gradient (Not Single Green)?
- Single color = static, binary success
- Gradient = progressive growth, improvement journey
The ascending bars visualize "things get better" — what SMB owners want.
### Why Nunito for Wordmark?
- Inter = clean, enterprise, tech
- Nunito = warm, friendly, approachable
Matches our "helpful expert" voice. Nunito for wordmark only; Inter for everything else.
---
## 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 actionkitnow.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
### Imagery
1. Logo should never be distorted or recolored
2. Magnifier must be Dark, never Google Blue
3. Growth bars always use 3-shade green gradient
4. Clear space around logo = height of letter "y"
---
## 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 | "actionkitnow.com analyzes every review and shows you exactly what's frustrating customers, what they love, and what to fix first." |
| Objection handler (time) | "5 minutes gives you what used to take hours." |
| Objection handler (competition) | "You know what they said. We show you the patterns you'd miss." |
---
*Version: 2.0 | Last updated: January 2025*

48
whyrating-templates/public/assets/whymyrating-icon-dark-bg.svg Normal file
View File

@@ -0,0 +1,48 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
<!--
whymyrating.com Logo Icon - colorScheme="dark"
Use on dark backgrounds (#171717 or darker)
SVG is TRANSPARENT - no background baked in
Magnifier ring/handle: #1E293B (Dark Slate) + #475569 stroke (edge definition)
Lens interior: #FEF3C7 (Light Yellow - same hue as star)
-->
<defs>
<clipPath id="circleClip">
<circle cx="60" cy="62" r="21"/>
</clipPath>
</defs>
<!-- Star - Google Yellow #FBBC05 -->
<polygon
points="60,15 71.5,42 101,46 79.5,66 85,95 60,82 35,95 40.5,66 19,46 48.5,42"
fill="#FBBC05"
stroke="#FBBC05"
stroke-width="6"
stroke-linejoin="round"
/>
<!-- Magnifying Glass - seamless handle and ring -->
<g>
<!-- 1. Handle outline (behind everything) -->
<line x1="83" y1="81" x2="95" y2="91" stroke="#475569" stroke-width="11" stroke-linecap="round"/>
<!-- 2. Magnifier ring with stroke -->
<circle cx="60" cy="62" r="27" fill="#1E293B" stroke="#475569" stroke-width="1.5"/>
<!-- 3. Handle fill (covers circle stroke where they meet) -->
<line x1="83" y1="81" x2="95" y2="91" stroke="#1E293B" stroke-width="9" stroke-linecap="round"/>
<!-- 4. Lens interior - Light Yellow -->
<circle cx="60" cy="62" r="21" fill="#FEF3C7"/>
<!-- 5. Growth Bars -->
<g clip-path="url(#circleClip)">
<rect x="42" y="58" width="11" height="35" rx="1.5" ry="1.5" fill="#86EFAC"/>
<rect x="55" y="51" width="11" height="42" rx="1.5" ry="1.5" fill="#22C55E"/>
<rect x="68" y="44" width="11" height="49" rx="1.5" ry="1.5" fill="#15803D"/>
</g>
<!-- 6. Bar Overflow -->
<rect x="68" y="44" width="11" height="18" rx="1.5" ry="1.5" fill="#15803D"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

45
whyrating-templates/public/assets/whymyrating-icon-single-color-dark.svg Normal file
View File

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
<!--
whymyrating.com Logo - Single Color (Dark)
For watermarks, embroidery, single-color printing
-->
<defs>
<clipPath id="circleClip">
<circle cx="60" cy="62" r="21"/>
</clipPath>
</defs>
<!-- Star -->
<polygon
points="60,15 71.5,42 101,46 79.5,66 85,95 60,82 35,95 40.5,66 19,46 48.5,42"
fill="#1E293B"
stroke="#1E293B"
stroke-width="6"
stroke-linejoin="round"
/>
<!-- Magnifying Glass -->
<g>
<circle cx="60" cy="62" r="27" fill="#1E293B"/>
<circle cx="60" cy="62" r="21" fill="#FFFFFF"/>
<!-- Growth Bars -->
<g clip-path="url(#circleClip)">
<rect x="42" y="58" width="11" height="35" rx="1.5" ry="1.5" fill="#1E293B" opacity="0.3"/>
<rect x="55" y="51" width="11" height="42" rx="1.5" ry="1.5" fill="#1E293B" opacity="0.5"/>
<rect x="68" y="44" width="11" height="49" rx="1.5" ry="1.5" fill="#1E293B" opacity="0.8"/>
</g>
<!-- Bar Overflow -->
<rect x="68" y="44" width="11" height="18" rx="1.5" ry="1.5" fill="#1E293B" opacity="0.8"/>
<!-- Handle -->
<line
x1="83" y1="81"
x2="95" y2="91"
stroke="#1E293B"
stroke-width="9"
stroke-linecap="round"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

45
whyrating-templates/public/assets/whymyrating-icon-single-color-white.svg Normal file
View File

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
<!--
whymyrating.com Logo - Single Color (White)
For dark backgrounds, watermarks, embroidery
-->
<defs>
<clipPath id="circleClip">
<circle cx="60" cy="62" r="21"/>
</clipPath>
</defs>
<!-- Star -->
<polygon
points="60,15 71.5,42 101,46 79.5,66 85,95 60,82 35,95 40.5,66 19,46 48.5,42"
fill="#FFFFFF"
stroke="#FFFFFF"
stroke-width="6"
stroke-linejoin="round"
/>
<!-- Magnifying Glass -->
<g>
<circle cx="60" cy="62" r="27" fill="#FFFFFF"/>
<circle cx="60" cy="62" r="21" fill="none" stroke="#FFFFFF" stroke-width="2"/>
<!-- Growth Bars -->
<g clip-path="url(#circleClip)">
<rect x="42" y="58" width="11" height="35" rx="1.5" ry="1.5" fill="#FFFFFF" opacity="0.4"/>
<rect x="55" y="51" width="11" height="42" rx="1.5" ry="1.5" fill="#FFFFFF" opacity="0.6"/>
<rect x="68" y="44" width="11" height="49" rx="1.5" ry="1.5" fill="#FFFFFF" opacity="0.9"/>
</g>
<!-- Bar Overflow -->
<rect x="68" y="44" width="11" height="18" rx="1.5" ry="1.5" fill="#FFFFFF" opacity="0.9"/>
<!-- Handle -->
<line
x1="83" y1="81"
x2="95" y2="91"
stroke="#FFFFFF"
stroke-width="9"
stroke-linecap="round"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

44
whyrating-templates/public/assets/whymyrating-icon.svg Normal file
View File

@@ -0,0 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
<!--
whymyrating.com Logo Icon - colorScheme="light"
Use on light backgrounds (#FAFAFA or lighter)
SVG is TRANSPARENT - no background baked in
Magnifier ring/handle: #1E293B (Dark Slate)
Lens interior: #FEF3C7 (Light Yellow - same hue as star)
-->
<defs>
<clipPath id="circleClip">
<circle cx="60" cy="62" r="21"/>
</clipPath>
</defs>
<!-- Star - Google Yellow #FBBC05 -->
<polygon
points="60,15 71.5,42 101,46 79.5,66 85,95 60,82 35,95 40.5,66 19,46 48.5,42"
fill="#FBBC05"
stroke="#FBBC05"
stroke-width="6"
stroke-linejoin="round"
/>
<!-- Magnifying Glass - Neutral-700 #1E293B -->
<g>
<!-- Handle first (behind magnifier) -->
<line x1="83" y1="81" x2="95" y2="91" stroke="#1E293B" stroke-width="9" stroke-linecap="round"/>
<!-- Magnifier ring - on top of handle -->
<circle cx="60" cy="62" r="27" fill="#1E293B"/>
<!-- Lens interior -->
<circle cx="60" cy="62" r="21" fill="#FEF3C7"/>
<!-- Growth Bars -->
<g clip-path="url(#circleClip)">
<rect x="42" y="58" width="11" height="35" rx="1.5" ry="1.5" fill="#86EFAC"/>
<rect x="55" y="51" width="11" height="42" rx="1.5" ry="1.5" fill="#22C55E"/>
<rect x="68" y="44" width="11" height="49" rx="1.5" ry="1.5" fill="#15803D"/>
</g>
<!-- Bar Overflow -->
<rect x="68" y="44" width="11" height="18" rx="1.5" ry="1.5" fill="#15803D"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
whyrating-templates/public/file.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 391 B

1
whyrating-templates/public/globe.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
whyrating-templates/public/next.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
whyrating-templates/public/vercel.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 128 B

1
whyrating-templates/public/window.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 385 B