9a:I[903690,["/chat-static/_next/static/immutable/chunks/1hdsix4-vqiik.js","/chat-static/_next/static/immutable/chunks/2_5m3u4145ss0.js","/chat-static/_next/static/immutable/chunks/06fhmb9zv6uo6.js","/chat-static/_next/static/immutable/chunks/09xvrt12-2rl0.js","/chat-static/_next/static/immutable/chunks/1xgcq8c4f_8fq.js","/chat-static/_next/static/immutable/chunks/1hvqmnitid4xe.js","/chat-static/_next/static/immutable/chunks/3rr5l9ro89g8d.js","/chat-static/_next/static/immutable/chunks/3hsdob8hgrg37.js","/chat-static/_next/static/immutable/chunks/1pxmbozdcc9y7.js","/chat-static/_next/static/immutable/chunks/38yaqwe2ys7o6.js","/chat-static/_next/static/immutable/chunks/1yui69gkjunmr.js","/chat-static/_next/static/immutable/chunks/3em_xe-n6-qt7.js","/chat-static/_next/static/immutable/chunks/09-0bd882xikd.js","/chat-static/_next/static/immutable/chunks/3u4hk7y5fepx4.js","/chat-static/_next/static/immutable/chunks/3fps7vfyqxiw6.js","/chat-static/_next/static/immutable/chunks/0mvgw83jdcr8_.js","/chat-static/_next/static/immutable/chunks/3z_28wzzktgw2.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/363ke95s1ko6o.js","/chat-static/_next/static/immutable/chunks/416tmudpeffkz.js","/chat-static/_next/static/immutable/chunks/2ild4_8nnn7ys.js","/chat-static/_next/static/immutable/chunks/28kbmv3dy8txv.js","/chat-static/_next/static/immutable/chunks/22efgyn_v5u19.js","/chat-static/_next/static/immutable/chunks/0jb6ous0375oa.js","/chat-static/_next/static/immutable/chunks/1wjcpzg3nzemw.js","/chat-static/_next/static/immutable/chunks/1knar4f0vp2xn.js","/chat-static/_next/static/immutable/chunks/22609g7ehklky.js","/chat-static/_next/static/immutable/chunks/23g_9unic-14a.js","/chat-static/_next/static/immutable/chunks/3d94pkoo4if9r.js","/chat-static/_next/static/immutable/chunks/1h2xxp9cr5c5m.js","/chat-static/_next/static/immutable/chunks/0kwy-rkr6sgzi.js","/chat-static/_next/static/immutable/chunks/2irdqvyz3s8-x.js","/chat-static/_next/static/immutable/chunks/2e80bj61ftled.js","/chat-static/_next/static/immutable/chunks/11q-tf8omz4oz.js","/chat-static/_next/static/immutable/chunks/2l9h4spirx5z4.js","/chat-static/_next/static/immutable/chunks/3239rz_4jff-u.js","/chat-static/_next/static/immutable/chunks/3435domgao21b.js","/chat-static/_next/static/immutable/chunks/37xw6m9iyvjhu.js","/chat-static/_next/static/immutable/chunks/3ra8b37ai-3dk.js"],"ExplicitChatIdProvider"] 9b:I[838238,["/chat-static/_next/static/immutable/chunks/1hdsix4-vqiik.js","/chat-static/_next/static/immutable/chunks/2_5m3u4145ss0.js","/chat-static/_next/static/immutable/chunks/06fhmb9zv6uo6.js","/chat-static/_next/static/immutable/chunks/09xvrt12-2rl0.js","/chat-static/_next/static/immutable/chunks/1xgcq8c4f_8fq.js","/chat-static/_next/static/immutable/chunks/1hvqmnitid4xe.js","/chat-static/_next/static/immutable/chunks/3rr5l9ro89g8d.js","/chat-static/_next/static/immutable/chunks/3hsdob8hgrg37.js","/chat-static/_next/static/immutable/chunks/1pxmbozdcc9y7.js","/chat-static/_next/static/immutable/chunks/38yaqwe2ys7o6.js","/chat-static/_next/static/immutable/chunks/1yui69gkjunmr.js","/chat-static/_next/static/immutable/chunks/3em_xe-n6-qt7.js","/chat-static/_next/static/immutable/chunks/09-0bd882xikd.js","/chat-static/_next/static/immutable/chunks/3u4hk7y5fepx4.js","/chat-static/_next/static/immutable/chunks/3fps7vfyqxiw6.js","/chat-static/_next/static/immutable/chunks/0mvgw83jdcr8_.js","/chat-static/_next/static/immutable/chunks/3z_28wzzktgw2.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/363ke95s1ko6o.js","/chat-static/_next/static/immutable/chunks/416tmudpeffkz.js","/chat-static/_next/static/immutable/chunks/2ild4_8nnn7ys.js","/chat-static/_next/static/immutable/chunks/28kbmv3dy8txv.js","/chat-static/_next/static/immutable/chunks/22efgyn_v5u19.js","/chat-static/_next/static/immutable/chunks/0jb6ous0375oa.js","/chat-static/_next/static/immutable/chunks/1wjcpzg3nzemw.js","/chat-static/_next/static/immutable/chunks/1knar4f0vp2xn.js","/chat-static/_next/static/immutable/chunks/22609g7ehklky.js","/chat-static/_next/static/immutable/chunks/23g_9unic-14a.js","/chat-static/_next/static/immutable/chunks/3d94pkoo4if9r.js","/chat-static/_next/static/immutable/chunks/1h2xxp9cr5c5m.js","/chat-static/_next/static/immutable/chunks/0kwy-rkr6sgzi.js","/chat-static/_next/static/immutable/chunks/2irdqvyz3s8-x.js","/chat-static/_next/static/immutable/chunks/2e80bj61ftled.js","/chat-static/_next/static/immutable/chunks/11q-tf8omz4oz.js","/chat-static/_next/static/immutable/chunks/2l9h4spirx5z4.js","/chat-static/_next/static/immutable/chunks/3239rz_4jff-u.js","/chat-static/_next/static/immutable/chunks/3435domgao21b.js","/chat-static/_next/static/immutable/chunks/37xw6m9iyvjhu.js","/chat-static/_next/static/immutable/chunks/3ra8b37ai-3dk.js"],"SWRDataProvider"] 9c:T24995,[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]png:file="public/modern-purple-gradient-card.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-purple-gradient-card-erpdmyjwqiId53eUjJCH0rBRR5qFSp.png" isMerged="true" [V0_FILE]png:file="public/modern-green-gradient-card.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-green-gradient-card-Z54H45LO2QlUyLdOgi9IFakqaXHcmN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-i592z.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/modern-orange-gradient-card.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-orange-gradient-card-ze6e7kcPU6sWaWAFZG3sZXjUrUbJpk.png" isMerged="true" [V0_FILE]png:file="public/modern-red-gradient-card.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-red-gradient-card-xzFPqFLniIV09GsCo62UGjMUJ4LE9t.png" isMerged="true" [V0_FILE]png:file="public/modern-teal-gradient-card.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-teal-gradient-card-XLAOpak7qntOjkUcj1kjTS90TMf5Z5.png" isMerged="true" [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" "use client" import { PixelCard } from "../ui/pixelcards" import { geist } from "@/lib/fonts" import { cn } from "@/lib/utils" import { CloudLightning, MoveRight } from "lucide-react" import { Button } from "@/components/ui/button" import HomeBadge from "../ui/home-badge" import { Beam } from "../ui/gridbeam" import { Sparkles } from "lucide-react" import { useEffect, useState } from "react" import { CardHoverEffect } from "../ui/pulse-card" import { motion } from "framer-motion" import Link from "next/link" const PIXEL_SCRIPT_URL = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pixel-RKkUKH2OXWk9adKbDnozmndkwseTQh.js" export default function Hero() { const [isScriptLoaded, setIsScriptLoaded] = useState(false) useEffect(() => { // Use Intersection Observer to load the script only when the component is in view const observer = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting) { import("@/lib/load-script").then(({ loadScript }) => { loadScript(PIXEL_SCRIPT_URL) .then(() => { setIsScriptLoaded(true) }) .catch((error) => { console.error("Error loading pixel script:", error) }) }) observer.disconnect() } }, { threshold: 0.1 }, ) const heroElement = document.getElementById("hero-section") if (heroElement) { observer.observe(heroElement) } return () => { observer.disconnect() } }, []) const cards = [ { title: "V0 Compatible", description: "Edit and customize visually, instantly.", icon: , variant: "rose", showGridLines: true, }, { title: "Animated Out of Box", description: "No setup and smooth UI interactions.", icon: , variant: "rose", showGridLines: true, }, ] as const const cardConfigurations = [ { color: "rose", icon: "Blocks", label: "Command", canvasProps: { gap: 3, speed: 80, colors: "#fff, #fda4af, #e11d48" }, number: 100, desc: "Components available", }, { color: "rose", icon: "f", label: "Dropper", canvasProps: { gap: 3, speed: 80, colors: "#fff, #fda4af, #e11d48" }, number: 15, desc: "Categories available", }, ] return (

Prebuilt UI Logo

blocks to ship beautiful MVPs fast.

Copy-paste beautiful, responsive components without worrying about styling or animations. Build faster, launch sooner.

We use industry standards like Next.js

{isScriptLoaded && ( )} {isScriptLoaded && ( )} {cards.map((card, i) => ( ))}

) } [V0_FILE]typescriptreact:file="components/ui/pixelcards.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import { useEffect, useRef } from "react" interface PixelCardProps { label: string canvasProps: { gap: number speed: number colors: string } number: number icon: string desc: string color: string } export function PixelCard({ label, canvasProps, number, icon, desc, color }: PixelCardProps) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Simple animated pixel effect let animationId: number let time = 0 const animate = () => { time += 0.01 ctx.clearRect(0, 0, canvas.width, canvas.height) const colors = canvasProps.colors.split(", ") for (let x = 0; x < canvas.width; x += canvasProps.gap) { for (let y = 0; y < canvas.height; y += canvasProps.gap) { const opacity = Math.sin(time + x * 0.01 + y * 0.01) * 0.5 + 0.5 const colorIndex = Math.floor(Math.random() * colors.length) ctx.fillStyle = colors[colorIndex] + Math.floor(opacity * 255) .toString(16) .padStart(2, "0") ctx.fillRect(x, y, 2, 2) } } animationId = requestAnimationFrame(animate) } animate() return () => { if (animationId) { cancelAnimationFrame(animationId) } } }, [canvasProps]) return (

) } [V0_FILE]typescriptreact:file="components/ui/home-badge.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" import { Sparkles } from "lucide-react" export default function HomeBadge() { return ( New UI Library ) } [V0_FILE]typescriptreact:file="components/ui/gridbeam.tsx" isMerged="true" export function Beam() { return (

) } [V0_FILE]typescriptreact:file="components/ui/pulse-card.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import type { ReactNode } from "react" interface CardHoverEffectProps { title: string description: string icon: ReactNode variant: string glowEffect?: boolean size?: "sm" | "md" | "lg" showGridLines?: boolean } export function CardHoverEffect({ title, description, icon, variant, glowEffect = false, size = "md", showGridLines = false, }: CardHoverEffectProps) { return (

