mirror of
https://github.com/zoo-apps/industries.git
synced 2026-10-30 14:57:03 +00:00
zooqueen
f52b629d68
Adds a 14-second linear infinite spin to the brand mark via a new .logo-spin utility in globals.css, applied directly to the <Image> inside the Logo component. Respects prefers-reduced-motion (animation off).
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface LogoProps {
|
|
className?: string
|
|
showText?: boolean
|
|
size?: 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
const sizes = {
|
|
sm: { logo: 'h-7 w-7', text: 'text-xl' },
|
|
md: { logo: 'h-9 w-9', text: 'text-2xl' },
|
|
lg: { logo: 'h-12 w-12', text: 'text-3xl' },
|
|
}
|
|
|
|
// Brand lockup: CMYK Venn mark + ZOO AI wordmark, matching the real
|
|
// Zoo logo from the pitch deck cover ("ZOO AI ยท Open AI for the future
|
|
// of tomorrow.").
|
|
export default function Logo({ className = '', showText = true, size = 'md' }: LogoProps) {
|
|
return (
|
|
<Link href="/" className={cn('flex items-center gap-2.5 group', className)}>
|
|
<Image
|
|
src="/zoo-logo.svg"
|
|
alt="ZOO INDUSTRIES"
|
|
width={48}
|
|
height={48}
|
|
className={cn(sizes[size].logo, 'logo-spin transition-transform duration-300 group-hover:scale-105')}
|
|
priority
|
|
/>
|
|
{showText && (
|
|
<span className={cn(
|
|
'font-extrabold uppercase tracking-tight transition-colors duration-300',
|
|
sizes[size].text,
|
|
'text-foreground group-hover:text-foreground/90'
|
|
)}>
|
|
ZOO <span className="font-light">INDUSTRIES</span>
|
|
</span>
|
|
)}
|
|
</Link>
|
|
)
|
|
}
|