91 lines
3.0 KiB
XML
91 lines
3.0 KiB
XML
import {
|
|
BlogHeading,
|
|
BlogImage,
|
|
BlogQuote,
|
|
BlogCTA,
|
|
BlogCodeBlock,
|
|
} from '../_components';
|
|
import type { TocItem } from '../types';
|
|
|
|
export const tocItems: TocItem[] = [
|
|
{ id: 'introduction', text: 'Introduction', level: 2 },
|
|
{ id: 'why-ai-placeholders', text: 'Why AI Placeholders?', level: 2 },
|
|
{ id: 'getting-started', text: 'Getting Started', level: 2 },
|
|
{ id: 'api-usage', text: 'API Usage', level: 3 },
|
|
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
|
];
|
|
|
|
export const Content = () => (
|
|
<>
|
|
<BlogHeading id="introduction" level={2}>
|
|
Introduction
|
|
</BlogHeading>
|
|
<p className="text-gray-700 leading-relaxed mb-4">
|
|
Placeholder images have been a staple of web development for decades.
|
|
From simple gray boxes to stock photos, developers have always needed
|
|
a way to visualize layouts before final content is ready.
|
|
</p>
|
|
<p className="text-gray-700 leading-relaxed mb-4">
|
|
Banatie takes this concept to the next level with AI-generated
|
|
contextual placeholders that actually match your design intent.
|
|
</p>
|
|
|
|
<BlogHeading id="why-ai-placeholders" level={2}>
|
|
Why AI Placeholders?
|
|
</BlogHeading>
|
|
<p className="text-gray-700 leading-relaxed mb-4">
|
|
Traditional placeholder services give you random images that rarely
|
|
match your actual content needs. With AI-powered placeholders, you get
|
|
images that are contextually relevant to your project.
|
|
</p>
|
|
|
|
<BlogQuote author="A Developer">
|
|
Finally, placeholder images that actually look like what the final
|
|
product will have. No more explaining to clients why there are cats
|
|
everywhere.
|
|
</BlogQuote>
|
|
|
|
<BlogHeading id="getting-started" level={2}>
|
|
Getting Started
|
|
</BlogHeading>
|
|
<p className="text-gray-700 leading-relaxed mb-4">
|
|
Getting started with Banatie is simple. You can use our CDN URLs
|
|
directly in your HTML or integrate with our API for more control.
|
|
</p>
|
|
|
|
<BlogHeading id="api-usage" level={3}>
|
|
API Usage
|
|
</BlogHeading>
|
|
<p className="text-gray-700 leading-relaxed mb-4">
|
|
Here is a simple example of how to use Banatie in your HTML:
|
|
</p>
|
|
|
|
<BlogCodeBlock language="html">
|
|
{`<img
|
|
src="https://cdn.banatie.app/demo/live/hero?prompt=modern+office+workspace"
|
|
alt="Office workspace"
|
|
/>`}
|
|
</BlogCodeBlock>
|
|
|
|
<p className="text-gray-700 leading-relaxed mb-4">
|
|
The prompt parameter tells our AI what kind of image to generate.
|
|
Be descriptive for best results!
|
|
</p>
|
|
|
|
<BlogHeading id="next-steps" level={2}>
|
|
Next Steps
|
|
</BlogHeading>
|
|
<p className="text-gray-700 leading-relaxed mb-4">
|
|
Ready to start using AI-powered placeholders in your projects?
|
|
Check out our documentation for more detailed examples and API reference.
|
|
</p>
|
|
|
|
<BlogCTA
|
|
title="Ready to get started?"
|
|
description="Join our early access program and start generating contextual placeholder images today."
|
|
buttonText="Get Early Access"
|
|
buttonHref="/#get-access"
|
|
/>
|
|
</>
|
|
);
|