{showGridLines &&

}

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="lib/fonts.ts" isMerged="true" import { Inter } from "next/font/google" export const geist = Inter({ subsets: ["latin"], display: "swap", }) [V0_FILE]typescriptreact:file="lib/load-script.ts" isMerged="true" export function loadScript(src: string): Promise { return new Promise((resolve, reject) => { const script = document.createElement("script") script.src = src script.onload = () => resolve() script.onerror = () => reject(new Error(`Failed to load script: ${src}`)) document.head.appendChild(script) }) } [V0_FILE]png:file="public/mobile-ui-dark-theme.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-ui-dark-theme-Ndt0N3I1Xa2d2aK6Poexugu7lsUD4E.png" isMerged="true" [V0_FILE]png:file="public/nextjs-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/nextjs-logo-YFLiH8emRGHJFzKFfK1jiJ7V85vvdO.png" isMerged="true" [V0_FILE]png:file="public/tailwind-css-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tailwind-css-logo-BXtZstE3DSWxAi6R30mWVt6Kos8Ff1.png" isMerged="true" [V0_FILE]png:file="public/framer-motion-logo-inspired.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/framer-motion-logo-inspired-PYDryRyB4FZC4PeVgjtfg69ujkXPDs.png" isMerged="true" [V0_FILE]png:file="public/typescript-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/typescript-logo-0C1jqSikmQp6lYFy1cB1erskbOKnq5.png" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/scramble.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { motion } from "motion/react" import { cn } from "@/lib/utils" interface ScrambleHoverProps { text: string scrambleSpeed?: number maxIterations?: number sequential?: boolean revealDirection?: "start" | "end" | "center" useOriginalCharsOnly?: boolean characters?: string className?: string scrambledClassName?: string isHovering?: boolean setIsHovering?: (isHovering: boolean) => void } const ScrambleHover: React.FC = ({ text, scrambleSpeed = 50, maxIterations = 10, useOriginalCharsOnly = false, characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+", className, scrambledClassName, sequential = false, revealDirection = "start", isHovering, setIsHovering, ...props }) => { const [displayText, setDisplayText] = useState(text) const [isScrambling, setIsScrambling] = useState(false) const [revealedIndices, setRevealedIndices] = useState(new Set()) useEffect(() => { let interval: NodeJS.Timeout let currentIteration = 0 const getNextIndex = () => { const textLength = text.length switch (revealDirection) { case "start": return revealedIndices.size case "end": return textLength - 1 - revealedIndices.size case "center": const middle = Math.floor(textLength / 2) const offset = Math.floor(revealedIndices.size / 2) const nextIndex = revealedIndices.size % 2 === 0 ? middle + offset : middle - offset - 1 if (nextIndex >= 0 && nextIndex < textLength && !revealedIndices.has(nextIndex)) { return nextIndex } for (let i = 0; i < textLength; i++) { if (!revealedIndices.has(i)) return i } return 0 default: return revealedIndices.size } } const shuffleText = (text: string) => { if (useOriginalCharsOnly) { const positions = text.split("").map((char, i) => ({ char, isSpace: char === " ", index: i, isRevealed: revealedIndices.has(i), })) const nonSpaceChars = positions.filter((p) => !p.isSpace && !p.isRevealed).map((p) => p.char) // Shuffle remaining non-revealed, non-space characters for (let i = nonSpaceChars.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) ;[nonSpaceChars[i], nonSpaceChars[j]] = [nonSpaceChars[j], nonSpaceChars[i]] } let charIndex = 0 return positions .map((p) => { if (p.isSpace) return " " if (p.isRevealed) return text[p.index] return nonSpaceChars[charIndex++] }) .join("") } else { return text .split("") .map((char, i) => { if (char === " ") return " " if (revealedIndices.has(i)) return text[i] return availableChars[Math.floor(Math.random() * availableChars.length)] }) .join("") } } const availableChars = useOriginalCharsOnly ? Array.from(new Set(text.split(""))).filter((char) => char !== " ") : characters.split("") if (isHovering) { setIsScrambling(true) interval = setInterval(() => { if (sequential) { if (revealedIndices.size < text.length) { const nextIndex = getNextIndex() revealedIndices.add(nextIndex) setDisplayText(shuffleText(text)) } else { clearInterval(interval) setIsScrambling(false) } } else { setDisplayText(shuffleText(text)) currentIteration++ if (currentIteration >= maxIterations) { clearInterval(interval) setIsScrambling(false) setDisplayText(text) } } }, scrambleSpeed) } else { setDisplayText(text) revealedIndices.clear() } return () => { if (interval) clearInterval(interval) } }, [isHovering, text, characters, scrambleSpeed, useOriginalCharsOnly, sequential, revealDirection, maxIterations]) return ( setIsHovering?.(true)} onHoverEnd={() => setIsHovering?.(false)} className={cn("inline-block whitespace-pre-wrap", className)} {...props} > {displayText} ) } export default ScrambleHover [V0_FILE]typescriptreact:file="components/ui/globe.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef } from "react" import createGlobe from "cobe" import { cn } from "@/lib/utils" interface EarthProps { className?: string theta?: number dark?: number scale?: number diffuse?: number mapSamples?: number mapBrightness?: number baseColor?: [number, number, number] markerColor?: [number, number, number] glowColor?: [number, number, number] } const Earth: React.FC = ({ className, theta = 0.25, dark = 1, scale = 1.1, diffuse = 1.2, mapSamples = 40000, mapBrightness = 6, baseColor = [0.4, 0.6509, 1], markerColor = [1, 0, 0], glowColor = [0.2745, 0.5765, 0.898], }) => { const canvasRef = useRef(null) useEffect(() => { let width = 0 const onResize = () => canvasRef.current && (width = canvasRef.current.offsetWidth) window.addEventListener("resize", onResize) onResize() let phi = 0 onResize() const globe = createGlobe(canvasRef.current!, { devicePixelRatio: 2, width: width * 2, height: width * 2, phi: 0, theta: theta, dark: dark, scale: scale, diffuse: diffuse, mapSamples: mapSamples, mapBrightness: mapBrightness, baseColor: baseColor, markerColor: markerColor, glowColor: glowColor, opacity: 1, offset: [0, 0], markers: [ // longitude latitude ], onRender: (state: Record) => { // Called on every animation frame. // `state` will be an empty object, return updated params.\ state.phi = phi phi += 0.003 }, }) return () => { globe.destroy() } }, [dark]) return (

) } export default Earth [V0_FILE]typescriptreact:file="components/magicui/marquee.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import type { ReactNode } from "react" interface MarqueeProps { className?: string reverse?: boolean pauseOnHover?: boolean children?: ReactNode vertical?: boolean repeat?: number [key: string]: any } export function Marquee({ className, reverse, pauseOnHover = false, children, vertical = false, repeat = 4, ...props }: MarqueeProps) { return (

{Array(repeat) .fill(0) .map((_, i) => (

{children}

))}

) } [V0_FILE]typescriptreact:file="components/pricing-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Check, Sparkles } from "lucide-react" import { useState } from "react" const pricingPlans = [ { name: "Starter", price: "Free", description: "Perfect for getting started with v0", features: ["5 components per month", "Basic templates", "Community support", "Standard components"], popular: false, cta: "Get Started", }, { name: "Pro", monthlyPrice: 29, annualPrice: 24, description: "For professionals building serious projects", features: [ "Unlimited components", "Premium templates", "Priority support", "Advanced animations", "Custom themes", "Export to GitHub", ], popular: true, cta: "Start Free Trial", }, { name: "Team", monthlyPrice: 99, annualPrice: 79, description: "For teams collaborating on projects", features: [ "Everything in Pro", "Team collaboration", "Shared component library", "Advanced analytics", "Custom integrations", "Dedicated support", ], popular: false, cta: "Contact Sales", }, ] export function PricingSection() { const [isAnnual, setIsAnnual] = useState(false) return (

{/* Header */} Pricing

Choose your plan

Start building beautiful components today. Upgrade anytime as your needs grow.

{/* Monthly/Annual Toggle */} {/* Pricing Cards */}

{pricingPlans.map((plan, index) => ( {plan.popular && (

{plan.name}

{plan.price ? ( {plan.price} ) : ( <> ${isAnnual ? plan.annualPrice : plan.monthlyPrice} {isAnnual ? "/year" : "/month"} )}

{plan.description}

{feature}

{plan.cta} ))}

{/* Bottom CTA */}

Need a custom solution? We're here to help.

Contact our sales team →

) } [V0_FILE]typescriptreact:file="components/faq-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Plus, Minus } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" export function FAQSection() { const [openItems, setOpenItems] = useState([]) const toggleItem = (index: number) => { setOpenItems((prev) => (prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index])) } const faqs = [ { question: "What is v0 exactly?", answer: "v0 is an AI-powered generative user interface system that helps you build React components using simple text prompts. It generates clean, production-ready code that you can copy and customize for your projects.", }, { question: "Do I need to know Tailwind to use it?", answer: "While basic knowledge of Tailwind CSS is helpful, it's not required. v0 generates components with Tailwind classes, and you can learn as you go. The generated code is clean and well-structured, making it easy to understand and modify.", }, { question: "Can I use these components commercially?", answer: "Yes! All components generated by v0 can be used in commercial projects. You own the code that's generated, and there are no licensing restrictions on using it in your applications.", }, { question: "Are the components responsive and accessible?", answer: "Absolutely. v0 generates components that are responsive by default and follow accessibility best practices. All components include proper ARIA attributes, keyboard navigation, and semantic HTML structure.", }, { question: "How do I integrate a component into my project?", answer: "Simply copy the generated code and paste it into your React project. v0 provides installation instructions for any required dependencies, and the components are designed to work seamlessly with modern React frameworks like Next.js.", }, ] return (

{/* Background blur effects */}

✶ Faqs

Questions? We've got{" "} answers

{faqs.map((faq, index) => ( toggleItem(index)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault() toggleItem(index) } }} {...(index === faqs.length - 1 && { "data-faq": faq.question })} >

{faq.question}

{openItems.includes(index) ? ( ) : ( )}

{openItems.includes(index) && ( {faq.answer} )} ))}

) } [V0_FILE]typescriptreact:file="components/sticky-footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion, AnimatePresence } from "framer-motion" import { useState, useEffect } from "react" export function StickyFooter() { const [isAtBottom, setIsAtBottom] = useState(false) useEffect(() => { let ticking = false const handleScroll = () => { if (!ticking) { requestAnimationFrame(() => { const scrollTop = window.scrollY const windowHeight = window.innerHeight const documentHeight = document.documentElement.scrollHeight const isNearBottom = scrollTop + windowHeight >= documentHeight - 100 setIsAtBottom(isNearBottom) ticking = false }) ticking = true } } window.addEventListener("scroll", handleScroll, { passive: true }) handleScroll() // Check initial state return () => window.removeEventListener("scroll", handleScroll) }, []) return ( {isAtBottom && (

