Featured Job Slider

A horizontal slider of featured job cards with title, team, and location. Spotlights priority roles you want candidates to notice on the careers page.

import * as React from 'react';

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel';
import {
  BriefcaseIcon,
  BuildingIcon,
  MapPinIcon,
  DollarSignIcon,
  StarIcon,
  BookmarkIcon,
  TrendingUpIcon,
  BarChartIcon,
  UsersIcon,
  CalendarIcon,
} from 'lucide-react';

interface JobPosition {
  id: string;
  title: string;
  department: string;
  companyName: string;
  companyLogo: string;
  location: string;
  locationType: 'remote' | 'onsite' | 'hybrid';
  employmentType: 'full-time' | 'part-time' | 'contract' | 'internship';
  experienceLevel: 'entry' | 'mid' | 'senior' | 'lead' | 'executive';
  postedDate: string;
  salary: string;
  description: string;
  featured: boolean;
  highlight: 'new' | 'trending' | 'competitive' | 'popular' | undefined;
  perks: string[];
}

export default function FeaturedJobSlider() {
  // Sample job position data
  const jobPositions: JobPosition[] = [
    {
      id: 'senior-frontend-engineer',
      title: 'Senior Frontend Engineer',
      department: 'Engineering',
      companyName: 'TechVision',
      companyLogo: 'https://cdn.worldvectorlogo.com/logos/react-2.svg',
      location: 'San Francisco, CA',
      locationType: 'hybrid',
      employmentType: 'full-time',
      experienceLevel: 'senior',
      postedDate: '2023-09-15',
      salary: '$130,000 - $160,000',
      description:
        'Lead the development of our flagship product using React, TypeScript, and modern web technologies. Join a talented team working on cutting-edge solutions.',
      featured: true,
      highlight: 'competitive',
      perks: [
        'Flexible hours',
        'Remote options',
        'Health insurance',
        '401(k) match',
        'Learning budget',
      ],
    },
    {
      id: 'product-manager',
      title: 'Product Manager',
      department: 'Product',
      companyName: 'InnovateCorp',
      companyLogo:
        'https://upload.wikimedia.org/wikipedia/commons/3/33/Figma-logo.svg',
      location: 'New York, NY',
      locationType: 'hybrid',
      employmentType: 'full-time',
      experienceLevel: 'senior',
      postedDate: '2023-09-18',
      salary: '$120,000 - $150,000',
      description:
        'Define the product vision and strategy for our SaaS platform. Collaborate with cross-functional teams to deliver exceptional user experiences.',
      featured: true,
      highlight: 'new',
      perks: [
        'Unlimited PTO',
        'Health benefits',
        'Remote work options',
        'Stock options',
        'Catered lunches',
      ],
    },
    {
      id: 'senior-data-scientist',
      title: 'Senior Data Scientist',
      department: 'Data Science',
      companyName: 'DataDriven',
      companyLogo: 'https://cdn.worldvectorlogo.com/logos/python-5.svg',
      location: 'Remote',
      locationType: 'remote',
      employmentType: 'full-time',
      experienceLevel: 'senior',
      postedDate: '2023-09-16',
      salary: '$140,000 - $170,000',
      description:
        'Apply machine learning and statistical techniques to solve complex business problems. Work with large datasets to extract insights and drive decision-making.',
      featured: true,
      highlight: 'trending',
      perks: [
        'Remote-first culture',
        'Flexible schedule',
        'Quarterly team retreats',
        'Health & wellness stipend',
        'Home office budget',
      ],
    },
    {
      id: 'software-architect',
      title: 'Software Architect',
      department: 'Engineering',
      companyName: 'CloudNative',
      companyLogo: 'https://cdn.worldvectorlogo.com/logos/aws-2.svg',
      location: 'Seattle, WA',
      locationType: 'hybrid',
      employmentType: 'full-time',
      experienceLevel: 'lead',
      postedDate: '2023-09-14',
      salary: '$160,000 - $190,000',
      description:
        'Design and lead the development of scalable, cloud-native applications. Drive technical decisions and mentor junior engineers in best practices.',
      featured: true,
      highlight: 'competitive',
      perks: [
        'Competitive salary',
        'Stock options',
        '401(k) with 6% match',
        'Comprehensive healthcare',
        'Professional development budget',
      ],
    },
    {
      id: 'ux-design-lead',
      title: 'UX Design Lead',
      department: 'Design',
      companyName: 'CreativeMinds',
      companyLogo: 'https://cdn.worldvectorlogo.com/logos/adobe-2.svg',
      location: 'Los Angeles, CA',
      locationType: 'onsite',
      employmentType: 'full-time',
      experienceLevel: 'lead',
      postedDate: '2023-09-17',
      salary: '$130,000 - $160,000',
      description:
        'Lead a team of designers to create intuitive, engaging user experiences. Collaborate with product and engineering teams to deliver cohesive products.',
      featured: true,
      highlight: 'popular',
      perks: [
        'Creative studio environment',
        'Latest design tools',
        'Healthcare coverage',
        'Gym membership',
        'Casual dress code',
      ],
    },
    {
      id: 'backend-engineer',
      title: 'Backend Engineer',
      department: 'Engineering',
      companyName: 'ServerStack',
      companyLogo: 'https://cdn.worldvectorlogo.com/logos/nodejs-1.svg',
      location: 'Boston, MA',
      locationType: 'hybrid',
      employmentType: 'full-time',
      experienceLevel: 'mid',
      postedDate: '2023-09-20',
      salary: '$115,000 - $140,000',
      description:
        'Develop scalable backend services and APIs using modern technologies. Collaborate with frontend teams to integrate user interfaces.',
      featured: true,
      highlight: 'new',
      perks: [
        'Flexible working hours',
        'Remote options',
        'Healthcare',
        'Wellness program',
        'Professional development',
      ],
    },
  ];

  // Calculate days ago from date
  const getDaysAgo = (dateString: string) => {
    const postDate = new Date(dateString);
    const today = new Date();
    const diffTime = Math.abs(today.getTime() - postDate.getTime());
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    if (diffDays === 0) {
      return 'Today';
    } else if (diffDays === 1) {
      return 'Yesterday';
    } else {
      return `${diffDays} days ago`;
    }
  };

  // Format location type for display
  const formatLocationType = (type: string) => {
    switch (type) {
      case 'remote':
        return 'Remote';
      case 'hybrid':
        return 'Hybrid';
      case 'onsite':
        return 'On-site';
      default:
        return type;
    }
  };

  // Format employment type for display
  const formatEmploymentType = (type: string) => {
    switch (type) {
      case 'full-time':
        return 'Full-time';
      case 'part-time':
        return 'Part-time';
      case 'contract':
        return 'Contract';
      case 'internship':
        return 'Internship';
      default:
        return type;
    }
  };

  // Get appropriate highlight icon and color
  const getHighlightDetails = (highlight: JobPosition['highlight']) => {
    switch (highlight) {
      case 'new':
        return {
          icon: <StarIcon className="h-4 w-4" />,
          label: 'New',
          color:
            'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
        };
      case 'trending':
        return {
          icon: <TrendingUpIcon className="h-4 w-4" />,
          label: 'Trending',
          color:
            'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
        };
      case 'competitive':
        return {
          icon: <BarChartIcon className="h-4 w-4" />,
          label: 'Competitive',
          color:
            'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
        };
      case 'popular':
        return {
          icon: <UsersIcon className="h-4 w-4" />,
          label: 'Popular',
          color:
            'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300',
        };
      default:
        return null;
    }
  };

  return (
    <div className="container mx-auto px-4 py-12">
      <div className="mb-10 text-center">
        <h2 className="mb-4 text-3xl font-bold tracking-tight">
          Featured Opportunities
        </h2>
        <p className="text-muted-foreground mx-auto max-w-2xl">
          Discover our handpicked selection of top job opportunities from
          leading companies. These positions offer competitive salaries, great
          benefits, and exciting career growth.
        </p>
      </div>

      <Carousel
        opts={{
          align: 'start',
          loop: true,
        }}
        className="w-full"
      >
        <CarouselContent className="-ml-2 md:-ml-4">
          {jobPositions.map((job) => {
            const highlightDetails = job.highlight
              ? getHighlightDetails(job.highlight)
              : null;

            return (
              <CarouselItem
                key={job.id}
                className="pl-2 sm:basis-1/2 md:pl-4 lg:basis-1/3"
              >
                <Card className="flex h-full flex-col">
                  <CardHeader className="pb-2">
                    <div className="flex items-start justify-between">
                      <div className="bg-card relative flex h-12 w-12 items-center justify-center rounded-md border">
                        <div className="absolute flex h-full w-full items-center justify-center">
                          {job.companyLogo ? (
                            <img
                              src={job.companyLogo}
                              alt={job.companyName}
                              width={48}
                              height={48}
                              className="h-12 w-12 object-contain"
                            />
                          ) : (
                            <BuildingIcon className="text-muted-foreground h-6 w-6" />
                          )}
                        </div>
                      </div>
                      {highlightDetails && (
                        <Badge
                          variant="secondary"
                          className={`flex items-center gap-1 ${highlightDetails.color}`}
                        >
                          {highlightDetails.icon}
                          {highlightDetails.label}
                        </Badge>
                      )}
                    </div>
                    <div className="mt-3">
                      <CardTitle>{job.title}</CardTitle>
                      <div className="mt-1 flex items-center gap-1">
                        <BuildingIcon className="text-muted-foreground h-3.5 w-3.5" />
                        <CardDescription className="!mt-0">
                          {job.companyName}
                        </CardDescription>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="flex flex-grow flex-col gap-3">
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <MapPinIcon className="text-muted-foreground h-4 w-4" />
                        <span className="text-sm">{job.location}</span>
                        <Badge variant="outline" className="ml-auto text-xs">
                          {formatLocationType(job.locationType)}
                        </Badge>
                      </div>
                      <div className="flex items-center gap-2">
                        <BriefcaseIcon className="text-muted-foreground h-4 w-4" />
                        <span className="text-sm">{job.department}</span>
                        <Badge variant="outline" className="ml-auto text-xs">
                          {formatEmploymentType(job.employmentType)}
                        </Badge>
                      </div>
                      <div className="flex items-center gap-2">
                        <DollarSignIcon className="text-muted-foreground h-4 w-4" />
                        <span className="text-sm">{job.salary}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <CalendarIcon className="text-muted-foreground h-4 w-4" />
                        <span className="text-sm">
                          Posted {getDaysAgo(job.postedDate)}
                        </span>
                      </div>
                    </div>

                    <p className="text-muted-foreground mt-2 text-sm">
                      {job.description}
                    </p>

                    <div className="mt-auto">
                      <p className="text-muted-foreground mb-1.5 text-xs font-medium">
                        Perks & Benefits:
                      </p>
                      <div className="flex flex-wrap gap-1.5">
                        {job.perks.slice(0, 3).map((perk, index) => (
                          <Badge
                            variant="secondary"
                            key={index}
                            className="text-xs"
                          >
                            {perk}
                          </Badge>
                        ))}
                        {job.perks.length > 3 && (
                          <Badge variant="outline" className="text-xs">
                            +{job.perks.length - 3} more
                          </Badge>
                        )}
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="flex gap-3 pt-2">
                    <Button variant="outline" size="sm" className="w-1/2">
                      <BookmarkIcon className="mr-1 h-4 w-4" />
                      Save
                    </Button>
                    <Button size="sm" className="w-1/2">
                      Apply Now
                    </Button>
                  </CardFooter>
                </Card>
              </CarouselItem>
            );
          })}
        </CarouselContent>
        <div className="mt-8 flex justify-center">
          <CarouselPrevious className="relative static mr-2 lg:absolute" />
          <CarouselNext className="relative static ml-2 lg:absolute" />
        </div>
      </Carousel>

      <div className="mt-12 text-center">
        <Button asChild variant="default" size="lg" className="px-8">
          <a href="/careers">View All Positions</a>
        </Button>
      </div>
    </div>
  );
}

