{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "press-kit-brand-assets", "title": "Press Kit Brand Assets", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/press-kit-brand-assets/PressKitBrandAssets.tsx", "content": "'use client'\n\nimport React, { useState } from 'react'\nimport {\n Check,\n CheckCircle2,\n Copy,\n Download,\n ExternalLink,\n FileArchive,\n FileCode,\n FileImage,\n FileText,\n Globe,\n Info,\n Layers,\n Mail,\n Palette,\n ShieldCheck,\n User,\n XCircle,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface LogoAsset {\n id: string\n title: string\n category: string\n description: string\n dimensions: string\n bestFor: string\n theme: 'light' | 'dark' | 'adaptive'\n formats: { label: string; ext: string; size: string }[]\n}\n\nexport interface BrandColor {\n id: string\n name: string\n hex: string\n oklch: string\n rgb: string\n role: string\n contrast: string\n usage: string\n bgClass: string\n textDark?: boolean\n}\n\nexport interface Executive {\n id: string\n name: string\n role: string\n bio: string\n avatarUrl?: string\n initials: string\n fileSize: string\n dimensions: string\n topics: string[]\n socials: { platform: 'x' | 'linkedin' | 'github'; url: string }[]\n}\n\nexport interface BrandGuidelineRule {\n type: 'do' | 'dont'\n text: string\n}\n\nexport interface PressKitBrandAssetsProps {\n companyName?: string\n title?: string\n subtitle?: string\n version?: string\n lastUpdated?: string\n pressEmail?: string\n pressKitZipSize?: string\n pressKitZipUrl?: string\n factSheetPdfSize?: string\n boilerplateText?: string\n logos?: LogoAsset[]\n colors?: BrandColor[]\n executives?: Executive[]\n guidelines?: BrandGuidelineRule[]\n variant?: 'default' | 'compact'\n className?: string\n}\n\nconst DEFAULT_LOGOS: LogoAsset[] = [\n {\n id: 'horizontal-primary',\n title: 'Primary Horizontal Logo',\n category: 'Full Wordmark',\n description: 'The standard lockup combining the faceted block logomark with horizontal typography and .dev badge.',\n dimensions: '3840 × 1080 px',\n bestFor: 'Light surfaces, navigation bars, marketing hero headers, and pitch decks.',\n theme: 'light',\n formats: [\n { label: 'Vector SVG', ext: 'svg', size: '14 KB' },\n { label: '4K PNG (Alpha)', ext: 'png', size: '280 KB' },\n { label: 'Modern WebP', ext: 'webp', size: '94 KB' },\n ],\n },\n {\n id: 'app-icon-mark',\n title: 'Square App Icon Mark',\n category: 'Logomark Symbol',\n description: 'Standalone geometric prism icon optimized for square aspect ratios and high-density icons.',\n dimensions: '1024 × 1024 px',\n bestFor: 'Favicons, desktop dock icons, app store assets, and square social avatars.',\n theme: 'adaptive',\n formats: [\n { label: 'Vector SVG', ext: 'svg', size: '8 KB' },\n { label: 'High-Res PNG', ext: 'png', size: '165 KB' },\n { label: 'Icon WebP', ext: 'webp', size: '62 KB' },\n ],\n },\n {\n id: 'monochrome-dark',\n title: 'Dark Mode Monochromatic Logo',\n category: 'Dark Backgrounds',\n description: 'Single-tone pure-white silhouette engineered for deep slate surfaces and obsidian backgrounds.',\n dimensions: '3840 × 1080 px',\n bestFor: 'Developer terminals, dark theme dashboards, midnight wallpapers, and video overlays.',\n theme: 'dark',\n formats: [\n { label: 'Vector SVG', ext: 'svg', size: '12 KB' },\n { label: '4K PNG (White)', ext: 'png', size: '240 KB' },\n { label: 'Dark WebP', ext: 'webp', size: '88 KB' },\n ],\n },\n {\n id: 'monochrome-light',\n title: 'Light Mode Inverted Logo',\n category: 'Print & Documents',\n description: 'High-density obsidian monochrome lockup for single-ink printing and high-contrast editorial media.',\n dimensions: '3840 × 1080 px',\n bestFor: 'Whitepapers, physical print collateral, invoices, PDF documents, and newsprint.',\n theme: 'light',\n formats: [\n { label: 'Vector SVG', ext: 'svg', size: '12 KB' },\n { label: '4K PNG (Black)', ext: 'png', size: '235 KB' },\n { label: 'Print WebP', ext: 'webp', size: '85 KB' },\n ],\n },\n]\n\nconst DEFAULT_COLORS: BrandColor[] = [\n {\n id: 'primary-emerald',\n name: 'Primary Emerald',\n hex: '#10B981',\n oklch: 'oklch(0.696 0.170 162.48)',\n rgb: 'rgb(16, 185, 129)',\n role: 'Primary Interactive Brand Color',\n contrast: 'WCAG AAA 7.4:1',\n usage: 'Primary brand color for CTAs, active pills, key highlights, and success indicators.',\n bgClass: 'bg-[#10B981]',\n textDark: true,\n },\n {\n id: 'midnight-slate',\n name: 'Midnight Slate',\n hex: '#0F172A',\n oklch: 'oklch(0.208 0.042 265.75)',\n rgb: 'rgb(15, 23, 42)',\n role: 'Dark Neutral Surface Base',\n contrast: 'WCAG AAA 16.2:1',\n usage: 'Core neutral background and high-contrast dark surface foundations across dark layouts.',\n bgClass: 'bg-[#0F172A]',\n textDark: false,\n },\n {\n id: 'accent-blue',\n name: 'Accent Blue',\n hex: '#3B82F6',\n oklch: 'oklch(0.623 0.214 259.80)',\n rgb: 'rgb(59, 130, 246)',\n role: 'Secondary Interactive Accent',\n contrast: 'WCAG AA 4.8:1',\n usage: 'Secondary accent for active links, information badges, focus rings, and secondary metrics.',\n bgClass: 'bg-[#3B82F6]',\n textDark: true,\n },\n {\n id: 'background-base',\n name: 'Background Base',\n hex: '#F8FAFC',\n oklch: 'oklch(0.985 0.002 247.80)',\n rgb: 'rgb(248, 250, 252)',\n role: 'Light Neutral Surface Fills',\n contrast: 'WCAG AAA 19.5:1',\n usage: 'Clean ambient light surface foundation, card backgrounds, and elevated container fills.',\n bgClass: 'bg-[#F8FAFC]',\n textDark: true,\n },\n {\n id: 'amber-highlight',\n name: 'Amber Highlight',\n hex: '#F59E0B',\n oklch: 'oklch(0.769 0.188 70.08)',\n rgb: 'rgb(245, 158, 11)',\n role: 'Warning & Spotlight Accent',\n contrast: 'WCAG AAA 8.1:1',\n usage: 'Warm highlight for warnings, pro tier tags, system notices, and featured sponsor badges.',\n bgClass: 'bg-[#F59E0B]',\n textDark: true,\n },\n]\n\nconst DEFAULT_EXECUTIVES: Executive[] = [\n {\n id: 'elena-rostova',\n name: 'Elena Rostova',\n role: 'Chief Executive Officer & Co-Founder',\n bio: 'Pioneered component registry architecture and headless design systems. Former principal architect at NextGen UI. Leading UIPKGE’s mission to make design-engineering frictionless for global software teams.',\n avatarUrl: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=400&auto=format&fit=crop',\n initials: 'ER',\n fileSize: '12.4 MB',\n dimensions: '4000 × 5000 px · 300 DPI',\n topics: ['Component Architecture', 'Design Systems', 'Open-Source Sustainability', 'Developer Experience'],\n socials: [\n { platform: 'x', url: 'https://x.com/elenarostova' },\n { platform: 'linkedin', url: 'https://linkedin.com/in/elenarostova' },\n { platform: 'github', url: 'https://github.com/elenarostova' },\n ],\n },\n {\n id: 'marcus-vance',\n name: 'Marcus Vance',\n role: 'Chief Technology Officer & Co-Founder',\n bio: 'Specializes in multi-framework compiler tooling, zero-runtime tokens, and high-performance WebAssembly render pipelines. Previously led frontend infrastructure and UI performance engineering at CloudScale.',\n avatarUrl: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop',\n initials: 'MV',\n fileSize: '11.8 MB',\n dimensions: '4000 × 5000 px · 300 DPI',\n topics: ['Web Performance', 'AST Tooling', 'Tailwind v4 Engine', 'Reka UI Headless Core'],\n socials: [\n { platform: 'x', url: 'https://x.com/marcusvance' },\n { platform: 'linkedin', url: 'https://linkedin.com/in/marcusvance' },\n { platform: 'github', url: 'https://github.com/marcusvance' },\n ],\n },\n]\n\nconst DEFAULT_GUIDELINES: BrandGuidelineRule[] = [\n { type: 'do', text: 'Maintain minimum clear space equal to 50% of the logomark height around all sides.' },\n { type: 'do', text: 'Use the official OKLCH and Hex values when reproducing brand swatches in digital media.' },\n { type: 'do', text: 'Use high-contrast monochromatic variants for single-color print, laser etching, or stamps.' },\n { type: 'dont', text: 'Do not stretch, distort, rotate, or alter the aspect ratio of official logo assets.' },\n { type: 'dont', text: 'Do not add drop shadows, outer glows, strokes, or unapproved gradients to the mark.' },\n { type: 'dont', text: 'Do not place the full-color primary mark on low-contrast or visually busy backgrounds.' },\n]\n\nexport function PressKitBrandAssets({\n companyName = 'UIPKGE',\n title = 'Brand Guidelines & Press Kit',\n subtitle = 'Official logos, brand colors, typography rules, and executive media assets.',\n version = 'v2.4',\n lastUpdated = 'August 2026',\n pressEmail = 'press@uipkge.dev',\n pressKitZipSize = '48 MB',\n pressKitZipUrl = '#',\n factSheetPdfSize = '2.4 MB',\n boilerplateText = 'UIPKGE is an open-source dual-framework UI registry providing copy-paste accessible components for Vue 3 and React 19 with 100% code ownership. Headquartered in San Francisco with a distributed core maintainer team.',\n logos = DEFAULT_LOGOS,\n colors = DEFAULT_COLORS,\n executives = DEFAULT_EXECUTIVES,\n guidelines = DEFAULT_GUIDELINES,\n variant = 'default',\n className,\n}: PressKitBrandAssetsProps) {\n const [activeTab, setActiveTab] = useState<'all' | 'logos' | 'colors' | 'leadership' | 'press'>('all')\n const [copiedKey, setCopiedKey] = useState(null)\n const [downloadedKey, setDownloadedKey] = useState(null)\n\n const copyToClipboard = async (key: string, text: string) => {\n try {\n await navigator.clipboard.writeText(text)\n setCopiedKey(key)\n setTimeout(() => {\n setCopiedKey((current) => (current === key ? null : current))\n }, 1800)\n } catch {\n // Fallback\n }\n }\n\n const handleDownload = (key: string, _fileName: string) => {\n setDownloadedKey(key)\n setTimeout(() => {\n setDownloadedKey((current) => (current === key ? null : current))\n }, 2000)\n }\n\n return (\n \n
\n {/* Header Hero Section */}\n
\n
\n
\n
\n \n \n Media & Brand Hub\n \n \n {version}\n \n Updated {lastUpdated}\n
\n\n

{title}

\n\n

{subtitle}

\n\n
\n
\n \n Editorial Use License (CC BY-NC 4.0)\n
\n \n
\n \n 24 Verified Brand Assets\n
\n \n
\n \n Vector & 300 DPI Print Ready\n
\n
\n
\n\n {/* Primary Download Action Card */}\n
\n handleDownload('all-zip', 'uipkge-complete-press-kit.zip')}\n >\n {downloadedKey === 'all-zip' ? (\n <>\n \n Press Kit Downloaded\n \n ) : (\n <>\n \n Download Complete Press Kit (.ZIP · {pressKitZipSize})\n \n )}\n \n\n
\n copyToClipboard('email-header', pressEmail)}\n >\n {copiedKey === 'email-header' ? (\n <>\n \n Copied\n \n ) : (\n <>\n \n Press Desk\n \n )}\n \n\n copyToClipboard('boilerplate-header', boilerplateText)}\n >\n {copiedKey === 'boilerplate-header' ? (\n <>\n \n Copied\n \n ) : (\n <>\n \n Boilerplate\n \n )}\n \n
\n
\n
\n
\n\n {/* Quick Section Anchor Tabs (Default Variant) */}\n {variant === 'default' && (\n
\n setActiveTab('all')}\n >\n \n All Assets\n \n setActiveTab('logos')}\n >\n \n Logos & Marks ({logos.length})\n \n setActiveTab('colors')}\n >\n \n Color Palette ({colors.length})\n \n setActiveTab('leadership')}\n >\n \n Leadership ({executives.length})\n \n setActiveTab('press')}\n >\n \n Press Contact\n \n
\n )}\n\n {/* SECTION 1: Official Logo Downloads */}\n {(activeTab === 'all' || activeTab === 'logos') && (\n
\n
\n
\n
\n \n Official Vectors & Assets\n
\n

Official Logo Downloads

\n

\n High-resolution vector assets for print and digital publishing. Please preserve minimum clear space.\n

\n
\n \n 4 Approved Variants\n \n
\n\n
\n {logos.map((logo) => (\n \n
\n {/* Logo Preview Surface with Checkered / Contrast Backdrop */}\n \n {/* Rendered Vector Logo Preview */}\n {logo.id === 'horizontal-primary' && (\n
\n
\n \n \n \n \n \n \n \n
\n
\n uipkge\n \n .dev\n \n
\n
\n )}\n\n {logo.id === 'app-icon-mark' && (\n
\n
\n \n \n \n \n \n \n \n
\n
\n )}\n\n {logo.id === 'monochrome-dark' && (\n
\n
\n \n \n \n \n \n \n \n
\n
\n uipkge\n \n .dev\n \n
\n
\n )}\n\n {logo.id === 'monochrome-light' && (\n
\n
\n \n \n \n \n \n \n \n
\n
\n uipkge\n \n .dev\n \n
\n
\n )}\n\n {/* Specs Pill */}\n
\n \n {logo.dimensions}\n \n
\n
\n\n {/* Card Content Details */}\n \n
\n {logo.title}\n \n {logo.category}\n \n
\n {logo.description}\n
\n \n \n Best for: {logo.bestFor}\n \n
\n \n
\n\n {/* Card Footer Download Buttons */}\n \n
\n
\n Available Formats\n Vector & Bitmaps\n
\n
\n {logo.formats.map((fmt) => (\n handleDownload(`${logo.id}-${fmt.ext}`, `${logo.id}.${fmt.ext}`)}\n >\n
\n {downloadedKey === `${logo.id}-${fmt.ext}` ? (\n \n ) : (\n \n )}\n {fmt.label.split(' ')[0]}\n
\n {fmt.size}\n \n ))}\n
\n
\n \n \n ))}\n
\n
\n )}\n\n {/* SECTION 2: Official Brand Palette & OKLCH Color Swatches */}\n {(activeTab === 'all' || activeTab === 'colors') && (\n
\n
\n
\n
\n \n Token Palette & Swatches\n
\n

Official Brand Palette & OKLCH

\n

\n Perceptually uniform color tokens with high WCAG contrast ratings for both dark and light UI surfaces.\n

\n
\n \n 5 Core Swatches\n \n
\n\n
\n {colors.map((color) => (\n \n
\n {/* Swatch Visual Header */}\n \n
\n \n {color.contrast}\n \n
\n
\n \n {color.hex}\n \n
\n
\n\n {/* Color Details */}\n
\n
\n

{color.name}

\n

{color.role}

\n
\n\n

{color.usage}

\n\n {/* Copy Value Blocks */}\n
\n
\n {color.hex}\n copyToClipboard(`hex-${color.id}`, color.hex)}\n >\n {copiedKey === `hex-${color.id}` ? (\n \n ) : (\n \n )}\n {copiedKey === `hex-${color.id}` ? 'Copied' : 'HEX'}\n \n
\n\n
\n \n {color.oklch.split('(')[1].replace(')', '')}\n \n copyToClipboard(`oklch-${color.id}`, color.oklch)}\n >\n {copiedKey === `oklch-${color.id}` ? (\n \n ) : (\n \n )}\n {copiedKey === `oklch-${color.id}` ? 'Copied' : 'OKLCH'}\n \n
\n
\n
\n
\n \n ))}\n
\n \n )}\n\n {/* SECTION 3: Executive Leadership Headshots & Bios */}\n {(activeTab === 'all' || activeTab === 'leadership') && (\n
\n
\n
\n
\n \n Media Spokespersons\n
\n

Executive Leadership & Bios

\n

\n Official executive headshots and media blurbs for press releases, podcasts, and event keynotes.\n

\n
\n \n 300 DPI Studio Photography\n \n
\n\n
\n {executives.map((exec) => (\n \n
\n
\n \n \n \n {exec.initials}\n \n \n\n
\n
\n

{exec.name}

\n \n Executive\n \n
\n

{exec.role}

\n

{exec.dimensions}

\n
\n
\n\n

{exec.bio}

\n\n
\n Speaking Topics & Focus Areas:\n
\n {exec.topics.map((topic) => (\n \n {topic}\n \n ))}\n
\n
\n
\n\n \n
\n \n {exec.fileSize} RAW TIFF & JPG\n
\n\n handleDownload(`headshot-${exec.id}`, `${exec.id}-headshot-300dpi.jpg`)}\n >\n {downloadedKey === `headshot-${exec.id}` ? (\n <>\n \n Headshot Downloaded\n \n ) : (\n <>\n \n Download Headshot (300 DPI)\n \n )}\n \n \n \n ))}\n
\n
\n )}\n\n {/* SECTION 4: Press Hub & Media Contact + Brand Guidelines */}\n {(activeTab === 'all' || activeTab === 'press') && (\n
\n {/* Press Desk Contact Card */}\n \n \n
\n
\n \n Press & Media Inquiries\n
\n \n {version}\n \n
\n Get in Touch with Media Relations\n \n Direct access for accredited tech journalists, conference organizers, analysts, and podcast hosts.\n \n \n\n \n {/* Email Box */}\n
\n
\n
\n \n
\n
\n

{pressEmail}

\n

Official Media & Inquiries Desk

\n
\n
\n copyToClipboard('press-email', pressEmail)}\n >\n {copiedKey === 'press-email' ? (\n <>\n \n Copied\n \n ) : (\n <>\n \n Copy\n \n )}\n \n
\n\n {/* Media SLA & Guidelines Grid */}\n
\n
\n
\n \n < 24h Response\n
\n

\n Prompt turnaround on verified interview and quote requests.\n

\n
\n\n
\n
\n \n Embargo Previews\n
\n

\n Advance beta access and documentation under NDA/embargo.\n

\n
\n
\n \n\n \n
\n Need company numbers & metrics?\n handleDownload('factsheet-pdf', 'uipkge-company-factsheet.pdf')}\n >\n {downloadedKey === 'factsheet-pdf' ? (\n <>\n \n Downloaded\n \n ) : (\n <>\n \n Company Fact Sheet (.PDF · {factSheetPdfSize})\n \n )}\n \n
\n \n \n\n {/* Company Boilerplate & Usage Rules */}\n \n \n
\n
\n \n Brand Rules & Boilerplate\n
\n copyToClipboard('boilerplate-text', boilerplateText)}\n >\n {copiedKey === 'boilerplate-text' ? (\n <>\n \n Copied Boilerplate\n \n ) : (\n <>\n \n Copy Boilerplate\n \n )}\n \n
\n Official Company Boilerplate\n \n Approved copy for standard \"About the Company\" sections in press releases and event booklets.\n \n \n\n \n
\n \"{boilerplateText}\"\n
\n\n {/* Quick Do's & Don'ts */}\n
\n Brand Usage Rules:\n
\n {guidelines.slice(0, 4).map((rule, idx) => (\n
\n {rule.type === 'do' ? (\n \n ) : (\n \n )}\n {rule.text}\n
\n ))}\n
\n
\n \n\n \n
\n Questions regarding brand trademark usage?\n \n Contact Legal Desk\n \n \n
\n \n \n
\n )}\n \n \n )\n}\n\nexport default PressKitBrandAssets\n", "type": "registry:block", "target": "~/components/blocks/PressKitBrandAssets.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Comprehensive brand guidelines and press kit hub with official logo downloads in vector SVG/4K PNG/WebP, OKLCH brand palette tokens, executive leadership headshots (300 DPI), and press contact resources.", "categories": [ "marketing", "brand", "media" ] }