(e.target.style.color = "rgba(18, 17, 19, 0.8)")} onMouseLeave={(e) => (e.target.style.color = "#121113")} > Home
(e.target.style.color = "rgba(18, 17, 19, 0.8)")} onMouseLeave={(e) => (e.target.style.color = "#121113")} > Docs
(e.target.style.color = "rgba(18, 17, 19, 0.8)")} onMouseLeave={(e) => (e.target.style.color = "#121113")} > Components

(e.target.style.color = "rgba(18, 17, 19, 0.8)")} onMouseLeave={(e) => (e.target.style.color = "#121113")} > Github
(e.target.style.color = "rgba(18, 17, 19, 0.8)")} onMouseLeave={(e) => (e.target.style.color = "#121113")} > Twitter
(e.target.style.color = "rgba(18, 17, 19, 0.8)")} onMouseLeave={(e) => (e.target.style.color = "#121113")} > Discord

)} ) } [V0_FILE]typescriptreact:file="components/new-release-promo.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" export function NewReleasePromo() { return (

{/* Subtle radial glow from center */}

{/* Film grain overlay */}

Build. Customize. Deploy Quickly.

Built to keep you hooked.

Get started

{/* Stroked text wordmark */}

) } [V0_FILE]typescriptreact:file="components/home/hero.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { useState, useEffect } from "react" import { Badge } from "@/components/ui/badge" import { Sparkles } from "lucide-react" export default function Hero() { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return ( <>

