Feature pillars

interface Pillar {
  title: string;
  body: string;
}

const DEFAULT_PILLARS: Pillar[] = [
  {
    title: 'Privacy-first',
    body: 'Your data is held in trust, not mined. Collect only what a feature needs, never sell it, and analytics never identifies you — opt out in one click.',
  },
  {
    title: 'Open-source',
    body: 'The code that holds your data is public. Read it, audit it, run it. No black boxes between you and your files.',
  },
  {
    title: 'Built to last',
    body: 'Quality over feature count. Small tools that keep working — no hype-cycle rewrites, no forced upgrades, no lock-in.',
  },
];

export function FeaturePillars({ pillars = DEFAULT_PILLARS }: { pillars?: Pillar[] }) {
  return (
    <section className="border-b border-border/60">
      <div className="mx-auto max-w-6xl px-4 py-20 sm:px-6">
        <div className="grid gap-8 md:grid-cols-3">
          {pillars.map((pillar) => (
            <div key={pillar.title} className="space-y-2">
              <h3 className="text-base font-semibold">{pillar.title}</h3>
              <p className="text-sm leading-relaxed text-muted-foreground">{pillar.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Dependencies