Feature 13

1"use client";
2 
3import { useState } from "react";
4import { ArrowUpRight } from "lucide-react";
5import { cn } from "@/lib/utils";
6 
7interface Feature13Step {
8  title: string;
9  description: string;
10  image?: string;
11  icon?: React.ReactNode;
12}
13 
14interface Feature13Props {
15  label?: string;
16  title?: string;
17  steps?: Feature13Step[];
18  className?: string;
19}
20 
21const defaultSteps: Feature13Step[] = [
22  {
23    title: "Copy & Paste Ready",
24    description:
25      "Every component is ready to use. Just copy the code and paste it into your project.",
26    image:
27      "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
28  },
29  {
30    title: "Fully Customizable",
31    description:
32      "Built with Tailwind CSS, every component can be easily modified to match your brand.",
33    image:
34      "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
35  },
36  {
37    title: "TypeScript First",
38    description:
39      "All components are fully typed with TypeScript for better developer experience.",
40    image:
41      "https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp",
42  },
43];
44 
45// Each slide takes this share of the container width; side cards peek at the edges
46const SLIDE_WIDTH = 70;
47 
48const Feature13 = ({
49  label = "Features",
50  title = "Everything You Need to Build Faster",
51  steps = defaultSteps,
52  className,
53}: Feature13Props) => {
54  const [active, setActive] = useState(0);
55  const activeStep = steps[active];
56 
57  return (
58    <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
59      {/* Header */}
60      <div className="mb-12 flex flex-col items-center gap-2 text-center">
61        <p className="text-sm font-semibold tracking-widest text-muted-foreground uppercase">
62          {label}
63        </p>
64        <h2 className="text-4xl leading-tight font-medium tracking-tight md:text-5xl">
65          {title}
66        </h2>
67      </div>
68 
69      {/* Carousel with partially visible side cards */}
70      <div className="overflow-hidden">
71        <div
72          className="flex transition-transform duration-500 ease-in-out"
73          style={{
74            transform: `translateX(${(100 - SLIDE_WIDTH) / 2 - active * SLIDE_WIDTH}%)`,
75          }}
76        >
77          {steps.map((step, index) => (
78            <div
79              key={index}
80              className="shrink-0 px-2 md:px-3"
81              style={{ width: `${SLIDE_WIDTH}%` }}
82            >
83              <button
84                type="button"
85// … truncated