{/* Badge */} Latest component {/* Main Heading */}

Reach developers &
creators effortlessly

{/* Description */} Beautiful, accessible components built with Tailwind CSS and Framer Motion. Copy, paste, and customize to build your next project faster. {/* Decorative Elements */} {/* Get started button */}

Get started

{/* Social Proof Section */}

Trusted by developers at

{/* Vercel Logo */}

{/* Tailwind CSS Logo */}

{/* Framer Logo */}

{/* Next.js Logo */}

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Marquee } from "@/components/magicui/marquee" const testimonials = [ { name: "Arjun Mehta", username: "@arjdev", body: "v0 has completely changed the way I build UIs. Generate, copy-paste, done. No more design stress.", img: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face", }, { name: "Sara Lin", username: "@sara.codes", body: "Honestly shocked at how smooth the v0 generated components are out of the box. Just works perfectly.", img: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150&h=150&fit=crop&crop=face", }, { name: "Devon Carter", username: "@devninja", body: "Our team launched a client site in 2 days using v0 components. Saved so much development time.", img: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face", }, { name: "Priya Shah", username: "@priyacodes", body: "Generated a few components in v0 and everything blended perfectly with our codebase. Massive W.", img: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150&h=150&fit=crop&crop=face", }, { name: "Leo Martin", username: "@leobuilds", body: "Found a beautiful hero section in v0, tweaked the prompt, and shipped in 15 minutes. Game changer.", img: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face", }, { name: "Chloe Winters", username: "@chloewinters", body: "v0 helped us prototype multiple landing pages without writing CSS once. Pure magic.", img: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&crop=face", }, { name: "Ayaan Malik", username: "@ayaan_dev", body: "As a solo founder, v0 lets me move fast without sacrificing design quality. Essential tool.", img: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&h=150&fit=crop&crop=face", }, { name: "Monica Reeves", username: "@monicareeves", body: "Can't believe how polished the v0 generated components look. Clients are impressed every time.", img: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop&crop=face", }, { name: "James Roy", username: "@jamesrdev", body: "v0 is a lifesaver when deadlines are tight. Generate a component, tweak, and deploy instantly.", img: "https://images.unsplash.com/photo-1507591064344-4c6ce005b128?w=150&h=150&fit=crop&crop=face", }, ] const firstColumn = testimonials.slice(0, 3) const secondColumn = testimonials.slice(3, 6) const thirdColumn = testimonials.slice(6, 9) const TestimonialCard = ({ img, name, username, body, }: { img: string name: string username: string body: string }) => { return (

{body}

{name}

{username}

) } export function TestimonialsSection() { return (

What our users say

From intuitive design to powerful features, our app has become an essential tool for users around the world.

{firstColumn.map((testimonial) => ( ))}

{secondColumn.map((testimonial) => ( ))}

{thirdColumn.map((testimonial) => ( ))}

) } [V0_FILE]png:file="public/modern-grid-layout.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-grid-layout-AB9aIYhi4KP15WpSmm9R00p527ziSE.png" isMerged="true" [V0_FILE]png:file="public/professional-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-avatar-zbrnQ66cxtJnPjI3oa9qfYw6Bp2HEB.png" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/following-pointer-demo.tsx" isEdit="true" isMerged="true" import { FollowerPointerCard } from "./following-pointer" export default function FollowingPointerDemo() { return (

