feat: full studio build -- light theme, canvas thumbnails, i18n (fa/en)

2026-05-24 17:37:21 +03:30
parent d962483359
commit c61f587767
295 changed files with 29797 additions and 265 deletions
@@ -0,0 +1,79 @@
+"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>
+  );
+}