Department Showcase

A department showcase with cards describing each team, its focus, and people. Helps candidates understand where they fit before browsing open roles.

import * as React from 'react';

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  BookOpenIcon,
  BrainCircuitIcon,
  BriefcaseIcon,
  CodeIcon,
  HeartHandshakeIcon,
  LineChartIcon,
  PaletteIcon,
  ShoppingCartIcon,
} from 'lucide-react';

interface Department {
  id: string;
  name: string;
  icon: React.ReactNode;
  description: string;
  teamSize: string;
  location: string;
  manager: string;
  keyRoles: string[];
  currentOpenings: number;
  photoGallery: string[];
}

export default function DepartmentShowcase() {
  const departments: Department[] = [
    {
      id: 'engineering',
      name: 'Engineering',
      icon: <CodeIcon className="h-5 w-5" />,
      description:
        "Our engineering team builds and maintains the technology that powers our products. From frontend to backend, infrastructure to data engineering, we're solving complex problems at scale.",
      teamSize: '45+',
      location: 'San Francisco, Remote',
      manager: 'David Chen, CTO',
      keyRoles: [
        'Frontend Engineers',
        'Backend Engineers',
        'DevOps Engineers',
        'QA Engineers',
        'Data Engineers',
      ],
      currentOpenings: 6,
      photoGallery: [
        'https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1573164713988-8665fc963095?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      ],
    },
    {
      id: 'product',
      name: 'Product',
      icon: <BrainCircuitIcon className="h-5 w-5" />,
      description:
        'Our product team defines and shapes our roadmap, working at the intersection of business strategy, customer needs, and technology capabilities to deliver solutions that delight our users.',
      teamSize: '18',
      location: 'New York, Remote',
      manager: 'Lisa Wong, VP of Product',
      keyRoles: [
        'Product Managers',
        'Product Analysts',
        'User Researchers',
        'Technical Product Managers',
      ],
      currentOpenings: 3,
      photoGallery: [
        'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1531482615713-2afd69097998?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      ],
    },
    {
      id: 'design',
      name: 'Design',
      icon: <PaletteIcon className="h-5 w-5" />,
      description:
        'Our design team crafts beautiful, intuitive experiences that bring our products to life. From research to visual design, we ensure every interaction delights our users.',
      teamSize: '12',
      location: 'San Francisco, Remote',
      manager: 'Maya Rodriguez, Design Director',
      keyRoles: [
        'Product Designers',
        'UX Designers',
        'Visual Designers',
        'UI Engineers',
        'Design Systems Specialists',
      ],
      currentOpenings: 2,
      photoGallery: [
        'https://images.unsplash.com/photo-1587440871875-191322ee64b0?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1565022536102-f7645c84354a?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1559028012-481c04fa702d?q=80&w=2036&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      ],
    },
    {
      id: 'marketing',
      name: 'Marketing',
      icon: <LineChartIcon className="h-5 w-5" />,
      description:
        'Our marketing team builds our brand, engages our audience, and drives growth. From content creation to demand generation, we connect our products with the people who need them most.',
      teamSize: '15',
      location: 'New York, Remote',
      manager: 'Emma Lewis, CMO',
      keyRoles: [
        'Content Marketers',
        'Growth Marketers',
        'Brand Designers',
        'Social Media Specialists',
        'SEO Specialists',
      ],
      currentOpenings: 4,
      photoGallery: [
        'https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?q=80&w=2032&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=2074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      ],
    },
    {
      id: 'sales',
      name: 'Sales',
      icon: <ShoppingCartIcon className="h-5 w-5" />,
      description:
        "Our sales team builds relationships with customers and helps them discover how our products can solve their challenges. We're consultative partners focused on delivering value.",
      teamSize: '20',
      location: 'San Francisco, New York, Chicago, Remote',
      manager: 'Michael Stevens, VP of Sales',
      keyRoles: [
        'Account Executives',
        'Sales Development Representatives',
        'Solutions Consultants',
        'Sales Operations',
      ],
      currentOpenings: 5,
      photoGallery: [
        'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1596524430615-b46475ddff6e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=2149&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      ],
    },
    {
      id: 'customer-success',
      name: 'Customer Success',
      icon: <HeartHandshakeIcon className="h-5 w-5" />,
      description:
        "Our customer success team ensures our customers achieve their goals using our products. We're trusted advisors who help customers get maximum value from their investment.",
      teamSize: '16',
      location: 'Austin, Remote',
      manager: 'Daniel Jackson, Head of Customer Success',
      keyRoles: [
        'Customer Success Managers',
        'Implementation Specialists',
        'Customer Support Engineers',
        'Technical Account Managers',
      ],
      currentOpenings: 3,
      photoGallery: [
        'https://images.unsplash.com/photo-1543269865-cbf427effbad?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1558222218-b7b54eede3f3?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1573497620053-ea5300f94f21?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      ],
    },
    {
      id: 'people',
      name: 'People',
      icon: <BookOpenIcon className="h-5 w-5" />,
      description:
        'Our people team builds our culture and supports our employees through their journey with us. From recruiting to professional development, we ensure our team members thrive.',
      teamSize: '10',
      location: 'San Francisco, Remote',
      manager: 'Sarah Lee, Head of People',
      keyRoles: [
        'Recruiters',
        'HR Business Partners',
        'Learning & Development Specialists',
        'People Operations',
      ],
      currentOpenings: 2,
      photoGallery: [
        'https://images.unsplash.com/photo-1516387938699-a93567ec168e?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1551836022-d5d88e9218df?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
        'https://images.unsplash.com/photo-1528605248644-14dd04022da1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      ],
    },
  ];

  return (
    <div className="container mx-auto px-4 py-12">
      <div className="mb-10 text-center">
        <h2 className="mb-2 text-3xl font-bold tracking-tight">
          Our Departments
        </h2>
        <p className="text-muted-foreground mx-auto max-w-2xl">
          Learn about the teams that make up our company and find the perfect
          fit for your skills and interests.
        </p>
      </div>

      <Tabs defaultValue={departments[0]!.id} className="w-full">
        <div className="mb-8 overflow-x-auto">
          <TabsList className="inline-flex h-10 w-auto">
            {departments.map((dept) => (
              <TabsTrigger
                key={dept.id}
                value={dept.id}
                className="flex items-center gap-2 px-4"
              >
                <span className="hidden sm:inline">{dept.icon}</span>
                <span>{dept.name}</span>
              </TabsTrigger>
            ))}
          </TabsList>
        </div>

        {departments.map((dept) => (
          <TabsContent
            key={dept.id}
            value={dept.id}
            className="animate-in fade-in-50 duration-300"
          >
            <div className="grid gap-8 lg:grid-cols-2">
              <div>
                <div className="mb-6 flex items-center">
                  <div className="bg-primary/10 text-primary mr-3 flex h-10 w-10 items-center justify-center rounded-full">
                    {dept.icon}
                  </div>
                  <h3 className="text-2xl font-semibold tracking-tight">
                    {dept.name}
                  </h3>
                </div>

                <p className="mb-6 text-lg">{dept.description}</p>

                <div className="mb-6 grid gap-6 sm:grid-cols-2">
                  <div className="rounded-lg border p-4">
                    <div className="text-muted-foreground mb-2 text-sm font-medium">
                      Team Size
                    </div>
                    <div className="text-lg font-medium">{dept.teamSize}</div>
                  </div>
                  <div className="rounded-lg border p-4">
                    <div className="text-muted-foreground mb-2 text-sm font-medium">
                      Locations
                    </div>
                    <div className="text-lg font-medium">{dept.location}</div>
                  </div>
                  <div className="rounded-lg border p-4">
                    <div className="text-muted-foreground mb-2 text-sm font-medium">
                      Lead By
                    </div>
                    <div className="text-lg font-medium">{dept.manager}</div>
                  </div>
                  <div className="rounded-lg border p-4">
                    <div className="text-muted-foreground mb-2 text-sm font-medium">
                      Open Positions
                    </div>
                    <div className="text-lg font-medium">
                      {dept.currentOpenings}
                    </div>
                  </div>
                </div>

                <div className="mb-6">
                  <h4 className="mb-3 text-lg font-medium">Key Roles</h4>
                  <ul className="grid gap-2 sm:grid-cols-2">
                    {dept.keyRoles.map((role, index) => (
                      <li
                        key={index}
                        className="flex items-center gap-2 text-sm"
                      >
                        <BriefcaseIcon className="h-4 w-4" />
                        {role}
                      </li>
                    ))}
                  </ul>
                </div>

                <Button className="rounded-full" asChild>
                  <a href="#">View Open Positions in {dept.name}</a>
                </Button>
              </div>

              <div>
                <div className="mb-4 overflow-hidden rounded-xl border shadow-sm">
                  <img
                    src={dept.photoGallery[0]}
                    alt={`${dept.name} Team`}
                    width={800}
                    height={500}
                    className="h-60 w-full object-cover md:h-80"
                  />
                </div>

                <Carousel className="w-full">
                  <CarouselContent>
                    {dept.photoGallery.map((photo, index) => (
                      <CarouselItem key={index} className="basis-1/3">
                        <Card className="border-0 p-0 shadow-none">
                          <CardContent className="flex aspect-square items-center justify-center p-1">
                            <img
                              src={photo}
                              alt={`${dept.name} Team ${index + 1}`}
                              width={300}
                              height={300}
                              className="h-full w-full rounded-md object-cover"
                            />
                          </CardContent>
                        </Card>
                      </CarouselItem>
                    ))}
                  </CarouselContent>
                  <div className="flex justify-end gap-2">
                    <CarouselPrevious />
                    <CarouselNext />
                  </div>
                </Carousel>
              </div>
            </div>
          </TabsContent>
        ))}
      </Tabs>

      <div className="bg-muted/50 mt-16 rounded-xl p-8 text-center">
        <h3 className="text-primary mb-2 text-xl font-semibold">
          Join Our Growing Team
        </h3>
        <p className="text-muted-foreground mx-auto mb-6 max-w-2xl">
          We&apos;re always looking for talented individuals across all our
          departments. Check out our current openings and find your place with
          us.
        </p>
        <Button size="lg" asChild>
          <a href="#">View All Open Positions</a>
        </Button>
      </div>
    </div>
  );
}

About this block

Department Showcase opens with a centered heading and a short subheading, then presents every department through a scrollable tab strip. Each tab carries a small icon and the department name. Selecting a tab fades in a two-column panel: the left side shows the department icon beside the name, a paragraph description, a two-by-two grid of stat tiles (team size, locations, lead, and open positions), a key roles list with briefcase icons, and a pill button linking to that department's open positions. The right side shows a large hero photo above a three-up thumbnail carousel with previous and next controls. A muted call-to-action banner with a "View All Open Positions" button closes the block.

Each department entry is independent. You can add or remove departments, rewrite the description and stat tiles, swap the photo gallery images, and update the key roles list for any team without affecting the others. The closing banner copy and button label are also free to change.

When to use

Use this block when your careers page needs to explain the shape of the organization before a candidate browses open roles. It works especially well for an AI assistant product where the teams span a wide range of disciplines, and candidates need to understand whether they fit in engineering, product, research, or go-to-market before committing to a search. The tabbed layout keeps the page compact while still giving each team a full story, making it a better fit than a flat grid of department cards when you have more than four or five teams.

A natural flow around it on a Marketing (Legacy) page:

Before

Workplace Culture to set the human context before candidates dive into org structure
A short hero or Hero Sections to anchor the page with a mission statement

After

Department Positions to list the specific open roles after a candidate picks a team
Interview Process so candidates know what happens after they apply

What you can display

The block suits any organization with named teams and a handful of photos per team. A few specific ways to fill it:

Team profiles for a product org. Populate each tab with the real lead, headcount, and hub cities so candidates get a grounded picture of who they would work with.
Research and specialist teams. Use the key roles list to surface niche titles like Prompt Engineer or Safety Researcher that candidates might not think to search for on a job board.
Remote-first transparency. Fill the Locations tile with explicit time-zone ranges or "fully distributed" to answer the question candidates ask most before they apply.

Tip: keep the photo gallery images consistent in tone across departments so the carousel feels like one cohesive culture story rather than a patchwork of unrelated shots.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

Workplace Culture to set the human context before candidates dive into org structure
A short hero or Hero Sections to anchor the page with a mission statement

After

Department Positions to list the specific open roles after a candidate picks a team
Interview Process so candidates know what happens after they apply

What you can display

The block suits any organization with named teams and a handful of photos per team. A few specific ways to fill it:

Team profiles for a product org. Populate each tab with the real lead, headcount, and hub cities so candidates get a grounded picture of who they would work with.
Research and specialist teams. Use the key roles list to surface niche titles like Prompt Engineer or Safety Researcher that candidates might not think to search for on a job board.
Remote-first transparency. Fill the Locations tile with explicit time-zone ranges or "fully distributed" to answer the question candidates ask most before they apply.

Tip: keep the photo gallery images consistent in tone across departments so the carousel feels like one cohesive culture story rather than a patchwork of unrelated shots.

Department Showcase

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display