{blogContent.title}

{blogContent.description}

{blogContent.date}

) } const blogContent = { slug: "amazing-tailwindcss-grid-layouts", author: "Manu Arora", date: "28th March, 2023", title: "Amazing Tailwindcss Grid Layout Examples", description: "Grids are cool, but Tailwindcss grids are cooler. In this article, we will learn how to create amazing Grid layouts with Tailwindcs grid and React.", image: "/modern-grid-layout.png", authorAvatar: "/professional-avatar.png", } const TitleComponent = ({ title, avatar, }: { title: string avatar: string }) => (

{title}

) [V0_FILE]typescriptreact:file="components/ui/following-pointer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import React, { useEffect, useState } from "react" import { motion, AnimatePresence, useMotionValue } from "framer-motion" import { cn } from "@/lib/utils" export const FollowerPointerCard = ({ children, className, title, }: { children: React.ReactNode className?: string title?: string | React.ReactNode }) => { const x = useMotionValue(0) const y = useMotionValue(0) const ref = React.useRef(null) const [rect, setRect] = useState(null) const [isInside, setIsInside] = useState(false) useEffect(() => { console.log("[v0] FollowerPointerCard mounted") return () => { console.log("[v0] FollowerPointerCard unmounted") } }, []) useEffect(() => { console.log("[v0] isInside changed:", isInside) }, [isInside]) useEffect(() => { const updateRect = () => { if (ref.current) { setRect(ref.current.getBoundingClientRect()) } } updateRect() const handleResize = () => updateRect() const handleScroll = () => updateRect() window.addEventListener("resize", handleResize) window.addEventListener("scroll", handleScroll) return () => { window.removeEventListener("resize", handleResize) window.removeEventListener("scroll", handleScroll) } }, []) const handleMouseMove = (e: React.MouseEvent) => { x.set(e.clientX) y.set(e.clientY) } const handleMouseLeave = () => { setIsInside(false) } const handleMouseEnter = () => { setIsInside(true) } return (

{isInside && } {children}

) } export const FollowPointer = ({ x, y, title, }: { x: any y: any title?: string | React.ReactNode }) => { return (

{title || `Dynamic Layout`}

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate login process await new Promise((resolve) => setTimeout(resolve, 1000)) setIsLoading(false) console.log("[v0] Login attempt:", { email, password }) } return (

Back to Home {/* Background gradient */}

{/* Decorative elements */}

{/* Header */}

Welcome back

{/* Login Form */}

Email setEmail(e.target.value)} className="bg-zinc-800/50 border-zinc-700 text-white placeholder:text-zinc-500 focus:border-[#e78a53] focus:ring-[#e78a53]/20" required />

Password setPassword(e.target.value)} className="bg-zinc-800/50 border-zinc-700 text-white placeholder:text-zinc-500 focus:border-[#e78a53] focus:ring-[#e78a53]/20" required />

Remember me Forgot password?

Don't have an account?{" "} Sign up

{/* Social Login */}

Or continue with

) } [V0_FILE]typescriptreact:file="app/signup/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export default function SignupPage() { const [formData, setFormData] = useState({ name: "", email: "", password: "", confirmPassword: "", }) const [isLoading, setIsLoading] = useState(false) const handleChange = (e: React.ChangeEvent) => { setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value, })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (formData.password !== formData.confirmPassword) { console.log("[v0] Password mismatch") return } setIsLoading(true) // Simulate signup process await new Promise((resolve) => setTimeout(resolve, 1000)) setIsLoading(false) console.log("[v0] Signup attempt:", formData) } return (

Back to Home {/* Background gradient */}

{/* Decorative elements */}

{/* Header */}

Create account

Join thousands of developers building with v0

{/* Signup Form */}

Already have an account?{" "} Sign in

{/* Social Signup */}

Or continue with

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import "./globals.css" 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]typescriptreact:file="components/features.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useTheme } from "next-themes" import Earth from "./ui/globe" import ScrambleHover from "./ui/scramble" import { FollowerPointerCard } from "./ui/following-pointer" import { motion, useInView } from "framer-motion" import { Suspense, useEffect, useRef, useState } from "react" import { geist } from "@/lib/fonts" import { cn } from "@/lib/utils" export default function Features() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.3 }) const { theme } = useTheme() const [isHovering, setIsHovering] = useState(false) const [isCliHovering, setIsCliHovering] = useState(false) const [isFeature3Hovering, setIsFeature3Hovering] = useState(false) const [isFeature4Hovering, setIsFeature4Hovering] = useState(false) const [inputValue, setInputValue] = useState("") const [baseColor, setBaseColor] = useState<[number, number, number]>([0.906, 0.541, 0.325]) // #e78a53 in RGB normalized const [glowColor, setGlowColor] = useState<[number, number, number]>([0.906, 0.541, 0.325]) // #e78a53 in RGB normalized const [dark, setDark] = useState(theme === "dark" ? 1 : 0) useEffect(() => { setBaseColor([0.906, 0.541, 0.325]) // #e78a53 setGlowColor([0.906, 0.541, 0.325]) // #e78a53 setDark(theme === "dark" ? 1 : 0) }, [theme]) const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault() setInputValue("") } } return (

Features

✨ Interactive Features

} >

{/* Cli */} setIsCliHovering(true)} onMouseLeave={() => setIsCliHovering(false)} ref={ref} initial={{ opacity: 0, y: 50 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }} transition={{ duration: 0.5, delay: 0.5 }} whileHover={{ scale: 1.02, borderColor: "rgba(231, 138, 83, 0.6)", boxShadow: "0 0 30px rgba(231, 138, 83, 0.2)", }} style={{ transition: "all 0s ease-in-out" }} >

CLI & Manual Support

Integrate your landing page directly in the product while using your favorite tools.

