feat: initial commit - Jhonny Editor

- Adicionado estrutura completa do projeto - Configurado MCP server para Premiere Pro - Adicionado documentação e skills - Configurado Gitignore para o projeto
2026-09-08 09:59:31 -04:00
commit b541f502ba
1507 changed files with 387650 additions and 0 deletions
@@ -0,0 +1,97 @@
+"use client"
+
+import { Clapperboard, Film, WandSparkles } from "lucide-react"
+import Image from "next/image"
+import { useState } from "react"
+import { product } from "@/lib/product"
+import { trackOnboardingEvent } from "@/lib/onboarding-events"
+
+const outcomes = [
+  { icon: Film, label: "Timeline", detail: "B-roll inserted on V2" },
+  { icon: WandSparkles, label: "Finish", detail: "Grade and title applied" },
+  { icon: Clapperboard, label: "Delivery", detail: "ProRes export queued" },
+]
+
+export function DemoVideoSection() {
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  function startDemo() {
+    setIsPlaying(true)
+    trackOnboardingEvent("marketing_demo_played", { demo: "illustrated_workflow" })
+  }
+
+  return (
+    <section id="demo" className="reveal-section overflow-hidden border-y border-zinc-900 bg-[#050506] px-5 py-24 md:py-32">
+      <div className="mx-auto max-w-6xl">
+        <div className="grid items-end gap-8 md:grid-cols-[1fr_auto]">
+          <div className="max-w-3xl">
+            <p className="font-mono text-xs font-semibold uppercase tracking-[0.18em] text-purple-300">Illustrated product walkthrough</p>
+            <h2 className="mt-4 text-balance text-4xl font-bold tracking-[-0.035em] text-white md:text-6xl">
+              From prompt to an explicit result.
+            </h2>
+          </div>
+          <p className="max-w-sm text-sm leading-7 text-zinc-400 md:text-right">
+            See the intended request-to-result flow. This animation is not a recording of a live Premiere host session.
+          </p>
+        </div>
+
+        <div className="demo-video-shell relative mt-14 overflow-hidden rounded-2xl border border-white/10 bg-black shadow-[0_38px_100px_rgba(0,0,0,0.58)]">
+          {isPlaying ? (
+            <video
+              className="aspect-video w-full bg-[#060608]"
+              controls
+              autoPlay
+              muted
+              loop
+              playsInline
+              preload="metadata"
+              poster="/premiere-pro-mcp-demo-poster.png"
+              aria-label="MCP for Adobe Premiere Pro inserts B-roll, applies a color grade and title, then queues a ProRes export"
+            >
+              <source src="/premiere-pro-mcp-demo.mp4" type="video/mp4" />
+              Your browser does not support embedded video. The demo shows an AI request becoming a structured Premiere Pro edit.
+            </video>
+          ) : (
+            <button
+              type="button"
+              onClick={startDemo}
+              className="group relative block aspect-video w-full overflow-hidden bg-[#060608] text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-300 focus-visible:ring-inset"
+              aria-label="Play the illustrated MCP for Adobe Premiere Pro workflow walkthrough"
+            >
+              <Image
+                src="/premiere-pro-mcp-demo-poster.png"
+                alt=""
+                aria-hidden="true"
+                fill
+                sizes="(max-width: 768px) 100vw, 1152px"
+                className="h-full w-full object-cover opacity-85 transition duration-300 group-hover:scale-[1.01] group-hover:opacity-100"
+                loading="lazy"
+              />
+              <span className="absolute inset-0 grid place-items-center bg-black/20">
+                <span className="rounded-full border border-white/30 bg-black/75 px-5 py-3 text-sm font-semibold text-white shadow-lg backdrop-blur transition group-hover:border-purple-300 group-hover:bg-black/90">
+                  Play illustrated walkthrough
+                </span>
+              </span>
+            </button>
+          )}
+          <span className="pointer-events-none absolute right-[3%] top-[4%] rounded bg-[#09090d] px-2 py-1 font-mono text-[9px] text-zinc-400 sm:text-[11px]">
+            LOCAL BRIDGE · {product.coreToolCount} TOOLS
+          </span>
+          <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-purple-300/60 to-transparent" aria-hidden="true" />
+        </div>
+
+        <div className="mt-8 grid border-t border-zinc-800 sm:grid-cols-3">
+          {outcomes.map((outcome) => (
+            <div key={outcome.label} className="flex items-center gap-4 border-b border-zinc-800 py-5 sm:border-b-0 sm:border-r sm:px-6 first:sm:pl-0 last:sm:border-r-0">
+              <outcome.icon className="h-5 w-5 shrink-0 text-purple-300" strokeWidth={1.6} />
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-[0.14em] text-zinc-500">{outcome.label}</p>
+                <p className="mt-1 text-sm text-zinc-200">{outcome.detail}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}