Testimonial Section

1import * as React from "react";
2import { Quote, Sparkles } from "lucide-react";
3 
4import { Avatar, AvatarFallback } from "@/components/ui/avatar";
5import { Badge } from "@/components/ui/badge";
6import { cn } from "@/lib/utils";
7 
8const testimonials = [
9  {
10    quote:
11      "Northstar replaced the weekly status meeting with a workspace people actually trust.",
12    name: "Mina Park",
13    role: "VP Product, Arc",
14  },
15  {
16    quote:
17      "It gives our studio structure without sanding away the way creative teams naturally work.",
18    name: "Jon Bell",
19    role: "Founder, Common",
20  },
21  {
22    quote:
23      "We shipped the migration in days and immediately had a clearer view of every decision.",
24    name: "Lena Ortiz",
25    role: "COO, Linear North",
26  },
27];
28 
29function TestimonialSection01({
30  className,
31  ...props
32}: React.ComponentProps<"section">) {
33  return (
34    <section
35      className={cn(
36        "bg-foreground px-5 py-24 text-background sm:px-8 sm:py-32",
37        className,
38      )}
39      data-slot="testimonial-section"
40      id="customers"
41      {...props}
42    >
43      <div className="mx-auto max-w-7xl">
44        <Badge
45          className="border-background/15 bg-background/10 text-background"
46          variant="outline"
47        >
48          <Sparkles /> Customer stories
49        </Badge>
50        <div className="mt-7 flex flex-col justify-between gap-5 md:flex-row md:items-end">
51          <h2 className="max-w-3xl text-balance text-4xl font-semibold tracking-[-.05em] sm:text-6xl">
52            Trusted when the work really matters.
53          </h2>
54          <p className="max-w-sm text-sm leading-relaxed text-background/60">
55            From small studios to product organizations, teams use Northstar to
56            keep context close and progress visible.
57          </p>
58        </div>
59        <div className="mt-14 grid gap-4 lg:grid-cols-3">
60          {testimonials.map(({ quote, name, role }) => (
61            <figure
62              className="flex min-h-72 flex-col rounded-[1.75rem] border border-background/12 bg-background/[.055] p-6 sm:p-8"
63              key={name}
64            >
65              <Quote className="size-6 text-primary" />
66              <blockquote className="mt-8 text-balance text-xl font-medium leading-relaxed tracking-[-.025em]">
67                “{quote}”
68              </blockquote>
69              <figcaption className="mt-auto flex items-center gap-3 pt-8">
70                <Avatar>
71                  <AvatarFallback>
72                    {name
73// … truncated