site-features

1"use client";
2 
3import React from "react";
4import { motion } from "framer-motion";
5import { LucideIcon, ArrowRight } from "lucide-react";
6import { cn } from "@repo/shadcn-ui/lib/utils";
7 
8export interface Feature {
9  id: string;
10  title: string;
11  description: string;
12  icon?: LucideIcon;
13  iconColor?: string;
14  href?: string;
15  image?: string;
16}
17 
18export interface FeaturesProps {
19  features: Feature[];
20  title?: string;
21  subtitle?: string;
22  layout?: "grid" | "list" | "alternating";
23  columns?: 2 | 3 | 4;
24  showImages?: boolean;
25  className?: string;
26}
27 
28const fadeInUp = {
29  hidden: { opacity: 0, y: 20 },
30  visible: {
31    opacity: 1,
32    y: 0,
33    transition: {
34      duration: 0.6,
35      ease: "easeOut",
36    },
37  },
38};
39 
40const staggerContainer = {
41  hidden: { opacity: 0 },
42  visible: {
43    opacity: 1,
44    transition: {
45      staggerChildren: 0.1,
46      delayChildren: 0.2,
47    },
48  },
49};
50 
51const FeatureCard = ({ feature, showImage = false }: { feature: Feature; showImage?: boolean }) => {
52  const IconComponent = feature.icon;
53 
54  const content = (
55    <div
56      className={cn(
57        "group relative h-full w-full p-6 rounded-xl border border-neutral-200 dark:border-neutral-800",
58        "bg-background mx-auto justify-center items-center flex flex-col",
59        "hover:border-neutral-300 dark:hover:border-neutral-700",
60        "hover:shadow-lg hover:shadow-neutral-200/50 dark:hover:shadow-neutral-900/50",
61        "transition-all duration-300 ease-out",
62        feature.href && "cursor-pointer"
63      )}
64    >
65 
66      <div className="flex flex-col h-full w-full justify-start items-start space-y-4">
67        {/* Icon or Image */}
68        <div className="flex items-center justify-between">
69          <div className="flex items-center gap-3">
70            {showImage && feature.image ? (
71              <div className="w-12 h-12 rounded-lg overflow-hidden bg-background">
72                <img
73                  src={feature.image}
74                  alt={feature.title}
75                  className="w-full h-full object-cover"
76                />
77              </div>
78            ) : IconComponent ? (
79              <div
80                className={cn(
81                  "w-12 h-12 rounded-lg flex items-center justify-center",
82                  "bg-background",
83                  feature.iconColor || "text-text"
84                )}
85              >
86                <IconComponent className="w-6 h-6" />
87              </div>
88            ) : (
89// … truncated