[V0_FILE]markdown:file="README.md" # YoYo *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/dev-jackjackrocs-projects/v0-build-a-prototype) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/m7P6ScTt79A) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/dev-jackjackrocs-projects/v0-build-a-prototype](https://vercel.com/dev-jackjackrocs-projects/v0-build-a-prototype)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/m7P6ScTt79A](https://v0.dev/chat/projects/m7P6ScTt79A)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .font-geist { font-family: var(--font-geist-sans, "GeistSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); } /* Custom selection styles */ p[style*="--selection-text-color"]::selection { color: var(--selection-text-color); background-color: var(--selection-background-color); } p[style*="--selection-text-color"]::-moz-selection { color: var(--selection-text-color); background-color: var(--selection-background-color); } /* Heading selection styles */ .heading-with-selection::selection { color: #ffffff; background-color: #000000; } .heading-with-selection::-moz-selection { color: #ffffff; background-color: #000000; } /* Logo text selection styles */ .logo-text::selection { color: #ffffff; background-color: #000000; } .logo-text::-moz-selection { color: #ffffff; background-color: #000000; } .noise-texture { position: absolute; inset: 0; background-image: url("/images/noise.webp"); background-repeat: repeat; background-size: 150px 150px; mix-blend-mode: multiply; opacity: 0.15; pointer-events: none; } .gradient-container { position: relative; border-radius: 16px; overflow: hidden; } .gradient-yellow-red { background: linear-gradient(90deg, #22d3ee 0%, #ff5c28 50%, #ff5c9d 100%); } .gradient-yellow-red-diagonal { background: linear-gradient(135deg, #22d3ee 0%, #ff5c28 50%, #ff5c9d 100%); } .gradient-blue-red { background: linear-gradient(90deg, #22d3ee 0%, #ff5c28 50%, #ff5c9d 100%); } .gradient-teal-red { background: linear-gradient(90deg, #22d3ee 0%, #ff5c28 50%, #ff5c9d 100%); } /* Hide scrollbar but allow scrolling */ .hide-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .hide-scrollbar::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ } /* Add this to ensure rounded corners on all devices */ .rounded-all-devices { border-radius: 16px !important; -webkit-border-radius: 16px !important; overflow: hidden; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { ThemeProvider } from "@/components/theme-provider" import { GeistSans } from "geist/font/sans" export const metadata: Metadata = { title: "YOYO - AI Version Control", description: "Undo AI mistakes instantly — save progress and restore with one click.", openGraph: { title: "YOYO - AI Version Control", description: "Undo AI mistakes instantly — save progress and restore with one click.", images: [ { url: "/images/og-new.jpeg", width: 1200, height: 630, alt: "AI Version Control", }, ], type: "website", }, twitter: { card: "summary_large_image", title: "YOYO - AI Version Control", description: "Undo AI mistakes instantly — save progress and restore with one click.", images: ["/images/og-new.jpeg"], }, icons: { icon: [ { url: "/favicon.ico", sizes: "any" }, { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" }, { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" }, ], apple: { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }, other: [{ rel: "manifest", url: "/site.webmanifest" }], }, generator: 'v0.dev' } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescript:file="app/manifest.ts" import type { MetadataRoute } from "next" export default function manifest(): MetadataRoute.Manifest { return { name: "YOYO - AI Version Control", short_name: "YOYO", description: "Built for the messy, in-progress, AI-assisted moments Git wasn't built to track.", start_url: "/", display: "standalone", background_color: "#000000", theme_color: "#000000", icons: [ { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png", }, { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png", }, ], } } [V0_FILE]typescriptreact:file="app/opengraph-image.tsx" import { ImageResponse } from "next/og" export const runtime = "edge" export const alt = "AI Version Control - Undo AI mistakes instantly — save progress and restore with one click." export const size = { width: 1200, height: 630, } export const contentType = "image/png" // This route generates the Open Graph image export default function Image() { return new ImageResponse(

