80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import type { LucideIcon } from "lucide-react";
|
||
|
|
import { Building2, Megaphone, Smartphone, Tv } from "lucide-react";
|
||
|
|
|
||
|
|
import { SectionReveal } from "@/components/sections/SectionReveal";
|
||
|
|
|
||
|
|
interface UseCase {
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
icon: LucideIcon;
|
||
|
|
}
|
||
|
|
|
||
|
|
const useCases: UseCase[] = [
|
||
|
|
{
|
||
|
|
title: "YouTube",
|
||
|
|
description:
|
||
|
|
"Intros, outros, and long-form explainers with chapters and thumbnail-ready frames.",
|
||
|
|
icon: Tv,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Instagram Reels",
|
||
|
|
description:
|
||
|
|
"Vertical templates, bold captions, and beat-synced cuts built for short-form.",
|
||
|
|
icon: Smartphone,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Ads",
|
||
|
|
description:
|
||
|
|
"High-converting promos for Meta, Google, and TikTok with platform-safe ratios.",
|
||
|
|
icon: Megaphone,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Corporate Videos",
|
||
|
|
description:
|
||
|
|
"Onboarding, training, and investor updates with consistent brand styling.",
|
||
|
|
icon: Building2,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
export function VideoMakerUseCases() {
|
||
|
|
return (
|
||
|
|
<section className="bg-white py-20 sm:py-28">
|
||
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
|
|
<SectionReveal className="text-center">
|
||
|
|
<h2 className="font-heading text-3xl font-bold text-neutral-900 sm:text-4xl">
|
||
|
|
Built for every channel
|
||
|
|
</h2>
|
||
|
|
<p className="mx-auto mt-4 max-w-2xl text-neutral-600">
|
||
|
|
Pick a format and let templates handle aspect ratio, safe zones, and
|
||
|
|
pacing.
|
||
|
|
</p>
|
||
|
|
</SectionReveal>
|
||
|
|
|
||
|
|
<SectionReveal className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||
|
|
{useCases.map((useCase) => {
|
||
|
|
const Icon = useCase.icon;
|
||
|
|
return (
|
||
|
|
<article
|
||
|
|
key={useCase.title}
|
||
|
|
className="rounded-xl border border-gray-100 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
|
||
|
|
>
|
||
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-50 text-primary-600">
|
||
|
|
<Icon className="h-6 w-6" aria-hidden />
|
||
|
|
</div>
|
||
|
|
<h3 className="mt-4 font-heading text-lg font-semibold text-neutral-900">
|
||
|
|
{useCase.title}
|
||
|
|
</h3>
|
||
|
|
<p className="mt-2 text-sm leading-relaxed text-neutral-600">
|
||
|
|
{useCase.description}
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</SectionReveal>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|