# Interview Format

> A question and answer layout with a guest portrait and intro. Use it to publish interviews in a clear, readable format on an editorial blog.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/marketing-blog-sections-interview-format).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/marketing-blog-sections-interview-format
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/marketing-blog-sections-interview-format-light-21c752bf69df6d97.png
- Registry item: https://www.shadcn-ui-blocks.com/r/marketing-blog-sections-interview-format.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/marketing-blog-sections-interview-format.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `class-variance-authority`, `lucide-react`, `radix-ui`

## Files

### `components/blocks/marketing/blog-sections/interview-format.tsx`

```tsx
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Separator } from '@/components/ui/separator';
import {
  QuoteIcon, MicIcon, CalendarIcon, ClockIcon, Share2Icon } from 'lucide-react';
import { Linkedin, Twitter } from '@/components/ui/brand-icons';

// Define types
interface Interviewee {
  name: string;
  title: string;
  company: string;
  avatarUrl: string;
  bio: string;
  linkedinUrl?: string;
  twitterUrl?: string;
}

interface QnaPair {
  question: string;
  answer: string | string[]; // Allow string or array of paragraphs
}

interface InterviewPost {
  id: number;
  title: string;
  subtitle: string;
  category: string;
  date: string;
  readTime: string;
  interviewee: Interviewee;
  introduction: string;
  qna: QnaPair[];
  conclusion?: string;
}

// Data for the interview post
const interviewData: InterviewPost = {
  id: 1,
  title: 'Scaling Marketing Teams: An Interview with Jane Doe',
  subtitle:
    'Insights on structure, hiring, and fostering culture in high-growth marketing departments.',
  category: 'Leadership & Management',
  date: 'April 28, 2023',
  readTime: '15 min read',
  interviewee: {
    name: 'Jane Doe',
    title: 'VP of Marketing',
    company: 'Innovate Solutions Inc.',
    avatarUrl:
      'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    bio: "Jane has over 12 years of experience leading marketing teams at fast-growing tech companies. She's passionate about building efficient, data-driven marketing engines.",
    linkedinUrl: '#',
    twitterUrl: '#',
  },
  introduction:
    'We sat down with Jane Doe, VP of Marketing at Innovate Solutions, to discuss the challenges and strategies involved in scaling marketing teams effectively. Jane shares her valuable insights on structuring teams for growth, hiring top talent, and maintaining a positive team culture during rapid expansion.',
  qna: [
    {
      question:
        "What's the biggest challenge you've faced when scaling a marketing team?",
      answer: [
        "The biggest challenge is often maintaining alignment and communication as the team grows. When you're small, everyone knows what everyone else is doing. As you add more people and potentially specialized roles (like SEO, PPC, content, social), ensuring everyone is working towards the same core objectives and that information flows freely becomes critical.",
        'It requires deliberate effort to establish clear goals, regular check-ins, and robust internal communication processes. Without this, you risk creating silos where teams optimize for their own metrics without considering the broader impact.',
      ],
    },
    {
      question:
        'How do you structure your marketing team for optimal growth and collaboration?',
      answer:
        "There's no single perfect structure, as it depends on the company's stage and goals. However, I've found success with a hybrid model. We have core functional teams (e.g., Demand Gen, Content, Product Marketing) but also create cross-functional 'pods' or 'squads' focused on specific initiatives or customer segments. This encourages collaboration and ensures different perspectives are considered. Clear roles, responsibilities, and reporting lines within this structure are essential.",
    },
    {
      question:
        'What key qualities do you look for when hiring for a rapidly growing team?',
      answer:
        "Beyond the necessary functional skills, adaptability and a proactive mindset are crucial. In a fast-growing environment, roles can evolve, priorities can shift, and individuals need to be comfortable with ambiguity and willing to take initiative. Strong communication skills and a collaborative spirit are also non-negotiable. I look for people who are not just skilled marketers, but also great team players who are eager to learn and contribute to the team's overall success.",
    },
    {
      question:
        'How do you maintain a positive team culture during periods of high growth and pressure?',
      answer: [
        "Culture is paramount. It starts with hiring people who align with the company's values. Transparency is key – being open about challenges and celebrating wins, big and small. Regular team-building activities, even simple virtual ones, help foster connections.",
        'Empowering team members and providing opportunities for growth and development are also vital. Making sure people feel valued, heard, and supported, even when things are hectic, goes a long way in maintaining morale and preventing burnout.',
      ],
    },
  ],
  conclusion:
    'Scaling a marketing team presents unique challenges, but with intentional structure, a focus on hiring adaptable talent, and a commitment to fostering a transparent and supportive culture, growth can be managed effectively. Thanks to Jane Doe for sharing her invaluable experience and insights.',
};

export default function BlogSectionInterviewFormat() {
  const {
    title,
    subtitle,
    category,
    date,
    readTime,
    interviewee,
    introduction,
    qna,
    conclusion,
  } = interviewData;

  return (
    <section className="bg-muted/40 py-24">
      <div className="container mx-auto max-w-4xl px-4 md:px-6 2xl:max-w-[1400px]">
        <article className="bg-background rounded-lg p-8 shadow-lg md:p-12">
          {/* Header */}
          <header className="mb-12 space-y-6">
            <div className="space-y-3">
              <Badge variant="outline">{category}</Badge>
              <h1 className="text-3xl font-bold tracking-tight md:text-4xl">
                {title}
              </h1>
              <p className="text-muted-foreground text-lg">{subtitle}</p>
            </div>
            <div className="text-muted-foreground flex flex-wrap items-center gap-4 text-sm">
              <span className="flex items-center">
                <CalendarIcon className="mr-1.5 h-4 w-4" /> Published {date}
              </span>
              <span className="flex items-center">
                <ClockIcon className="mr-1.5 h-4 w-4" /> {readTime}
              </span>
            </div>
          </header>

          {/* Interviewee Profile */}
          <div className="bg-muted mb-12 flex flex-col items-start gap-6 rounded-md p-6 sm:flex-row">
            <Avatar className="border-background h-24 w-24 border-4">
              <AvatarImage src={interviewee.avatarUrl} alt={interviewee.name} />
              <AvatarFallback>
                {interviewee.name
                  .split(' ')
                  .map((n) => n[0])
                  .join('')}
              </AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <h2 className="text-xl font-semibold">{interviewee.name}</h2>
              <p className="text-primary font-medium">
                {interviewee.title}, {interviewee.company}
              </p>
              <p className="text-muted-foreground mt-2 text-sm">
                {interviewee.bio}
              </p>
              <div className="mt-3 flex gap-2">
                {interviewee.linkedinUrl && (
                  <Button
                    variant="ghost"
                    size="icon"
                    className="text-muted-foreground hover:text-foreground"
                    asChild
                  >
                    <a href={interviewee.linkedinUrl} target="_blank">
                      <Linkedin className="h-4 w-4" />
                    </a>
                  </Button>
                )}
                {interviewee.twitterUrl && (
                  <Button
                    variant="ghost"
                    size="icon"
                    className="text-muted-foreground hover:text-foreground"
                    asChild
                  >
                    <a href={interviewee.twitterUrl} target="_blank">
                      <Twitter className="h-4 w-4" />
                    </a>
                  </Button>
                )}
              </div>
            </div>
          </div>

          {/* Introduction */}
          <div className="prose prose-lg mb-12 max-w-none">
            <p className="lead text-muted-foreground text-xl">{introduction}</p>
          </div>

          <Separator className="mb-12" />

          {/* Q&A Section */}
          <div className="space-y-10">
            {qna.map((item, index) => (
              <div key={index} className="space-y-6">
                {/* Question */}
                <div className="flex items-start gap-3">
                  <div className="flex-shrink-0 pt-1">
                    <MicIcon className="text-primary h-5 w-5" />
                  </div>
                  <h3 className="text-primary text-xl font-semibold">
                    {item.question}
                  </h3>
                </div>

                {/* Answer */}
                <div className="border-border relative ml-2.5 border-l-2 pl-8">
                  <QuoteIcon className="text-border bg-background absolute top-1 -left-3 h-5 w-5" />
                  <div className="prose prose-lg text-foreground max-w-none">
                    {Array.isArray(item.answer) ? (
                      item.answer.map((paragraph, pIndex) => (
                        <p key={pIndex}>{paragraph}</p>
                      ))
                    ) : (
                      <p>{item.answer}</p>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Conclusion */}
          {conclusion && (
            <>
              <Separator className="my-12" />
              <div className="prose prose-lg mt-12 max-w-none">
                <p>{conclusion}</p>
              </div>
            </>
          )}

          {/* Footer/Share */}
          <Separator className="my-12" />
          <footer className="flex justify-center">
            <Button variant="outline" className="gap-2">
              <Share2Icon className="h-4 w-4" />
              Share this Interview
            </Button>
          </footer>
        </article>
      </div>
    </section>
  );
}

// Add basic prose styles if not already globally configured
// You might need to install @tailwindcss/typography
// and add require('@tailwindcss/typography') to your tailwind.config.js plugins.
// This is a basic placeholder - customize as needed.
const styles = `
.prose {
  color: var(--foreground);
}
.prose p {
  margin-bottom: 1.25em;
}
.prose h1, .prose h2, .prose h3 {
  color: var(--foreground);
  margin-bottom: 0.8em;
}
.prose a {
  color: var(--primary);
  text-decoration: none;
}
.prose a:hover {
  text-decoration: underline;
}
.prose blockquote {
  border-left-color: var(--border);
  color: var(--muted-foreground);
  font-style: italic;
  padding-left: 1em;
  margin-left: 0;
}
`;

// Append styles - In a real app, manage this through global CSS or a CSS-in-JS solution
if (typeof window !== 'undefined') {
  const styleSheet = document.createElement('style');
  styleSheet.type = 'text/css';
  styleSheet.innerText = styles;
  document.head.appendChild(styleSheet);
}
```

