Items Section

1import {
2  BlocksIcon,
3  EclipseIcon,
4  FastForwardIcon,
5  LanguagesIcon,
6  MonitorSmartphoneIcon,
7  RocketIcon,
8  ScanFaceIcon,
9  SquarePenIcon,
10} from "lucide-react";
11import { ReactNode } from "react";
12 
13import { Item, ItemDescription, ItemIcon, ItemTitle } from "../../ui/item";
14import { Section } from "../../ui/section";
15 
16interface ItemProps {
17  title: string;
18  description: string;
19  icon: ReactNode;
20}
21 
22interface ItemsProps {
23  title?: string;
24  items?: ItemProps[] | false;
25  className?: string;
26}
27 
28const DEFAULT_ITEMS: ItemProps[] = [
29  {
30    title: "Accessibility first",
31    description: "Fully WCAG 2.0 compliant, made with best a11y practices",
32    icon: <ScanFaceIcon className="size-5 stroke-1" />,
33  },
34  {
35    title: "Responsive design",
36    description: "Looks and works great on any device and screen size",
37    icon: <MonitorSmartphoneIcon className="size-5 stroke-1" />,
38  },
39  {
40    title: "Light and dark mode",
41    description: "Seamless switching between color schemes, 6 themes included",
42    icon: <EclipseIcon className="size-5 stroke-1" />,
43  },
44  {
45    title: "Easy to customize",
46    description: "Flexible options to match your product or brand",
47    icon: <BlocksIcon className="size-5 stroke-1" />,
48  },
49  {
50    title: "Top-level performance",
51    description: "Made for lightning-fast load times and smooth interactions",
52    icon: <FastForwardIcon className="size-5 stroke-1" />,
53  },
54  {
55    title: "Production ready",
56    description: "Thoroughly tested and launch-prepared",
57    icon: <RocketIcon className="size-5 stroke-1" />,
58  },
59  {
60    title: "Made for localization",
61    description: "Easy to implement support for multiple languages and regions",
62    icon: <LanguagesIcon className="size-5 stroke-1" />,
63  },
64  {
65    title: "CMS friendly",
66    description: "Built to work with any headless content management system",
67    icon: <SquarePenIcon className="size-5 stroke-1" />,
68  },
69];
70 
71export default function Items({
72  title = "Everything you need. Nothing you don't.",
73  items = DEFAULT_ITEMS,
74  className,
75}: ItemsProps) {
76  return (
77    <Section className={className}>
78      <div className="max-w-container mx-auto flex flex-col items-center gap-6 sm:gap-20">
79        <h2 className="max-w-[560px] text-center text-3xl leading-tight font-semibold sm:text-5xl sm:leading-tight">
80          {title}
81        </h2>
82        {items !== false && items.length > 0 && (
83// … truncated