[V0_FILE]typescriptreact:file="components/ui/background-gradient.tsx" isMerged="true" import { cn } from "@/lib/utils" import type React from "react" import { motion } from "motion/react" export const BackgroundGradient = ({ children, className, containerClassName, animate = true, }: { children?: React.ReactNode className?: string containerClassName?: string animate?: boolean }) => { const variants = { initial: { backgroundPosition: "0 50%", }, animate: { backgroundPosition: ["0, 50%", "100% 50%", "0 50%"], }, } return (

{children}

) } [V0_FILE]typescriptreact:file="components/background-gradient.tsx" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { motion } from "motion/react" export default function BackgroundGradient() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let animationId: number const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } const drawAnimatedGradient = (time: number) => { if (!ctx || !canvas) return ctx.clearRect(0, 0, canvas.width, canvas.height) // Create multiple moving gradients const centerX = canvas.width / 2 const centerY = canvas.height / 2 // First gradient - moves in a circle const x1 = centerX + Math.cos(time * 0.001) * 200 const y1 = centerY + Math.sin(time * 0.001) * 200 const gradient1 = ctx.createRadialGradient(x1, y1, 0, x1, y1, 400) gradient1.addColorStop(0, "rgba(255, 166, 0, 0.3)") gradient1.addColorStop(0.5, "rgba(255, 166, 0, 0.1)") gradient1.addColorStop(1, "transparent") // Second gradient - moves in opposite direction const x2 = centerX + Math.cos(time * 0.0015 + Math.PI) * 150 const y2 = centerY + Math.sin(time * 0.0015 + Math.PI) * 150 const gradient2 = ctx.createRadialGradient(x2, y2, 0, x2, y2, 300) gradient2.addColorStop(0, "rgba(123, 97, 255, 0.2)") gradient2.addColorStop(0.5, "rgba(123, 97, 255, 0.1)") gradient2.addColorStop(1, "transparent") // Third gradient - vertical movement const x3 = centerX + Math.sin(time * 0.0008) * 100 const y3 = centerY + Math.cos(time * 0.0012) * 180 const gradient3 = ctx.createRadialGradient(x3, y3, 0, x3, y3, 250) gradient3.addColorStop(0, "rgba(0, 204, 177, 0.25)") gradient3.addColorStop(0.5, "rgba(0, 204, 177, 0.1)") gradient3.addColorStop(1, "transparent") // Apply gradients ctx.fillStyle = gradient1 ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.globalCompositeOperation = "screen" ctx.fillStyle = gradient2 ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = gradient3 ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.globalCompositeOperation = "source-over" animationId = requestAnimationFrame(drawAnimatedGradient) } resizeCanvas() drawAnimatedGradient(0) const resizeHandler = () => { resizeCanvas() } window.addEventListener("resize", resizeHandler) return () => { window.removeEventListener("resize", resizeHandler) if (animationId) { cancelAnimationFrame(animationId) } } }, []) return ( <>

Something went wrong

Swap

Portfolio Balance

Your Assets

Choose Gift Card

Select a Gift Card

Purchase Details

Transaction Summary

Portfolio

Choose Gift Card

{card.name}

Select a Gift Card

Purchase {selectedCard.name}

Order Summary

Transform Crypto
Into Real Value

Conversion Complete!

{step === 1 ? "Choose Your Crypto" : step === 2 ? "Select Gift Card" : "Complete Order"}

Order Summary

{feature.title}

Something went wrong

Swap

Portfolio Balance

Your Assets

Choose Gift Card

Select a Gift Card

Purchase Details

Transaction Summary

Portfolio

Choose Gift Card

{card.name}

Select a Gift Card

Purchase {selectedCard.name}

Order Summary

Transform Crypto Into Real Value

Conversion Complete!

{step === 1 ? "Choose Your Crypto" : step === 2 ? "Select Gift Card" : "Complete Order"}

Order Summary

{feature.title}

Transform Crypto
Into Real Value