### `components/ui/button.tsx`

```tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/80",
        outline:
          "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
        ghost:
          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
        destructive:
          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default:
          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        icon: "size-9",
        "icon-xs":
          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
        "icon-sm":
          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
        "icon-lg": "size-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot.Root : "button"

  return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
```

### `components/ui/badge.tsx`

```tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
        secondary:
          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
        destructive:
          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
        outline:
          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
        ghost:
          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
        link: "text-primary underline-offset-4 hover:underline",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "span"

  return (
    <Comp
      data-slot="badge"
      data-variant={variant}
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
```

### `components/ui/avatar.tsx`

```tsx
"use client"

import * as React from "react"
import { Avatar as AvatarPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Avatar({
  className,
  size = "default",
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
  size?: "default" | "sm" | "lg"
}) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      data-size={size}
      className={cn(
        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
        className
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn(
        "aspect-square size-full rounded-full object-cover",
        className
      )}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
        className
      )}
      {...props}
    />
  )
}

function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="avatar-badge"
      className={cn(
        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group"
      className={cn(
        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroupCount({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group-count"
      className={cn(
        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
        className
      )}
      {...props}
    />
  )
}

export {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarBadge,
}
```

### `components/ui/separator.tsx`

```tsx
"use client";

import * as React from "react";
import { Separator as SeparatorPrimitive } from "radix-ui";

import { cn } from "@/lib/utils";

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px ",
        className
      )}
      {...props}
    />
  );
}

export { Separator };
```

