Features 3

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { getImageKitUrl } from "@/lib/smoothui-data";
5import { motion, useReducedMotion } from "motion/react";
6 
7const SPRING = {
8  bounce: 0.1,
9  duration: 0.25,
10  type: "spring" as const,
11};
12 
13const features = [
14  {
15    description:
16      "Every component is designed with usability in mind. Clean interfaces that your users will love from the first interaction.",
17    image: getImageKitUrl("/images/designerworking.webp", {
18      format: "auto",
19      quality: 85,
20      width: 800,
21    }),
22    imageAlt: "Designer working on user interface",
23    title: "Intuitive Design",
24  },
25  {
26    description:
27      "Optimized animations that only use transform and opacity. Hardware-accelerated rendering for butter-smooth 60fps experiences.",
28    image: getImageKitUrl("/images/hero-smoothui.png", {
29      format: "auto",
30      quality: 85,
31      width: 800,
32    }),
33    imageAlt: "SmoothUI component showcase",
34    title: "Blazing Performance",
35  },
36  {
37    description:
38      "Full TypeScript support, comprehensive documentation, and one-command installation via the shadcn registry.",
39    image: getImageKitUrl("/images/hero-example_xertaz.png", {
40      format: "auto",
41      quality: 85,
42      width: 800,
43    }),
44    imageAlt: "Code example with TypeScript support",
45    title: "Developer Experience",
46  },
47];
48 
49export function FeaturesAlternating() {
50  const shouldReduceMotion = useReducedMotion();
51 
52  return (
53    <section aria-labelledby="features-alternating-heading">
54      <div className="py-24 md:py-32">
55        <div className="mx-auto max-w-6xl px-6">
56          <div className="mx-auto mb-16 max-w-2xl text-center">
57            <h2
58              className="text-balance font-bold text-3xl tracking-tight md:text-4xl"
59              id="features-alternating-heading"
60            >
61              Why developers choose us
62            </h2>
63            <p className="mt-4 text-foreground/70 text-lg">
64              Designed for developer productivity and user delight.
65            </p>
66          </div>
67          <div className="space-y-24">
68            {features.map((feature, index) => {
69              const isReversed = index % 2 === 1;
70              const slideDirection = isReversed ? 24 : -24;
71 
72              return (
73                <div
74                  className={cn(
75                    "grid items-center gap-12 md:grid-cols-2",
76                    isReversed && "md:[direction:rtl]"
77                  )}
78// … truncated