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,72 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { LucideIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export interface HowItWorksStepProps {
+  number: number;
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  previewClassName: string;
+  reversed?: boolean;
+}
+
+export function HowItWorksStep({
+  number,
+  title,
+  description,
+  icon: Icon,
+  previewClassName,
+  reversed = false,
+}: HowItWorksStepProps) {
+  const slideFrom = reversed ? 48 : -48;
+
+  return (
+    <div
+      className={cn(
+        "grid items-center gap-8 lg:grid-cols-2 lg:gap-16",
+        reversed && "lg:[&>*:first-child]:order-2 lg:[&>*:last-child]:order-1"
+      )}
+    >
+      <motion.div
+        initial={{ opacity: 0, x: slideFrom }}
+        whileInView={{ opacity: 1, x: 0 }}
+        viewport={{ once: true, margin: "-80px" }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+        className="flex gap-5"
+      >
+        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-600 font-heading text-lg font-bold text-white shadow-sm">
+          {number}
+        </div>
+        <div>
+          <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-50 text-primary-600">
+            <Icon className="h-5 w-5" aria-hidden />
+          </div>
+          <h3 className="font-heading text-xl font-bold text-neutral-900 sm:text-2xl">
+            {title}
+          </h3>
+          <p className="mt-3 text-base leading-relaxed text-neutral-600">
+            {description}
+          </p>
+        </div>
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0, x: -slideFrom }}
+        whileInView={{ opacity: 1, x: 0 }}
+        viewport={{ once: true, margin: "-80px" }}
+        transition={{ duration: 0.4, ease: "easeOut", delay: 0.08 }}
+        className={cn(
+          "flex aspect-[4/3] items-center justify-center rounded-xl border shadow-sm",
+          previewClassName
+        )}
+        aria-hidden
+      >
+        <Icon className="h-20 w-20 opacity-30" />
+      </motion.div>
+    </div>
+  );
+}