create-nextdevtpl 2.6.0

package/template/src/features/pseo/components/pseo-feature-grid.tsx

@@ -0,0 +1,74 @@
+import {
+  Layers,
+  LineChart,
+  Share2,
+  ShieldCheck,
+  Sparkles,
+  Target,
+  Users,
+  Zap,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+
+import type { PseoPage } from "../lib/pseo-data";
+
+const iconMap = {
+  sparkles: Sparkles,
+  target: Target,
+  lineChart: LineChart,
+  share: Share2,
+  layers: Layers,
+  shield: ShieldCheck,
+  zap: Zap,
+  users: Users,
+};
+
+type IconKey = keyof typeof iconMap;
+
+export function PseoFeatureGrid({ page }: { page: PseoPage }) {
+  const { sections, features } = page.data;
+
+  return (
+    <section className="container py-24" id="features">
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-12 text-center">
+          <Badge variant="secondary" className="mb-4">
+            {page.category}
+          </Badge>
+          <h2 className="mb-4 text-balance text-3xl font-bold tracking-tight md:text-4xl">
+            {sections.features.title}
+          </h2>
+          <p className="mx-auto max-w-2xl text-muted-foreground">
+            {sections.features.subtitle}
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {features.map((feature) => {
+            const Icon = iconMap[feature.icon as IconKey] ?? Sparkles;
+            return (
+              <Card
+                key={feature.title}
+                className="group rounded-2xl border-0 bg-muted/50 transition-colors hover:bg-muted"
+              >
+                <CardContent className="p-6">
+                  <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+                    <Icon className="h-6 w-6" />
+                  </div>
+                  <h3 className="mb-2 text-base font-semibold">
+                    {feature.title}
+                  </h3>
+                  <p className="text-sm text-muted-foreground">
+                    {feature.description}
+                  </p>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/features/pseo/components/pseo-hero.tsx

@@ -0,0 +1,106 @@
+import { ArrowRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Link } from "@/i18n/routing";
+
+import type { PseoPage } from "../lib/pseo-data";
+
+export function PseoHero({ page }: { page: PseoPage }) {
+  const { hero, stats } = page.data;
+
+  return (
+    <section className="container relative overflow-hidden py-20 md:py-28">
+      <div className="absolute -top-20 right-0 h-56 w-56 rounded-full bg-primary/10 blur-3xl" />
+      <div className="absolute -bottom-24 left-0 h-56 w-56 rounded-full bg-primary/10 blur-3xl" />
+
+      <div className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-[1.1fr_0.9fr]">
+        <div>
+          <Badge
+            variant="outline"
+            className="mb-6 rounded-full border-border px-4 py-2 text-xs font-semibold uppercase tracking-wider"
+          >
+            {hero.badge}
+          </Badge>
+
+          <h1 className="mb-6 text-balance text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
+            {hero.title} <span className="text-primary">{hero.highlight}</span>
+          </h1>
+
+          <p className="mb-8 text-lg text-muted-foreground md:text-xl">
+            {hero.subtitle}
+          </p>
+
+          <div className="mb-10 flex flex-col gap-3 sm:flex-row">
+            <Button size="lg" className="gap-2 px-8" asChild>
+              <Link href={hero.primaryCta.href}>
+                {hero.primaryCta.label}
+                <ArrowRight className="h-4 w-4" />
+              </Link>
+            </Button>
+            <Button size="lg" variant="outline" asChild>
+              <Link href={hero.secondaryCta.href}>
+                {hero.secondaryCta.label}
+              </Link>
+            </Button>
+          </div>
+
+          <div className="grid gap-6 sm:grid-cols-3">
+            {stats.map((stat) => (
+              <div key={stat.label} className="space-y-2">
+                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                  {stat.label}
+                </p>
+                <p className="text-2xl font-semibold text-foreground">
+                  {stat.value}
+                </p>
+                <p className="text-sm text-muted-foreground">{stat.detail}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="relative">
+          <div className="absolute -inset-4 rounded-3xl bg-primary/10 blur-2xl" />
+          <Card className="relative overflow-hidden border bg-background/80">
+            <CardContent className="p-6">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {hero.summaryTitle}
+              </p>
+              <ul className="mt-4 space-y-3 text-sm">
+                {hero.summaryItems.map((item) => (
+                  <li key={item} className="flex items-start gap-3">
+                    <span className="mt-1 h-2 w-2 rounded-full bg-primary" />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <div className="mt-6 space-y-3 rounded-xl bg-muted/60 p-4 text-sm">
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Category</span>
+                  <span className="font-medium text-foreground">
+                    {page.category}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Locale</span>
+                  <span className="font-medium text-foreground">
+                    {page.locale.toUpperCase()}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Slug</span>
+                  <span className="font-medium text-foreground">
+                    {page.slug}
+                  </span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/features/pseo/components/pseo-related.tsx

@@ -0,0 +1,62 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Link } from "@/i18n/routing";
+
+import type { PseoPage } from "../lib/pseo-data";
+
+interface PseoRelatedProps {
+  pages: PseoPage[];
+  title: string;
+  subtitle: string;
+}
+
+export function PseoRelated({ pages, title, subtitle }: PseoRelatedProps) {
+  if (pages.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="container py-24" id="related">
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-12 text-center">
+          <h2 className="mb-4 text-balance text-3xl font-bold tracking-tight md:text-4xl">
+            {title}
+          </h2>
+          <p className="mx-auto max-w-2xl text-muted-foreground">{subtitle}</p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {pages.map((page) => (
+            <Card
+              key={page.slug}
+              className="group rounded-2xl border-0 bg-muted/50 transition-colors hover:bg-muted"
+            >
+              <CardContent className="flex h-full flex-col p-6">
+                <div className="mb-4 flex items-center justify-between">
+                  <Badge variant="secondary">{page.category}</Badge>
+                  <ArrowUpRight className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
+                </div>
+                <h3 className="mb-2 text-lg font-semibold">
+                  {page.data.hero.title} {page.data.hero.highlight}
+                </h3>
+                <p className="mb-6 text-sm text-muted-foreground">
+                  {page.data.seo.description}
+                </p>
+                <div className="mt-auto">
+                  <Link
+                    href={`/pseo/${page.slug}`}
+                    className="text-sm font-semibold text-primary hover:underline"
+                  >
+                    View template
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/features/pseo/components/pseo-use-cases.tsx

@@ -0,0 +1,50 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+import type { PseoPage } from "../lib/pseo-data";
+
+export function PseoUseCases({ page }: { page: PseoPage }) {
+  const { sections, useCases } = page.data;
+
+  return (
+    <section className="container py-24" id="use-cases">
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-12 text-center">
+          <h2 className="mb-4 text-balance text-3xl font-bold tracking-tight md:text-4xl">
+            {sections.useCases.title}
+          </h2>
+          <p className="mx-auto max-w-2xl text-muted-foreground">
+            {sections.useCases.subtitle}
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {useCases.map((useCase) => (
+            <Card
+              key={useCase.title}
+              className="rounded-2xl border-0 bg-muted/50 transition-colors hover:bg-muted"
+            >
+              <CardContent className="flex h-full flex-col p-6">
+                <h3 className="text-lg font-semibold text-foreground">
+                  {useCase.title}
+                </h3>
+                <p className="mt-3 text-sm text-muted-foreground">
+                  {useCase.description}
+                </p>
+                <div className="mt-auto pt-6">
+                  <div className="flex items-baseline gap-2">
+                    <span className="text-3xl font-semibold text-primary">
+                      {useCase.metric}
+                    </span>
+                    <span className="text-sm text-muted-foreground">
+                      {useCase.metricLabel}
+                    </span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}