[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Hero from "@/components/hero" import Navbar from "@/components/navbar" import { SparklesCore } from "@/components/sparkles" export default function Home() { return (

{/* Ambient background with moving particles */}

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Bot, Menu } from "lucide-react" import { motion } from "framer-motion" import Link from "next/link" import type React from "react" // Added import for React export default function Navbar() { return ( ResearchAI

Features How it Works Examples Pricing

) } function NavLink({ href, children }: { href: string; children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" import { FileText, Sparkles } from "lucide-react" import { FloatingPaper } from "@/components/floating-paper" import { RoboAnimation } from "@/components/robo-animation" export default function Hero() { return (

{/* Floating papers background */}

Transform Your Research with {" "} AI Power

Upload your research papers and let our AI transform them into engaging presentations, podcasts, and visual content.

{/* Animated robot */}

) } [V0_FILE]typescriptreact:file="components/robo-animation.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Bot } from "lucide-react" export function RoboAnimation() { return (

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; :root { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } .bg-grid-white\/\[0\.02\] { background-size: 30px 30px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px); } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .animate-float { animation: float 6s ease-in-out infinite; } [V0_FILE]typescriptreact:file="components/floating-paper.tsx" isEdit="true" "use client" import { useEffect, useState } from "react" import { motion } from "framer-motion" import { FileText } from "lucide-react" export function FloatingPaper({ count = 5 }) { const [dimensions, setDimensions] = useState({ width: 1200, height: 800 }) useEffect(() => { // Update dimensions only on client side setDimensions({ width: window.innerWidth, height: window.innerHeight, }) const handleResize = () => { setDimensions({ width: window.innerWidth, height: window.innerHeight, }) } window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) return (

{Array.from({ length: count }).map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="components/sparkles.tsx" isEdit="true" "use client" import { useEffect, useRef, useState } from "react" import { useMousePosition } from "@/lib/hooks/use-mouse-position" interface SparklesProps { id?: string background?: string minSize?: number maxSize?: number particleDensity?: number className?: string particleColor?: string } export const SparklesCore = ({ id = "tsparticles", background = "transparent", minSize = 0.6, maxSize = 1.4, particleDensity = 100, className = "h-full w-full", particleColor = "#FFFFFF", }: SparklesProps) => { const canvasRef = useRef(null) const mousePosition = useMousePosition() const [dimensions, setDimensions] = useState({ width: 1200, height: 800 }) useEffect(() => { if (typeof window === "undefined") return setDimensions({ width: window.innerWidth, height: window.innerHeight, }) const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let particles: Particle[] = [] let animationFrameId: number canvas.width = window.innerWidth canvas.height = window.innerHeight class Particle { x: number y: number size: number speedX: number speedY: number constructor() { this.x = Math.random() * canvas.width this.y = Math.random() * canvas.height this.size = Math.random() * (maxSize - minSize) + minSize this.speedX = Math.random() * 0.5 - 0.25 this.speedY = Math.random() * 0.5 - 0.25 } update() { this.x += this.speedX this.y += this.speedY if (this.x > canvas.width) this.x = 0 if (this.x < 0) this.x = canvas.width if (this.y > canvas.height) this.y = 0 if (this.y < 0) this.y = canvas.height // Mouse interaction const dx = mousePosition.x - this.x const dy = mousePosition.y - this.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < 100) { const angle = Math.atan2(dy, dx) this.x -= Math.cos(angle) * 1 this.y -= Math.sin(angle) * 1 } } draw() { if (!ctx) return ctx.fillStyle = particleColor ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2) ctx.fill() } } const init = () => { particles = [] for (let i = 0; i < particleDensity; i++) { particles.push(new Particle()) } } const animate = () => { if (!ctx) return ctx.clearRect(0, 0, canvas.width, canvas.height) particles.forEach((particle) => { particle.update() particle.draw() }) animationFrameId = requestAnimationFrame(animate) } init() animate() const handleResize = () => { if (typeof window === "undefined") return canvas.width = window.innerWidth canvas.height = window.innerHeight setDimensions({ width: window.innerWidth, height: window.innerHeight, }) init() } window.addEventListener("resize", handleResize) return () => { window.removeEventListener("resize", handleResize) cancelAnimationFrame(animationFrameId) } }, [maxSize, minSize, particleColor, particleDensity, mousePosition.x, mousePosition.y]) return (

About

About