[V0_FILE]sql:file="scripts/create-course-submissions-table.sql" isMerged="true" -- Create table for storing course submission data CREATE TABLE IF NOT EXISTS course_submissions ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, whatsapp_number VARCHAR(50) NOT NULL, email VARCHAR(255) NOT NULL UNIQUE, social_media_link VARCHAR(500), created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create an index on email for faster lookups CREATE INDEX IF NOT EXISTS idx_course_submissions_email ON course_submissions(email); -- Create an index on created_at for sorting CREATE INDEX IF NOT EXISTS idx_course_submissions_created_at ON course_submissions(created_at); [V0_FILE]typescriptreact:file="lib/actions.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use server" import { supabase } from "@/lib/supabase/client" export async function submitCourseApplication(prevState: any, formData: FormData) { if (!supabase) { return { error: "Database connection is not configured. Please check your Supabase settings." } } // Check if formData is valid if (!formData) { return { error: "Form data is missing" } } const name = formData.get("name") const whatsappNumber = formData.get("whatsapp_number") const email = formData.get("email") const socialMediaLink = formData.get("social_media_link") // Validate required fields if (!name || !whatsappNumber || !email) { return { error: "Name, WhatsApp number, and email are required" } } try { const { data, error } = await supabase .from("course_submissions") .insert([ { name: name.toString(), whatsapp_number: whatsappNumber.toString(), email: email.toString(), social_media_link: socialMediaLink?.toString() || null, }, ]) .select() if (error) { if (error.code === "23505") { // Unique constraint violation return { error: "This email is already registered for the course." } } return { error: error.message } } return { success: "Successfully submitted! We will contact you via email within 24 hours." } } catch (error) { console.error("Submission error:", error) return { error: "An unexpected error occurred. Please try again." } } } export async function uploadAssetAction(prevState: any, formData: FormData) { if (!supabase) { return { error: "Database connection is not configured. Please check your Supabase settings." } } try { const title = formData.get("title")?.toString() const description = formData.get("description")?.toString() const type = formData.get("type")?.toString() as "photo" | "video" const fileUrl = formData.get("file_url")?.toString() const thumbnailUrl = formData.get("thumbnail_url")?.toString() const category = formData.get("category")?.toString() const tags = formData.get("tags")?.toString() if (!title || !type || !fileUrl) { return { error: "Title, type, and file URL are required" } } const { data, error } = await supabase .from("assets") .insert([ { title, description, type, file_url: fileUrl, thumbnail_url: thumbnailUrl, category, tags: tags ? tags.split(",") : [], is_featured: false, downloads_count: 0, }, ]) .select() if (error) { return { error: error.message } } return { success: "Asset uploaded successfully!" } } catch (error) { console.error("Upload error:", error) return { error: "An unexpected error occurred. Please try again." } } } export async function downloadAsset(assetId: number) { if (!supabase) { return { error: "Database connection is not configured. Please check your Supabase settings." } } try { // Get asset details const { data: asset, error: fetchError } = await supabase.from("assets").select("*").eq("id", assetId).single() if (fetchError || !asset) { return { error: "Asset not found" } } // Increment download count const { error: updateError } = await supabase .from("assets") .update({ downloads_count: asset.downloads_count + 1 }) .eq("id", assetId) if (updateError) { console.error("Failed to update download count:", updateError) // Don't fail the download if count update fails } return { success: true, fileUrl: asset.file_url, fileName: `${asset.title}.${asset.type === "photo" ? "jpg" : "mp4"}`, } } catch (error) { console.error("Download error:", error) return { error: "An unexpected error occurred during download." } } } export async function getAssetStats(assetId: number) { if (!supabase) { return { error: "Database connection is not configured." } } try { const { data, error } = await supabase.from("assets").select("downloads_count").eq("id", assetId).single() if (error) { return { error: error.message } } return { downloads: data.downloads_count } } catch (error) { console.error("Stats error:", error) return { error: "Failed to get asset stats" } } } [V0_FILE]typescriptreact:file="lib/supabase/client.ts" isEdit="true" isMerged="true" let supabase: any = null let isSupabaseConfigured = false if (typeof window !== "undefined") { // Check if Supabase environment variables are available isSupabaseConfigured = typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" && process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 && typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0 if (isSupabaseConfigured) { import("@supabase/supabase-js") .then(({ createClient }) => { supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) }) .catch(() => { console.log("Supabase not available") }) } } export { supabase, isSupabaseConfigured } [V0_FILE]typescriptreact:file="components/animated-background.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" export default function AnimatedBackground() { const canvasRef = useRef(null) const [animationPhase, setAnimationPhase] = useState<"welcome" | "transitioning" | "form">("welcome") const animationStartTime = useRef(0) useEffect(() => { console.log("[v0] Animation phase:", animationPhase) const welcomeTimer = setTimeout(() => { console.log("[v0] Starting transition phase") setAnimationPhase("transitioning") animationStartTime.current = Date.now() }, 3000) // Show welcome for 3 seconds const transitionTimer = setTimeout(() => { console.log("[v0] Starting form phase") setAnimationPhase("form") }, 5000) // Start form phase after 5 seconds return () => { clearTimeout(welcomeTimer) clearTimeout(transitionTimer) } }, []) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return console.log("[v0] Canvas initialized:", canvas.width, canvas.height) const resizeCanvas = () => { if (animationPhase === "welcome") { canvas.width = window.innerWidth canvas.height = window.innerHeight } else { canvas.width = 600 canvas.height = 800 } console.log("[v0] Canvas resized:", canvas.width, canvas.height) } resizeCanvas() window.addEventListener("resize", resizeCanvas) // Animation variables let animationId: number let time = 0 const particles: Array<{ x: number y: number vx: number vy: number size: number opacity: number trail: Array<{ x: number; y: number; opacity: number }> pulsePhase: number }> = [] const floatingObjects: Array<{ x: number y: number vx: number vy: number size: number rotation: number rotationSpeed: number shape: "square" | "triangle" | "circle" | "diamond" | "hexagon" | "star" opacity: number pulseSpeed: number shadowOffset: { x: number; y: number } }> = [] for (let i = 0; i < 200; i++) { particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 3, vy: (Math.random() - 0.5) * 3, size: Math.random() * 8 + 3, opacity: Math.random() * 0.9 + 0.4, trail: [], pulsePhase: Math.random() * Math.PI * 2, }) } for (let i = 0; i < 120; i++) { const shapes: Array<"square" | "triangle" | "circle" | "diamond" | "hexagon" | "star"> = [ "square", "triangle", "circle", "diamond", "hexagon", "star", ] floatingObjects.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, size: Math.random() * 25 + 10, rotation: Math.random() * Math.PI * 2, rotationSpeed: (Math.random() - 0.5) * 0.08, shape: shapes[Math.floor(Math.random() * shapes.length)], opacity: Math.random() * 0.7 + 0.3, pulseSpeed: Math.random() * 0.05 + 0.02, shadowOffset: { x: Math.random() * 4 - 2, y: Math.random() * 4 - 2 }, }) } const easeInOutCubic = (t: number): number => { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2 } const getTransitionProgress = (): number => { if (animationPhase !== "transitioning") return animationPhase === "form" ? 1 : 0 const elapsed = Date.now() - animationStartTime.current const progress = Math.min(elapsed / 2000, 1) // 2 second transition return easeInOutCubic(progress) } const drawShape = (obj: (typeof floatingObjects)[0]) => { ctx.save() ctx.translate(obj.x, obj.y) ctx.rotate(obj.rotation) ctx.fillStyle = `rgba(0, 0, 0, ${obj.opacity * 0.3})` ctx.translate(obj.shadowOffset.x, obj.shadowOffset.y) const pulseSize = obj.size * (1 + Math.sin(time * obj.pulseSpeed + obj.pulsePhase) * 0.1) switch (obj.shape) { case "square": ctx.fillRect(-pulseSize / 2, -pulseSize / 2, pulseSize, pulseSize) break case "triangle": ctx.beginPath() ctx.moveTo(0, -pulseSize / 2) ctx.lineTo(-pulseSize / 2, pulseSize / 2) ctx.lineTo(pulseSize / 2, pulseSize / 2) ctx.closePath() ctx.fill() break case "circle": ctx.beginPath() ctx.arc(0, 0, pulseSize / 2, 0, Math.PI * 2) ctx.fill() break case "diamond": ctx.beginPath() ctx.moveTo(0, -pulseSize / 2) ctx.lineTo(pulseSize / 2, 0) ctx.lineTo(0, pulseSize / 2) ctx.lineTo(-pulseSize / 2, 0) ctx.closePath() ctx.fill() break case "hexagon": ctx.beginPath() for (let i = 0; i < 6; i++) { const angle = (i * Math.PI) / 3 const x = (Math.cos(angle) * pulseSize) / 2 const y = (Math.sin(angle) * pulseSize) / 2 if (i === 0) ctx.moveTo(x, y) else ctx.lineTo(x, y) } ctx.closePath() ctx.fill() break case "star": ctx.beginPath() for (let i = 0; i < 10; i++) { const angle = (i * Math.PI) / 5 const radius = i % 2 === 0 ? pulseSize / 2 : pulseSize / 4 const x = Math.cos(angle) * radius const y = Math.sin(angle) * radius if (i === 0) ctx.moveTo(x, y) else ctx.lineTo(x, y) } ctx.closePath() ctx.fill() break } ctx.translate(-obj.shadowOffset.x, -obj.shadowOffset.y) ctx.fillStyle = `rgba(0, 0, 0, ${obj.opacity})` switch (obj.shape) { case "square": ctx.fillRect(-pulseSize / 2, -pulseSize / 2, pulseSize, pulseSize) break case "triangle": ctx.beginPath() ctx.moveTo(0, -pulseSize / 2) ctx.lineTo(-pulseSize / 2, pulseSize / 2) ctx.lineTo(pulseSize / 2, pulseSize / 2) ctx.closePath() ctx.fill() break case "circle": ctx.beginPath() ctx.arc(0, 0, pulseSize / 2, 0, Math.PI * 2) ctx.fill() break case "diamond": ctx.beginPath() ctx.moveTo(0, -pulseSize / 2) ctx.lineTo(pulseSize / 2, 0) ctx.lineTo(0, pulseSize / 2) ctx.lineTo(-pulseSize / 2, 0) ctx.closePath() ctx.fill() break case "hexagon": ctx.beginPath() for (let i = 0; i < 6; i++) { const angle = (i * Math.PI) / 3 const x = (Math.cos(angle) * pulseSize) / 2 const y = (Math.sin(angle) * pulseSize) / 2 if (i === 0) ctx.moveTo(x, y) else ctx.lineTo(x, y) } ctx.closePath() ctx.fill() break case "star": ctx.beginPath() for (let i = 0; i < 10; i++) { const angle = (i * Math.PI) / 5 const radius = i % 2 === 0 ? pulseSize / 2 : pulseSize / 4 const x = Math.cos(angle) * radius const y = Math.sin(angle) * radius if (i === 0) ctx.moveTo(x, y) else ctx.lineTo(x, y) } ctx.closePath() ctx.fill() break } ctx.restore() } const renderText = () => { const centerX = canvas.width / 2 const centerY = canvas.height / 2 let fontSize, text if (animationPhase === "welcome") { fontSize = Math.min(canvas.width, canvas.height) * 0.12 text = "WELCOME TO VXDLabs" } else { fontSize = Math.min(canvas.width, canvas.height) * 0.08 text = "VXDLabs" } ctx.font = `bold ${fontSize}px Arial, sans-serif` ctx.textAlign = "center" ctx.textBaseline = "middle" const flashIntensity = Math.sin(time * 25) * 0.5 + 0.5 const glitchIntensity = Math.sin(time * 18) * 0.4 + 0.6 const glitchOffsets = [ { x: 0, y: 0, color: `rgba(0, 0, 0, ${0.9 * glitchIntensity})` }, { x: Math.sin(time * 30) * 8, y: 0, color: `rgba(255, 255, 255, ${0.7 * flashIntensity})` }, { x: Math.cos(time * 22) * -6, y: Math.sin(time * 28) * 4, color: `rgba(0, 0, 0, ${0.6 * glitchIntensity})` }, { x: Math.sin(time * 35) * 10, y: Math.cos(time * 20) * -6, color: `rgba(255, 255, 255, ${0.5 * flashIntensity})`, }, { x: Math.random() * 12 - 6, y: Math.random() * 8 - 4, color: `rgba(0, 0, 0, ${0.3 * Math.random()})` }, { x: Math.random() * 10 - 5, y: Math.random() * 6 - 3, color: `rgba(255, 255, 255, ${0.4 * Math.random()})` }, ] glitchOffsets.forEach((offset) => { ctx.fillStyle = offset.color ctx.fillText(text, centerX + offset.x, centerY + offset.y) }) if (Math.random() < 0.3) { for (let i = 0; i < 5; i++) { const lineY = centerY - fontSize / 2 + (fontSize * i) / 4 ctx.fillStyle = `rgba(255, 255, 255, ${0.2 * Math.sin(time * 40 + i)})` ctx.fillRect(centerX - fontSize * 3, lineY, fontSize * 6, 2) } } } const animate = () => { time += 0.016 // 60 FPS timing ctx.clearRect(0, 0, canvas.width, canvas.height) const bgOpacity = animationPhase === "welcome" ? 0.03 : 0.01 ctx.fillStyle = `rgba(255, 255, 255, ${bgOpacity})` ctx.fillRect(0, 0, canvas.width, canvas.height) particles.forEach((particle, index) => { particle.trail.push({ x: particle.x, y: particle.y, opacity: particle.opacity }) if (particle.trail.length > 8) particle.trail.shift() particle.x += particle.vx + Math.sin(time * 2 + index * 0.1) * 0.8 particle.y += particle.vy + Math.cos(time * 1.5 + index * 0.1) * 0.8 if (particle.x < 0) particle.x = canvas.width if (particle.x > canvas.width) particle.x = 0 if (particle.y < 0) particle.y = canvas.height if (particle.y > canvas.height) particle.y = 0 particle.trail.forEach((trailPoint, trailIndex) => { const trailOpacity = (trailIndex / particle.trail.length) * particle.opacity * 0.5 ctx.fillStyle = `rgba(0, 0, 0, ${trailOpacity})` ctx.beginPath() ctx.arc(trailPoint.x, trailPoint.y, particle.size * (trailIndex / particle.trail.length), 0, Math.PI * 2) ctx.fill() }) const pulseSize = particle.size * (1 + Math.sin(time * 10 + particle.pulsePhase) * 0.2) ctx.fillStyle = `rgba(0, 0, 0, ${particle.opacity})` ctx.beginPath() ctx.arc(particle.x, particle.y, pulseSize, 0, Math.PI * 2) ctx.fill() }) floatingObjects.forEach((obj, index) => { obj.x += obj.vx + Math.sin(time * 2 + index * 0.2) * 0.3 obj.y += obj.vy + Math.cos(time * 1.5 + index * 0.3) * 0.4 obj.rotation += obj.rotationSpeed if (obj.x < -obj.size) obj.x = canvas.width + obj.size if (obj.x > canvas.width + obj.size) obj.x = -obj.size if (obj.y < -obj.size) obj.y = canvas.height + obj.size if (obj.y > canvas.height + obj.size) obj.y = -obj.size drawShape(obj) }) particles.forEach((particle, i) => { particles.slice(i + 1).forEach((otherParticle) => { const dx = particle.x - otherParticle.x const dy = particle.y - otherParticle.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < 120) { const lineOpacity = 0.8 * (1 - distance / 120) ctx.strokeStyle = `rgba(0, 0, 0, ${lineOpacity})` ctx.lineWidth = 3 * (1 - distance / 120) ctx.beginPath() ctx.moveTo(particle.x, particle.y) ctx.lineTo(otherParticle.x, otherParticle.y) ctx.stroke() } }) }) renderText() if (Math.random() < 0.2) { const barHeight = Math.random() * 40 + 5 const barY = Math.random() * canvas.height const barOpacity = Math.sin(time * 25) * 0.4 + 0.4 const isWhite = Math.random() > 0.5 ctx.fillStyle = isWhite ? `rgba(255, 255, 255, ${barOpacity})` : `rgba(0, 0, 0, ${barOpacity})` ctx.fillRect(0, barY, canvas.width, barHeight) } if (Math.random() < 0.12) { const lineWidth = Math.random() * 6 + 2 const lineX = Math.random() * canvas.width const isWhite = Math.random() > 0.5 const lineOpacity = 0.3 * Math.sin(time * 25) + 0.3 ctx.fillStyle = isWhite ? `rgba(255, 255, 255, ${lineOpacity})` : `rgba(0, 0, 0, ${lineOpacity})` ctx.fillRect(lineX, 0, lineWidth, canvas.height) } animationId = requestAnimationFrame(animate) } animate() return () => { window.removeEventListener("resize", resizeCanvas) cancelAnimationFrame(animationId) } }, [animationPhase]) const getCanvasStyle = () => { if (animationPhase === "welcome") { return { position: "fixed" as const, top: 0, left: 0, width: "100vw", height: "100vh", zIndex: 1000, background: "transparent", pointerEvents: "none" as const, } } else { return { position: "fixed" as const, top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: "600px", height: "800px", zIndex: 5, background: "transparent", pointerEvents: "none" as const, transition: animationPhase === "transitioning" ? "all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94)" : "none", } } } return

VXDL ASSET STOCK

Admin Login

Upload Asset

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This