i18n: wire useTranslations for video-maker, image-maker, and pricing heading
- Add videoMaker + imageMaker namespace to en.json and fa.json
(hero, features x5, use-cases x4, CTA per section)
- Pricing.tsx: replace hardcoded heading with t('pricing.heading')
- VideoMakerHero/Features/UseCases/Cta: full useTranslations wiring
- ImageMakerHero/Features/UseCases/Cta: full useTranslations wiring
- Features/UseCases arrays moved inside components; icons kept as
module-level constants to avoid per-render allocation
This commit is contained in:
Soroush.Asadi
@@ -1,30 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { SectionReveal } from "@/components/sections/SectionReveal";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function ImageMakerCta() {
|
||||
const t = useTranslations("imageMaker");
|
||||
|
||||
return (
|
||||
<section className="bg-violet-600 py-20 sm:py-24">
|
||||
<div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
|
||||
<SectionReveal>
|
||||
<h2 className="font-heading text-3xl font-bold text-white sm:text-4xl">
|
||||
Start designing your next visual today
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-violet-100">
|
||||
Free plan includes exports and basic templates. Upgrade anytime for AI
|
||||
generation and brand kits.
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
className="mt-8 bg-white text-violet-600 hover:bg-violet-50"
|
||||
asChild
|
||||
>
|
||||
<Link href="/auth?tab=sign-up">Start Creating Images Free</Link>
|
||||
</Button>
|
||||
<h2 className="font-heading text-3xl font-bold text-white sm:text-4xl">
|
||||
{t("ctaHeading")}
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-violet-100">
|
||||
{t("ctaDesc")}
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
className="mt-8 bg-white text-violet-600 hover:bg-violet-50"
|
||||
asChild
|
||||
>
|
||||
<Link href="/auth?tab=sign-up">{t("ctaButton")}</Link>
|
||||
</Button>
|
||||
</SectionReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,82 +8,56 @@ import {
|
||||
Palette,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { SectionReveal } from "@/components/sections/SectionReveal";
|
||||
|
||||
interface Feature {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const features: Feature[] = [
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "AI image generation",
|
||||
description:
|
||||
"Describe your idea and get on-brand visuals, backgrounds, and product shots in seconds.",
|
||||
},
|
||||
{
|
||||
icon: LayoutTemplate,
|
||||
title: "Templates",
|
||||
description:
|
||||
"Start from layouts built for posts, stories, ads, and presentations—fully editable.",
|
||||
},
|
||||
{
|
||||
icon: Maximize2,
|
||||
title: "Resize for any platform",
|
||||
description:
|
||||
"One design, every size: Instagram, LinkedIn, banners, and print-ready exports.",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "Brand kit",
|
||||
description:
|
||||
"Lock logos, fonts, and colors so every asset stays consistent across your team.",
|
||||
},
|
||||
{
|
||||
icon: Files,
|
||||
title: "Batch export",
|
||||
description:
|
||||
"Export dozens of variations at once for campaigns, locales, and A/B tests.",
|
||||
},
|
||||
const FEATURE_ICONS: LucideIcon[] = [
|
||||
Sparkles,
|
||||
LayoutTemplate,
|
||||
Maximize2,
|
||||
Palette,
|
||||
Files,
|
||||
];
|
||||
|
||||
export function ImageMakerFeatures() {
|
||||
const t = useTranslations("imageMaker");
|
||||
|
||||
const features = FEATURE_ICONS.map((Icon, i) => ({
|
||||
Icon,
|
||||
title: t(`feature${i}Title` as Parameters<typeof t>[0]),
|
||||
description: t(`feature${i}Desc` as Parameters<typeof t>[0]),
|
||||
}));
|
||||
|
||||
return (
|
||||
<section className="bg-neutral-50 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">
|
||||
Design smarter, not harder
|
||||
{t("featuresHeading")}
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-neutral-600">
|
||||
CreatorStudio Image Maker combines AI generation with pro layout tools
|
||||
in one workflow.
|
||||
{t("featuresSub")}
|
||||
</p>
|
||||
</SectionReveal>
|
||||
|
||||
<SectionReveal className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{features.map((feature) => {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<article
|
||||
key={feature.title}
|
||||
className="rounded-xl border border-gray-100 bg-white p-6 shadow-sm"
|
||||
>
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-lg bg-violet-600 text-white">
|
||||
<Icon className="h-5 w-5" aria-hidden />
|
||||
</div>
|
||||
<h3 className="mt-4 font-heading text-lg font-semibold text-neutral-900">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-neutral-600">
|
||||
{feature.description}
|
||||
</p>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
{features.map(({ Icon, title, description }) => (
|
||||
<article
|
||||
key={title}
|
||||
className="rounded-xl border border-gray-100 bg-white p-6 shadow-sm"
|
||||
>
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-lg bg-violet-600 text-white">
|
||||
<Icon className="h-5 w-5" aria-hidden />
|
||||
</div>
|
||||
<h3 className="mt-4 font-heading text-lg font-semibold text-neutral-900">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-neutral-600">
|
||||
{description}
|
||||
</p>
|
||||
</article>
|
||||
))}
|
||||
</SectionReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -2,12 +2,15 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import { ImageMakerBeforeAfter } from "./ImageMakerBeforeAfter";
|
||||
|
||||
export function ImageMakerHero() {
|
||||
const t = useTranslations("imageMaker");
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-white pb-16 pt-12 sm:pb-20 sm:pt-16">
|
||||
<div className="pointer-events-none absolute -left-32 top-0 h-96 w-96 rounded-full bg-violet-200/40 blur-3xl" />
|
||||
@@ -21,14 +24,13 @@ export function ImageMakerHero() {
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<span className="inline-flex rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-700">
|
||||
Image Maker
|
||||
{t("badge")}
|
||||
</span>
|
||||
<h1 className="mt-4 font-heading text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl">
|
||||
AI Image Maker — Design professional visuals instantly
|
||||
{t("heroTitle")}
|
||||
</h1>
|
||||
<p className="mt-6 text-lg leading-relaxed text-neutral-600">
|
||||
Generate, resize, and brand every asset for social, ads, and print
|
||||
without switching tools or hiring a designer.
|
||||
{t("heroDesc")}
|
||||
</p>
|
||||
<div className="mt-8 flex flex-col gap-4 sm:flex-row">
|
||||
<Button
|
||||
@@ -36,10 +38,10 @@ export function ImageMakerHero() {
|
||||
className="bg-violet-600 hover:bg-violet-700"
|
||||
asChild
|
||||
>
|
||||
<Link href="/sign-up">Start Creating Images Free</Link>
|
||||
<Link href="/sign-up">{t("heroCta")}</Link>
|
||||
</Button>
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<Link href="#gallery">View example gallery</Link>
|
||||
<Link href="#gallery">{t("heroBrowse")}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@@ -7,76 +7,55 @@ import {
|
||||
RectangleHorizontal,
|
||||
Share2,
|
||||
} from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { SectionReveal } from "@/components/sections/SectionReveal";
|
||||
|
||||
interface UseCase {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: LucideIcon;
|
||||
}
|
||||
|
||||
const useCases: UseCase[] = [
|
||||
{
|
||||
title: "Social Posts",
|
||||
description:
|
||||
"Square, portrait, and carousel layouts with bold typography and safe zones.",
|
||||
icon: Share2,
|
||||
},
|
||||
{
|
||||
title: "Thumbnails",
|
||||
description:
|
||||
"High-contrast covers for YouTube, podcasts, and courses that read at any size.",
|
||||
icon: ImageIcon,
|
||||
},
|
||||
{
|
||||
title: "Banners",
|
||||
description:
|
||||
"Website heroes, email headers, and ad banners with responsive crop guides.",
|
||||
icon: RectangleHorizontal,
|
||||
},
|
||||
{
|
||||
title: "Logos",
|
||||
description:
|
||||
"Vector-friendly marks and lockups with transparent exports for any background.",
|
||||
icon: Hexagon,
|
||||
},
|
||||
const USE_CASE_ICONS: LucideIcon[] = [
|
||||
Share2,
|
||||
ImageIcon,
|
||||
RectangleHorizontal,
|
||||
Hexagon,
|
||||
];
|
||||
|
||||
export function ImageMakerUseCases() {
|
||||
const t = useTranslations("imageMaker");
|
||||
|
||||
const useCases = USE_CASE_ICONS.map((Icon, i) => ({
|
||||
Icon,
|
||||
title: t(`useCase${i}Title` as Parameters<typeof t>[0]),
|
||||
description: t(`useCase${i}Desc` as Parameters<typeof t>[0]),
|
||||
}));
|
||||
|
||||
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">
|
||||
Visuals for every use case
|
||||
{t("useCasesHeading")}
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-neutral-600">
|
||||
From quick social graphics to polished brand assets—one tool, every
|
||||
format.
|
||||
{t("useCasesSub")}
|
||||
</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-violet-50 text-violet-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>
|
||||
);
|
||||
})}
|
||||
{useCases.map(({ Icon, title, description }) => (
|
||||
<article
|
||||
key={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-violet-50 text-violet-600">
|
||||
<Icon className="h-6 w-6" aria-hidden />
|
||||
</div>
|
||||
<h3 className="mt-4 font-heading text-lg font-semibold text-neutral-900">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-neutral-600">
|
||||
{description}
|
||||
</p>
|
||||
</article>
|
||||
))}
|
||||
</SectionReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { PricingBillingToggle } from "@/components/sections/PricingBillingToggle";
|
||||
import { PricingCard } from "@/components/sections/PricingCard";
|
||||
@@ -16,13 +17,14 @@ export interface PricingProps {
|
||||
}
|
||||
|
||||
export function Pricing({ className }: PricingProps) {
|
||||
const t = useTranslations("pricing");
|
||||
const [billing, setBilling] = useState<BillingPeriod>("annual");
|
||||
|
||||
return (
|
||||
<PricingSectionShell className={className}>
|
||||
<SectionReveal className="text-center">
|
||||
<h2 className="font-heading text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl">
|
||||
Choose your FlatRender plan
|
||||
{t("heading")}
|
||||
</h2>
|
||||
</SectionReveal>
|
||||
|
||||
|
||||
@@ -1,30 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { SectionReveal } from "@/components/sections/SectionReveal";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function VideoMakerCta() {
|
||||
const t = useTranslations("videoMaker");
|
||||
|
||||
return (
|
||||
<section className="bg-primary-600 py-20 sm:py-24">
|
||||
<div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
|
||||
<SectionReveal>
|
||||
<h2 className="font-heading text-3xl font-bold text-white sm:text-4xl">
|
||||
Ready to create your first video?
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-primary-100">
|
||||
Join over a million creators using CreatorStudio Video Maker—free to
|
||||
start, no credit card required.
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
className="mt-8 bg-white text-primary-600 hover:bg-primary-50"
|
||||
asChild
|
||||
>
|
||||
<Link href="/auth?tab=sign-up">Start Making Videos Free</Link>
|
||||
</Button>
|
||||
<h2 className="font-heading text-3xl font-bold text-white sm:text-4xl">
|
||||
{t("ctaHeading")}
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-primary-100">
|
||||
{t("ctaDesc")}
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
className="mt-8 bg-white text-primary-600 hover:bg-primary-50"
|
||||
asChild
|
||||
>
|
||||
<Link href="/auth?tab=sign-up">{t("ctaButton")}</Link>
|
||||
</Button>
|
||||
</SectionReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,82 +8,56 @@ import {
|
||||
Music,
|
||||
Subtitles,
|
||||
} from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { SectionReveal } from "@/components/sections/SectionReveal";
|
||||
|
||||
interface Feature {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const features: Feature[] = [
|
||||
{
|
||||
icon: LayoutTemplate,
|
||||
title: "500+ templates",
|
||||
description:
|
||||
"Launch promos, explainers, and social clips from studio-quality starting points.",
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: "AI script writer",
|
||||
description:
|
||||
"Turn a brief into scene-by-scene scripts with hooks, CTAs, and on-brand tone.",
|
||||
},
|
||||
{
|
||||
icon: Subtitles,
|
||||
title: "Auto-subtitles",
|
||||
description:
|
||||
"Generate accurate captions in dozens of languages with one-click styling.",
|
||||
},
|
||||
{
|
||||
icon: Music,
|
||||
title: "Music library",
|
||||
description:
|
||||
"Licensed tracks and sound effects matched to mood, tempo, and video length.",
|
||||
},
|
||||
{
|
||||
icon: Download,
|
||||
title: "1-click export",
|
||||
description:
|
||||
"Export MP4 up to 4K with presets for YouTube, Reels, ads, and presentations.",
|
||||
},
|
||||
const FEATURE_ICONS: LucideIcon[] = [
|
||||
LayoutTemplate,
|
||||
FileText,
|
||||
Subtitles,
|
||||
Music,
|
||||
Download,
|
||||
];
|
||||
|
||||
export function VideoMakerFeatures() {
|
||||
const t = useTranslations("videoMaker");
|
||||
|
||||
const features = FEATURE_ICONS.map((Icon, i) => ({
|
||||
Icon,
|
||||
title: t(`feature${i}Title` as Parameters<typeof t>[0]),
|
||||
description: t(`feature${i}Desc` as Parameters<typeof t>[0]),
|
||||
}));
|
||||
|
||||
return (
|
||||
<section className="bg-neutral-50 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">
|
||||
Everything you need to edit faster
|
||||
{t("featuresHeading")}
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-neutral-600">
|
||||
From first draft to final export, CreatorStudio keeps your workflow in
|
||||
one place.
|
||||
{t("featuresSub")}
|
||||
</p>
|
||||
</SectionReveal>
|
||||
|
||||
<SectionReveal className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{features.map((feature) => {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<article
|
||||
key={feature.title}
|
||||
className="rounded-xl border border-gray-100 bg-white p-6 shadow-sm"
|
||||
>
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary-600 text-white">
|
||||
<Icon className="h-5 w-5" aria-hidden />
|
||||
</div>
|
||||
<h3 className="mt-4 font-heading text-lg font-semibold text-neutral-900">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-neutral-600">
|
||||
{feature.description}
|
||||
</p>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
{features.map(({ Icon, title, description }) => (
|
||||
<article
|
||||
key={title}
|
||||
className="rounded-xl border border-gray-100 bg-white p-6 shadow-sm"
|
||||
>
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary-600 text-white">
|
||||
<Icon className="h-5 w-5" aria-hidden />
|
||||
</div>
|
||||
<h3 className="mt-4 font-heading text-lg font-semibold text-neutral-900">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-neutral-600">
|
||||
{description}
|
||||
</p>
|
||||
</article>
|
||||
))}
|
||||
</SectionReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -2,12 +2,15 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import { VideoMakerEditorPreview } from "./VideoMakerEditorPreview";
|
||||
|
||||
export function VideoMakerHero() {
|
||||
const t = useTranslations("videoMaker");
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-white pb-16 pt-12 sm:pb-20 sm:pt-16">
|
||||
<div className="pointer-events-none absolute -left-32 top-0 h-96 w-96 rounded-full bg-primary-200/40 blur-3xl" />
|
||||
@@ -21,21 +24,20 @@ export function VideoMakerHero() {
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<span className="inline-flex rounded-full bg-primary-100 px-3 py-1 text-xs font-semibold text-primary-700">
|
||||
Video Maker
|
||||
{t("badge")}
|
||||
</span>
|
||||
<h1 className="mt-4 font-heading text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl">
|
||||
AI Video Maker — Create stunning videos in minutes
|
||||
{t("heroTitle")}
|
||||
</h1>
|
||||
<p className="mt-6 text-lg leading-relaxed text-neutral-600">
|
||||
Script, edit, caption, and export professional videos without a
|
||||
production team. Templates and AI tools handle the heavy lifting.
|
||||
{t("heroDesc")}
|
||||
</p>
|
||||
<div className="mt-8 flex flex-col gap-4 sm:flex-row">
|
||||
<Button size="lg" asChild>
|
||||
<Link href="/sign-up">Start Making Videos Free</Link>
|
||||
<Link href="/sign-up">{t("heroCta")}</Link>
|
||||
</Button>
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<Link href="#templates">Browse video templates</Link>
|
||||
<Link href="#templates">{t("heroBrowse")}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@@ -2,76 +2,50 @@
|
||||
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { Building2, Megaphone, Smartphone, Tv } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
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,
|
||||
},
|
||||
];
|
||||
const USE_CASE_ICONS: LucideIcon[] = [Tv, Smartphone, Megaphone, Building2];
|
||||
|
||||
export function VideoMakerUseCases() {
|
||||
const t = useTranslations("videoMaker");
|
||||
|
||||
const useCases = USE_CASE_ICONS.map((Icon, i) => ({
|
||||
Icon,
|
||||
title: t(`useCase${i}Title` as Parameters<typeof t>[0]),
|
||||
description: t(`useCase${i}Desc` as Parameters<typeof t>[0]),
|
||||
}));
|
||||
|
||||
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
|
||||
{t("useCasesHeading")}
|
||||
</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.
|
||||
{t("useCasesSub")}
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
{useCases.map(({ Icon, title, description }) => (
|
||||
<article
|
||||
key={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">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-neutral-600">
|
||||
{description}
|
||||
</p>
|
||||
</article>
|
||||
))}
|
||||
</SectionReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user