[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Slideshow } from "@/components/slideshow" export default function Home() { return (

) } [V0_FILE]png:file="public/v0-ai-assistant-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/v0-ai-assistant-interface-tf4Q3JjgzMdSN0myNePClLzCugUZPu.png" isMerged="true" [V0_FILE]png:file="public/code-generation-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/code-generation-interface-RUwYlv28ZLFnO1DladEKvArls6WhTT.png" isMerged="true" [V0_FILE]png:file="public/modern-web-development.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-web-development-SSm3TtexYBS2UB6LVP5yoWHi1cXfd4.png" isMerged="true" [V0_FILE]png:file="public/deployment-workflow.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/deployment-workflow-xNrGlD3v3obA0MhmDt32VfBzIhNBwZ.png" isMerged="true" [V0_FILE]png:file="public/candevsdosomething.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/CleanShot%202025-06-04%20at%2010.13.09%402x-iAZQOycDppcHPkUmO5m9ftpYmQlBMo.png" isMerged="true" [V0_FILE]png:file="public/kithbook.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-YRH9KDVecF464YRt0uPMraDrjapybT.png" isMerged="true" [V0_FILE]png:file="public/softmaple.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-I3XWPzg3DT9L6wksuA8JkEyV7vd6bd.png" isMerged="true" [V0_FILE]png:file="public/deepfish.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-ocIN6xWK1yyyMmzhnS8Td8uPs8uzDT.png" isMerged="true" [V0_FILE]typescriptreact:file="components/slideshow.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import { Button } from "@/components/ui/button" import { Play, Pause, ChevronLeft, ChevronRight } from "lucide-react" import { Tweet } from "react-tweet" import Image from "next/image" // All slides including Twitter embeds and showcase const slides = [ { id: 1, type: "tweet", tweetId: "1927883135146152237", title: "Two-way Git Sync", subtitle: "Seamless integration with your repositories", }, { id: 2, type: "tweet", tweetId: "1925978235164119070", title: "Switch Between Models", subtitle: "Choose the best AI model for your project", }, { id: 3, type: "tweet", tweetId: "1920859353298727082", title: "Vercel Integration", subtitle: "Deploy, monitor, and manage your projects", }, { id: 4, type: "tweet", tweetId: "1909383516556869689", title: "AI Image Generation", subtitle: "Create custom images with AI", }, { id: 5, type: "tweet", tweetId: "1910354109028528176", title: "Database Integrations", subtitle: "Connect with Supabase, Upstash, and more", }, { id: 6, type: "tweet", tweetId: "1905106006293766415", title: "Vercel Blob Storage", subtitle: "Store and manage your assets seamlessly", }, { id: 7, type: "tweet", tweetId: "1902847616418976072", title: "Asset Management", subtitle: "Add assets directly to your codebase", }, { id: 8, type: "showcase", title: "Made with v0", subtitle: "Real projects built by the community", image: "/candevsdosomething.png", projectName: "CanDevDoSomething", projectUrl: "candevsdosomething.com", }, { id: 9, type: "showcase", title: "Made with v0", subtitle: "Real projects built by the community", image: "/kithbook.png", projectName: "Kithbook", projectUrl: "kithbook.com", }, { id: 10, type: "showcase", title: "Made with v0", subtitle: "Real projects built by the community", image: "/softmaple.png", projectName: "Softmaple", projectUrl: "softmaple.ink", }, { id: 11, type: "showcase", title: "Made with v0", subtitle: "Real projects built by the community", image: "/deepfish.png", projectName: "Deepfish", projectUrl: "deepfi.sh", }, ] export function Slideshow() { const [currentSlide, setCurrentSlide] = useState(0) const [isPlaying, setIsPlaying] = useState(true) const [isTransitioning, setIsTransitioning] = useState(false) const nextSlide = useCallback(() => { if (isTransitioning) return setIsTransitioning(true) setTimeout(() => { setCurrentSlide((prev) => (prev + 1) % slides.length) setIsTransitioning(false) }, 150) }, [isTransitioning]) const prevSlide = useCallback(() => { if (isTransitioning) return setIsTransitioning(true) setTimeout(() => { setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length) setIsTransitioning(false) }, 150) }, [isTransitioning]) const goToSlide = useCallback( (index: number) => { if (isTransitioning || index === currentSlide) return setIsTransitioning(true) setTimeout(() => { setCurrentSlide(index) setIsTransitioning(false) }, 150) }, [currentSlide, isTransitioning], ) // Auto-advance slides useEffect(() => { if (!isPlaying) return const interval = setInterval(() => { nextSlide() }, 7000) return () => clearInterval(interval) }, [isPlaying, nextSlide]) // Keyboard controls useEffect(() => { const handleKeyPress = (e: KeyboardEvent) => { switch (e.key) { case "ArrowLeft": prevSlide() break case "ArrowRight": nextSlide() break case " ": e.preventDefault() setIsPlaying(!isPlaying) break } } window.addEventListener("keydown", handleKeyPress) return () => window.removeEventListener("keydown", handleKeyPress) }, [nextSlide, prevSlide, isPlaying]) return (

{/* Main slide container */}

{slides.map((slide, index) => (

{/* Background gradient */}

{/* Content */}

{/* Top Title - v0 branding */}

v0 - text to full-stack app

{/* Title */}

{slide.title}

{slide.subtitle}

{/* Tweet Embed */} {slide.type === "tweet" && (

)} {/* Showcase Content */} {slide.type === "showcase" && (

{slide.projectName}

{slide.projectUrl}

)}

))}

{/* Made with v0 Badge */}

Made with v0

{/* Controls */}

{/* Previous button */} {/* Play/Pause button */} {/* Next button */}

{/* Slide indicators */}

{slides.map((_, index) => (

{/* Progress bar */}

) }