, { ...size, }, ) } [V0_FILE]typescriptreact:file="components/agentic-ai-search-section.tsx" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Download, Play } from "lucide-react" import FeatureVideo from "@/components/feature-video" interface SearchQuery { id: string question: string videoSrc: string fallbackSrc?: string category: string } const searchQueries: SearchQuery[] = [ { id: "favorites", question: "Show my edits to favorites", videoSrc: "/videos/favorites.mp4", fallbackSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favorites-FFCUeeEFzfxDBIhgGACi7YGpYQZbnU.mp4", category: "Feature", }, { id: "windsurf", question: "Did we update anything using Windsurf?", videoSrc: "/videos/update-windsurf.mp4", fallbackSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/update-windsurf-2nLOc5uJICad4940kOGQdrwE4nsXdo.mp4", category: "Editor", }, { id: "darkmode", question: "Show me my dark mode refactor?", videoSrc: "/videos/dark-mode-search.mp4", fallbackSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dark-mode-search-mSz6mUD1V8RUdjEfezII84ljPxeCyT.mp4", category: "Refactor", }, { id: "v9", question: "What did I do in v9?", videoSrc: "/videos/did-v9.mp4", fallbackSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/did-v9-sNyHkh5hs5gfnDH0tYkH15uK5syHUX.mp4", category: "Version", }, ] interface AgenticAISearchSectionProps { onOpenInstall?: () => void } export default function AgenticAISearchSection({ onOpenInstall }: AgenticAISearchSectionProps) { const [activeQuery, setActiveQuery] = useState(searchQueries[0]) const [hoveredQuery, setHoveredQuery] = useState(null) const [videosLoaded, setVideosLoaded] = useState<{ [key: string]: boolean }>({}) const videoCache = useRef<{ [key: string]: HTMLVideoElement }>({}) const [isHovering, setIsHovering] = useState(false) // Improved video preloading without autoplay useEffect(() => { const preloadVideos = async () => { // Start with the first video (already active) setVideosLoaded({ [searchQueries[0].id]: true }) // Then preload the rest in the background for (const query of searchQueries) { if (query.id === searchQueries[0].id) continue try { const video = document.createElement("video") video.muted = true video.preload = "auto" video.playsInline = true video.loop = true // Remove autoplay - controlled by intersection observer videoCache.current[query.id] = video video.src = query.videoSrc setTimeout(() => { setVideosLoaded((prev) => ({ ...prev, [query.id]: true })) }, 1000) video.onerror = () => { if (query.fallbackSrc) { video.src = query.fallbackSrc } } } catch (error) { console.warn(`Failed to preload video for query ${query.id}:`, error) } } } preloadVideos() return () => { Object.values(videoCache.current).forEach((video) => { video.src = "" video.load() }) videoCache.current = {} } }, []) const handleQueryClick = (query: SearchQuery) => { setActiveQuery(query) } // Simplified hover handling - no delay const handleQueryHover = (query: SearchQuery) => { if (isHovering) { setHoveredQuery(query.id) setActiveQuery(query) } } const handleSectionEnter = () => { setIsHovering(true) } const handleSectionLeave = () => { setIsHovering(false) setHoveredQuery(null) } const getCategoryColor = (category: string) => { switch (category) { case "Feature": return "bg-cyan-500/20 text-cyan-300 border-cyan-400/30" case "Editor": return "bg-orange-500/20 text-orange-300 border-orange-400/30" case "Version": return "bg-pink-500/20 text-pink-300 border-pink-400/30" case "Refactor": return "bg-purple-500/20 text-purple-300 border-purple-400/30" default: return "bg-white/20 text-white border-white/30" } } return (

{/* Title and Description */}

Agentic AI Search

Ask anything. YOYO understands your entire coding timeline — across versions, branches, and editors.

{/* Gradient Section with Video */}

{/* Dark Overlay */}

{/* Noise Overlay */}

{/* Video Section */}

{/* FIXED ASPECT RATIO CONTAINER */}

{/* Mobile Navigation Dots - Only visible on mobile */}

{searchQueries.map((query, index) => (

{/* Gradient Overlay for Text Readability - HIDDEN on mobile and tablet */}

{/* Overlay Content on top of the video - HIDDEN on mobile and tablet */}

{/* Bottom Section: Content Left, Query Buttons Right */}

{/* Left: Feature Info and Install Button - KEEPING ORIGINAL DESIGN */}

AI Search

"{activeQuery.question}"

{onOpenInstall && ( )}

{/* Right: Enhanced Query Buttons - FIXED WIDTH CONTAINER */}

{/* Fixed width container for all buttons to prevent layout shifts */}

{searchQueries.map((query) => ( ))}

) } [V0_FILE]typescriptreact:file="components/faq-section.tsx" "use client" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Button } from "@/components/ui/button" import { Download } from "lucide-react" const faqs = [ { question: "I already use Git. Why would I need YoYo?", answer: ( <> Git is great for commits.

YoYo is for everything before that — messy AI edits, experiments, prompts gone wrong.

It gives you a safety net without bloating your commit history. ), }, { question: "Is it free?", answer: ( <> Yes — there's a generous free tier.

Pro and Team plans coming soon. ), }, { question: "Will this mess up my Git repo?", answer: ( <> Nope.

YoYo keeps everything separate from your Git repo.

No staged files. No surprise commits. Your .git/ stays clean and untouched. ), }, { question: "Where is my version history stored?", answer: ( <> Your full version history lives on your machine — not in the cloud. ), }, { question: "How does YoYo secure AI usage?", answer: ( <> YoYo uses fast, secure LLM providers like Groq, with zero data retention.

Your code is encrypted in transit using TLS 1.2+ and never stored or used for training.

We don't keep logs. We don't keep copies. ), }, { question: "Does it work with branches?", answer: ( <> Yes — beautifully.

Each Git branch has its own version timeline in YoYo. Snapshots stay scoped to your work. ), }, ] interface FAQSectionProps { onOpenInstall?: () => void } export default function FAQSection({ onOpenInstall }: FAQSectionProps) { return (

Frequently Asked (and Silently Wondered) Questions

{faqs.map((faq, index) => ( {faq.question}

{faq.answer}

))} {/* Call to action */}

Still unsure? Try it for 60 seconds — you'll never code AI-assisted without it again.

{onOpenInstall && ( )}

) } [V0_FILE]typescriptreact:file="components/feature-video.tsx" "use client" import { useEffect, useRef, useState } from "react" interface FeatureVideoProps { src: string alt: string fallbackSrc?: string fixedAspectRatio?: boolean } export default function FeatureVideo({ src, alt, fallbackSrc, fixedAspectRatio = false }: FeatureVideoProps) { const videoRef = useRef(null) const containerRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) const [currentSrc, setCurrentSrc] = useState(src) const [isInView, setIsInView] = useState(false) useEffect(() => { const video = videoRef.current const container = containerRef.current if (!video || !container) return const handleCanPlay = () => { setIsLoaded(true) } const handleError = () => { // Silently try fallback if available if (fallbackSrc && currentSrc !== fallbackSrc) { setCurrentSrc(fallbackSrc) setIsLoaded(false) } } // Intersection Observer to detect when video enters viewport const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { setIsInView(entry.isIntersecting) }) }, { threshold: 0.2, // Trigger when 20% of video is visible rootMargin: "50px 0px", // Start playing a bit before entering viewport }, ) video.addEventListener("canplay", handleCanPlay) video.addEventListener("error", handleError) observer.observe(container) // Reset when src changes video.load() // If already loaded if (video.readyState >= 3) { handleCanPlay() } return () => { video.removeEventListener("canplay", handleCanPlay) video.removeEventListener("error", handleError) observer.disconnect() } }, [currentSrc, fallbackSrc]) // Handle play/pause based on intersection and load state useEffect(() => { const video = videoRef.current if (!video || !isLoaded) return if (isInView) { // Try to play the video const playPromise = video.play() if (playPromise !== undefined) { playPromise.catch((error) => { console.log("Video autoplay failed:", error) // Autoplay failed, but that's okay }) } } else { // Pause when out of view if (!video.paused) { video.pause() } } }, [isInView, isLoaded]) // Update source when prop changes useEffect(() => { if (src !== currentSrc) { setCurrentSrc(src) setIsLoaded(false) } }, [src]) return (

) } [V0_FILE]typescriptreact:file="components/footer.tsx" import { Heart } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/hero-image.tsx" "use client" export default function HeroImage() { return (

YOYO AI Version Control interface showing version history, travel app development, and code editor

) } [V0_FILE]typescriptreact:file="components/hero-video.tsx" "use client" import { useEffect, useRef, useState } from "react" export default function HeroVideo() { const videoRef = useRef(null) const containerRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) const [isInView, setIsInView] = useState(false) useEffect(() => { const video = videoRef.current const container = containerRef.current if (!video || !container) return const handleCanPlay = () => { setIsLoaded(true) } const handleError = () => { // Silently try alternative source if (video.src.includes("/videos/hero-video-v3.mp4")) { video.src = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/hero-video-v3-E4dqT6iUgKB1QNwAX45SXQ5xHIZApB.mp4" video.load() } } // Intersection Observer for hero video const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { setIsInView(entry.isIntersecting) }) }, { threshold: 0.3, // Hero video needs more visibility rootMargin: "0px", }, ) video.addEventListener("canplay", handleCanPlay) video.addEventListener("error", handleError) observer.observe(container) // If already loaded if (video.readyState >= 3) { handleCanPlay() } return () => { video.removeEventListener("canplay", handleCanPlay) video.removeEventListener("error", handleError) observer.disconnect() } }, []) // Handle play/pause based on intersection useEffect(() => { const video = videoRef.current if (!video || !isLoaded) return if (isInView) { const playPromise = video.play() if (playPromise !== undefined) { playPromise.catch((error) => { console.log("Hero video autoplay failed:", error) }) } } else { if (!video.paused) { video.pause() } } }, [isInView, isLoaded]) return (

) } [V0_FILE]typescriptreact:file="components/save-review-restore-section.tsx" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Download } from "lucide-react" import FeatureVideo from "@/components/feature-video" interface FeatureData { id: string title: string description: string videoSrc: string fallbackSrc?: string thumbnailSrc: string } const features: FeatureData[] = [ { id: "save", title: "Save", description: "Instantly save your code — and undo bad AI edits anytime.", videoSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoyo-save-2-DUbUp5aKE9GtNY9Diok2eG6SW2qHCX.mp4", fallbackSrc: "/videos/save-review-restore.mp4", thumbnailSrc: "/images/save-thumbnail.jpeg", }, { id: "preview", title: "Preview", description: "Switch to any past version in one click.", videoSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoyo-preview-dnsmAMg2AX6f1thlrNvj1e65T2zUTM.mp4", fallbackSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/save-review-restore-g3BK0sricXTSPMzxK4iGrmXBUwPt11.mp4", thumbnailSrc: "/images/preview-thumbnail.jpeg", }, { id: "restore", title: "Restore", description: "Go back to a clean version in one click.", videoSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoyo-restore-rhqD0huLa48Q51Sy9gzIrIdHk2vu2L.mp4", fallbackSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/save-review-restore-g3BK0sricXTSPMzxK4iGrmXBUwPt11.mp4", thumbnailSrc: "/images/restore-thumbnail.jpeg", }, ] interface SaveReviewRestoreSectionProps { onOpenInstall?: () => void } export default function SaveReviewRestoreSection({ onOpenInstall }: SaveReviewRestoreSectionProps) { const [activeFeature, setActiveFeature] = useState(features[0]) const [hoveredFeature, setHoveredFeature] = useState(null) const [videosLoaded, setVideosLoaded] = useState<{ [key: string]: boolean }>({}) const videoRefs = useRef<{ [key: string]: HTMLVideoElement | null }>({}) // Preload all videos when component mounts useEffect(() => { const loadedState = { ...videosLoaded } // Preload all videos but don't autoplay features.forEach((feature) => { const video = document.createElement("video") video.muted = true video.preload = "auto" video.playsInline = true video.loop = true // Remove autoplay - videos will be controlled by intersection observer video.onloadeddata = () => { setVideosLoaded((prev) => ({ ...prev, [feature.id]: true, })) } video.onerror = () => { if (feature.fallbackSrc) { video.src = feature.fallbackSrc } } video.src = feature.videoSrc loadedState[feature.id] = false }) setVideosLoaded(loadedState) }, []) const handleThumbnailHover = (feature: FeatureData) => { setHoveredFeature(feature.id) setActiveFeature(feature) } const handleThumbnailLeave = () => { setHoveredFeature(null) } const handleThumbnailClick = (feature: FeatureData) => { setActiveFeature(feature) } return (

{/* Title and Description outside the gradient section */}

Save, Preview, Restore

AI moves fast — one bad prompt can break your flow. YOYO lets you save progress, preview changes, and restore instantly.

{/* Gradient Section with Video - ORIGINAL DESIGN with overlay only on desktop */}

{/* Dark Overlay */}

{/* Noise Overlay */}

{/* Original Video Section */}

{/* Mobile Navigation Dots - Only visible on mobile */}

{features.map((feature, index) => (

{/* Gradient Overlay for Text Readability - HIDDEN on mobile and tablet */}

{/* Overlay Content on top of the video - HIDDEN on mobile and tablet */}

{/* Bottom Section: Content Left, Thumbnails Right */}

{/* Left: Feature Info and Install Button */}

{activeFeature.title}

{activeFeature.description}

{onOpenInstall && ( )}

{/* Right: Thumbnails - Now using actual YOYO interface images */}

{features.map((feature, index) => (

handleThumbnailHover(feature)} onMouseLeave={handleThumbnailLeave} onClick={() => handleThumbnailClick(feature)} >

{/* Thumbnail Label */}

{feature.title}

))}

) } [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" "use client" import { Quote } from "lucide-react" export default function TestimonialsSection() { return (

{/* Single Testimonial Card - Now clickable */} {/* Quote Icon */}

{/* YouTube Play Indicator */}

{/* Main Content */}

{/* Rick Rubin Image */}

{/* Quote and Attribution */}

"Vibe Coding is the{" "} Punk Rock {" "} of Software"

{/* Attribution */}

{/* Gradient Border Effect */}

{/* Bottom Text */}

YOYO empowers the rebellious, creative spirit of coding — where breakthrough innovations are born.

) } [V0_FILE]typescriptreact:file="components/why-not-git-section.tsx" "use client" import { Button } from "@/components/ui/button" import { Download, Lightbulb, Save, Users, SeparatorHorizontal } from "lucide-react" interface WhyNotGitSectionProps { onOpenInstall?: () => void } export default function WhyNotGitSection({ onOpenInstall }: WhyNotGitSectionProps) { const features = [ { icon: Save, title: "Git wants clean commits.", description: "YoYo captures messy experiments — no need to stage or think twice.", }, { icon: SeparatorHorizontal, title: "Git pollutes your repo with throwaway changes.", description: "YoYo saves separately — your Git stays clean.", }, { icon: Users, title: "Git is built for engineers.", description: "YoYo works for vibe coders, vibe designers, and anyone vibing with AI.", }, { icon: Lightbulb, title: "Git is for the final product.", description: "YoYo is for figuring things out — fast, chaotic, and creative.", }, ] return (

{/* Header */}

Why Not Just Git?

Git is for shipping. YOYO is for exploring.

{/* Features Grid */}

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

{/* Call to Action */}

Stop worrying about breaking your code. Start exploring with confidence.

{onOpenInstall && ( )}

) } [V0_FILE]plaintext:file="public/site.webmanifest" { "name": "YOYO - Version Control for AI Coding", "short_name": "YOYO", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#000000", "background_color": "#000000", "display": "standalone" } [V0_FILE]typescript:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { geist: ["var(--font-geist-sans)", "GeistSans Fallback", "sans-serif"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]png:file="app/opengraph-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/zFznRTUj0aueFDy7i_HVVm/app/opengraph-image.png" [V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/yBRMCEDQZXo8yRtkLhZdHA/public/abstract-geometric-shapes.png" [V0_FILE]png:file="public/abstract-gradient.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/1SytW_qxO69SNqslQYo-AB/public/abstract-gradient.png" [V0_FILE]png:file="public/android-chrome-192x192.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/6TSnzL3zzgGuecgotpt9gh/public/android-chrome-192x192.png" [V0_FILE]png:file="public/android-chrome-512x512.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/vdubS1U1Ai53v9h55GF0W0/public/android-chrome-512x512.png" [V0_FILE]png:file="public/apple-touch-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/BLuciJkubVeu9YcLs-02AD/public/apple-touch-icon.png" [V0_FILE]png:file="public/favicon-16x16.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/ef9ovL58_sTgL2r1uM5sV9/public/favicon-16x16.png" [V0_FILE]png:file="public/favicon-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/122a_jdG8uR2Omp0HAMV5k/public/favicon-32x32.png" [V0_FILE]plaintext:file="public/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/y5_zgVf9LCQvGgTZWMUqxR/public/favicon.ico" [V0_FILE]plaintext:file="public/fonts/GeistSans-Bold.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/dZ9A9pOpZDebEoq7_oXCJn/public/fonts/GeistSans-Bold.woff2" [V0_FILE]plaintext:file="public/fonts/GeistSans-Medium.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/dZ9A9pOpZDebEoq7_oXCJn/public/fonts/GeistSans-Medium.woff2" [V0_FILE]plaintext:file="public/fonts/GeistSans-Regular.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/dZ9A9pOpZDebEoq7_oXCJn/public/fonts/GeistSans-Regular.woff2" [V0_FILE]plaintext:file="public/fonts/GeistSans-SemiBold.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/dZ9A9pOpZDebEoq7_oXCJn/public/fonts/GeistSans-SemiBold.woff2" [V0_FILE]png:file="public/images/gradient-hero-prerender.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/r1owAyeaUs4FT2SwyhuRqr/public/images/gradient-hero-prerender.png" [V0_FILE]jpg:file="public/images/hero-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/27sp_0qQp85GnYH2N16Gnn/public/images/hero-interface.jpg" [V0_FILE]plaintext:file="public/images/noise.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/-v8ywIejHB9fitc4Ca8Zz_/public/images/noise.webp" [V0_FILE]jpeg:file="public/images/og-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/ZPHYwdSoUPKMtpJALt5DCQ/public/images/og-new.jpeg" [V0_FILE]png:file="public/images/og.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/zFznRTUj0aueFDy7i_HVVm/public/images/og.png" [V0_FILE]jpeg:file="public/images/preview-thumbnail.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/wUSC-RXJgElgPw2gc9Rko3/public/images/preview-thumbnail.jpeg" [V0_FILE]jpg:file="public/images/profiles/anuj.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/No35SqVxm4t8ADSCF66Z3U/public/images/profiles/anuj.jpg" [V0_FILE]jpg:file="public/images/profiles/anushk.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/v63cDkpXFMjc6z8brkpq8R/public/images/profiles/anushk.jpg" [V0_FILE]jpg:file="public/images/profiles/bnj.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/ORJzNm3lbJMoWHy32lPsN_/public/images/profiles/bnj.jpg" [V0_FILE]jpg:file="public/images/profiles/emrah.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/bSjlH8uwDROlaYlh2_XJFX/public/images/profiles/emrah.jpg" [V0_FILE]jpg:file="public/images/profiles/ian.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/SyJtkVSvygWAa5LNGEZM_w/public/images/profiles/ian.jpg" [V0_FILE]jpg:file="public/images/profiles/kitze.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/3gG2tlG4xjydAAplZujeyU/public/images/profiles/kitze.jpg" [V0_FILE]jpg:file="public/images/profiles/tom.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/-drU-uTajDZ1QeR0SJdSG7/public/images/profiles/tom.jpg" [V0_FILE]jpeg:file="public/images/restore-thumbnail.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/GRYfXbEyIDOtUNIVGFwAVI/public/images/restore-thumbnail.jpeg" [V0_FILE]jpeg:file="public/images/rick-rubin-portrait.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/r7mUZ0-8Cz4G3v91V-yw00/public/images/rick-rubin-portrait.jpeg" [V0_FILE]jpeg:file="public/images/save-thumbnail.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_u4JWLzMBUiFSbLROGe7bn9SOat6F/Misk6MA9f-rKB0ecIBX3Q0/public/images/save-thumbnail.jpeg" [V0_FILE]typescriptreact:file="components/vibe-coding-tweets-section.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" interface Tweet { text: string handle: string name: string url: string profileImage: string isHighlighted?: boolean isRetweet?: boolean originalTweet?: { text: string handle: string name: string } stats?: { views?: string likes?: string retweets?: string } } const tweets: Tweet[] = [ // Featured Tweet - Ben South's retweet with commentary (most viral) { text: "vibe coder: how do I save this version?\n\nthese guys: ok first git init && git remote add origin, create a feature branch, git add ., git commit -m 'feat: initial commit', push to create a PR, then later when you hit conflicts just git rebase -i HEAD~3, stash pop, resolve the...", handle: "@bnj", name: "Ben South", url: "https://t.co/Iip1owCIDe", profileImage: "/images/profiles/bnj.jpg", isRetweet: true, originalTweet: { text: 'Cursor/Windsurf need a way to "save" a checkpoint and name it—versioning for vibe coders', handle: "@bnj", name: "Ben South", }, stats: { views: "88.9K", likes: "366", retweets: "22", }, }, // Second - Tom Dörr (389.6K views) { text: "The biggest mistake in vibe coding is prompting the agent to fix errors instead of rolling back", handle: "@tom_doerr", name: "Tom Dörr", url: "https://x.com/tom_doerr/status/1907293098557809124", profileImage: "/images/profiles/tom.jpg", stats: { views: "389.6K", likes: "3.8K", retweets: "219", }, }, // Third - Kitze (369.5K views) { text: "they should invent a tool where vibe code can be stored in the cloud so from time to time you do a 'checkin' of your code and you can always revert to it and go to a previous version\n\nlike a ... hub for code", handle: "@thekitze", name: "Kitze", url: "https://t.co/IPd6mRr7qI", profileImage: "/images/profiles/kitze.jpg", stats: { views: "369.5K", likes: "8.1K", retweets: "358", }, }, // Fourth - Ian Nuttall (31.4K views) { text: "cursor pro tip for vibe coders: use the git tab to save changes and roll back quickly if the ai messes up\n\nseeing too many stories of vibe coders unable to get back to a working version 😰\n\nwatch the video", handle: "@iannuttall", name: "Ian Nuttall", url: "https://t.co/ILoFbVkcDP", profileImage: "/images/profiles/ian.jpg", stats: { views: "31.4K", likes: "333", retweets: "28", }, }, // Fifth - Ben South's original tweet { text: 'Cursor/Windsurf need a way to "save" a checkpoint and name it—versioning for vibe coders', handle: "@bnj", name: "Ben South", url: "https://x.com/bnj/status/1902151456645640595", profileImage: "/images/profiles/bnj.jpg", stats: { views: "174.2K", likes: "1.1K", retweets: "62", }, }, // Sixth - CC Anuj (unknown views but included) { text: "Today was the worst day ever☹️\nThe project I had been working on for the last two weeks got corrupted, and everything was lost. Just like that, my SaaS was gone. Two weeks of hard work, completely ruined.", handle: "@vid_anuj", name: "CC Anuj", url: "https://x.com/vid_anuj/status/1902379748501880934", profileImage: "/images/profiles/anuj.jpg", stats: { likes: "121", retweets: "31", }, }, // Seventh - anushk (951 views) { text: "git scares people who just wanna code. give them the damn save button", handle: "@anushkmittal", name: "anushk", url: "https://x.com/anushkmittal/status/1902412183096717334", profileImage: "/images/profiles/anushk.jpg", stats: { views: "951", likes: "25", }, }, ] interface VibeCodingTweetsSectionProps { onOpenInstall?: () => void } export default function VibeCodingTweetsSection({ onOpenInstall }: VibeCodingTweetsSectionProps) { const [expandedTweets, setExpandedTweets] = useState>(new Set()) const toggleExpanded = (index: number, e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() setExpandedTweets((prev) => { const newSet = new Set(prev) if (newSet.has(index)) { newSet.delete(index) } else { newSet.add(index) } return newSet }) } const truncateText = (text: string, maxLength = 200) => { if (text.length <= maxLength) return text return text.substring(0, maxLength).trim() + "..." } return (

{/* Header - Outside gradient like other sections */}

Vibe Coding Is Exploding — But So Are Mistakes.

Don't take our word for it — this is what devs are actually saying.

{/* Gradient Container - Matching other sections */}

{/* Dark Overlay */}

{/* Noise Overlay */}

{/* Content */}

{/* Enhanced Tweets Layout - Making 7 tweets feel substantial */}

{/* Featured Tweet - Most relevant (Ben South retweet with commentary) */}

{/* Original Tweet (if retweet) */} {tweets[0].isRetweet && tweets[0].originalTweet && (

{tweets[0].originalTweet.text}

{tweets[0].originalTweet.handle}

)} {/* Tweet Content */}

{expandedTweets.has(0) ? tweets[0].text.split("\n").map((line, i) => ( {line} {i < tweets[0].text.split("\n").length - 1 &&
} )) : truncateText(tweets[0].text, 150)} {tweets[0].text.length > 150 && ( )}

{/* Author Info - Enhanced */}

{tweets[0].name}

{tweets[0].handle}

{/* Enhanced engagement indicators with better visual prominence */}

{tweets[0].stats?.views && (

88.9K

)}

366

{/* Enhanced Stats Bar with more prominent styling */}

1M+

Views

13.7K+

Likes

689+

Retweets

{/* Masonry Grid for remaining tweets */}

{tweets.slice(1).map((tweet, index) => { const actualIndex = index + 1 return ( {/* Original Tweet (if retweet) */} {tweet.isRetweet && tweet.originalTweet && (

{tweet.originalTweet.text}

{tweet.originalTweet.handle}

)} {/* Tweet Content with truncation */}

{expandedTweets.has(actualIndex) ? tweet.text.split("\n").map((line, i) => ( {line} {i < tweet.text.split("\n").length - 1 &&
} )) : truncateText(tweet.text, 120)} {tweet.text.length > 120 && ( )}

{/* Author Info */}

{tweet.name}

{tweet.handle}

{/* Enhanced engagement stats for smaller tweets */}

{tweet.stats?.likes && (

{tweet.stats.likes}

)}

) })}

) } [V0_FILE]typescriptreact:file="components/install-modal.tsx" "use client" import { useState, useEffect, useRef } from "react" import { X, Copy, Check, Download, Search, Terminal } from "lucide-react" interface InstallModalProps { isOpen: boolean onClose: () => void } export default function InstallModal({ isOpen, onClose }: InstallModalProps) { const [activeTab, setActiveTab] = useState("cursor") const [copied, setCopied] = useState(null) const modalRef = useRef(null) // Close modal with escape key or outside click useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape") onClose() } const handleOutsideClick = (e: MouseEvent) => { if (modalRef.current && !modalRef.current.contains(e.target as Node)) { onClose() } } if (isOpen) { window.addEventListener("keydown", handleEscape) document.addEventListener("mousedown", handleOutsideClick) // Prevent scrolling when modal is open document.body.style.overflow = "hidden" } return () => { window.removeEventListener("keydown", handleEscape) document.removeEventListener("mousedown", handleOutsideClick) document.body.style.overflow = "" } }, [isOpen, onClose]) if (!isOpen) return null const copyToClipboard = (text: string, id: string) => { navigator.clipboard.writeText(text) setCopied(id) setTimeout(() => setCopied(null), 2000) } const installOptions = [ { id: "cursor", name: "Cursor", command: "ext install iganbold.yoyo-ai-versioning", deeplink: "cursor:extension/iganbold.yoyo-ai-versioning", }, { id: "windsurf", name: "Windsurf", command: "ext install iganbold.yoyo-ai-versioning", deeplink: "windsurf:extension/iganbold.yoyo-ai-versioning", }, { id: "vscode", name: "VS Code", command: "ext install iganbold.yoyo-ai-versioning", deeplink: "vscode:extension/iganbold.yoyo-ai-versioning", }, { id: "claude-code", name: "Claude Code", command: "ext install iganbold.yoyo-ai-versioning", deeplink: "", isTerminalBased: true, }, { id: "codex-cli", name: "Codex CLI", command: "ext install iganbold.yoyo-ai-versioning", deeplink: "", isTerminalBased: true, }, { id: "other", name: "Other", command: "ext install iganbold.yoyo-ai-versioning", deeplink: "", }, ] const activeOption = installOptions.find((option) => option.id === activeTab) || installOptions[0] return (

e.stopPropagation()} > {/* Sticky header with close button */}

