mirror of
https://github.com/zoo-apps/industries.git
synced 2026-10-30 14:57:03 +00:00
zooqueen
8f783f5331
- Navbar: drop the rounded-pill float treatment. Full-bleed bar with a single hard ``border-b-2 border-black`` once scrolled, transparent before that. Matches the rest of the site's hard-rectangle vibe and fixes the floating rounded-pill regression visible at the top of the page. - globals.css: restore the ``:not(.rounded-full):not([data-circle])`` exemption to the brutalist radius reset so circular avatars and the data-circle opt-in survive the global override. - Leadership.tsx: add ``rounded-full + aspect-square + border`` to the avatar wrapper so leader photos render as circles again. - TeamMemberCard.tsx: same treatment for the /team page cards. - Leadership.tsx: remove Marcus White and Jackson Mori from the listing. - Hero.tsx: ``Start earning coin`` button was linking to /mining which doesn't exist (404). Point it at /cloud for now until the mining product page lands.
154 lines
4.8 KiB
TypeScript
154 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { LucideIcon } from "lucide-react";
|
|
import { motion } from "framer-motion";
|
|
import { Github, Linkedin, Twitter, MessageSquare, Rocket } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface TeamMemberCardProps {
|
|
name: string;
|
|
role: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
gradient: string;
|
|
image?: string;
|
|
link?: string;
|
|
emoji?: string;
|
|
botId?: string;
|
|
}
|
|
|
|
export default function TeamMemberCard({ name, role, description, icon: Icon, gradient, image, link, emoji, botId }: TeamMemberCardProps) {
|
|
const isHuman = !!image;
|
|
|
|
// Generate social links from name for human members
|
|
const slug = name.toLowerCase().replace(/\s+/g, "-");
|
|
|
|
return (
|
|
<motion.div
|
|
whileHover={{ y: -5 }}
|
|
className={cn(
|
|
"relative group rounded-2xl border p-8 backdrop-blur-sm overflow-hidden",
|
|
"border-border bg-foreground/5"
|
|
)}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-br opacity-0 group-hover:opacity-10 transition-opacity duration-500 ease-in-out -z-10" />
|
|
<div className="block mb-4 relative z-10">
|
|
{image ? (
|
|
// Avatar disc — ``rounded-full`` is mandatory (global brutalist
|
|
// reset squares anything without it).
|
|
<div className="w-16 h-16 aspect-square overflow-hidden rounded-full border border-black mb-4">
|
|
<img
|
|
src={image}
|
|
alt={name}
|
|
className="w-full h-full object-cover grayscale rounded-full"
|
|
/>
|
|
</div>
|
|
) : emoji ? (
|
|
<div className="mb-4 text-5xl leading-none">
|
|
{emoji}
|
|
</div>
|
|
) : (
|
|
<div className={cn("inline-flex p-3 rounded-xl bg-gradient-to-br mb-4", gradient)}>
|
|
<Icon className="h-6 w-6 text-foreground" />
|
|
</div>
|
|
)}
|
|
<h3 className={cn(
|
|
"text-xl font-semibold mb-2 transition-colors",
|
|
"text-foreground"
|
|
)}>
|
|
{name}
|
|
</h3>
|
|
<p className={cn(
|
|
"font-medium mb-3 text-sm",
|
|
"text-muted-foreground"
|
|
)}>
|
|
{role}
|
|
</p>
|
|
<p className={cn(
|
|
"mb-4 text-sm",
|
|
"text-muted-foreground"
|
|
)}>
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
{isHuman ? (
|
|
<div className="flex items-center gap-3 relative z-10">
|
|
<a
|
|
href={`https://linkedin.com/in/${slug}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={cn(
|
|
"p-2 rounded-lg border transition-colors",
|
|
"border-border text-muted-foreground hover:text-foreground hover:bg-accent"
|
|
)}
|
|
>
|
|
<Linkedin className="h-4 w-4" />
|
|
</a>
|
|
<a
|
|
href={`https://x.com/${slug}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={cn(
|
|
"p-2 rounded-lg border transition-colors",
|
|
"border-border text-muted-foreground hover:text-foreground hover:bg-accent"
|
|
)}
|
|
>
|
|
<Twitter className="h-4 w-4" />
|
|
</a>
|
|
<a
|
|
href="https://github.com/zooai"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={cn(
|
|
"p-2 rounded-lg border transition-colors",
|
|
"border-border text-muted-foreground hover:text-foreground hover:bg-accent"
|
|
)}
|
|
>
|
|
<Github className="h-4 w-4" />
|
|
</a>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-3 relative z-10">
|
|
<a
|
|
href={botId ? `https://app.zoo.bot/${botId}` : "https://app.zoo.bot"}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={cn(
|
|
"p-2 rounded-lg border transition-colors",
|
|
"border-border text-muted-foreground hover:text-foreground hover:bg-accent"
|
|
)}
|
|
title="Launch"
|
|
>
|
|
<Rocket className="h-4 w-4" />
|
|
</a>
|
|
<a
|
|
href="https://zoo.chat"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={cn(
|
|
"p-2 rounded-lg border transition-colors",
|
|
"border-border text-muted-foreground hover:text-foreground hover:bg-accent"
|
|
)}
|
|
title="Chat"
|
|
>
|
|
<MessageSquare className="h-4 w-4" />
|
|
</a>
|
|
<a
|
|
href="https://github.com/zooai/bot"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={cn(
|
|
"p-2 rounded-lg border transition-colors",
|
|
"border-border text-muted-foreground hover:text-foreground hover:bg-accent"
|
|
)}
|
|
title="GitHub"
|
|
>
|
|
<Github className="h-4 w-4" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
}
|