Soroush.Asadi
4875e468fe
- 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
54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
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";
|
|
|
|
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">
|
|
{t("useCasesHeading")}
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-2xl text-neutral-600">
|
|
{t("useCasesSub")}
|
|
</p>
|
|
</SectionReveal>
|
|
|
|
<SectionReveal className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
{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>
|
|
);
|
|
}
|