Install YOYO

{/* Tabs - scrollable on mobile */}

{installOptions.map((option) => ( ))}

{/* Content */}

{/* Claude Code Special Section */} {activeTab === "claude-code" && (

Claude Code + YOYO Setup

Run Claude Code in your terminal inside editors like Cursor, Windsurf, or VS Code. Pair it with YOYO in the sidebar for the ideal vibe coding workflow.

{/* Demo Video */}

Step 1: Install YOYO extension in your editor (Cursor, Windsurf, or VS Code)

Step 2: Run Claude Code from the built-in terminal inside your editor

Step 3: Use YOYO sidebar to save/restore versions instantly

)} {/* Codex CLI Special Section */} {activeTab === "codex-cli" && (

Codex CLI + YOYO Setup

Run OpenAI Codex CLI in your terminal inside editors like Cursor, Windsurf, or VS Code. Pair it with YOYO in the sidebar for seamless AI-assisted development with version control.

{/* Demo Video */}

Step 1: Install YOYO extension in your editor (Cursor, Windsurf, or VS Code)

Step 2: Run OpenAI Codex CLI from the built-in terminal inside your editor

Step 3: Use YOYO sidebar to save/restore versions instantly

)} {/* Regular install sections for other options */} {activeTab !== "claude-code" && activeTab !== "codex-cli" && ( <> {/* Direct Install Button - only show for options with deeplinks */} {activeOption.deeplink && (

INSTALL IN {activeOption.name.toUpperCase()}

Click the button above to open {activeOption.name} and install YOYO directly

)} {/* Search in Extensions Option */}

{activeTab === "other" ? "Search in Extensions:" : `Search in ${activeOption.name} Extensions:`}

{activeTab === "other" ? ( <> 1. Open your IDE
2. Go to Extensions view (usually Ctrl+Shift+X / Cmd+Shift+X)
3. Search for YOYO
4. Click Install ) : ( <> 1. Open {activeOption.name}
2. Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for YOYO
4. Click Install )}

{/* Command Palette Option */} {activeOption.command && (

{activeTab === "other" ? "Run in command palette:" : `Run in ${activeOption.name} command palette:`}

{activeOption.command}

{activeTab === "other" && (

Open the command palette with Ctrl+Shift+P / Cmd+Shift+P, then paste and run the command above

)}

)} {activeTab === "other" && (

YOYO works with most VS Code-compatible editors and IDEs, including:

VS Codium
GitPod
Code-OSS
GitHub Codespaces
And other VS Code forks

)} )}

