Components
Loading preview...
Here is Content Block component
npx shadcn@latest add https://21st.dev/r/meschacirung/content-blockimport { ArrowRight } from 'lucide-react'
export default function ContentSection() {
return (
<section className="py-16 sm:py-20 lg:py-24">
<div className="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8">
<div className="mx-auto max-w-3xl">
<h2 className="text-foreground text-3xl font-semibold leading-tight sm:text-4xl">
Create Content with AI Assistance
</h2>
<p className="text-muted-foreground mt-3 text-base sm:text-lg lg:text-xl">
Our AI assistant helps you create better content faster. Generate ideas, improve your writing, and design layouts with simple prompts.
</p>
</div>
{/* Features */}
<div className="my-10 grid grid-cols-1 gap-6 sm:my-12 sm:grid-cols-2 lg:grid-cols-3">
<div className="space-y-2 rounded-xl border p-4 sm:p-5">
<span className="mb-2 block text-2xl sm:text-3xl" aria-hidden>
💡
</span>
<h3 className="text-lg font-medium sm:text-xl">Generate Ideas</h3>
<p className="text-muted-foreground">
Spark creativity with AI-powered content suggestions and inspiration.
</p>
</div>
<div className="space-y-2 rounded-xl border p-4 sm:p-5">
<span className="mb-2 block text-2xl sm:text-3xl" aria-hidden>
✏️
</span>
<h3 className="text-lg font-medium sm:text-xl">Improve Writing</h3>
<p className="text-muted-foreground">
Enhance your text with smart editing suggestions and style refinements.
</p>
</div>
<div className="space-y-2 rounded-xl border p-4 sm:p-5">
<span className="mb-2 block text-2xl sm:text-3xl" aria-hidden>
🎨
</span>
<h3 className="text-lg font-medium sm:text-xl">Design Layouts</h3>
<p className="text-muted-foreground">
Create visually appealing layouts that capture your audience's attention.
</p>
</div>
</div>
{/* Stats */}
<div className="border-t pt-6 sm:pt-8">
<ul
role="list"
className="grid grid-cols-1 gap-3 text-sm text-muted-foreground sm:grid-cols-2 lg:grid-cols-4"
>
{[
{ value: '90+', label: 'Integrations' },
{ value: '56%', label: 'Productivity Boost' },
{ value: '24/7', label: 'Customer Support' },
{ value: '10k+', label: 'Active Users' },
].map((stat, index) => (
<li key={index} className="flex items-center gap-2 rounded-lg">
<ArrowRight className="size-4 opacity-60" aria-hidden="true" />
<span className="text-foreground font-medium">{stat.value}</span>
<span className="truncate">{stat.label}</span>
</li>
))}
</ul>
</div>
</div>
</section>
)
}