【Next.js】機能紹介セクションの作り方を3列カードの実装例で解説

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

  const features = [
    {
      icon: Zap,
      title: "ページの表示で訪問者を待たせない",
      body: "画像は自動で軽くなり、スマホの回線でも最初の画面がすぐに出ます。",
    },
    {
      icon: ShieldCheck,
      title: "顧客データを社外に出さずに使える",
      body: "データは自社の環境に保存されます。権限は担当者ごとに分けられます。",
    },
    {
      icon: Clock,
      title: "公開までの作業が1日で終わる",
      body: "文章を入れるだけで、確認用の URL がすぐに発行されます。",
    },
  ];

  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">機能</p>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight md:text-4xl">
          作る時間を減らして、届ける時間を増やす
        </h2>
        <p className="mt-4 max-w-2xl text-zinc-600">
          LP の公開までに必要な作業を、3つの機能でまとめて短くします。
        </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"
    />
    {/* 見出しと本文は同じ */}
  </RevealItem>

import Image from "next/image";

  const rows = [
    {
      title: "申し込みの流れを1画面で追える",
      body: "どの広告から来て、どのページで離れたかを時系列で確認できます。",
      image: "/features/dashboard.png",
      alt: "申し込みの流れを表示したダッシュボード",
    },
    {
      title: "文章の修正はブラウザで完結する",
      body: "公開中のページをそのまま編集し、確認してから反映できます。",
      image: "/features/editor.png",
      alt: "ページの文章を編集している画面",
    },
  ];

  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>
    );
  }