{/* Background Image */}

{/* Animated SVG Connecting Lines */} {/* Animated Purple Blur Effect */} {/* Main Content Container with Staggered Animations */}

{/* Left Column */}

{["Feature-1", "Feature-1", "Feature-1"].map((item, index) => (

{index === 0 && 📄} {index === 1 && 💰} {index === 2 && 🏢}

{item} ))}

{/* Center Logo */} Logo

{/* Right Column */}

{["Feature-1", "Feature-1", "Feature-1"].map((item, index) => (

{index === 0 && 👥} {index === 1 && 💳} {index === 2 && 👨‍⚕️}

{item} ))}

{/* Animated Circular Border */}

{/* Global */} setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} ref={ref} initial={{ opacity: 0, y: 50 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }} transition={{ duration: 0.5, delay: 0.5 }} whileHover={{ scale: 1.02, borderColor: "rgba(231, 138, 83, 0.6)", boxShadow: "0 0 30px rgba(231, 138, 83, 0.2)", }} style={{ transition: "all 0s ease-in-out" }} >

Globally Usable

Blocks are available everywhere but ours are the best. Use them in your favorite framework or even in plain HTML.

} >

{/* Smart Components */} setIsFeature3Hovering(true)} onMouseLeave={() => setIsFeature3Hovering(false)} initial={{ opacity: 0, y: 50 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }} transition={{ duration: 0.5, delay: 1.0 }} whileHover={{ scale: 1.02, borderColor: "rgba(231, 138, 83, 0.5)", boxShadow: "0 0 30px rgba(231, 138, 83, 0.2)", }} style={{ transition: "all 0s ease-in-out" }} >

Smart Components

Intelligent components that adapt to your needs with built-in animations and interactions.

setInputValue(e.target.value)}
                          onKeyDown={handleKeyDown}
                        />
                      </div>
                      <div className="flex items-center justify-between px-4 pb-4">
                        <div className="flex items-center gap-3">
                          <button className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="16"
                              height="16"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              className="text-white/70"
                            >
                              <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
                            </svg>
                          </button>
                          <button className="flex items-center gap-2 px-4 py-2 rounded-full bg-[#e78a53] hover:bg-[#e78a53]/90 transition-colors text-white font-medium">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="16"
                              height="16"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                              strokeLinecap="round"
                              strokeLinejoin="round"
                            >
                              <circle cx="12" cy="12" r="10"></circle>
                              <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
                              <path d="M2 12h20"></path>
                            </svg>
                            Search
                          </button>
                        </div>
                        <button className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            className="text-white/70"
                          >
                            <path d="m22 2-7 20-4-9-9-4Z"></path>
                            <path d="M22 2 11 13"></path>
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </motion.div>

{/* Dynamic Layouts */}
              <motion.div
                className="group border-secondary/40 text-card-foreground relative col-span-12 flex flex-col overflow-hidden rounded-xl border-2 p-6 shadow-xl transition-all ease-in-out md:col-span-6 xl:col-span-6 xl:col-start-8"
                onMouseEnter={() => setIsFeature4Hovering(true)}
                onMouseLeave={() => setIsFeature4Hovering(false)}
                initial={{ opacity: 0, y: 50 }}
                animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
                transition={{ duration: 0.5, delay: 1.0 }}
                whileHover={{
                  rotateY: 5,
                  rotateX: 2,
                  boxShadow: "0 20px 40px rgba(231, 138, 83, 0.3)",
                  borderColor: "rgba(231, 138, 83, 0.6)",
                }}
                style={{ transition: "all 0s ease-in-out" }}
              >
                <div className="flex flex-col gap-4">
                  <h3 className="text-2xl leading-none font-semibold tracking-tight">Dynamic Layouts</h3>
                  <div className="text-md text-muted-foreground flex flex-col gap-2 text-sm">
                    <p className="max-w-[460px]">
                      Responsive layouts that transform and adapt seamlessly across all device sizes.
                    </p>
                  </div>
                </div>
                <div className="flex grow items-center justify-center select-none relative min-h-[300px] p-4">
                  <div className="relative w-full max-w-sm">
                    <img
                      src="/modern-grid-layout.png"
                      alt="Dynamic Layout Example"
                      className="w-full h-auto rounded-lg shadow-lg"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-lg"></div>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </FollowerPointerCard>
      </motion.div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { useState, useEffect } from "react"
import Hero from "@/components/home/hero"
import Features from "@/components/features"
import { TestimonialsSection } from "@/components/testimonials"
import { NewReleasePromo } from "@/components/new-release-promo"
import { FAQSection } from "@/components/faq-section"
import { PricingSection } from "@/components/pricing-section"
import { StickyFooter } from "@/components/sticky-footer"

export default function Home() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

useEffect(() => {
    const root = window.document.documentElement
    root.classList.remove("light", "system")
    root.classList.add("dark")
  }, [])

useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 100)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const handleMobileNavClick = (elementId: string) => {
    setIsMobileMenuOpen(false)
    setTimeout(() => {
      const element = document.getElementById(elementId)
      if (element) {
        const headerOffset = 120 // Account for sticky header height + margin
        const elementPosition = element.getBoundingClientRect().top + window.pageYOffset
        const offsetPosition = elementPosition - headerOffset

window.scrollTo({
          top: offsetPosition,
          behavior: "smooth",
        })
      }
    }, 100)
  }

