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

code/landing/components/ui/animated-gradient-text.tsx

@@ -0,0 +1,26 @@
+import { ComponentPropsWithoutRef } from "react"
+import { cn } from "@/lib/utils"
+
+export function AnimatedGradientText({
+  children,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      className={cn(
+        "group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className={cn(
+          "inline animate-[gradient_8s_linear_infinite] bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent"
+        )}
+      >
+        {children}
+      </span>
+    </div>
+  )
+}

code/landing/components/ui/border-beam.tsx

@@ -0,0 +1,44 @@
+import type { CSSProperties } from "react"
+import { cn } from "@/lib/utils"
+
+interface BorderBeamProps {
+  size?: number
+  duration?: number
+  delay?: number
+  colorFrom?: string
+  colorTo?: string
+  className?: string
+  style?: CSSProperties
+  reverse?: boolean
+  initialOffset?: number
+  borderWidth?: number
+}
+
+export function BorderBeam({
+  className,
+  size = 50,
+  delay = 0,
+  duration = 6,
+  colorFrom = "#ffaa40",
+  colorTo = "#9c40ff",
+  style,
+  reverse = false,
+  initialOffset = 0,
+  borderWidth = 1,
+}: BorderBeamProps) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn("border-beam", reverse && "border-beam-reverse", className)}
+      style={{
+        "--border-beam-size": `${size}px`,
+        "--border-beam-duration": `${duration}s`,
+        "--border-beam-delay": `${-delay - (duration * initialOffset) / 100}s`,
+        "--border-beam-from": colorFrom,
+        "--border-beam-to": colorTo,
+        "--border-beam-width": `${borderWidth}px`,
+        ...style,
+      } as CSSProperties}
+    />
+  )
+}

code/landing/components/ui/marquee.tsx

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef } from "react"
+import { cn } from "@/lib/utils"
+
+interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
+  className?: string
+  reverse?: boolean
+  pauseOnHover?: boolean
+  children: React.ReactNode
+  vertical?: boolean
+  repeat?: number
+}
+
+export function Marquee({
+  className,
+  reverse = false,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  ...props
+}: MarqueeProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
+        { "flex-row": !vertical, "flex-col": vertical },
+        className
+      )}
+    >
+      {Array(repeat)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            key={i}
+            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+              "animate-marquee flex-row": !vertical,
+              "animate-marquee-vertical flex-col": vertical,
+              "group-hover:[animation-play-state:paused]": pauseOnHover,
+              "[animation-direction:reverse]": reverse,
+            })}
+          >
+            {children}
+          </div>
+        ))}
+    </div>
+  )
+}

code/landing/components/ui/shimmer-button.tsx

@@ -0,0 +1,64 @@
+import React, { ComponentPropsWithoutRef, CSSProperties } from "react"
+import { cn } from "@/lib/utils"
+
+export interface ShimmerButtonProps extends ComponentPropsWithoutRef<"button"> {
+  shimmerColor?: string
+  shimmerSize?: string
+  borderRadius?: string
+  shimmerDuration?: string
+  background?: string
+  className?: string
+  children?: React.ReactNode
+}
+
+export const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
+  (
+    {
+      shimmerColor = "#ffffff",
+      shimmerSize = "0.05em",
+      shimmerDuration = "3s",
+      borderRadius = "100px",
+      background = "rgba(0, 0, 0, 1)",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        style={{
+          "--spread": "90deg",
+          "--shimmer-color": shimmerColor,
+          "--radius": borderRadius,
+          "--speed": shimmerDuration,
+          "--cut": shimmerSize,
+          "--bg": background,
+        } as CSSProperties}
+        className={cn(
+          "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden px-6 py-3 whitespace-nowrap text-white border border-white/10",
+          "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
+          "[border-radius:var(--radius)] [background:var(--bg)]",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        <div className={cn("-z-30 blur-[2px]", "[container-type:size] absolute inset-0 overflow-visible")}>
+          <div className="absolute inset-0 [aspect-ratio:1] h-[100cqh] animate-[shimmer-slide_var(--speed)_ease-in-out_infinite_alternate]">
+            <div className="absolute -inset-full w-auto rotate-0 animate-[spin_var(--speed)_linear_infinite] [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]" />
+          </div>
+        </div>
+        {children}
+        <div className={cn(
+          "absolute inset-0 size-full rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
+          "transform-gpu transition-all duration-300 ease-in-out",
+          "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
+          "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]"
+        )} />
+        <div className="absolute [inset:var(--cut)] -z-20 [border-radius:var(--radius)] [background:var(--bg)]" />
+      </button>
+    )
+  }
+)
+ShimmerButton.displayName = "ShimmerButton"

code/landing/components/ui/tracked-link.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import type { ComponentPropsWithoutRef } from "react"
+import { trackOnboardingEvent } from "@/lib/onboarding-events"
+
+type TrackedLinkProps = ComponentPropsWithoutRef<"a"> & {
+  trackingLocation: string
+  trackingDestination: string
+}
+
+export function TrackedLink({
+  trackingLocation,
+  trackingDestination,
+  onClick,
+  ...props
+}: TrackedLinkProps) {
+  return (
+    <a
+      {...props}
+      onClick={(event) => {
+        trackOnboardingEvent("primary_cta_clicked", {
+          location: trackingLocation,
+          destination: trackingDestination,
+        })
+        onClick?.(event)
+      }}
+    />
+  )
+}