Features

1"use client";23import { cn } from "@/lib/utils";45type Features01Props = {6  className?: string;7};89const FEATURES = [10  {11    title: "Token ready",12    description: "Restyle blocks with your theme tokens.",13    image: "/assets/brand/demos/attachments/attachment-1.png",14  },15  {16    title: "Copy and ship",17    description: "Install a block and drop it into a page.",18    image: "/assets/brand/demos/attachments/attachment-2.png",19  },20  {21    title: "Built to compose",22    description: "Mix sections without fighting the layout.",23    image: "/assets/brand/demos/attachments/attachment-3.png",24  },25] as const;2627export function Features01({ className }: Features01Props) {28  return (29    <section className={cn("@container w-full bg-background", className)}>30      <div className="mx-auto w-full max-w-4xl px-6 py-14">31        <ul className="grid w-full gap-4 @[40rem]:grid-cols-3">32          {FEATURES.map((feature) => (33            <li34              key={feature.title}35              className="rounded-xl border border-border p-2"36            >37              <div className="aspect-[16/10] w-full overflow-hidden rounded-sm bg-muted">38                <img39                  src={feature.image}40                  alt=""41                  className="size-full object-cover"42                />43              </div>44              <div className="px-1 pt-3 pb-1">45                <h3 className="text-sm font-medium tracking-wide text-foreground">46                  {feature.title}47                </h3>48                <p className="mt-1.5 text-sm tracking-wide text-muted-foreground">49                  {feature.description}50                </p>51              </div>52            </li>53          ))}54        </ul>55      </div>56    </section>57  );58}

1"use client";23import { useState } from "react";4import {5  Accordion,6  AccordionContent,7  AccordionItem,8  AccordionTrigger,9} from "@/components/ui/accordion";10import { cn } from "@/lib/utils";1112type Features02Props = {13  className?: string;14};1516const FEATURES = [17  {18    value: "1",19    title: "Token ready",20    description: "Restyle every block with your colors, radii, and type.",21    image: "/assets/brand/demos/attachments/attachment-1.png",22  },23  {24    value: "2",25    title: "Copy and ship",26    description: "Install a block, drop it in a page, and keep moving.",27    image: "/assets/brand/demos/attachments/attachment-2.png",28  },29  {30    value: "3",31    title: "Built to compose",32    description: "Mix heroes, nav, and sections without fighting the layout.",33    image: "/assets/brand/demos/attachments/attachment-3.png",34  },35] as const;3637export function Features02({ className }: Features02Props) {38  const [open, setOpen] = useState("1");39  const index = Math.max(40    0,41    FEATURES.findIndex((feature) => feature.value === open),42  );4344  return (45    <section className={cn("@container w-full bg-background", className)}>46      <div47        data-slot="block-split"48        className="mx-auto flex w-full max-w-4xl flex-col gap-6 px-6 py-14 lg:flex-row lg:items-stretch lg:gap-10"49      >50        <div className="flex min-w-0 flex-1 flex-col justify-center">51          <Accordion52            type="single"53            collapsible={false}54            value={open}55            onValueChange={(value) => {56              if (typeof value === "string" && value) setOpen(value);57            }}58          >59            {FEATURES.map((feature) => (60              <AccordionItem key={feature.value} value={feature.value}>61                <AccordionTrigger indicator="plus">62                  {feature.title}63                </AccordionTrigger>64                <AccordionContent>{feature.description}</AccordionContent>65              </AccordionItem>66            ))}67          </Accordion>68        </div>6970        <div className="relative min-h-[16rem] flex-1 overflow-hidden rounded-md bg-muted lg:min-h-[20rem]">71          <div72            className="absolute inset-x-0 top-0 w-full will-change-transform transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]"73            style={{74              height: `${FEATURES.length * 100}%`,75              transform: `translate3d(0, -${(index * 100) / FEATURES.length}%, 0)`,76            }}77          >78            {FEATURES.map((feature) => (79              <div80                key={feature.value}81                className="w-full"82                style={{ height: `${100 / FEATURES.length}%` }}83              >84                <img85                  src={feature.image}86                  alt=""87                  className="size-full object-cover"88                />89              </div>90            ))}91          </div>92        </div>93      </div>94    </section>95  );96}