About this block

Featured Job Slider opens with a centered heading and a short supporting paragraph, then presents a looping carousel of job cards. Each card holds a company logo, a job title, a company name, and a highlight badge (New, Trending, Competitive, or Popular) in the header. The body lists location with a remote or onsite badge, department with an employment type badge, salary range, and posted date, each paired with a small icon. Below those details sits a short role description and a row of perks badges, trimmed to three visible items with an overflow count. Two buttons at the card footer let a visitor save the role or apply immediately. Previous and Next arrows sit below the carousel, and a "View All Positions" button closes the section.

Every piece of content is independent. You can swap the heading copy, replace or reorder jobs, add or remove perks, and drop the highlight badge from any card without affecting the others. The carousel shows one card on small screens, two on medium, and three on large, so the number of jobs you include is flexible.

When to use

Reach for this block when you want to surface a curated shortlist of priority roles above a full listing page, rather than forcing visitors to scan every open position at once. It works well on a real estate marketplace careers landing page where a handful of high-demand roles like market analysts, acquisition managers, or field agents deserve more visibility than a plain list gives them. The carousel format lets you spotlight six or more roles in the same vertical space a static two-column grid would use for three.

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

Before

Workplace Culture to give candidates a feel for the team before they see open roles
Company Benefits to reinforce the offer while interest is still building

