From e3959607ebf1bd62be4dd8ed3a9f46f5c5f6c4fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?= <35082514+alezmad@users.noreply.github.com> Date: Mon, 2 Feb 2026 01:11:09 +0000 Subject: [PATCH] Use WhyMyRatingLogo component with horizontal-full variant - Copy logo component from brand site (standalone version) - Use horizontal-full variant in header - Tagline: 'Project Hub' Co-Authored-By: Claude Opus 4.5 --- src/app/page.tsx | 39 +---- src/components/WhyMyRatingLogo.tsx | 255 +++++++++++++++++++++++++++++ src/components/index.ts | 1 + 3 files changed, 258 insertions(+), 37 deletions(-) create mode 100644 src/components/WhyMyRatingLogo.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 024f594..bcc6735 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { useState } from 'react'; -import { Icon } from '@/components'; +import { Icon, WhyMyRatingLogo } from '@/components'; type TabId = 'home' | 'settings'; @@ -27,42 +27,7 @@ export default function Home() {
-
- {/* WhyRating Logo Icon */} - - - - - - - - - - - - - - - - - - - -
-

- whyrating.com -

-

- The story behind your stars -

-
-
+
{/* Tabs */} diff --git a/src/components/WhyMyRatingLogo.tsx b/src/components/WhyMyRatingLogo.tsx new file mode 100644 index 0000000..3f6d847 --- /dev/null +++ b/src/components/WhyMyRatingLogo.tsx @@ -0,0 +1,255 @@ +'use client'; + +import { useId } from 'react'; + +export type LogoVariant = 'icon' | 'primary' | 'full' | 'horizontal' | 'horizontal-full' | 'horizontal-v2' | 'horizontal-full-v2'; +export type ColorScheme = 'light' | 'dark' | 'mono-dark' | 'mono-light'; + +interface WhyMyRatingLogoProps { + size?: number; + variant?: LogoVariant; + colorScheme?: ColorScheme; + tagline?: string; +} + +// Hub-specific defaults +const config = { + domain: 'whyrating', + domainTLD: '.com', + tagline: 'Project Hub', +}; + +export function WhyMyRatingLogo({ + size = 120, + variant = 'primary', + colorScheme = 'light', + tagline, +}: WhyMyRatingLogoProps) { + // Generate unique ID for clip paths + const clipId = useId(); + + // Use custom tagline if provided + const displayTagline = tagline || config.tagline; + + // Enforce minimum sizes per guidelines + const minSize = variant === 'icon' ? 32 : 120; + const u = Math.max(size, minSize); + + const calc = { + icon: u, + wordmarkFont: u * 0.15, + taglineFont: u * 0.092, + gapIconToWordmark: u * 0.02, + gapWordmarkToTagline: u * 0.05, + clearSpace: u * 0.12, + horizontalIcon: u * 0.60, + horizontalWordmarkFont: u * 0.233, + horizontalTaglineFont: u * 0.13, + horizontalGap: u * 0.176, + horizontalClearSpace: u * 0.05, + // V2: Tighter proportions - less gap, bigger text + v2Icon: u * 0.50, + v2Gap: u * 0.10, + v2WordmarkFont: u * 0.28, + v2TaglineFont: u * 0.15, + v2ClearSpace: u * 0.02, + }; + + const isDark = colorScheme === 'dark'; + const isMono = colorScheme === 'mono-dark' || colorScheme === 'mono-light'; + const monoColor = colorScheme === 'mono-light' ? '#FFFFFF' : '#1E293B'; + const monoContrast = colorScheme === 'mono-light' ? '#1E293B' : '#FFFFFF'; + + const colors = isMono ? { + star: monoColor, + magnifier: monoColor, + lens: 'none', + barLight: monoColor, + barMid: monoColor, + barDark: monoColor, + wordmark: monoColor, + accent: monoColor, + tagline: monoColor, + stroke: monoContrast, + strokeWidth: 2, + } : { + star: '#FBBC05', + magnifier: '#1E293B', + lens: '#FEF3C7', + barLight: '#86EFAC', + barMid: '#22C55E', + barDark: '#15803D', + wordmark: isDark ? '#FAFAF9' : '#1E293B', + accent: '#F59E0B', + tagline: isDark ? '#A8A29E' : '#64748B', + stroke: isDark ? '#78716C' : 'none', + strokeWidth: isDark ? 1.5 : 0, + }; + + const LogoIcon = ({ iconSize }: { iconSize?: number }) => ( + + + + + + + {isMono && ( + + )} + + + {isDark && !isMono && ( + + )} + {isMono && ( + + )} + {isMono && ( + + )} + + + {!isMono && } + {isMono && ( + + )} + {isMono && ( + + )} + {isMono && ( + + )} + {isMono && } + {!isMono && } + + + + {!isMono && } + + + + ); + + const Wordmark = ({ fontSize }: { fontSize?: number }) => ( + + {config.domain}{config.domainTLD} + + ); + + const Tagline = ({ fontSize }: { fontSize?: number }) => ( + + {displayTagline} + + ); + + if (variant === 'icon') { + return ( +
+ +
+ ); + } + + if (variant === 'primary') { + return ( +
+ +
+ +
+ ); + } + + if (variant === 'full') { + return ( +
+ +
+ +
+ +
+ ); + } + + if (variant === 'horizontal') { + return ( +
+
+ +
+
+ +
+ ); + } + + if (variant === 'horizontal-full') { + return ( +
+ +
+
+ +
+ +
+
+ ); + } + + if (variant === 'horizontal-v2') { + return ( +
+ +
+ +
+ ); + } + + if (variant === 'horizontal-full-v2') { + const textGap = u * 0.02; + const totalTextHeight = calc.v2WordmarkFont + textGap + calc.v2TaglineFont; + const fullIconSize = totalTextHeight / 0.667; + const iconOffset = fullIconSize * 0.12; + + return ( +
+
+ +
+
+
+ +
+ +
+
+ ); + } + + return null; +} diff --git a/src/components/index.ts b/src/components/index.ts index f9ae114..1c618ce 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1 +1,2 @@ export { Icon, icons } from './Icons'; +export { WhyMyRatingLogo } from './WhyMyRatingLogo';