{activeTab === "claude-code" ? "After installing YOYO in your editor, you can use Claude Code in the terminal while YOYO handles version control in the sidebar." : activeTab === "codex-cli" ? "After installing YOYO in your editor, you can use OpenAI Codex CLI in the terminal while YOYO handles version control in the sidebar." : "After installation, open your project and click the YOYO icon in the sidebar to start versioning your AI-assisted code."}

{/* Mobile close button at bottom */}

) } [V0_FILE]plaintext:file="public/videos/codex-yoyo.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/codex-yoyo-kqbKQsIS0uDFYJHrGUhQxEb15MDfHX.mp4" [V0_FILE]typescriptreact:file="components/navbar.tsx" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import type React from "react" import { Button } from "@/components/ui/button" import { Download, Menu, X } from "lucide-react" import InstallModal from "@/components/install-modal" export default function Navbar() { const [scrolled, setScrolled] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [isInstallModalOpen, setIsInstallModalOpen] = useState(false) const [bannerVisible, setBannerVisible] = useState(true) const [showVideoModal, setShowVideoModal] = useState(false) // Debounce the scroll handler to prevent flickering const handleScroll = useCallback(() => { const isScrolled = window.scrollY > 10 if (isScrolled !== scrolled) { setScrolled(isScrolled) } }, [scrolled]) useEffect(() => { // Initial check on mount handleScroll() // Add event listener with passive option for better performance window.addEventListener("scroll", handleScroll, { passive: true }) return () => { window.removeEventListener("scroll", handleScroll) } }, [handleScroll]) // Lock body scroll when mobile menu is open useEffect(() => { if (mobileMenuOpen || showVideoModal) { document.body.style.overflow = "hidden" } else { document.body.style.overflow = "" } return () => { document.body.style.overflow = "" } }, [mobileMenuOpen, showVideoModal]) // Apply styles consistently const navStyle = { boxShadow: scrolled ? "0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(0,0,0,0), 0 5px 18px 0 rgba(204,204,204,0.1)" : "none", border: scrolled ? "1px solid #1a1a1a" : "1px solid transparent", borderRadius: "16px", transition: "all 0.3s ease-in-out", } const logoKeyframes = ` @keyframes layer-drop-1 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(0.5px); } } @keyframes layer-drop-2 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(1px); } } @keyframes layer-drop-3 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(1.5px); } } @keyframes elegant-lift { 0% { transform: translateY(0px) scale(1); } 100% { transform: translateY(-1px) scale(1.02); } } @keyframes elegant-settle { 0% { transform: translateY(-1px) scale(1.02); } 100% { transform: translateY(0px) scale(1); } } @keyframes subtle-glow { 0% { filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0)); } 100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.15)); } } .yoyo-layer-1 { animation: layer-drop-1 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .yoyo-layer-2 { animation: layer-drop-2 4s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.3s; } .yoyo-layer-3 { animation: layer-drop-3 4s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.6s; } .yoyo-logo { overflow: visible; padding: 2px 0; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; } .yoyo-logo:hover { animation: elegant-lift 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, subtle-glow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .yoyo-logo:not(:hover) { animation: elegant-settle 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .yoyo-logo:hover .yoyo-layer-1 { animation: layer-drop-1 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .yoyo-logo:hover .yoyo-layer-2 { animation: layer-drop-2 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.15s; } .yoyo-logo:hover .yoyo-layer-3 { animation: layer-drop-3 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.3s; } ` const handleWatchDemo = (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() setShowVideoModal(true) } return (

{bannerVisible && (

{/* AI Jason Video Banner - Redesigned to match YOYO aesthetic */}

{/* Subtle gradient accent */}

AI Jason (189K) calls YOYO "Vibe Versioning" — Iterate UI in Cursor 10× faster →{" "} AI Jason calls YOYO "Vibe Versioning" → Watch Demo

)} {/* Video Modal */} {showVideoModal && (

{/* Modal Header */}

"Vibe Versioning" — The Future of Git for AI Coding

{/* Video Container */}