After

Job Board so visitors who want to browse every role have a full searchable list right below
Application Form if you want a direct apply path at the bottom of the page

What you can display

The natural fit is your most strategically important open roles, each with full compensation and location details. A few other ways to use the frame:

Seasonal hiring push. Rotate in roles tied to a busy period, mark them with the "New" badge, and swap them out once positions fill.
Department spotlights. Feature one senior role per team so candidates browsing any function can see a representative opening without digging into a full board.
Referral targets. Surface the hardest-to-fill roles with a "Competitive" or "Popular" badge to signal urgency to employees sharing the page with their networks.

Tip: keep perks to five items per card so the overflow badge never reads "+3 more" or higher, which can make the offer feel hidden.

About this block

When to use

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

Before

Workplace Culture to give candidates a feel for the team before they see open roles
Company Benefits to reinforce the offer while interest is still building

After

Job Board so visitors who want to browse every role have a full searchable list right below
Application Form if you want a direct apply path at the bottom of the page

What you can display

The natural fit is your most strategically important open roles, each with full compensation and location details. A few other ways to use the frame:

Seasonal hiring push. Rotate in roles tied to a busy period, mark them with the "New" badge, and swap them out once positions fill.
Department spotlights. Feature one senior role per team so candidates browsing any function can see a representative opening without digging into a full board.
Referral targets. Surface the hardest-to-fill roles with a "Competitive" or "Popular" badge to signal urgency to employees sharing the page with their networks.

Tip: keep perks to five items per card so the overflow badge never reads "+3 more" or higher, which can make the offer feel hidden.

Featured Job Slider

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display