Next.js Features Section: 3-Column Cards and Stagger Animation

import { Clock, ShieldCheck, Zap } from "lucide-react";

  const features = [
    {
      icon: Zap,
      title: "Pages load before visitors give up",
      body: "Images are optimized automatically, so the first screen appears fast even on mobile data.",
    },
    {
      icon: ShieldCheck,
      title: "Customer data never leaves your environment",
      body: "Data is stored in your own infrastructure, with permissions per teammate.",
    },
    {
      icon: Clock,
      title: "Go from draft to live in one day",
      body: "Paste in your copy and get a preview URL right away.",
    },
  ];

  export function Features() {
    return (
      <section id="features" className="mx-auto max-w-6xl px-6 py-24">
        <p className="text-sm font-medium text-indigo-600">Features</p>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight md:text-4xl">
          Spend less time building, more time shipping
        </h2>
        <p className="mt-4 max-w-2xl text-zinc-600">
          Three features that cut the work between idea and launch.
        </p>

        <ul className="mt-12 grid gap-6 md:grid-cols-3">
          {features.map(({ icon: Icon, title, body }) => (
            <li key={title} className="rounded-2xl border border-zinc-200 p-6">
              <Icon aria-hidden className="h-6 w-6 text-indigo-600" />
              <h3 className="mt-4 font-semibold">{title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-zinc-600">{body}</p>
            </li>
          ))}
        </ul>
      </section>
    );
  }

"use client";

  import { motion, stagger, type Variants } from "motion/react";
  import type { ReactNode } from "react";

  const list: Variants = {
    hidden: {},
    show: { transition: { delayChildren: stagger(0.08) } },
  };

  const item: Variants = {
    hidden: { opacity: 0, y: 16 },
    show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } },
  };

  export function RevealList({ children, className }: { children: ReactNode; className?: string }) {
    return (
      <motion.ul
        className={className}
        variants={list}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.3 }}
      >
        {children}
      </motion.ul>
    );
  }

  export function RevealItem({ children, className }: { children: ReactNode; className?: string }) {
    return (
      <motion.li className={className} variants={item}>
        {children}
      </motion.li>
    );
  }

<RevealItem className="group rounded-2xl border border-zinc-200 p-6 transition-colors hover:border-indigo-300">
    <Icon
      aria-hidden
      className="h-6 w-6 text-indigo-600 transition-transform duration-300 group-hover:-translate-y-0.5 motion-reduce:transition-none"
    />
    {/* heading and body unchanged */}
  </RevealItem>

import Image from "next/image";

  const rows = [
    {
      title: "Follow every signup on one screen",
      body: "See which ad they came from and where they dropped off, in order.",
      image: "/features/dashboard.png",
      alt: "Dashboard showing the signup funnel",
    },
    {
      title: "Edit copy right in the browser",
      body: "Change the live page, review it, then publish.",
      image: "/features/editor.png",
      alt: "Editing page copy in the browser",
    },
  ];

  export function FeatureRows() {
    return (
      <section className="mx-auto max-w-6xl space-y-24 px-6 py-24">
        {rows.map((row, i) => (
          <div
            key={row.title}
            className={`flex flex-col items-center gap-10 md:flex-row ${i % 2 === 1 ? "md:flex-row-reverse" : ""}`}
          >
            <div className="md:w-1/2">
              <h3 className="text-2xl font-semibold">{row.title}</h3>
              <p className="mt-4 leading-relaxed text-zinc-600">{row.body}</p>
            </div>
            <Image
              src={row.image}
              alt={row.alt}
              width={1200}
              height={800}
              className="rounded-2xl border border-zinc-200 md:w-1/2"
            />
          </div>
        ))}
      </section>
    );
  }