69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import { DocPage } from '@/components/docs/layout/DocPage';
|
|
import { JsonLd } from '@/components/seo/JsonLd';
|
|
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
|
|
import { createBreadcrumbSchema } from '@/config/docs-schema';
|
|
import { Hero } from '@/components/docs/blocks';
|
|
import Link from 'next/link';
|
|
|
|
const PAGE = DOCS_PAGES['guides'];
|
|
|
|
export const metadata: Metadata = createDocsMetadata(PAGE);
|
|
|
|
const breadcrumbSchema = createBreadcrumbSchema([
|
|
{ name: 'Home', path: '/' },
|
|
{ name: 'Documentation', path: '/docs/' },
|
|
{ name: 'Guides', path: '/docs/guides/' },
|
|
]);
|
|
|
|
export default function GuidesPage() {
|
|
return (
|
|
<>
|
|
<JsonLd data={breadcrumbSchema} />
|
|
<DocPage
|
|
breadcrumbItems={[
|
|
{ label: 'Documentation', href: '/docs/' },
|
|
{ label: 'Guides' },
|
|
]}
|
|
tocItems={[]}
|
|
nextSteps={{
|
|
links: [
|
|
{
|
|
href: '/docs/live-urls/',
|
|
title: 'Live URLs',
|
|
description: 'Generate images directly from URL parameters.',
|
|
accent: 'primary',
|
|
},
|
|
{
|
|
href: '/docs/generation/',
|
|
title: 'Image Generation',
|
|
description: 'Full control via the API.',
|
|
accent: 'secondary',
|
|
},
|
|
],
|
|
}}
|
|
>
|
|
<Hero
|
|
title="Guides"
|
|
subtitle="Step-by-step tutorials for common use cases."
|
|
/>
|
|
|
|
<section className="mb-12">
|
|
<div className="grid gap-4">
|
|
<Link
|
|
href="/docs/guides/placeholder-images/"
|
|
className="block p-6 bg-slate-800/50 border border-slate-700 rounded-lg hover:border-purple-500/50 transition-colors"
|
|
>
|
|
<h3 className="text-lg font-semibold text-white mb-2">AI Placeholder Images</h3>
|
|
<p className="text-gray-400 text-sm">
|
|
Generate contextual placeholder images for development.
|
|
Replace gray boxes with AI visuals that match your design.
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</DocPage>
|
|
</>
|
|
);
|
|
}
|