1"use client";23import { cn } from "@/lib/utils";45type Features03Props = {6  className?: string;7};89const FEATURES = [10  {11    title: "Token ready",12    description: "Restyle every block with your colors, radii, and type.",13    image: "/assets/brand/demos/attachments/attachment-1.png",14  },15  {16    title: "Copy and ship",17    description: "Install a block, drop it in a page, and keep moving.",18    image: "/assets/brand/demos/attachments/attachment-2.png",19  },20  {21    title: "Built to compose",22    description: "Mix heroes, nav, and sections without fighting the layout.",23    image: "/assets/brand/demos/attachments/attachment-3.png",24  },25] as const;2627export function Features03({ className }: Features03Props) {28  return (29    <section className={cn("w-full bg-background", className)}>30      <div className="mx-auto flex w-full max-w-4xl flex-col gap-12 px-6 py-14 lg:gap-16">31        {FEATURES.map((feature, index) => {32          const flip = index % 2 === 1;3334          return (35            <div36              key={feature.title}37              data-slot="block-split"38              className={cn(39                "flex flex-col gap-6 lg:flex-row lg:items-center lg:gap-10",40                flip && "lg:flex-row-reverse",41              )}42            >43              <div className="min-h-[14rem] flex-1 overflow-hidden rounded-md bg-muted lg:min-h-[18rem]">44                <img45                  src={feature.image}46                  alt=""47                  className="size-full object-cover"48                />49              </div>50              <div className="flex flex-1 flex-col justify-center">51                <h3 className="text-base font-medium tracking-wide text-foreground">52                  {feature.title}53                </h3>54                <p className="mt-2 max-w-sm text-sm tracking-wide text-muted-foreground">55                  {feature.description}56                </p>57              </div>58            </div>59          );60        })}61      </div>62    </section>63  );64}

1"use client";23import {4  Avatar,5  AvatarFallback,6  AvatarGroup,7  AvatarGroupCount,8  AvatarImage,9} from "@/components/ui/avatar";10import {11  Table,12  TableBody,13  TableCell,14  TableHead,15  TableHeader,16  TableRow,17} from "@/components/ui/table";18import { cn } from "@/lib/utils";1920type Features04Props = {21  className?: string;22};2324const ROWS = [25  { feature: "Realtime sync", ours: true, others: false },26  { feature: "Shared workspaces", ours: true, others: true },27  { feature: "Keyboard-first UI", ours: true, others: false },28  { feature: "Guest access", ours: true, others: false },29  { feature: "Audit history", ours: true, others: false },30] as const;3132const OTHER_LOGOS = [33  "/assets/icons/logos/slack.svg",34  "/assets/icons/logos/notion.svg",35  "/assets/icons/logos/figma.svg",36] as const;3738function CheckIcon({ className }: { className?: string }) {39  return (40    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>41      <path42        d="M5 12.5 10 17.5 19 7.5"43        stroke="currentColor"44        strokeWidth="1.5"45        strokeLinecap="round"46        strokeLinejoin="round"47      />48    </svg>49  );50}5152function DashIcon({ className }: { className?: string }) {53  return (54    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>55      <path56        d="M6 12h12"57        stroke="currentColor"58        strokeWidth="1.5"59        strokeLinecap="round"60      />61    </svg>62  );63}6465function CellMark({ on }: { on: boolean }) {66  return on ? (67    <CheckIcon className="size-4 text-foreground" />68  ) : (69    <DashIcon className="size-4 text-muted-foreground" />70  );71}7273function LogoAvatar({ src }: { src: string }) {74  return (75    <Avatar size="xs">76      <AvatarImage77        src={src}78        alt=""79        className="object-contain p-1 brightness-0 dark:invert"80      />81      <AvatarFallback />82    </Avatar>83  );84}8586export function Features04({ className }: Features04Props) {87  return (88    <section className={cn("w-full bg-background", className)}>89      <div className="mx-auto w-full max-w-3xl px-6 py-14">90        <Table>91          <TableHeader>92            <TableRow>93              <TableHead className="w-[46%]">Feature</TableHead>94              <TableHead className="w-[27%]">95                <span className="inline-flex items-center gap-2 text-foreground">96                  <LogoAvatar src="/assets/icons/logos/linear.svg" />97                  Linear98                </span>99              </TableHead>100              <TableHead className="w-[27%]">101                <AvatarGroup overlap="sm">102                  {OTHER_LOGOS.map((src) => (103                    <LogoAvatar key={src} src={src} />104                  ))}105                  <AvatarGroupCount className="size-6 text-[10px]">106                    +4107                  </AvatarGroupCount>108                </AvatarGroup>109              </TableHead>110            </TableRow>111          </TableHeader>112          <TableBody>113            {ROWS.map((row) => (114              <TableRow key={row.feature}>115                <TableCell className="text-foreground">{row.feature}</TableCell>116                <TableCell>117                  <CellMark on={row.ours} />118                </TableCell>119                <TableCell>120                  <CellMark on={row.others} />121                </TableCell>122              </TableRow>123            ))}124          </TableBody>125        </Table>126      </div>127    </section>128  );129}