### `components/ui/brand-icons.tsx`

```tsx
import type { ReactNode, SVGProps } from "react"

type BrandIconProps = Omit<SVGProps<SVGSVGElement>, "color"> & {
  title?: string
  color?: string
  size?: number | string
}

/**
 * The brand glyphs Simple Icons has dropped at their owners' request. Every
 * other brand comes straight from the package, imported where it is used
 * (`import { SiGithub } from "@icons-pack/react-simple-icons"`); these three
 * keep the last path Simple Icons published, on its 24 unit grid, and take the
 * package's props (title, color, size) so both read alike in a block.
 */
function BrandSvg({
  children,
  color = "currentColor",
  size = 24,
  title,
  ...props
}: BrandIconProps & { children: ReactNode }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      fill={color}
      viewBox="0 0 24 24"
      {...props}
    >
      <title>{title}</title>
      {children}
    </svg>
  )
}

function Linkedin(props: BrandIconProps) {
  return (
    <BrandSvg title="LinkedIn" {...props}>
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
    </BrandSvg>
  )
}

function Slack(props: BrandIconProps) {
  return (
    <BrandSvg title="Slack" {...props}>
      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
    </BrandSvg>
  )
}

function Twitter(props: BrandIconProps) {
  return (
    <BrandSvg title="Twitter" {...props}>
      <path d="M23.4 4.8c-.8.4-1.7.6-2.6.7.9-.6 1.6-1.5 2-2.5-.9.5-1.9.9-2.9 1.1a4.5 4.5 0 0 0-7.8 4.1A12.8 12.8 0 0 1 2.8 3.5a4.5 4.5 0 0 0 1.4 6.1c-.7 0-1.4-.2-2-.6v.1c0 2.2 1.6 4.1 3.6 4.5-.4.1-.8.2-1.2.2-.3 0-.6 0-.9-.1.6 1.8 2.2 3.1 4.2 3.1a9.1 9.1 0 0 1-5.6 1.9c-.4 0-.7 0-1.1-.1a12.8 12.8 0 0 0 7 2c8.3 0 12.9-6.9 12.9-12.9v-.6c.9-.6 1.7-1.4 2.3-2.3Z" />
    </BrandSvg>
  )
}

export { Linkedin, Slack, Twitter }
```