From 4875e468fe23575877d6f9039a9fc717885fd297 Mon Sep 17 00:00:00 2001 From: "Soroush.Asadi" Date: Mon, 25 May 2026 07:40:26 +0330 Subject: [PATCH] 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 --- messages/en.json | 64 +++++++++++++ messages/fa.json | 64 +++++++++++++ src/components/image-maker/ImageMakerCta.tsx | 31 ++++--- .../image-maker/ImageMakerFeatures.tsx | 92 +++++++------------ src/components/image-maker/ImageMakerHero.tsx | 14 +-- .../image-maker/ImageMakerUseCases.tsx | 85 +++++++---------- src/components/sections/Pricing.tsx | 4 +- src/components/video-maker/VideoMakerCta.tsx | 31 ++++--- .../video-maker/VideoMakerFeatures.tsx | 92 +++++++------------ src/components/video-maker/VideoMakerHero.tsx | 14 +-- .../video-maker/VideoMakerUseCases.tsx | 82 ++++++----------- 11 files changed, 305 insertions(+), 268 deletions(-) diff --git a/messages/en.json b/messages/en.json index 692f578..16b6516 100644 --- a/messages/en.json +++ b/messages/en.json @@ -226,6 +226,70 @@ "searchPresets": "Search presets...", "useTemplate": "Use Template" }, + "videoMaker": { + "badge": "Video Maker", + "heroTitle": "AI Video Maker — Create stunning videos in minutes", + "heroDesc": "Script, edit, caption, and export professional videos without a production team. Templates and AI tools handle the heavy lifting.", + "heroCta": "Start Making Videos Free", + "heroBrowse": "Browse video templates", + "featuresHeading": "Everything you need to edit faster", + "featuresSub": "From first draft to final export, FlatRender keeps your workflow in one place.", + "feature0Title": "500+ templates", + "feature0Desc": "Launch promos, explainers, and social clips from studio-quality starting points.", + "feature1Title": "AI script writer", + "feature1Desc": "Turn a brief into scene-by-scene scripts with hooks, CTAs, and on-brand tone.", + "feature2Title": "Auto-subtitles", + "feature2Desc": "Generate accurate captions in dozens of languages with one-click styling.", + "feature3Title": "Music library", + "feature3Desc": "Licensed tracks and sound effects matched to mood, tempo, and video length.", + "feature4Title": "1-click export", + "feature4Desc": "Export MP4 up to 4K with presets for YouTube, Reels, ads, and presentations.", + "useCasesHeading": "Built for every channel", + "useCasesSub": "Pick a format and let templates handle aspect ratio, safe zones, and pacing.", + "useCase0Title": "YouTube", + "useCase0Desc": "Intros, outros, and long-form explainers with chapters and thumbnail-ready frames.", + "useCase1Title": "Instagram Reels", + "useCase1Desc": "Vertical templates, bold captions, and beat-synced cuts built for short-form.", + "useCase2Title": "Ads", + "useCase2Desc": "High-converting promos for Meta, Google, and TikTok with platform-safe ratios.", + "useCase3Title": "Corporate Videos", + "useCase3Desc": "Onboarding, training, and investor updates with consistent brand styling.", + "ctaHeading": "Ready to create your first video?", + "ctaDesc": "Join over a million creators using FlatRender Video Maker — free to start, no credit card required.", + "ctaButton": "Start Making Videos Free" + }, + "imageMaker": { + "badge": "Image Maker", + "heroTitle": "AI Image Maker — Design professional visuals instantly", + "heroDesc": "Generate, resize, and brand every asset for social, ads, and print without switching tools or hiring a designer.", + "heroCta": "Start Creating Images Free", + "heroBrowse": "View example gallery", + "featuresHeading": "Design smarter, not harder", + "featuresSub": "FlatRender Image Maker combines AI generation with pro layout tools in one workflow.", + "feature0Title": "AI image generation", + "feature0Desc": "Describe your idea and get on-brand visuals, backgrounds, and product shots in seconds.", + "feature1Title": "Templates", + "feature1Desc": "Start from layouts built for posts, stories, ads, and presentations — fully editable.", + "feature2Title": "Resize for any platform", + "feature2Desc": "One design, every size: Instagram, LinkedIn, banners, and print-ready exports.", + "feature3Title": "Brand kit", + "feature3Desc": "Lock logos, fonts, and colors so every asset stays consistent across your team.", + "feature4Title": "Batch export", + "feature4Desc": "Export dozens of variations at once for campaigns, locales, and A/B tests.", + "useCasesHeading": "Visuals for every use case", + "useCasesSub": "From quick social graphics to polished brand assets — one tool, every format.", + "useCase0Title": "Social Posts", + "useCase0Desc": "Square, portrait, and carousel layouts with bold typography and safe zones.", + "useCase1Title": "Thumbnails", + "useCase1Desc": "High-contrast covers for YouTube, podcasts, and courses that read at any size.", + "useCase2Title": "Banners", + "useCase2Desc": "Website heroes, email headers, and ad banners with responsive crop guides.", + "useCase3Title": "Logos", + "useCase3Desc": "Vector-friendly marks and lockups with transparent exports for any background.", + "ctaHeading": "Start designing your next visual today", + "ctaDesc": "Free plan includes exports and basic templates. Upgrade anytime for AI generation and brand kits.", + "ctaButton": "Start Creating Images Free" + }, "common": { "loading": "Loading...", "error": "Error", diff --git a/messages/fa.json b/messages/fa.json index bbf5610..0d70cef 100644 --- a/messages/fa.json +++ b/messages/fa.json @@ -226,6 +226,70 @@ "searchPresets": "جستجوی قالب‌ها...", "useTemplate": "استفاده از قالب" }, + "videoMaker": { + "badge": "ویدیو ساز", + "heroTitle": "ویدیو ساز هوشمند — ویدیوهای خیره‌کننده در چند دقیقه بسازید", + "heroDesc": "بدون تیم تولید، ویدیوهای حرفه‌ای را اسکریپت‌نویسی، ویرایش، زیرنویس و خروجی بگیرید. قالب‌ها و ابزارهای هوش مصنوعی کار سنگین را انجام می‌دهند.", + "heroCta": "رایگان ویدیو بسازید", + "heroBrowse": "مرور قالب‌های ویدیویی", + "featuresHeading": "همه چیز برای ویرایش سریع‌تر", + "featuresSub": "از پیش‌نویس اول تا خروجی نهایی، FlatRender جریان کاری شما را در یک جا نگه می‌دارد.", + "feature0Title": "بیش از ۵۰۰ قالب", + "feature0Desc": "تیزرها، توضیح‌دهنده‌ها و کلیپ‌های اجتماعی را از نقطه شروع‌های باکیفیت استودیویی راه‌اندازی کنید.", + "feature1Title": "نویسنده اسکریپت هوش مصنوعی", + "feature1Desc": "یک بریف را به اسکریپت‌های صحنه به صحنه با قلاب، CTA و لحن متناسب با برند تبدیل کنید.", + "feature2Title": "زیرنویس خودکار", + "feature2Desc": "با یک کلیک، کپشن‌های دقیق به ده‌ها زبان با استایل‌بندی آسان تولید کنید.", + "feature3Title": "کتابخانه موسیقی", + "feature3Desc": "آهنگ‌ها و افکت‌های صوتی مجاز متناسب با حال‌وهوا، ریتم و طول ویدیو.", + "feature4Title": "خروجی یک‌کلیکی", + "feature4Desc": "MP4 تا ۴K با پیش‌تنظیم برای یوتیوب، ریلز، آگهی‌ها و ارائه‌ها خروجی بگیرید.", + "useCasesHeading": "ساخته‌شده برای هر کانال", + "useCasesSub": "یک فرمت انتخاب کنید و بگذارید قالب‌ها نسبت تصویر، ناحیه‌های ایمن و ریتم را مدیریت کنند.", + "useCase0Title": "یوتیوب", + "useCase0Desc": "اینترو، اوترو و توضیح‌دهنده‌های بلند با فصل‌بندی و فریم‌های آماده تامبنیل.", + "useCase1Title": "ریلز اینستاگرام", + "useCase1Desc": "قالب‌های عمودی، کپشن‌های پررنگ و برش‌های هماهنگ با ریتم برای فرمت کوتاه.", + "useCase2Title": "آگهی‌ها", + "useCase2Desc": "تیزرهای پرتبدیل برای Meta، Google و TikTok با نسبت‌های ایمن پلتفرم.", + "useCase3Title": "ویدیوهای شرکتی", + "useCase3Desc": "آنبوردینگ، آموزش و گزارش‌های سرمایه‌گذاران با استایل‌بندی یکنواخت برند.", + "ctaHeading": "آماده‌اید اولین ویدیوتان را بسازید؟", + "ctaDesc": "به بیش از یک میلیون سازنده که از FlatRender Video Maker استفاده می‌کنند بپیوندید — شروع رایگان، بدون نیاز به کارت اعتباری.", + "ctaButton": "رایگان ویدیو بسازید" + }, + "imageMaker": { + "badge": "تصویر ساز", + "heroTitle": "تصویر ساز هوشمند — ویژوال‌های حرفه‌ای را فوری طراحی کنید", + "heroDesc": "هر دارایی را برای رسانه اجتماعی، آگهی و چاپ بدون تغییر ابزار یا استخدام طراح تولید، تغییر اندازه و برند کنید.", + "heroCta": "رایگان تصویر بسازید", + "heroBrowse": "مشاهده نمونه‌ها", + "featuresHeading": "هوشمندانه‌تر طراحی کنید، نه سخت‌تر", + "featuresSub": "FlatRender Image Maker تولید هوش مصنوعی را با ابزارهای چیدمان حرفه‌ای در یک جریان کاری ترکیب می‌کند.", + "feature0Title": "تولید تصویر با هوش مصنوعی", + "feature0Desc": "ایده‌تان را توصیف کنید و ویژوال‌های متناسب با برند، پس‌زمینه‌ها و عکس‌های محصول را در ثانیه‌ها دریافت کنید.", + "feature1Title": "قالب‌ها", + "feature1Desc": "از چیدمان‌های ساخته‌شده برای پست، استوری، آگهی و ارائه شروع کنید — کاملاً قابل ویرایش.", + "feature2Title": "تغییر اندازه برای هر پلتفرم", + "feature2Desc": "یک طرح، هر اندازه: اینستاگرام، لینکدین، بنرها و خروجی‌های آماده چاپ.", + "feature3Title": "کیت برند", + "feature3Desc": "لوگوها، فونت‌ها و رنگ‌ها را قفل کنید تا هر دارایی در کل تیم یکنواخت بماند.", + "feature4Title": "خروجی دسته‌ای", + "feature4Desc": "ده‌ها نسخه را یکجا برای کمپین‌ها، لوکال‌ها و تست‌های A/B خروجی بگیرید.", + "useCasesHeading": "ویژوال برای هر کاربرد", + "useCasesSub": "از گرافیک‌های سریع اجتماعی تا دارایی‌های برند صیقلی — یک ابزار، هر فرمت.", + "useCase0Title": "پست‌های اجتماعی", + "useCase0Desc": "چیدمان‌های مربعی، پرتره و کاروسل با تایپوگرافی پررنگ و ناحیه‌های ایمن.", + "useCase1Title": "تامبنیل‌ها", + "useCase1Desc": "جلدهای کنتراست‌بالا برای یوتیوب، پادکست و دوره‌ها که در هر اندازه‌ای خوانا هستند.", + "useCase2Title": "بنرها", + "useCase2Desc": "هیروهای وب‌سایت، هدرهای ایمیل و بنرهای تبلیغاتی با راهنمای برش واکنش‌گرا.", + "useCase3Title": "لوگوها", + "useCase3Desc": "نشان‌ها و لوک‌آپ‌های وکتور با خروجی‌های شفاف برای هر پس‌زمینه‌ای.", + "ctaHeading": "همین امروز اولین ویژوالتان را طراحی کنید", + "ctaDesc": "پلن رایگان شامل خروجی و قالب‌های پایه است. برای تولید هوش مصنوعی و کیت برند هر زمان ارتقا دهید.", + "ctaButton": "رایگان تصویر بسازید" + }, "common": { "loading": "در حال بارگذاری...", "error": "خطا", diff --git a/src/components/image-maker/ImageMakerCta.tsx b/src/components/image-maker/ImageMakerCta.tsx index c4c720a..83bd220 100644 --- a/src/components/image-maker/ImageMakerCta.tsx +++ b/src/components/image-maker/ImageMakerCta.tsx @@ -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 (
-

- Start designing your next visual today -

-

- Free plan includes exports and basic templates. Upgrade anytime for AI - generation and brand kits. -

- +

+ {t("ctaHeading")} +

+

+ {t("ctaDesc")} +

+
diff --git a/src/components/image-maker/ImageMakerFeatures.tsx b/src/components/image-maker/ImageMakerFeatures.tsx index c535159..4eb7487 100644 --- a/src/components/image-maker/ImageMakerFeatures.tsx +++ b/src/components/image-maker/ImageMakerFeatures.tsx @@ -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[0]), + description: t(`feature${i}Desc` as Parameters[0]), + })); + return (

- Design smarter, not harder + {t("featuresHeading")}

- CreatorStudio Image Maker combines AI generation with pro layout tools - in one workflow. + {t("featuresSub")}

- {features.map((feature) => { - const Icon = feature.icon; - return ( -
-
- -
-

- {feature.title} -

-

- {feature.description} -

-
- ); - })} + {features.map(({ Icon, title, description }) => ( +
+
+ +
+

+ {title} +

+

+ {description} +

+
+ ))}
diff --git a/src/components/image-maker/ImageMakerHero.tsx b/src/components/image-maker/ImageMakerHero.tsx index 04c1477..2037691 100644 --- a/src/components/image-maker/ImageMakerHero.tsx +++ b/src/components/image-maker/ImageMakerHero.tsx @@ -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 (
@@ -21,14 +24,13 @@ export function ImageMakerHero() { transition={{ duration: 0.4, ease: "easeOut" }} > - Image Maker + {t("badge")}

- AI Image Maker — Design professional visuals instantly + {t("heroTitle")}

- Generate, resize, and brand every asset for social, ads, and print - without switching tools or hiring a designer. + {t("heroDesc")}

diff --git a/src/components/image-maker/ImageMakerUseCases.tsx b/src/components/image-maker/ImageMakerUseCases.tsx index 48d659c..c79adac 100644 --- a/src/components/image-maker/ImageMakerUseCases.tsx +++ b/src/components/image-maker/ImageMakerUseCases.tsx @@ -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[0]), + description: t(`useCase${i}Desc` as Parameters[0]), + })); + return (

- Visuals for every use case + {t("useCasesHeading")}

- From quick social graphics to polished brand assets—one tool, every - format. + {t("useCasesSub")}

- {useCases.map((useCase) => { - const Icon = useCase.icon; - return ( -
-
- -
-

- {useCase.title} -

-

- {useCase.description} -

-
- ); - })} + {useCases.map(({ Icon, title, description }) => ( +
+
+ +
+

+ {title} +

+

+ {description} +

+
+ ))}
diff --git a/src/components/sections/Pricing.tsx b/src/components/sections/Pricing.tsx index 14fc602..43e8094 100644 --- a/src/components/sections/Pricing.tsx +++ b/src/components/sections/Pricing.tsx @@ -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("annual"); return (

- Choose your FlatRender plan + {t("heading")}

diff --git a/src/components/video-maker/VideoMakerCta.tsx b/src/components/video-maker/VideoMakerCta.tsx index a59e5eb..b9682e5 100644 --- a/src/components/video-maker/VideoMakerCta.tsx +++ b/src/components/video-maker/VideoMakerCta.tsx @@ -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 (
-

- Ready to create your first video? -

-

- Join over a million creators using CreatorStudio Video Maker—free to - start, no credit card required. -

- +

+ {t("ctaHeading")} +

+

+ {t("ctaDesc")} +

+
diff --git a/src/components/video-maker/VideoMakerFeatures.tsx b/src/components/video-maker/VideoMakerFeatures.tsx index 08eeb46..d72c361 100644 --- a/src/components/video-maker/VideoMakerFeatures.tsx +++ b/src/components/video-maker/VideoMakerFeatures.tsx @@ -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[0]), + description: t(`feature${i}Desc` as Parameters[0]), + })); + return (

- Everything you need to edit faster + {t("featuresHeading")}

- From first draft to final export, CreatorStudio keeps your workflow in - one place. + {t("featuresSub")}

- {features.map((feature) => { - const Icon = feature.icon; - return ( -
-
- -
-

- {feature.title} -

-

- {feature.description} -

-
- ); - })} + {features.map(({ Icon, title, description }) => ( +
+
+ +
+

+ {title} +

+

+ {description} +

+
+ ))}
diff --git a/src/components/video-maker/VideoMakerHero.tsx b/src/components/video-maker/VideoMakerHero.tsx index 423ada8..c5fceff 100644 --- a/src/components/video-maker/VideoMakerHero.tsx +++ b/src/components/video-maker/VideoMakerHero.tsx @@ -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 (
@@ -21,21 +24,20 @@ export function VideoMakerHero() { transition={{ duration: 0.4, ease: "easeOut" }} > - Video Maker + {t("badge")}

- AI Video Maker — Create stunning videos in minutes + {t("heroTitle")}

- Script, edit, caption, and export professional videos without a - production team. Templates and AI tools handle the heavy lifting. + {t("heroDesc")}

diff --git a/src/components/video-maker/VideoMakerUseCases.tsx b/src/components/video-maker/VideoMakerUseCases.tsx index b5c9a3e..6afb4d5 100644 --- a/src/components/video-maker/VideoMakerUseCases.tsx +++ b/src/components/video-maker/VideoMakerUseCases.tsx @@ -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[0]), + description: t(`useCase${i}Desc` as Parameters[0]), + })); + return (

- Built for every channel + {t("useCasesHeading")}

- Pick a format and let templates handle aspect ratio, safe zones, and - pacing. + {t("useCasesSub")}

- {useCases.map((useCase) => { - const Icon = useCase.icon; - return ( -
-
- -
-

- {useCase.title} -

-

- {useCase.description} -

-
- ); - })} + {useCases.map(({ Icon, title, description }) => ( +
+
+ +
+

+ {title} +

+

+ {description} +

+
+ ))}