Teams

import { IconArrowNarrowRight } from '@tabler/icons-react';
import Image from '@/components/ui/Image';
import Heading from '@/components/ui/Heading';
import Link from '@/components/ui/Link';
import { Avatar, AvatarGroup } from '@/components/ui/Avatar';
export default function Page() {
  return (
    <div className="h-screen overflow-auto py-10 md:py-0">
      <div className="mx-auto px-4 md:max-w-7xl">
        <Heading as="h1" className="text-center md:mt-40">
          Our Team
        </Heading>
        <p className="mx-auto text-center md:mt-4">
          Our team of skilled professionals is committed to delivering exceptional results throughout every stage of the
          process.
        </p>
        <ul className="mx-auto mt-12 grid max-w-5xl gap-4 sm:grid-cols-2 md:grid-cols-4">
          <TeamMember cover="https://dub.sh/0gbR7uT" name="Jack Tang" role="Software Engineer" />
          <TeamMember cover="https://dub.sh/1uflDsb" name="Will Smith" role="Project Manager" />
          <TeamMember cover="https://dub.sh/N1P7oNG" name="Harry Wilson" role="UI Designer" />
          <TeamMember cover="https://dub.sh/RzNEeT4" name="Olivia Evan" role="HR" />
        </ul>
        <div className="mt-12 flex items-center justify-center gap-4">
          <AvatarGroup>
            <Avatar bordered src="/images/avatar-01.png" className="[&_img]:object-cover" size="sm" />
            <Avatar bordered src="/images/avatar-02.jpg" className="[&_img]:object-cover" size="sm" />
            <Avatar bordered src="/images/avatar-03.jpg" className="[&_img]:object-cover" size="sm" />
            <Avatar bordered src="/images/avatar-04.jpg" className="[&_img]:object-cover" size="sm" />
          </AvatarGroup>
          <Link href="#" underline className="text-sm">
            More
            <IconArrowNarrowRight size="20" />
          </Link>
        </div>
      </div>
    </div>
  );
}

interface TeamMemberProps {
  cover: string;
  name: string;
  role: string;
}
function TeamMember({ cover, name, role }: TeamMemberProps) {
  return (
    <li className="group relative aspect-square w-full shrink-0 overflow-hidden rounded-md">
      <Image
        src={cover}
        className="size-full grayscale transition-all duration-300 group-hover:scale-110 group-hover:grayscale-0"
        alt="team member"
      />
      <div className="absolute bottom-[2%] left-[2%] flex h-16 w-[96%] flex-col justify-center rounded-md bg-black/10 px-1 text-sm backdrop-blur-sm">
        <p className="text-white">{name}</p>
        <p className="text-foreground/40">{role}</p>
      </div>
    </li>
  );
}

import Heading from '@/components/ui/Heading';
import { Card, CardBody } from '@/components/ui/Card';
import Image from '@/components/ui/Image';
import { IconBrandX } from '@tabler/icons-react';
import Link from '@/components/ui/Link';
export default function Page() {
  return (
    <div className="h-screen overflow-auto py-10 md:py-40">
      <div className="mx-4 flex flex-col items-center justify-center">
        <Heading as="h1">Our Team</Heading>
        <p className="text-description mt-2 mb-8 text-center">The people work on making our products best</p>
        <ul className="grid gap-4 md:max-w-4xl md:grid-cols-2">
          <TeamItem
            cover="/images/avatar-01.png"
            name="Rad Li"
            role="Sales Executive"
            twitter="rad_li"
            description="I am the chief executive of sales and closed valuable deals"
          />
          <TeamItem
            cover="/images/avatar-02.jpg"
            name="Alex Kim"
            role="Lead Designer"
            twitter="alex_11"
            description="I've been lead designer for Nexus since the beginning of it and enjoyed every bit"
          />
          <TeamItem
            cover="/images/avatar-03.jpg"
            name="San Song"
            role="Founder"
            twitter="san_sone00"
            description="I've established Nexus In 2000 and it was one of the best idea I've had in my life"
          />
          <TeamItem
            cover="/images/avatar-04.jpg"
            name="Harry Wilson"
            role="CFO"
            twitter="harry_happy"
            description="I'm the ceo of Nexus and we have pushed out limit so fa to make it successful"
          />
        </ul>
      </div>
    </div>
  );
}

interface TeamItemProps {
  cover: string;
  name: string;
  role: string;
  description: string;
  twitter: string;
}
function TeamItem({ cover, name, role, description, twitter }: TeamItemProps) {
  return (
    <Card className="hover:border-primary transition">
      <CardBody className="relative flex gap-3">
        <div className="absolute top-3 right-4 flex items-center gap-1">
          <IconBrandX size={20} />
          <Link href="#">{twitter}</Link>
        </div>
        <Image className="size-25 shrink-0 overflow-hidden rounded-md" src={cover} alt={name} />
        <div className="flex flex-col justify-between">
          <div>
            <p>{name}</p>
            <p className="text-description text-sm">{role}</p>
          </div>
          <div className="self-end text-sm text-neutral-400">{description}</div>
        </div>
      </CardBody>
    </Card>
  );
}