mirror of
https://github.com/zoo-apps/industries.git
synced 2026-10-30 14:57:03 +00:00
zooqueenandHanzo Dev
19905ecd56
Adds three home compositions sharing the same investor narrative: - / (canonical) — restored old composition with Hero + zoo composite, Ecosystem, ZooLabsNarrative, ServicesOverview, ResearchHighlights, Leadership, TrustedBy, Contact. Adds polished motion (Reveal, Parallax wrappers, scroll-linked Hero drift), softer brutalist reset (rounded utilities now opt-in), and a Zen5 rainbow-gradient top banner. - /homepage1 — backup of the previous / composition (noindex). - /homepage2 — 10-slide deck with snap-mandatory CSS scroll snap, side-rail slide indicator, alternating brand-color slide washes, CSS-3D AI-coin scene behind the Hero (Zen5 family + Cloud / Network spokes, perspective + per-coin float keyframes, light blur), network-mesh edges, Foundation + Leadership + Traction + Access slides, plus the AI-native market-cap composite with NVIDIA as public-market comparable. - /homepage3 — editorial 'Quarterly' variant with serif display, masthead, drop cap, ornamental dividers, chapter framing, and a colophon footer. Wax-seal red accent on a cream paper surface. Other changes: - Navbar: drop rounded floating pill in favour of sharp transparent bar with a sharp backdrop-blur strip + border-b-2 black on scroll. - TopBanner: animated rainbow gradient background (300% width, background-position keyframe, prefers-reduced-motion aware). - Leadership / TeamMemberCard: rounded-full avatars (override the brutalist global border-radius reset via data-circle). - Ecosystem strip: render JPGs at /public/ecosystem/*.jpg with emoji fallback only when an image is missing (bear, drought, lake, eagle, forest, whale). - TheStack: each layer card is now a click target to its live domain (zenlm.org, zoo.cloud, zoo.network, zoo.fund, zoo.vote). - public/: new /hero/zooimg.png, /ecosystem/*.jpg, /pe/*.png. - Reveal / Parallax / ParallaxDivider / ParallaxBackground / CoinScene / SlideIndicator / SlideParallax / NetworkAnimation primitives under components/. Co-authored-by: Hanzo Dev <[email protected]>
157 lines
5.0 KiB
TypeScript
157 lines
5.0 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 ? (
|
|
// Circle-cropped avatar. ``rounded-full`` is mandatory because
|
|
// globals.css has a brutalist reset
|
|
// (``*:not(.rounded-full):not([data-circle]) { border-radius: 0
|
|
// !important }``) that nukes any inline border-radius. The
|
|
// class is what flips the exemption.
|
|
<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>
|
|
);
|
|
}
|