return (
    <div className="min-h-screen w-full relative bg-black">
      {/* Pearl Mist Background with Top Glow */}
      <div
        className="absolute inset-0 z-0"
        style={{
          background: "radial-gradient(ellipse 50% 35% at 50% 0%, rgba(226, 232, 240, 0.12), transparent 60%), #000000",
        }}
      />

{/* Desktop Header */}
      <header
        className={`sticky top-4 z-[9999] mx-auto hidden w-full flex-row items-center justify-between self-start rounded-full bg-background/80 md:flex backdrop-blur-sm border border-border/50 shadow-lg transition-all duration-300 ${
          isScrolled ? "max-w-3xl px-2" : "max-w-5xl px-4"
        } py-2`}
        style={{
          willChange: "transform",
          transform: "translateZ(0)",
          backfaceVisibility: "hidden",
          perspective: "1000px",
        }}
      >
        <a
          className={`z-50 flex items-center justify-center gap-2 transition-all duration-300 ${
            isScrolled ? "ml-4" : ""
          }`}
          href="https://v0.app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <svg
            fill="currentColor"
            viewBox="0 0 147 70"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            className="text-foreground rounded-full size-8 w-8"
          >
            <path d="M56 50.2031V14H70V60.1562C70 65.5928 65.5928 70 60.1562 70C57.5605 70 54.9982 68.9992 53.1562 67.1573L0 14H19.7969L56 50.2031Z"></path>
            <path d="M147 56H133V23.9531L100.953 56H133V70H96.6875C85.8144 70 77 61.1856 77 50.3125V14H91V46.1562L123.156 14H91V0H127.312C138.186 0 147 8.81439 147 19.6875V56Z"></path>
          </svg>
        </a>

<div className="absolute inset-0 hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-muted-foreground transition duration-200 hover:text-foreground md:flex md:space-x-2">
          <a
            className="relative px-4 py-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
            onClick={(e) => {
              e.preventDefault()
              const element = document.getElementById("features")
              if (element) {
                const headerOffset = 120 // Account for sticky header height + margin
                const elementPosition = element.getBoundingClientRect().top + window.pageYOffset
                const offsetPosition = elementPosition - headerOffset

window.scrollTo({
                  top: offsetPosition,
                  behavior: "smooth",
                })
              }
            }}
          >
            <span className="relative z-20">Features</span>
          </a>
          <a
            className="relative px-4 py-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
            onClick={(e) => {
              e.preventDefault()
              const element = document.getElementById("pricing")
              if (element) {
                const headerOffset = 120 // Account for sticky header height + margin
                const elementPosition = element.getBoundingClientRect().top + window.pageYOffset
                const offsetPosition = elementPosition - headerOffset

window.scrollTo({
                  top: offsetPosition,
                  behavior: "smooth",
                })
              }
            }}
          >
            <span className="relative z-20">Pricing</span>
          </a>
          <a
            className="relative px-4 py-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
            onClick={(e) => {
              e.preventDefault()
              const element = document.getElementById("testimonials")
              if (element) {
                const headerOffset = 120 // Account for sticky header height + margin
                const elementPosition = element.getBoundingClientRect().top + window.pageYOffset
                const offsetPosition = elementPosition - headerOffset

window.scrollTo({
                  top: offsetPosition,
                  behavior: "smooth",
                })
              }
            }}
          >
            <span className="relative z-20">Testimonials</span>
          </a>
          <a
            className="relative px-4 py-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
            onClick={(e) => {
              e.preventDefault()
              const element = document.getElementById("faq")
              if (element) {
                const headerOffset = 120 // Account for sticky header height + margin
                const elementPosition = element.getBoundingClientRect().top + window.pageYOffset
                const offsetPosition = elementPosition - headerOffset

window.scrollTo({
                  top: offsetPosition,
                  behavior: "smooth",
                })
              }
            }}
          >
            <span className="relative z-20">FAQ</span>
          </a>
        </div>

{/* Mobile Header */}
      <header className="sticky top-4 z-[9999] mx-4 flex w-auto flex-row items-center justify-between rounded-full bg-background/80 backdrop-blur-sm border border-border/50 shadow-lg md:hidden px-4 py-3">
        <a
          className="flex items-center justify-center gap-2"
          href="https://v0.app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <svg
            fill="currentColor"
            viewBox="0 0 147 70"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            className="text-foreground rounded-full size-7 w-7"
          >
            <path d="M56 50.2031V14H70V60.1562C70 65.5928 65.5928 70 60.1562 70C57.5605 70 54.9982 68.9992 53.1562 67.1573L0 14H19.7969L56 50.2031Z"></path>
            <path d="M147 56H133V23.9531L100.953 56H133V70H96.6875C85.8144 70 77 61.1856 77 50.3125V14H91V46.1562L123.156 14H91V0H127.312C138.186 0 147 8.81439 147 19.6875V56Z"></path>
          </svg>
        </a>

<button
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          className="flex items-center justify-center w-10 h-10 rounded-full bg-background/50 border border-border/50 transition-colors hover:bg-background/80"
          aria-label="Toggle menu"
        >
          <div className="flex flex-col items-center justify-center w-5 h-5 space-y-1">
            <span
              className={`block w-4 h-0.5 bg-foreground transition-all duration-300 ${isMobileMenuOpen ? "rotate-45 translate-y-1.5" : ""}`}
            ></span>
            <span
              className={`block w-4 h-0.5 bg-foreground transition-all duration-300 ${isMobileMenuOpen ? "opacity-0" : ""}`}
            ></span>
            <span
              className={`block w-4 h-0.5 bg-foreground transition-all duration-300 ${isMobileMenuOpen ? "-rotate-45 -translate-y-1.5" : ""}`}
            ></span>
          </div>
        </button>
      </header>

{/* Mobile Menu Overlay */}
      {isMobileMenuOpen && (
        <div className="fixed inset-0 z-[9998] bg-black/50 backdrop-blur-sm md:hidden">
          <div className="absolute top-20 left-4 right-4 bg-background/95 backdrop-blur-md border border-border/50 rounded-2xl shadow-2xl p-6">
            <nav className="flex flex-col space-y-4">
              <button
                onClick={() => handleMobileNavClick("features")}
                className="text-left px-4 py-3 text-lg font-medium text-muted-foreground hover:text-foreground transition-colors rounded-lg hover:bg-background/50"
              >
                Features
              </button>
              <button
                onClick={() => handleMobileNavClick("pricing")}
                className="text-left px-4 py-3 text-lg font-medium text-muted-foreground hover:text-foreground transition-colors rounded-lg hover:bg-background/50"
              >
                Pricing
              </button>
              <button
                onClick={() => handleMobileNavClick("testimonials")}
                className="text-left px-4 py-3 text-lg font-medium text-muted-foreground hover:text-foreground transition-colors rounded-lg hover:bg-background/50"
              >
                Testimonials
              </button>
              <button
                onClick={() => handleMobileNavClick("faq")}
                className="text-left px-4 py-3 text-lg font-medium text-muted-foreground hover:text-foreground transition-colors rounded-lg hover:bg-background/50"
              >
                FAQ
              </button>
              <div className="border-t border-border/50 pt-4 mt-4 flex flex-col space-y-3">
                <a
                  href="/login"
                  className="px-4 py-3 text-lg font-medium text-muted-foreground hover:text-foreground transition-colors rounded-lg hover:bg-background/50 cursor-pointer"
                >
                  Log In
                </a>
                <a
                  href="/signup"
                  className="px-4 py-3 text-lg font-bold text-center bg-gradient-to-b from-primary to-primary/80 text-primary-foreground rounded-lg shadow-lg hover:-translate-y-0.5 transition-all duration-200"
                >
                  Sign Up
                </a>
              </div>
            </nav>
          </div>
        </div>
      )}

{/* Hero Section */}
      <Hero />

{/* Features Section */}
      <div id="features">
        <Features />
      </div>

{/* Pricing Section */}
      <div id="pricing">
        <PricingSection />
      </div>

{/* Testimonials Section */}
      <div id="testimonials">
        <TestimonialsSection />
      </div>

{/* FAQ Section */}
      <div id="faq">
        <FAQSection />
      </div>

{/* Sticky Footer */}
      <StickyFooter />
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1.0 0 0);
  --foreground: #121113; /* Updated foreground color to specified dark color */
  --card: oklch(1.0 0 0);
  --card-foreground: #121113; /* Updated card foreground to match */
  --popover: oklch(1.0 0 0);
  --popover-foreground: #121113; /* Updated popover foreground to match */
  --primary: oklch(0.6716 0.1368 48.513);
  --primary-foreground: oklch(1.0 0 0);
  --secondary: oklch(0.536 0.0398 196.028);
  --secondary-foreground: oklch(1.0 0 0);
  --muted: oklch(0.967 0.0029 264.5419);
  --muted-foreground: oklch(0.551 0.0234 264.3637);
  --accent: oklch(0.9491 0 0);
  --accent-foreground: #121113; /* Updated accent foreground to match */
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(0.9851 0 0);
  --border: oklch(0.9276 0.0058 264.5313);
  --input: oklch(0.9276 0.0058 264.5313);
  --ring: oklch(0.6716 0.1368 48.513);
  --chart-1: oklch(0.594 0.0443 196.0233);
  --chart-2: oklch(0.7214 0.1337 49.9802);
  --chart-3: oklch(0.8721 0.0864 68.5474);
  --chart-4: oklch(0.6268 0 0);
  --chart-5: oklch(0.683 0 0);
  --sidebar: oklch(0.967 0.0029 264.5419);
  --sidebar-foreground: #121113; /* Updated sidebar foreground to match */
  --sidebar-primary: oklch(0.6716 0.1368 48.513);
  --sidebar-primary-foreground: oklch(1.0 0 0);
  --sidebar-accent: oklch(1.0 0 0);
  --sidebar-accent-foreground: #121113; /* Updated sidebar accent foreground to match */
  --sidebar-border: oklch(0.9276 0.0058 264.5313);
  --sidebar-ring: oklch(0.6716 0.1368 48.513);
  --font-sans: Geist Mono, ui-monospace, monospace;
  --font-serif: serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03);
  --shadow-xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03);
  --shadow-sm: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow-md: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
  --shadow-lg: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
  --shadow-xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
  --shadow-2xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.13);
  --tracking-normal: 0rem;
  --spacing: 0.25rem;
  --duration: 10s; /* Added duration for marquee animation */
  --gap: 1rem; /* Added gap for marquee animation */
}

