[V0_FILE]json:file="package.json" { "dependencies": { "framer-motion": "^11.0.0", "next": "15.5.3", "react": "19.1.1", "react-dom": "19.1.1", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.544.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7", "geist": "1.5.1", "@vercel/analytics": "1.5.0", "next-themes": "0.4.6" }, "devDependencies": { "@types/react": "19.1.13", "@types/react-dom": "19.1.9", "@types/node": "24.5.2", "tailwindcss": "4.1.13", "typescript": "5.9.2", "postcss": "8.5.6" } } [V0_FILE]png:file="public/stripe-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/stripe-logo-RmiPOIyS639G4R4cANlO7AwJLOLzb3.png" [V0_FILE]png:file="public/vercel-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/vercel-logo-cozHdOj8hV7H6NCERJfwameQpuSs2q.png" [V0_FILE]png:file="public/github-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/github-logo-aVAFTVTqX8lubo6SCWWlYbP5xkAGU2.png" [V0_FILE]png:file="public/notion-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/notion-logo-oTfq2XP07rDQSa8CHDCkY0PCszOWEK.png" [V0_FILE]png:file="public/slack-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/slack-logo-01PVoQFszWScCGcZQzQ8TJRloPEpSf.png" [V0_FILE]jpg:file="public/algolia-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/algolia-logo-da7AZe89Vcn92Du0lep2nH9sAiSNzS.jpg" [V0_FILE]png:file="public/aws-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/aws-logo-ZAlB1w19qL60nVZmGuMnbdF6pyVRRt.png" [V0_FILE]png:file="public/google-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/google-logo-icLB6PLER1c3dak9p919JripxONgE0.png" [V0_FILE]png:file="public/microsoft-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/microsoft-logo-YaPpmDd1oY1k88Mo6R9e8gQRzPqfN0.png" [V0_FILE]png:file="public/linear-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/linear-logo-cE1xxWzOu6fQhe9aQGTSNmKAspVrVI.png" [V0_FILE]xml:file="public/logos/logo-1.svg" [V0_FILE]xml:file="public/logos/logo-2.svg" [V0_FILE]xml:file="public/logos/logo-3.svg" [V0_FILE]xml:file="public/logos/logo-4.svg" [V0_FILE]xml:file="public/logos/logo-5.svg" [V0_FILE]xml:file="public/logos/logo-6.svg" [V0_FILE]xml:file="public/logos/logo-7.svg" [V0_FILE]xml:file="public/logos/logo-8.svg" [V0_FILE]xml:file="public/logos/logo-9.svg" [V0_FILE]xml:file="public/logos/logo-10.svg" [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" export function ThemeToggle() { const { setTheme, theme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]xml:file="public/logos/logo-11.svg" url="https://blobs.vusercontent.net/blob/logos-0MF8CSglfyM1K1vaY34C5ENyF1tTH8.svg" [V0_FILE]xml:file="public/logos/logo-12.svg" url="https://blobs.vusercontent.net/blob/logos-4-eZHKvOhZKyMjy4w4aKwJ2966mIWZuc.svg" [V0_FILE]xml:file="public/logos/logo-13.svg" url="https://blobs.vusercontent.net/blob/logos-1-W3vmDHp5f1cII2CbbRpCdfhJ5fWmB8.svg" [V0_FILE]xml:file="public/logos/logo-14.svg" url="https://blobs.vusercontent.net/blob/logos-2-DFYYeVgRm03tRsFnKMB03C1DeMlmA0.svg" [V0_FILE]xml:file="public/logos/logo-15.svg" url="https://blobs.vusercontent.net/blob/logos-3-9mbNqBKgXf22iI7ddLvORJ3153jPow.svg" [V0_FILE]typescriptreact:file="components/social-proof.tsx" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" interface Logo { src: string name: string alt: string } interface SocialProofProps { logos?: Logo[] intervalMs?: number monochrome?: boolean } const defaultLogos: Logo[] = [ { src: "/logos/logo-1.svg", name: "GitHub", alt: "GitHub logo" }, { src: "/logos/logo-2.svg", name: "Slack", alt: "Slack logo" }, { src: "/logos/logo-3.svg", name: "Adobe", alt: "Adobe logo" }, { src: "/logos/logo-4.svg", name: "Zoom", alt: "Zoom logo" }, { src: "/logos/logo-5.svg", name: "Google", alt: "Google logo" }, { src: "/logos/logo-6.svg", name: "Webflow", alt: "Webflow logo" }, { src: "/logos/logo-7.svg", name: "Linear", alt: "Linear logo" }, { src: "/logos/logo-8.svg", name: "Stripe", alt: "Stripe logo" }, { src: "/logos/logo-9.svg", name: "Shopify", alt: "Shopify logo" }, { src: "/logos/logo-10.svg", name: "Microsoft", alt: "Microsoft logo" }, { src: "/logos/logo-11.svg", name: "Atlassian", alt: "Atlassian logo" }, { src: "/logos/logo-12.svg", name: "Gumroad", alt: "Gumroad logo" }, { src: "/logos/logo-13.svg", name: "Framer", alt: "Framer logo" }, { src: "/logos/logo-14.svg", name: "Notion", alt: "Notion logo" }, { src: "/logos/logo-15.svg", name: "Figma", alt: "Figma logo" }, ] export default function SocialProof({ logos = defaultLogos, intervalMs = 2000, monochrome = true }: SocialProofProps) { const [displayedLogos, setDisplayedLogos] = useState(logos.slice(0, 6)) const [isPaused, setIsPaused] = useState(false) const [isTransitioning, setIsTransitioning] = useState(false) const [hoveredIndex, setHoveredIndex] = useState(null) const [loadedImages, setLoadedImages] = useState>(new Set()) const logosRef = useRef(logos) logosRef.current = logos useEffect(() => { const preloadImages = async () => { const imagePromises = logos.map((logo) => { return new Promise((resolve, reject) => { const img = new window.Image() img.onload = () => resolve(logo.src) img.onerror = () => reject(logo.src) img.src = logo.src }) }) try { const loadedSrcs = await Promise.allSettled(imagePromises) const successfullyLoaded = loadedSrcs .filter((result): result is PromiseFulfilledResult => result.status === "fulfilled") .map((result) => result.value) setLoadedImages(new Set(successfullyLoaded)) } catch (error) { console.warn("Some images failed to preload:", error) } } preloadImages() }, [logos]) const shuffleLogos = () => { const shuffled = [...logosRef.current].sort(() => Math.random() - 0.5) return shuffled.slice(0, 6) } useEffect(() => { if (isPaused || logos.length <= 6) { return } const interval = setInterval(() => { setIsTransitioning(true) setTimeout(() => { setDisplayedLogos(shuffleLogos()) setTimeout(() => { setIsTransitioning(false) }, 100) }, 300) }, intervalMs) return () => { clearInterval(interval) } }, [isPaused, logos.length, intervalMs]) return (

setIsPaused(true)} onMouseLeave={() => setIsPaused(false)} >

Trusted by

{displayedLogos.map((logo, index) => (

setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} >

{ setLoadedImages((prev) => new Set([...prev, logo.src])) }} /> {hoveredIndex === index && (

Read Case Study

)}

))}

) } [V0_FILE]typescriptreact:file="components/copy-code-button.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Copy, Check } from "lucide-react" interface CopyCodeButtonProps { code: string className?: string } export function CopyCodeButton({ code, className = "" }: CopyCodeButtonProps) { const [copied, setCopied] = useState(false) const handleCopy = async () => { try { await navigator.clipboard.writeText(code) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (err) { console.error("Failed to copy code:", err) } } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" import SocialProof from "@/components/social-proof" import { ThemeToggle } from "@/components/theme-toggle" import { CopyCodeButton } from "@/components/copy-code-button" const socialProofCode = `"use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" interface Logo { src: string name: string alt: string } interface SocialProofProps { logos?: Logo[] intervalMs?: number monochrome?: boolean } const defaultLogos: Logo[] = [ { src: "/logos/logo-1.svg", name: "GitHub", alt: "GitHub logo" }, { src: "/logos/logo-2.svg", name: "Slack", alt: "Slack logo" }, { src: "/logos/logo-3.svg", name: "Adobe", alt: "Adobe logo" }, { src: "/logos/logo-4.svg", name: "Zoom", alt: "Zoom logo" }, { src: "/logos/logo-5.svg", name: "Google", alt: "Google logo" }, { src: "/logos/logo-6.svg", name: "Webflow", alt: "Webflow logo" }, { src: "/logos/logo-7.svg", name: "Linear", alt: "Linear logo" }, { src: "/logos/logo-8.svg", name: "Stripe", alt: "Stripe logo" }, { src: "/logos/logo-9.svg", name: "Shopify", alt: "Shopify logo" }, { src: "/logos/logo-10.svg", name: "Microsoft", alt: "Microsoft logo" }, { src: "/logos/logo-11.svg", name: "Atlassian", alt: "Atlassian logo" }, { src: "/logos/logo-12.svg", name: "Gumroad", alt: "Gumroad logo" }, { src: "/logos/logo-13.svg", name: "Framer", alt: "Framer logo" }, { src: "/logos/logo-14.svg", name: "Notion", alt: "Notion logo" }, { src: "/logos/logo-15.svg", name: "Figma", alt: "Figma logo" }, ] export default function SocialProof({ logos = defaultLogos, intervalMs = 2000, monochrome = true }: SocialProofProps) { const [displayedLogos, setDisplayedLogos] = useState(logos.slice(0, 6)) const [isPaused, setIsPaused] = useState(false) const [isTransitioning, setIsTransitioning] = useState(false) const [hoveredIndex, setHoveredIndex] = useState(null) const [loadedImages, setLoadedImages] = useState>(new Set()) const logosRef = useRef(logos) logosRef.current = logos useEffect(() => { const preloadImages = async () => { const imagePromises = logos.map((logo) => { return new Promise((resolve, reject) => { const img = new window.Image() img.onload = () => resolve(logo.src) img.onerror = () => reject(logo.src) img.src = logo.src }) }) try { const loadedSrcs = await Promise.allSettled(imagePromises) const successfullyLoaded = loadedSrcs .filter((result): result is PromiseFulfilledResult => result.status === "fulfilled") .map((result) => result.value) setLoadedImages(new Set(successfullyLoaded)) } catch (error) { console.warn("Some images failed to preload:", error) } } preloadImages() }, [logos]) const shuffleLogos = () => { const shuffled = [...logosRef.current].sort(() => Math.random() - 0.5) return shuffled.slice(0, 6) } useEffect(() => { if (isPaused || logos.length <= 6) { return } const interval = setInterval(() => { setIsTransitioning(true) setTimeout(() => { setDisplayedLogos(shuffleLogos()) setTimeout(() => { setIsTransitioning(false) }, 100) }, 300) }, intervalMs) return () => { clearInterval(interval) } }, [isPaused, logos.length, intervalMs]) return (

setIsPaused(true)} onMouseLeave={() => setIsPaused(false)} >

Trusted by

{displayedLogos.map((logo, index) => (

setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} >

{ setLoadedImages((prev) => new Set([...prev, logo.src])) }} /> {hoveredIndex === index && (

Read Case Study

)}

))}

) }` export default function Home() { return (

Social Proof Section

Trusted by leading companies worldwide.
See the brands that rely on our platform every day.

) }

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This