@m13v/seo-components 0.1.0

package/src/components/AnimatedSection.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { ReactNode } from "react";
+
+interface AnimatedSectionProps {
+  children: ReactNode;
+  id?: string;
+  className?: string;
+  delay?: number;
+}
+
+export function AnimatedSection({
+  children,
+  id,
+  className = "mb-14",
+  delay = 0,
+}: AnimatedSectionProps) {
+  return (
+    <motion.section
+      id={id}
+      className={className}
+      initial={{ opacity: 0, y: 24 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-80px" }}
+      transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1], delay }}
+    >
+      {children}
+    </motion.section>
+  );
+}

package/src/components/ArticleMeta.tsx

@@ -0,0 +1,51 @@
+interface ArticleMetaProps {
+  author: string;
+  authorRole?: string;
+  datePublished: string;
+  dateModified?: string;
+  readingTime?: string;
+  className?: string;
+}
+
+function formatDate(value: string) {
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return value;
+  return d.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+export function ArticleMeta({
+  author,
+  authorRole,
+  datePublished,
+  dateModified,
+  readingTime,
+  className = "",
+}: ArticleMetaProps) {
+  const showUpdated = dateModified && dateModified !== datePublished;
+  return (
+    <div className={`flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-zinc-500 ${className}`}>
+      <div className="flex items-center gap-2">
+        <div className="w-7 h-7 rounded-full bg-gradient-to-br from-teal-500/40 to-teal-500/10 flex items-center justify-center text-xs font-semibold text-white">
+          {author.charAt(0)}
+        </div>
+        <span className="text-zinc-900 font-medium">{author}</span>
+        {authorRole && <span className="hidden sm:inline text-zinc-500">, {authorRole}</span>}
+      </div>
+      <span aria-hidden="true">&middot;</span>
+      <time dateTime={datePublished}>
+        {showUpdated ? "Updated " : "Published "}
+        {formatDate(dateModified || datePublished)}
+      </time>
+      {readingTime && (
+        <>
+          <span aria-hidden="true">&middot;</span>
+          <span>{readingTime}</span>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/BackgroundGrid.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+interface BackgroundGridProps {
+  children: React.ReactNode;
+  /** Grid cell size in pixels */
+  size?: number;
+  /** "dots" or "lines" */
+  pattern?: "dots" | "lines";
+  /** Add a radial teal glow behind the content */
+  glow?: boolean;
+  className?: string;
+}
+
+/**
+ * Vercel/Linear style background with a subtle grid pattern and
+ * optional radial glow. Use as a wrapper around hero sections or
+ * standout callouts. Inner content renders with full z-index above
+ * the pattern.
+ */
+export function BackgroundGrid({
+  children,
+  size = 36,
+  pattern = "dots",
+  glow = true,
+  className = "",
+}: BackgroundGridProps) {
+  const bg =
+    pattern === "dots"
+      ? `radial-gradient(circle, rgba(20, 184, 166, 0.18) 1px, transparent 1px)`
+      : `linear-gradient(rgba(20, 184, 166, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 184, 166, 0.12) 1px, transparent 1px)`;
+
+  return (
+    <div
+      className={`relative overflow-hidden rounded-2xl border border-zinc-200 my-10 ${className}`}
+    >
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage: bg,
+          backgroundSize: `${size}px ${size}px`,
+          maskImage:
+            "radial-gradient(ellipse at center, black 40%, transparent 85%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse at center, black 40%, transparent 85%)",
+        }}
+      />
+      {glow && (
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(ellipse at center, rgba(20, 184, 166, 0.15) 0%, transparent 60%)",
+          }}
+        />
+      )}
+      <div className="relative z-10 p-8 md:p-12">{children}</div>
+    </div>
+  );
+}

package/src/components/BeforeAfter.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface BeforeAfterProps {
+  title?: string;
+  before: { label: string; content: string; highlights?: string[] };
+  after: { label: string; content: string; highlights?: string[] };
+  className?: string;
+}
+
+export function BeforeAfter({
+  title,
+  before,
+  after,
+  className = "",
+}: BeforeAfterProps) {
+  const [showAfter, setShowAfter] = useState(false);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-40px" }}
+      transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+      className={`my-10 ${className}`}
+    >
+      {title && (
+        <h3 className="text-lg font-semibold text-zinc-900 mb-4">{title}</h3>
+      )}
+
+      {/* Toggle */}
+      <div className="flex items-center gap-1 mb-4 bg-zinc-100 rounded-lg p-1 w-fit">
+        <button
+          onClick={() => setShowAfter(false)}
+          className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
+            !showAfter
+              ? "bg-white text-zinc-900 shadow-sm"
+              : "text-zinc-500 hover:text-zinc-700"
+          }`}
+        >
+          {before.label}
+        </button>
+        <button
+          onClick={() => setShowAfter(true)}
+          className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
+            showAfter
+              ? "bg-gradient-to-r from-cyan-500 to-teal-500 text-white shadow-sm"
+              : "text-zinc-500 hover:text-zinc-700"
+          }`}
+        >
+          {after.label}
+        </button>
+      </div>
+
+      {/* Content panel */}
+      <div className="relative rounded-xl border border-zinc-200 bg-zinc-50 overflow-hidden min-h-[200px]">
+        <AnimatePresence mode="wait">
+          {!showAfter ? (
+            <motion.div
+              key="before"
+              initial={{ opacity: 0, x: -12 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 12 }}
+              transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
+              className="p-6"
+            >
+              <p className="text-sm text-zinc-600 leading-relaxed whitespace-pre-line">
+                {before.content}
+              </p>
+              {before.highlights && (
+                <ul className="mt-4 space-y-2">
+                  {before.highlights.map((h, i) => (
+                    <li
+                      key={i}
+                      className="flex items-center gap-2 text-sm text-red-600"
+                    >
+                      <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                      {h}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </motion.div>
+          ) : (
+            <motion.div
+              key="after"
+              initial={{ opacity: 0, x: 12 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -12 }}
+              transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
+              className="p-6"
+            >
+              <p className="text-sm text-zinc-600 leading-relaxed whitespace-pre-line">
+                {after.content}
+              </p>
+              {after.highlights && (
+                <ul className="mt-4 space-y-2">
+                  {after.highlights.map((h, i) => (
+                    <li
+                      key={i}
+                      className="flex items-center gap-2 text-sm text-teal-600"
+                    >
+                      <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                      </svg>
+                      {h}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+}

package/src/components/BentoGrid.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export interface BentoCard {
+  title: string;
+  description: string;
+  /** "1x1" | "2x1" (wide) | "1x2" (tall) | "2x2" (hero) */
+  size?: "1x1" | "2x1" | "1x2" | "2x2";
+  icon?: string;
+  accent?: boolean;
+  content?: React.ReactNode;
+}
+
+interface BentoGridProps {
+  cards: BentoCard[];
+  className?: string;
+}
+
+const SIZE_CLASSES: Record<string, string> = {
+  "1x1": "col-span-1 row-span-1",
+  "2x1": "col-span-2 row-span-1",
+  "1x2": "col-span-1 row-span-2",
+  "2x2": "col-span-2 row-span-2",
+};
+
+export function BentoGrid({ cards, className = "" }: BentoGridProps) {
+  return (
+    <div
+      className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-10 ${className}`}
+    >
+      {cards.map((card, i) => (
+        <motion.div
+          key={i}
+          initial={{ opacity: 0, y: 20, scale: 0.97 }}
+          whileInView={{ opacity: 1, y: 0, scale: 1 }}
+          viewport={{ once: true, margin: "-40px" }}
+          transition={{
+            duration: 0.45,
+            ease: [0.16, 1, 0.3, 1],
+            delay: i * 0.06,
+          }}
+          className={`${SIZE_CLASSES[card.size || "1x1"]} rounded-2xl border ${
+            card.accent
+              ? "border-teal-200 bg-gradient-to-br from-teal-50 to-cyan-50"
+              : "border-zinc-200 bg-zinc-50"
+          } p-6 flex flex-col justify-between group hover:border-teal-300 hover:shadow-md transition-all duration-300`}
+        >
+          <div>
+            {card.icon && (
+              <span className="text-2xl mb-3 block">{card.icon}</span>
+            )}
+            <h3 className="text-base font-semibold text-zinc-900 mb-2">
+              {card.title}
+            </h3>
+            <p className="text-sm text-zinc-500 leading-relaxed">
+              {card.description}
+            </p>
+          </div>
+          {card.content && (
+            <div className="mt-4 overflow-hidden rounded-lg">{card.content}</div>
+          )}
+        </motion.div>
+      ))}
+    </div>
+  );
+}

package/src/components/Breadcrumbs.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { Fragment } from "react";
+
+export interface BreadcrumbCrumb {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbCrumb[];
+  className?: string;
+  align?: "start" | "center";
+}
+
+export function Breadcrumbs({ items, className = "", align = "start" }: BreadcrumbsProps) {
+  const justify = align === "center" ? "justify-center" : "justify-start";
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className={`flex flex-wrap items-center ${justify} gap-2 text-sm text-zinc-500`}>
+        {items.map((item, i) => {
+          const isLast = i === items.length - 1;
+          return (
+            <Fragment key={`${item.label}-${i}`}>
+              <li className={isLast ? "text-zinc-900 line-clamp-1" : ""}>
+                {item.href && !isLast ? (
+                  <Link href={item.href} className="hover:text-zinc-900 transition-colors">
+                    {item.label}
+                  </Link>
+                ) : (
+                  item.label
+                )}
+              </li>
+              {!isLast && <li aria-hidden="true">/</li>}
+            </Fragment>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/components/CodeComparison.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface CodeComparisonProps {
+  leftCode: string;
+  rightCode: string;
+  leftLines: number;
+  rightLines: number;
+  leftLabel: string;
+  rightLabel: string;
+  title?: string;
+  reductionSuffix?: string;
+}
+
+export function CodeComparison({
+  leftCode,
+  rightCode,
+  leftLines,
+  rightLines,
+  leftLabel,
+  rightLabel,
+  title,
+  reductionSuffix = "fewer lines",
+}: CodeComparisonProps) {
+  const [tab, setTab] = useState<"left" | "right">("left");
+  const reduction = Math.round((1 - rightLines / leftLines) * 100);
+
+  return (
+    <motion.div
+      className="my-8 rounded-2xl border border-zinc-200 bg-white overflow-hidden"
+      initial={{ opacity: 0, y: 12 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <div className="flex items-center justify-between px-5 py-3 border-b border-zinc-200 bg-white/50">
+        {title && (
+          <p className="text-xs font-mono uppercase tracking-widest text-emerald-500">{title}</p>
+        )}
+        <div className="flex gap-1 rounded-lg bg-white p-0.5 border border-zinc-200">
+          <button
+            onClick={() => setTab("left")}
+            className={`text-[11px] font-medium px-3 py-1 rounded-md transition-colors ${
+              tab === "left"
+                ? "bg-teal-500/10 text-teal-600"
+                : "text-zinc-500 hover:text-zinc-900"
+            }`}
+          >
+            {leftLabel} ({leftLines} lines)
+          </button>
+          <button
+            onClick={() => setTab("right")}
+            className={`text-[11px] font-medium px-3 py-1 rounded-md transition-colors ${
+              tab === "right"
+                ? "bg-emerald-500/10 text-emerald-500"
+                : "text-zinc-500 hover:text-zinc-900"
+            }`}
+          >
+            {rightLabel} ({rightLines} lines)
+          </button>
+        </div>
+      </div>
+
+      <div className="relative min-h-[200px]">
+        <AnimatePresence mode="wait">
+          {tab === "left" ? (
+            <motion.pre
+              key="left"
+              className="p-5 text-sm font-mono overflow-x-auto"
+              initial={{ opacity: 0, x: -8 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 8 }}
+              transition={{ duration: 0.2 }}
+            >
+              <code className="text-code-text">{leftCode}</code>
+            </motion.pre>
+          ) : (
+            <motion.pre
+              key="right"
+              className="p-5 text-sm font-mono overflow-x-auto"
+              initial={{ opacity: 0, x: -8 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 8 }}
+              transition={{ duration: 0.2 }}
+            >
+              <code className="text-code-text">{rightCode}</code>
+            </motion.pre>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <div className="px-5 py-3 border-t border-zinc-200 bg-white/50 flex items-center gap-3">
+        <motion.div
+          className="h-1.5 rounded-full bg-emerald-500/20 flex-1 overflow-hidden"
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+        >
+          <motion.div
+            className="h-full rounded-full bg-emerald-500"
+            initial={{ width: "100%" }}
+            whileInView={{ width: `${100 - reduction}%` }}
+            viewport={{ once: true }}
+            transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.3 }}
+          />
+        </motion.div>
+        <span className="text-[11px] font-medium text-emerald-500 whitespace-nowrap">
+          {reduction}% {reductionSuffix}
+        </span>
+      </div>
+    </motion.div>
+  );
+}

package/src/components/ComparisonTable.tsx

@@ -0,0 +1,66 @@
+export interface ComparisonRow {
+  feature: string;
+  competitor: string;
+  ours: string;
+}
+
+interface ComparisonTableProps {
+  heading?: string;
+  intro?: string;
+  productName: string;
+  competitorName: string;
+  rows: ComparisonRow[];
+  caveat?: string;
+  className?: string;
+}
+
+export function ComparisonTable({
+  heading,
+  intro,
+  productName,
+  competitorName,
+  rows,
+  caveat,
+  className = "",
+}: ComparisonTableProps) {
+  return (
+    <section className={className}>
+      {heading && (
+        <h2 className="text-3xl sm:text-4xl font-bold text-zinc-900 mb-4 text-center">
+          {heading}
+        </h2>
+      )}
+      {intro && (
+        <p className="text-zinc-500 text-lg text-center mb-8 max-w-2xl mx-auto">
+          {intro}
+        </p>
+      )}
+      <div className="rounded-2xl bg-zinc-50 border border-zinc-200 overflow-hidden">
+        <table className="w-full text-left">
+          <thead>
+            <tr className="border-b border-zinc-200">
+              <th className="px-5 py-4 text-zinc-500 text-sm font-medium">Feature</th>
+              <th className="px-5 py-4 text-zinc-500 text-sm font-medium">{competitorName}</th>
+              <th className="px-5 py-4 text-teal-600 text-sm font-medium">{productName}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, i) => (
+              <tr
+                key={i}
+                className={i < rows.length - 1 ? "border-b border-zinc-200" : ""}
+              >
+                <td className="px-5 py-3 text-zinc-900 text-sm font-medium">{row.feature}</td>
+                <td className="px-5 py-3 text-zinc-500 text-sm">{row.competitor}</td>
+                <td className="px-5 py-3 text-zinc-900 text-sm">{row.ours}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {caveat && (
+        <p className="text-zinc-500 text-sm mt-4 text-center">{caveat}</p>
+      )}
+    </section>
+  );
+}

package/src/components/FaqSection.tsx

@@ -0,0 +1,40 @@
+import type { FaqItem } from "../lib/json-ld";
+
+interface FaqSectionProps {
+  items: FaqItem[];
+  heading?: string;
+  className?: string;
+}
+
+export function FaqSection({
+  items,
+  heading = "Frequently asked questions",
+  className = "",
+}: FaqSectionProps) {
+  return (
+    <section className={className}>
+      <h2 className="text-3xl sm:text-4xl font-bold text-zinc-900 mb-8">{heading}</h2>
+      <div className="space-y-4">
+        {items.map((faq) => (
+          <details
+            key={faq.q}
+            className="group p-5 rounded-xl bg-zinc-50 border border-zinc-200"
+          >
+            <summary className="text-zinc-900 font-semibold cursor-pointer list-none flex items-center justify-between gap-4">
+              <span>{faq.q}</span>
+              <span
+                className="text-zinc-500 group-open:rotate-45 transition-transform text-xl flex-shrink-0"
+                aria-hidden="true"
+              >
+                +
+              </span>
+            </summary>
+            <p className="text-zinc-500 mt-3 leading-relaxed">{faq.a}</p>
+          </details>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export type { FaqItem };

package/src/components/FlowDiagram.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface FlowStep {
+  label: string;
+  detail?: string;
+  icon?: "browser" | "server" | "redirect" | "iframe" | "webhook" | "lock" | "check" | "error" | "wallet" | "email";
+}
+
+interface FlowDiagramProps {
+  title: string;
+  steps: FlowStep[];
+}
+
+const icons: Record<string, string> = {
+  browser: "\uD83C\uDF10",
+  server: "\u2699\uFE0F",
+  redirect: "\u21AA\uFE0F",
+  iframe: "\uD83D\uDCE6",
+  webhook: "\uD83D\uDD14",
+  lock: "\uD83D\uDD12",
+  check: "\u2705",
+  error: "\u274C",
+  wallet: "\uD83D\uDCB3",
+  email: "\uD83D\uDCE7",
+};
+
+export function FlowDiagram({ title, steps }: FlowDiagramProps) {
+  return (
+    <div className="my-10 rounded-2xl border border-zinc-200 bg-white p-6 overflow-x-auto">
+      <p className="text-xs font-mono uppercase tracking-widest text-emerald-500 mb-5">
+        {title}
+      </p>
+      <div className="flex items-start gap-0 min-w-max">
+        {steps.map((step, i) => (
+          <motion.div
+            key={i}
+            className="flex items-start"
+            initial={{ opacity: 0, x: -12 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 0.35,
+              ease: [0.16, 1, 0.3, 1],
+              delay: i * 0.08,
+            }}
+          >
+            <div className="flex flex-col items-center w-28 shrink-0">
+              <div className="w-11 h-11 rounded-xl bg-white border border-zinc-200 flex items-center justify-center text-lg mb-2">
+                {step.icon ? icons[step.icon] || "\u2022" : `${i + 1}`}
+              </div>
+              <p className="text-xs font-medium text-zinc-900 text-center leading-tight">
+                {step.label}
+              </p>
+              {step.detail && (
+                <p className="text-[10px] text-zinc-500 text-center leading-tight mt-1">
+                  {step.detail}
+                </p>
+              )}
+            </div>
+            {i < steps.length - 1 && (
+              <motion.div
+                className="flex items-center h-11 shrink-0"
+                initial={{ scaleX: 0 }}
+                whileInView={{ scaleX: 1 }}
+                viewport={{ once: true }}
+                transition={{
+                  duration: 0.25,
+                  ease: [0.16, 1, 0.3, 1],
+                  delay: i * 0.08 + 0.15,
+                }}
+                style={{ originX: 0 }}
+              >
+                <svg width="32" height="12" viewBox="0 0 32 12" className="text-zinc-500">
+                  <line x1="0" y1="6" x2="24" y2="6" stroke="currentColor" strokeWidth="1.5" />
+                  <polygon points="24,2 32,6 24,10" fill="currentColor" />
+                </svg>
+              </motion.div>
+            )}
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+}