.dark {
  --background: oklch(0.1797 0.0043 308.1928);
  --foreground: oklch(0.8109 0 0);
  --card: oklch(0.1822 0 0);
  --card-foreground: oklch(0.8109 0 0);
  --popover: oklch(0.1797 0.0043 308.1928);
  --popover-foreground: oklch(0.8109 0 0);
  --primary: oklch(0.7214 0.1337 49.9802);
  --primary-foreground: oklch(0.1797 0.0043 308.1928);
  --secondary: oklch(0.594 0.0443 196.0233);
  --secondary-foreground: oklch(0.1797 0.0043 308.1928);
  --muted: oklch(0.252 0 0);
  --muted-foreground: oklch(0.6268 0 0);
  --accent: oklch(0.3211 0 0);
  --accent-foreground: oklch(0.8109 0 0);
  --destructive: oklch(0.594 0.0443 196.0233);
  --destructive-foreground: oklch(0.1797 0.0043 308.1928);
  --border: oklch(0.252 0 0);
  --input: oklch(0.252 0 0);
  --ring: oklch(0.7214 0.1337 49.9802);
  --chart-1: oklch(0.594 0.0443 196.0233);
  --chart-2: oklch(0.7214 0.1337 49.9802);
  --chart-3: oklch(0.8721 0.0864 68.5474);
  --chart-4: oklch(0.6268 0 0);
  --chart-5: oklch(0.683 0 0);
  --sidebar: oklch(0.1822 0 0);
  --sidebar-foreground: oklch(0.8109 0 0);
  --sidebar-primary: oklch(0.7214 0.1337 49.9802);
  --sidebar-primary-foreground: oklch(0.1797 0.0043 308.1928);
  --sidebar-accent: oklch(0.3211 0 0);
  --sidebar-accent-foreground: oklch(0.8109 0 0);
  --sidebar-border: oklch(0.252 0 0);
  --sidebar-ring: oklch(0.7214 0.1337 49.9802);
  --font-sans: Geist Mono, ui-monospace, monospace;
  --font-serif: serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03);
  --shadow-xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03);
  --shadow-sm: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow-md: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
  --shadow-lg: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
  --shadow-xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
  --shadow-2xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.13);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

--font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

--radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

--shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);

--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
  --tracking-normal: var(--tracking-normal);
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
}

body {
  letter-spacing: var(--tracking-normal);
}

/* Added custom text selection styling with orange background and dark text */
::selection {
  background-color: #e78a53;
  color: #121113;
}

::-moz-selection {
  background-color: #e78a53;
  color: #121113;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Added marquee animations for testimonials section */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

@keyframes marquee-vertical {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-100% - var(--gap)));
  }
}

/* Added shiny text animation for new release promo section */
@keyframes shiny-text {
  0%,
  90%,
  100% {
    background-position: calc(-100px) 0;
  }
  30%,
  60% {
    background-position: calc(100% + 100px) 0;
  }
}

.animate-marquee {
  animation: marquee var(--duration) linear infinite;
}

.animate-marquee-vertical {
  animation: marquee-vertical var(--duration) linear infinite;
}

.animate-shiny-text {
  animation: shiny-text 3s ease-in-out infinite;
}91:["$","$L9a",null,{"chatId":"kT0dJ2GO9i9","children":["$","$L9b",null,{"data":{"@\"active-block\",\"kT0dJ2GO9i9\",":{"id":"b_wrwALzeaxYU","messageId":"czO3fInXOMS42vrLx8kVGG3FpSmR9J7E","source":"$9c","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"skiper-ui-clone","type":"code-project","project":"skiper-ui-clone","taskNameActive":"Fixing deployment issue","taskNameComplete":"Fixed deployment issue"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"kT0dJ2GO9i9\",":false},"children":"$L9d"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from abhi16016

More Templates Like This