Feature Section

1import * as React from "react";
2import { ArrowRight, Boxes, Gauge, ShieldCheck, Sparkles } from "lucide-react";
3 
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7 
8const features = [
9  {
10    icon: Gauge,
11    title: "Move at product speed",
12    description:
13      "Turn briefs into aligned plans, decisions and releases without stitching together five different tools.",
14  },
15  {
16    icon: Boxes,
17    title: "One shared system",
18    description:
19      "Connect projects, docs and feedback in a flexible workspace your whole team can understand.",
20  },
21  {
22    icon: ShieldCheck,
23    title: "Ready for serious work",
24    description:
25      "Granular permissions, audit history and dependable infrastructure arrive as standard.",
26  },
27];
28 
29function FeatureSection01({
30  className,
31  ...props
32}: React.ComponentProps<"section">) {
33  return (
34    <section
35      className={cn("px-5 py-24 sm:px-8 sm:py-32", className)}
36      data-slot="feature-section"
37      id="product"
38      {...props}
39    >
40      <div className="mx-auto max-w-7xl">
41        <div className="grid gap-10 lg:grid-cols-[.8fr_1.2fr] lg:items-end">
42          <div>
43            <Badge variant="secondary">
44              <Sparkles /> Built for momentum
45            </Badge>
46            <h2 className="mt-6 text-balance text-4xl font-semibold tracking-[-.05em] sm:text-6xl">
47              Everything important stays in motion.
48            </h2>
49          </div>
50          <div className="lg:pb-2">
51            <p className="max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
52              A calm operating system for modern teams. Flexible enough for
53              early ideas, structured enough for the work that follows.
54            </p>
55            <Button className="mt-6" variant="outline">
56              Explore the platform <ArrowRight />
57            </Button>
58          </div>
59        </div>
60        <div className="mt-14 grid gap-4 md:grid-cols-3">
61          {features.map(({ icon: Icon, title, description }, index) => (
62            <article
63              className="group rounded-[1.75rem] border border-foreground/10 bg-background p-6 transition-[transform,border-color,box-shadow] duration-300 hover:-translate-y-1 hover:border-primary/20 hover:shadow-[0_30px_80px_-60px_var(--primary)] sm:p-8"
64              key={title}
65            >
66              <div className="flex items-center justify-between">
67// … truncated