82:I[903690,["/chat-static/_next/static/immutable/chunks/0anbsr6ytl7bn.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3a9zhphvqnvzm.js","/chat-static/_next/static/immutable/chunks/2ljszvh-8yzpr.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1fd55qiest67z.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1lb5wnsc7sqpv.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/2c2etj27swdtd.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0ckkywnbdkyhx.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3dtebtzto2hzn.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1dvpa8vmf1cw-.js","/chat-static/_next/static/immutable/chunks/297a3ievwg7ti.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/118hiewbivm20.js","/chat-static/_next/static/immutable/chunks/1wnjcr8d0euv6.js","/chat-static/_next/static/immutable/chunks/1tucuwc54jwz-.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0byovcw2r0gss.js"],"ExplicitChatIdProvider"] 83:I[838238,["/chat-static/_next/static/immutable/chunks/0anbsr6ytl7bn.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3a9zhphvqnvzm.js","/chat-static/_next/static/immutable/chunks/2ljszvh-8yzpr.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1fd55qiest67z.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1lb5wnsc7sqpv.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/2c2etj27swdtd.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0ckkywnbdkyhx.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3dtebtzto2hzn.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1dvpa8vmf1cw-.js","/chat-static/_next/static/immutable/chunks/297a3ievwg7ti.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/118hiewbivm20.js","/chat-static/_next/static/immutable/chunks/1wnjcr8d0euv6.js","/chat-static/_next/static/immutable/chunks/1tucuwc54jwz-.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0byovcw2r0gss.js"],"SWRDataProvider"] 84:T1a5e3,[V0_FILE]typescriptreact:file="components/interactive-cards.tsx" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Sparkles, Zap, Palette, Layers } from "lucide-react" const cards = [ { title: "Dynamic Animations", description: "Fluid motion and transitions that respond to user interaction", icon: , color: "from-purple-500 to-blue-500", tags: ["Motion", "Interaction", "Fluid"], }, { title: "Performance Optimized", description: "Smooth animations that maintain 60fps across all devices", icon: , color: "from-amber-500 to-orange-500", tags: ["Speed", "Optimization", "Smooth"], }, { title: "Adaptive Design", description: "Visuals that adapt to user preferences and context", icon: , color: "from-emerald-500 to-teal-500", tags: ["Responsive", "Adaptive", "Context"], }, { title: "Layered Effects", description: "Multiple visual layers creating depth and dimension", icon: , color: "from-pink-500 to-rose-500", tags: ["Depth", "Dimension", "Layers"], }, ] export default function InteractiveCards() { return (

{cards.map((card, index) => ( ))}

) } function InteractiveCard({ card, index }: { card: (typeof cards)[0]; index: number }) { const [isHovered, setIsHovered] = useState(false) return ( setIsHovered(true)} onHoverEnd={() => setIsHovered(false)} > {/* Animated gradient background */}

{/* Card content with hover effects */} {card.icon} {card.title} {card.description}

{card.tags.map((tag, i) => ( {tag} ))}

) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isQuickEdit="true" import * as React from "react" import { cn } from "@/lib/utils" const Chart = React.forwardRef>(({ className, ...props }, ref) => { return

}) Chart.displayName = "Chart" const ChartContainer = React.forwardRef>( ({ className, ...props }, ref) => { return

}, ) ChartContainer.displayName = "ChartContainer" const ChartTooltip = React.forwardRef>( ({ className, ...props }, ref) => { return (

) }, ) ChartTooltip.displayName = "ChartTooltip" const ChartTooltipContent = React.forwardRef>( ({ className, ...props }, ref) => { return

}, ) ChartTooltipContent.displayName = "ChartTooltipContent" const ChartLegend = React.forwardRef>( ({ className, ...props }, ref) => { return

}, ) ChartLegend.displayName = "ChartLegend" interface ChartLegendItemProps extends React.HTMLAttributes { color: string label: string } const ChartLegendItem = React.forwardRef( ({ className, color, label, ...props }, ref) => { return (

{label}

) }, ) ChartLegendItem.displayName = "ChartLegendItem" export { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendItem } [V0_FILE]plaintext:file="public/testimonials/avatar-1.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" [V0_FILE]plaintext:file="public/testimonials/avatar-2.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" [V0_FILE]plaintext:file="public/testimonials/avatar-3.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" [V0_FILE]plaintext:file="public/testimonials/avatar-4.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" [V0_FILE]plaintext:file="public/testimonials/avatar-5.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" [V0_FILE]typescriptreact:file="components/analytics.tsx" "use client" import { useEffect } from "react" import { usePathname, useSearchParams } from "next/navigation" export function Analytics() { const pathname = usePathname() const searchParams = useSearchParams() useEffect(() => { // This would be where you'd initialize your analytics // For example: window.gtag("config", "GA-MEASUREMENT-ID", { page_path: pathname }) // For demonstration purposes, we'll just log the page view console.log(`Page view: ${pathname}${searchParams ? `?${searchParams}` : ""}`) }, [pathname, searchParams]) return null } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/hooks/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="hooks/use-toast.ts" "use client" // Inspired by react-hot-toast library import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 5 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_VALUE return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="components/header.tsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { ModeToggle } from "@/components/mode-toggle" import { Menu, X } from "lucide-react" import { useToast } from "@/hooks/use-toast" const navItems = [ { name: "Home", href: "#" }, { name: "Features", href: "#features" }, { name: "Visualizations", href: "#visualizations" }, { name: "Gallery", href: "#gallery" }, { name: "Contact", href: "#contact" }, ] export default function Header() { const [isScrolled, setIsScrolled] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const { toast } = useToast() useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const handleGetStarted = () => { toast({ title: "Welcome aboard!", description: "Thanks for your interest. We'll get you started right away.", }) } return (

Visionary {/* Desktop Navigation */}

{/* Mobile menu button */} setMobileMenuOpen(!mobileMenuOpen)} aria-label={mobileMenuOpen ? "Close menu" : "Open menu"} >

{/* Mobile menu */} {mobileMenuOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/features-section.tsx" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Sparkles, Zap, Palette, Layers, LineChart, Image, Smartphone, Lock } from "lucide-react" const features = [ { title: "Dynamic Animations", description: "Fluid motion and transitions that respond to user interaction, creating an engaging and immersive experience.", icon: , color: "from-purple-500 to-blue-500", tags: ["Motion", "Interaction", "Fluid"], }, { title: "Performance Optimized", description: "Smooth animations that maintain 60fps across all devices, ensuring a seamless experience for all users.", icon: , color: "from-amber-500 to-orange-500", tags: ["Speed", "Optimization", "Smooth"], }, { title: "Adaptive Design", description: "Visuals that adapt to user preferences and context, including dark mode and accessibility considerations.", icon: , color: "from-emerald-500 to-teal-500", tags: ["Responsive", "Adaptive", "Context"], }, { title: "Layered Effects", description: "Multiple visual layers creating depth and dimension, with parallax scrolling and 3D transformations.", icon: , color: "from-pink-500 to-rose-500", tags: ["Depth", "Dimension", "Layers"], }, { title: "Data Visualization", description: "Interactive charts and graphs that bring data to life with animations and responsive behaviors.", icon: , color: "from-blue-500 to-cyan-500", tags: ["Charts", "Analytics", "Interactive"], }, { title: "Image Galleries", description: "Stunning image showcases with smooth transitions, zoom effects, and responsive layouts.", icon: , color: "from-violet-500 to-purple-500", tags: ["Gallery", "Showcase", "Media"], }, { title: "Mobile Optimized", description: "Fully responsive design that looks and performs beautifully on devices of all sizes.", icon: , color: "from-red-500 to-orange-500", tags: ["Responsive", "Mobile", "Touch"], }, { title: "Accessibility Focus", description: "Designed with accessibility in mind, ensuring a great experience for all users regardless of abilities.", icon: , color: "from-green-500 to-emerald-500", tags: ["A11y", "Inclusive", "Standards"], }, ] export default function FeaturesSection() { const ref = useRef(null) const isInView = useInView(ref, { once: false, amount: 0.1 }) return (

Powerful Features

Our platform combines cutting-edge visual effects with performance optimization to create stunning experiences that captivate users.

{features.map((feature, index) => ( ))}

) } function FeatureCard({ feature, index, isInView, }: { feature: (typeof features)[0]; index: number; isInView: boolean }) { return ( {/* Animated gradient background */}

{/* Card content with hover effects */} {feature.icon} {feature.title} {feature.description}

{feature.tags.map((tag, i) => ( {tag} ))}

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" "use client" import { useState, useRef } from "react" import { motion, useInView } from "framer-motion" import { Card, CardContent } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight, Quote } from "lucide-react" const testimonials = [ { id: 1, content: "The visual effects and animations in this application are absolutely stunning. It's rare to find such attention to detail in modern web design.", author: { name: "Alex Morgan", role: "UX Designer", avatar: "/testimonials/avatar-1.jpg", initials: "AM", }, }, { id: 2, content: "I've been looking for a template that combines beautiful aesthetics with performance, and this exceeds all my expectations. The interactive elements are smooth and engaging.", author: { name: "Sarah Chen", role: "Product Manager", avatar: "/testimonials/avatar-2.jpg", initials: "SC", }, }, { id: 3, content: "The data visualization components are not just beautiful, but also highly functional. They present complex information in an intuitive and accessible way.", author: { name: "Michael Johnson", role: "Data Analyst", avatar: "/testimonials/avatar-3.jpg", initials: "MJ", }, }, { id: 4, content: "As a developer, I appreciate the clean code and attention to performance. The animations are butter-smooth even on mobile devices.", author: { name: "Priya Patel", role: "Frontend Developer", avatar: "/testimonials/avatar-4.jpg", initials: "PP", }, }, { id: 5, content: "The gallery component is a game-changer for our portfolio site. Our clients love the smooth transitions and professional look.", author: { name: "David Wilson", role: "Creative Director", avatar: "/testimonials/avatar-5.jpg", initials: "DW", }, }, ] export default function Testimonials() { const [activeIndex, setActiveIndex] = useState(0) const [direction, setDirection] = useState(0) const [isMobile, setIsMobile] = useState(false) const ref = useRef(null) const isInView = useInView(ref, { once: false, amount: 0.2 }) // Determine how many testimonials to show based on screen size const getVisibleCount = () => { if (typeof window !== "undefined") { return window.innerWidth < 768 ? 1 : window.innerWidth < 1024 ? 2 : 3 } return 3 } const [visibleCount, setVisibleCount] = useState(3) // Update visible count on mount and resize useState(() => { setVisibleCount(getVisibleCount()) setIsMobile(window.innerWidth < 768) const handleResize = () => { setVisibleCount(getVisibleCount()) setIsMobile(window.innerWidth < 768) } window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }) const nextTestimonial = () => { setDirection(1) setActiveIndex((prev) => (prev === testimonials.length - visibleCount ? 0 : prev + 1)) } const prevTestimonial = () => { setDirection(-1) setActiveIndex((prev) => (prev === 0 ? testimonials.length - visibleCount : prev - 1)) } return (

What Our Users Say

Discover how our visual experiences have transformed projects and delighted users around the world.

{testimonials.slice(activeIndex, activeIndex + visibleCount).map((testimonial, index) => ( 0 ? 100 : -100 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: direction > 0 ? -100 : 100 }} transition={{ duration: 0.5, delay: index * 0.1 }} className={`${isMobile ? "w-full" : visibleCount === 2 ? "w-1/2" : "w-1/3"} flex-shrink-0`} >

"{testimonial.content}"

{testimonial.author.initials}

{testimonial.author.name}

{testimonial.author.role}

))}

) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" import { useToast } from "@/hooks/use-toast" export default function CtaSection() { const ref = useRef(null) const isInView = useInView(ref, { once: false, amount: 0.3 }) const { toast } = useToast() const handleGetStarted = () => { toast({ title: "Welcome aboard!", description: "Thanks for your interest. We'll get you started right away.", }) } const handleViewDocs = () => { toast({ title: "Documentation", description: "Our comprehensive documentation is coming soon.", }) } return (

{/* Background gradient */}

{/* Animated particles */}

Ready to Create Stunning Visual Experiences?

Join thousands of designers and developers who are already using our platform to build beautiful, interactive interfaces that captivate users.

10k+ Active Users 500+ Projects Completed 98% Satisfaction Rate 24/7 Support

) } // Mobile-optimized particles using divs instead of canvas function MobileOptimizedParticles({ isInView }: { isInView: boolean }) { return (

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

) } [V0_FILE]typescriptreact:file="components/animated-form.tsx" "use client" import type React from "react" import { useState, useRef } from "react" import { motion, useInView } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { CheckCircle2, Loader2 } from "lucide-react" import { useToast } from "@/hooks/use-toast" export default function AnimatedForm() { const [formState, setFormState] = useState({ name: "", email: "", message: "", }) const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle") const ref = useRef(null) const isInView = useInView(ref, { once: false, amount: 0.3 }) const { toast } = useToast() const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormState((prev) => ({ ...prev, [name]: value, })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setFormStatus("submitting") // Validate form if (!formState.name || !formState.email || !formState.message) { toast({ title: "Error", description: "Please fill in all fields", variant: "destructive", }) setFormStatus("error") return } // Simulate form submission setTimeout(() => { setFormStatus("success") toast({ title: "Message sent!", description: "Thank you for your message. We'll get back to you soon.", }) // Reset form after success setTimeout(() => { setFormState({ name: "", email: "", message: "", }) setFormStatus("idle") }, 3000) }, 2000) } return ( Get in Touch Fill out the form below and we'll get back to you as soon as possible.

Name

Message

</div>
            </div>

<div>
              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.2 }}>
                {formStatus === "idle" && (
                  <Button type="submit" className="w-full transition-all duration-300 transform hover:scale-105">
                    Send Message
                  </Button>
                )}

{formStatus === "submitting" && (
                  <Button disabled className="w-full">
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Sending...
                  </Button>
                )}

{formStatus === "success" && (
                  <Button variant="outline" className="w-full bg-green-50 text-green-600 border-green-200" disabled>
                    <CheckCircle2 className="mr-2 h-4 w-4" />
                    Message Sent!
                  </Button>
                )}

{formStatus === "error" && (
                  <Button variant="destructive" className="w-full" onClick={() => setFormStatus("idle")}>
                    Try Again
                  </Button>
                )}
              </motion.div>
            </div>
          </form>
        </CardContent>
        <CardFooter className="flex justify-center text-sm text-muted-foreground">
          We'll never share your information with anyone else.
        </CardFooter>
      </Card>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx"
"use client"

import type React 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 { Facebook, Twitter, Instagram, Linkedin, Github, Send } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export default function Footer() {
  const { toast } = useToast()

const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault()
    const form = e.target as HTMLFormElement
    const email = new FormData(form).get("email") as string

if (!email) {
      toast({
        title: "Error",
        description: "Please enter your email address",
        variant: "destructive",
      })
      return
    }

toast({
      title: "Subscribed!",
      description: "Thank you for subscribing to our newsletter.",
    })

form.reset()
  }

return (
    <footer className="bg-muted/30 pt-16 pb-8 border-t border-border/50">
      <div className="container">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
          {/* Company Info */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
                <span className="text-white font-bold text-sm">V</span>
              </div>
              <span className="font-bold text-lg">Visionary</span>
            </div>
            <p className="text-muted-foreground mb-4">
              Creating stunning visual experiences through innovative design and cutting-edge technology.
            </p>
            <div className="flex gap-3">
              <Link
                href="#"
                className="text-muted-foreground hover:text-primary transition-colors"
                aria-label="Facebook"
              >
                <Facebook className="h-5 w-5" />
              </Link>
              <Link
                href="#"
                className="text-muted-foreground hover:text-primary transition-colors"
                aria-label="Twitter"
              >
                <Twitter className="h-5 w-5" />
              </Link>
              <Link
                href="#"
                className="text-muted-foreground hover:text-primary transition-colors"
                aria-label="Instagram"
              >
                <Instagram className="h-5 w-5" />
              </Link>
              <Link
                href="#"
                className="text-muted-foreground hover:text-primary transition-colors"
                aria-label="LinkedIn"
              >
                <Linkedin className="h-5 w-5" />
              </Link>
              <Link href="#" className="text-muted-foreground hover:text-primary transition-colors" aria-label="GitHub">
                <Github className="h-5 w-5" />
              </Link>
            </div>
          </motion.div>

{/* Quick Links */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            viewport={{ once: true }}
          >
            <h3 className="font-bold text-lg mb-4">Quick Links</h3>
            <ul className="space-y-2">
              <li>
                <Link href="#" className="text-muted-foreground hover:text-primary transition-colors">
                  Home
                </Link>
              </li>
              <li>
                <Link href="#features" className="text-muted-foreground hover:text-primary transition-colors">
                  Features
                </Link>
              </li>
              <li>
                <Link href="#visualizations" className="text-muted-foreground hover:text-primary transition-colors">
                  Visualizations
                </Link>
              </li>
              <li>
                <Link href="#gallery" className="text-muted-foreground hover:text-primary transition-colors">
                  Gallery
                </Link>
              </li>
              <li>
                <Link href="#contact" className="text-muted-foreground hover:text-primary transition-colors">
                  Contact
                </Link>
              </li>
            </ul>
          </motion.div>

{/* Resources */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            viewport={{ once: true }}
          >
            <h3 className="font-bold text-lg mb-4">Resources</h3>
            <ul className="space-y-2">
              <li>
                <Link href="#" className="text-muted-foreground hover:text-primary transition-colors">
                  Documentation
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-primary transition-colors">
                  Tutorials
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-primary transition-colors">
                  Blog
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-primary transition-colors">
                  Support
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-primary transition-colors">
                  Privacy Policy
                </Link>
              </li>
            </ul>
          </motion.div>

{/* Newsletter */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            viewport={{ once: true }}
          >
            <h3 className="font-bold text-lg mb-4">Subscribe to our Newsletter</h3>
            <p className="text-muted-foreground mb-4">Stay updated with our latest news and releases.</p>
            <form onSubmit={handleSubscribe} className="flex gap-2">
              <Input
                type="email"
                name="email"
                placeholder="Your email"
                className="bg-background"
                aria-label="Your email for newsletter"
              />
              <Button type="submit" size="icon" className="bg-primary hover:bg-primary/90">
                <Send className="h-4 w-4" />
              </Button>
            </form>
          </motion.div>
        </div>

{/* Bottom bar */}
        <div className="border-t border-border/50 pt-8 mt-8 text-center text-sm text-muted-foreground">
          <p>© {new Date().getFullYear()} Visionary. All rights reserved.</p>
          <p className="mt-2">
            Designed with <span className="text-red-500">♥</span> for a stunning visual experience.
          </p>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}

[V0_FILE]typescriptreact:file="app/page.tsx"
import Header from "@/components/header"
import Hero from "@/components/hero"
import FeaturesSection from "@/components/features-section"
import DataVisualization from "@/components/data-visualization"
import Gallery from "@/components/gallery"
import Testimonials from "@/components/testimonials"
import CtaSection from "@/components/cta-section"
import AnimatedForm from "@/components/animated-form"
import Footer from "@/components/footer"
import { Separator } from "@/components/ui/separator"

export default function Home() {
  return (
    <>
      <Header />
      <main className="min-h-screen">
        <Hero />
        <Separator className="my-8" />
        <section id="features" className="container py-12 md:py-24">
          <FeaturesSection />
        </section>
        <Separator className="my-8" />
        <section id="visualizations" className="container py-12 md:py-24 bg-muted/30">
          <h2 className="text-3xl font-bold text-center mb-12 animate-fade-in gradient-text">Data Visualization</h2>
          <DataVisualization />
        </section>
        <Separator className="my-8" />
        <section id="gallery" className="container py-12 md:py-24">
          <h2 className="text-3xl font-bold text-center mb-12 animate-fade-in gradient-text">Gallery</h2>
          <Gallery />
        </section>
        <Testimonials />
        <CtaSection />
        <Separator className="my-8" />
        <section id="contact" className="container py-12 md:py-24 bg-muted/30">
          <h2 className="text-3xl font-bold text-center mb-12 animate-fade-in gradient-text">Get in Touch</h2>
          <AnimatedForm />
        </section>
      </main>
      <Footer />
    </>
  )
}

[V0_FILE]plaintext:file="public/favicon.ico" url="https://v0.blob.com/pjtmy8OGJ.png"

[V0_FILE]plaintext:file="public/apple-touch-icon.png" url="https://v0.blob.com/pjtmy8OGJ.png"

[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import "@/app/globals.css"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/ui/toaster"
import { Analytics } from "@/components/analytics"

const inter = Inter({ subsets: ["latin"], display: "swap" })

export const metadata = {
  title: "Visionary - Stunning Visual Experiences",
  description: "Explore the boundaries of UI animation and interactive design with our cutting-edge visual framework",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
        <meta name="theme-color" content="#000000" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
          {children}
          <Toaster />
          <Analytics />
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/hero.tsx"
"use client"

import { useEffect, useRef, useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { ArrowDown, ArrowRight } from "lucide-react"
import Image from "next/image"
import { useToast } from "@/hooks/use-toast"
import { useMobile } from "@/hooks/use-mobile"

export default function Hero() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const heroRef = useRef<HTMLDivElement>(null)
  const [scrollY, setScrollY] = useState(0)
  const isMobile = useMobile()
  const [imagesLoaded, setImagesLoaded] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const { toast } = useToast()

// Track loaded images
  const [loadedImages, setLoadedImages] = useState({
    cube: false,
    sphere: false,
    torus: false,
  })

useEffect(() => {
    // Check if all images are loaded
    if (loadedImages.cube && loadedImages.sphere && loadedImages.torus) {
      setImagesLoaded(true)
      setTimeout(() => setIsLoading(false), 300) // Small delay for smooth transition
    }
  }, [loadedImages])

useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (heroRef.current) {
        const rect = heroRef.current.getBoundingClientRect()
        setMousePosition({
          x: e.clientX - rect.left,
          y: e.clientY - rect.top,
        })
      }
    }

const handleScroll = () => {
      setScrollY(window.scrollY)
    }

// Only add mousemove listener on non-mobile devices
    if (!isMobile) {
      window.addEventListener("mousemove", handleMouseMove)
    }

window.addEventListener("scroll", handleScroll)

// Set a timeout to hide loading state even if images don't load
    const timeout = setTimeout(() => {
      setIsLoading(false)
    }, 3000)

return () => {
      window.removeEventListener("mousemove", handleMouseMove)
      window.removeEventListener("scroll", handleScroll)
      clearTimeout(timeout)
    }
  }, [isMobile])

// Calculate dynamic gradient based on mouse position or center for mobile
  const gradientStyle = {
    background: isMobile
      ? `radial-gradient(
          circle at 50% 30%,
          hsl(230, 70%, 60%),
          hsl(260, 70%, 40%)
        )`
      : `radial-gradient(
          circle at ${mousePosition.x}px ${mousePosition.y}px,
          hsl(${(mousePosition.x / 10) % 360}, 70%, 60%),
          hsl(${(mousePosition.y / 10) % 360}, 70%, 40%)
        )`,
    opacity: 0.8,
  }

// Parallax effect for text based on scroll
  const parallaxY = scrollY * 0.5

const handleGetStarted = () => {
    toast({
      title: "Welcome aboard!",
      description: "Thanks for your interest. We'll get you started right away.",
    })
  }

const handleLearnMore = () => {
    const featuresSection = document.getElementById("features")
    if (featuresSection) {
      featuresSection.scrollIntoView({ behavior: "smooth" })
    }
  }

const handleImageLoad = (image: "cube" | "sphere" | "torus") => {
    setLoadedImages((prev) => ({
      ...prev,
      [image]: true,
    }))
  }

return (
    <section ref={heroRef} className="relative min-h-[100svh] flex items-center justify-center overflow-hidden">
      {/* Loading overlay */}
      {isLoading && (
        <div className="absolute inset-0 z-50 bg-background flex items-center justify-center">
          <div className="flex flex-col items-center">
            <div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
            <p className="text-foreground">Loading visual experience...</p>
          </div>
        </div>
      )}

{/* Dynamic background */}
      <div className="absolute inset-0 z-0 transition-opacity duration-1000" style={gradientStyle} />

{/* Optimized background for mobile - using divs instead of canvas */}
      <div className="absolute inset-0 z-0 overflow-hidden">
        <MobileOptimizedParticles />
      </div>

{/* Floating 3D objects - optimized for mobile */}
      <div className="absolute inset-0 z-10 pointer-events-none">
        <motion.div
          className="absolute top-1/4 right-1/4"
          animate={{
            y: [0, -20, 0],
            rotate: [0, 10, 0],
          }}
          transition={{
            duration: 8,
            repeat: Number.POSITIVE_INFINITY,
            ease: "easeInOut",
          }}
        >
          <div className="w-20 h-20 md:w-48 md:h-48 relative">
            <Image
              src="/3d-objects/cube.png"
              alt="3D Cube"
              width={192}
              height={192}
              className={`object-contain w-full h-full transition-opacity duration-300 ${loadedImages.cube ? "opacity-100" : "opacity-0"}`}
              priority
              onLoad={() => handleImageLoad("cube")}
              sizes="(max-width: 768px) 80px, 192px"
            />
          </div>
        </motion.div>

<motion.div
          className="absolute bottom-1/3 left-1/5"
          animate={{
            y: [0, 20, 0],
            rotate: [0, -15, 0],
          }}
          transition={{
            duration: 10,
            repeat: Number.POSITIVE_INFINITY,
            ease: "easeInOut",
            delay: 1,
          }}
        >
          <div className="w-16 h-16 md:w-40 md:h-40 relative">
            <Image
              src="/3d-objects/sphere.png"
              alt="3D Sphere"
              width={160}
              height={160}
              className={`object-contain w-full h-full transition-opacity duration-300 ${loadedImages.sphere ? "opacity-100" : "opacity-0"}`}
              priority
              onLoad={() => handleImageLoad("sphere")}
              sizes="(max-width: 768px) 64px, 160px"
            />
          </div>
        </motion.div>

<motion.div
          className="absolute top-1/3 left-1/4"
          animate={{
            y: [0, 15, 0],
            rotate: [0, 20, 0],
          }}
          transition={{
            duration: 9,
            repeat: Number.POSITIVE_INFINITY,
            ease: "easeInOut",
            delay: 2,
          }}
        >
          <div className="w-14 h-14 md:w-32 md:h-32 relative">
            <Image
              src="/3d-objects/torus.png"
              alt="3D Torus"
              width={128}
              height={128}
              className={`object-contain w-full h-full transition-opacity duration-300 ${loadedImages.torus ? "opacity-100" : "opacity-0"}`}
              priority
              onLoad={() => handleImageLoad("torus")}
              sizes="(max-width: 768px) 56px, 128px"
            />
          </div>
        </motion.div>
      </div>

{/* Content */}
      <div className="container relative z-20">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          style={{ y: isMobile ? 0 : -parallaxY }}
          className="max-w-3xl mx-auto text-center"
        >
          <motion.h1
            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 text-white"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <AnimatedText text="Stunning Visual Experience" />
          </motion.h1>

<motion.p
            className="text-xl md:text-2xl mb-8 text-white/90"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            Explore the boundaries of UI animation and interactive design with our cutting-edge visual framework
          </motion.p>

<motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.6 }}
            className="flex flex-col sm:flex-row gap-4 justify-center"
          >
            <Button
              size="lg"
              className="bg-white text-black hover:bg-white/90 transition-all duration-300 transform hover:scale-105"
              onClick={handleGetStarted}
            >
              Get Started
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white/20 transition-all duration-300"
              onClick={handleLearnMore}
            >
              Learn More
            </Button>
          </motion.div>
        </motion.div>
      </div>

{/* Scroll indicator */}
      <motion.div
        className="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-20"
        animate={{
          y: [0, 10, 0],
          opacity: [0.8, 1, 0.8],
        }}
        transition={{
          repeat: Number.POSITIVE_INFINITY,
          duration: 2,
        }}
        onClick={() => {
          const featuresSection = document.getElementById("features")
          if (featuresSection) {
            featuresSection.scrollIntoView({ behavior: "smooth" })
          }
        }}
      >
        <ArrowDown className="h-10 w-10 text-white" />
      </motion.div>
    </section>
  )
}

// Animated text that reveals character by character
function AnimatedText({ text }: { text: string }) {
  const words = text.split(" ")
  const isMobile = useMobile()

// Simplified animation for mobile
  if (isMobile) {
    return (
      <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
        {text}
      </motion.span>
    )
  }

return (
    <span className="inline-block">
      {words.map((word, i) => (
        <span key={i} className="inline-block mr-2">
          {Array.from(word).map((char, index) => (
            <motion.span
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{
                duration: 0.4,
                delay: 0.1 + index * 0.05 + i * 0.1,
              }}
              className="inline-block"
            >
              {char}
            </motion.span>
          ))}
        </span>
      ))}
    </span>
  )
}

// Mobile-optimized particles using divs instead of canvas
function MobileOptimizedParticles() {
  const [particles, setParticles] = useState<
    Array<{
      id: number
      size: number
      x: number
      y: number
      color: string
      duration: number
      delay: number
    }>
  >([])

useEffect(() => {
    // Generate particles only once on component mount
    const newParticles = Array.from({ length: 30 }, (_, i) => ({
      id: i,
      size: Math.random() * 6 + 2,
      x: Math.random() * 100,
      y: Math.random() * 100,
      color: `hsla(${Math.random() * 360}, 70%, 70%, 0.3)`,
      duration: Math.random() * 5 + 5,
      delay: Math.random() * 2,
    }))

setParticles(newParticles)
  }, [])

return (
    <div className="relative w-full h-full">
      {particles.map((particle) => (
        <motion.div
          key={particle.id}
          className="absolute rounded-full"
          style={{
            width: particle.size,
            height: particle.size,
            left: `${particle.x}%`,
            top: `${particle.y}%`,
            backgroundColor: particle.color,
            boxShadow: `0 0 ${particle.size * 2}px ${particle.color}`,
          }}
          animate={{
            y: [0, -50, 0],
            opacity: [0.1, 0.3, 0.1],
          }}
          transition={{
            duration: particle.duration,
            repeat: Number.POSITIVE_INFINITY,
            ease: "easeInOut",
            delay: particle.delay,
          }}
        />
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx"
"use client"

import { useState, useEffect } from "react"

export function useMobile() {
  const [isMobile, setIsMobile] = useState(false)
  const [isIOS, setIsIOS] = useState(false)

useEffect(() => {
    // Check if device is mobile
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }

// Check if device is iOS
    const checkIOS = () => {
      const userAgent = window.navigator.userAgent.toLowerCase()
      setIsIOS(/iphone|ipad|ipod/.test(userAgent))
    }

checkMobile()
    checkIOS()

window.addEventListener("resize", checkMobile)

return () => {
      window.removeEventListener("resize", checkMobile)
    }
  }, [])

return isMobile
}

[V0_FILE]typescriptreact:file="components/gallery.tsx"
"use client"

import { useState, useRef, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight, ZoomIn } from "lucide-react"
import Image from "next/image"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
import { useMobile } from "@/hooks/use-mobile"

// Enhanced gallery images with high-quality images
const galleryImages = [
  {
    src: "/gallery/abstract-design.jpg",
    alt: "Abstract Design",
    title: "Abstract Design",
    description: "A beautiful abstract design with vibrant colors and flowing shapes",
  },
  {
    src: "/gallery/landscape-view.jpg",
    alt: "Landscape View",
    title: "Stunning Landscape",
    description: "Breathtaking landscape photography with incredible detail and depth",
  },
  {
    src: "/gallery/product-showcase.jpg",
    alt: "Product Showcase",
    title: "Product Showcase",
    description: "Elegant product photography with perfect lighting and composition",
  },
  {
    src: "/gallery/artistic-portrait.jpg",
    alt: "Artistic Portrait",
    title: "Artistic Portrait",
    description: "Creative portrait photography with unique perspective and emotion",
  },
  {
    src: "/gallery/urban-architecture.jpg",
    alt: "Urban Architecture",
    title: "Urban Architecture",
    description: "Modern urban architecture with striking geometric patterns and lines",
  },
]

export default function Gallery() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [direction, setDirection] = useState(0)
  const [isAnimating, setIsAnimating] = useState(false)
  const [isImageLoaded, setIsImageLoaded] = useState(false)
  const [allImagesLoaded, setAllImagesLoaded] = useState(false)
  const [loadedImages, setLoadedImages] = useState<Record<number, boolean>>({})
  const isMobile = useMobile()
  const ref = useRef<HTMLDivElement>(null)
  const [isInView, setIsInView] = useState(false)

// Check if element is in view
  useEffect(() => {
    if (!ref.current) return

const observer = new IntersectionObserver(
      ([entry]) => {
        setIsInView(entry.isIntersecting)
      },
      { threshold: 0.1 },
    )

observer.observe(ref.current)

return () => {
      if (ref.current) {
        observer.unobserve(ref.current)
      }
    }
  }, [])

// Check if all thumbnails are loaded
  useEffect(() => {
    if (Object.keys(loadedImages).length === galleryImages.length) {
      const allLoaded = Object.values(loadedImages).every((loaded) => loaded)
      setAllImagesLoaded(allLoaded)
    }
  }, [loadedImages])

const handleImageLoad = (index: number) => {
    setLoadedImages((prev) => ({
      ...prev,
      [index]: true,
    }))

if (index === currentIndex) {
      setIsImageLoaded(true)
    }
  }

const goToPrevious = () => {
    if (isAnimating) return
    setDirection(-1)
    setCurrentIndex((prevIndex) => (prevIndex === 0 ? galleryImages.length - 1 : prevIndex - 1))
    setIsAnimating(true)
    setIsImageLoaded(false)
  }

const goToNext = () => {
    if (isAnimating) return
    setDirection(1)
    setCurrentIndex((prevIndex) => (prevIndex === galleryImages.length - 1 ? 0 : prevIndex + 1))
    setIsAnimating(true)
    setIsImageLoaded(false)
  }

useEffect(() => {
    // Auto-advance the gallery only when in view
    if (!isInView) return

const interval = setInterval(() => {
      if (!isAnimating) {
        goToNext()
      }
    }, 5000)

return () => clearInterval(interval)
  }, [isInView, isAnimating])

// Handle keyboard navigation
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "ArrowLeft") {
        goToPrevious()
      } else if (e.key === "ArrowRight") {
        goToNext()
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [isAnimating])

const variants = {
    enter: (direction: number) => ({
      x: direction > 0 ? "100%" : "-100%",
      opacity: 0,
    }),
    center: {
      x: 0,
      opacity: 1,
    },
    exit: (direction: number) => ({
      x: direction < 0 ? "100%" : "-100%",
      opacity: 0,
    }),
  }

return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
      transition={{ duration: 0.8 }}
      className="max-w-5xl mx-auto relative"
    >
      <div className="relative overflow-hidden rounded-xl aspect-[16/9]">
        {/* Loading state */}
        {!allImagesLoaded && (
          <div className="absolute inset-0 z-30 flex items-center justify-center bg-muted/20">
            <div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
          </div>
        )}

<AnimatePresence initial={false} custom={direction} onExitComplete={() => setIsAnimating(false)}>
          <motion.div
            key={currentIndex}
            custom={direction}
            variants={variants}
            initial="enter"
            animate="center"
            exit="exit"
            transition={{
              x: { type: "spring", stiffness: 300, damping: 30 },
              opacity: { duration: 0.5 },
            }}
            className="absolute inset-0"
          >
            <div className="relative w-full h-full">
              {/* Loading state for current image */}
              {!isImageLoaded && (
                <div className="absolute inset-0 flex items-center justify-center bg-muted/20 z-20">
                  <div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
                </div>
              )}

<Image
                src={galleryImages[currentIndex].src || "/placeholder.svg"}
                alt={galleryImages[currentIndex].alt}
                fill
                className={`object-cover transition-opacity duration-300 ${isImageLoaded ? "opacity-100" : "opacity-0"}`}
                priority
                onLoad={() => handleImageLoad(currentIndex)}
                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
              <div className="absolute bottom-0 left-0 p-6 text-white">
                <motion.h3
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.2, duration: 0.5 }}
                  className="text-2xl font-bold mb-2"
                >
                  {galleryImages[currentIndex].title}
                </motion.h3>
                <motion.p
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.3, duration: 0.5 }}
                  className="text-white/80"
                >
                  {galleryImages[currentIndex].description}
                </motion.p>
              </div>

{/* Zoom button */}
              <Dialog>
                <DialogTrigger asChild>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="absolute top-4 right-4 bg-black/30 hover:bg-black/50 text-white rounded-full z-10"
                    aria-label="Zoom image"
                  >
                    <ZoomIn className="h-5 w-5" />
                  </Button>
                </DialogTrigger>
                <DialogContent className="max-w-4xl p-0 bg-transparent border-none">
                  <div className="relative w-full aspect-[16/9]">
                    <Image
                      src={galleryImages[currentIndex].src || "/placeholder.svg"}
                      alt={galleryImages[currentIndex].alt}
                      fill
                      className="object-contain"
                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
                    />
                  </div>
                </DialogContent>
              </Dialog>
            </div>
          </motion.div>
        </AnimatePresence>

{/* Navigation buttons */}
        <Button
          variant="ghost"
          size="icon"
          className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white rounded-full z-10"
          onClick={goToPrevious}
          disabled={isAnimating}
          aria-label="Previous image"
        >
          <ChevronLeft className="h-6 w-6" />
        </Button>

{/* Thumbnail navigation - optimized for mobile */}
      <div className="flex justify-center mt-6 gap-3 overflow-x-auto pb-2 px-2">
        {galleryImages.map((_, index) => (
          <button
            key={index}
            onClick={() => {
              if (isAnimating) return
              setDirection(index > currentIndex ? 1 : -1)
              setCurrentIndex(index)
              setIsAnimating(true)
              setIsImageLoaded(false)
            }}
            className={`relative overflow-hidden rounded-md transition-all duration-300 ${
              index === currentIndex ? "ring-2 ring-primary" : "opacity-70 hover:opacity-100"
            }`}
            aria-label={`Go to slide ${index + 1}`}
          >
            <div className="w-16 h-12 relative">
              <Image
                src={galleryImages[index].src || "/placeholder.svg"}
                alt={`Thumbnail ${index + 1}`}
                fill
                className="object-cover"
                sizes="64px"
                onLoad={() => handleImageLoad(index)}
              />
            </div>
          </button>
        ))}
      </div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/data-visualization.tsx"
"use client"

import { useState, useEffect, useRef } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendItem } from "@/components/ui/chart"
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  Line,
  LineChart,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts"
import { useMobile } from "@/hooks/use-mobile"

// Enhanced data for charts
const monthlyData = [
  { name: "Jan", value: 400, growth: 20 },
  { name: "Feb", value: 300, growth: 15 },
  { name: "Mar", value: 500, growth: 25 },
  { name: "Apr", value: 280, growth: 14 },
  { name: "May", value: 590, growth: 30 },
  { name: "Jun", value: 350, growth: 18 },
  { name: "Jul", value: 470, growth: 24 },
  { name: "Aug", value: 620, growth: 31 },
  { name: "Sep", value: 400, growth: 20 },
  { name: "Oct", value: 500, growth: 25 },
  { name: "Nov", value: 380, growth: 19 },
  { name: "Dec", value: 430, growth: 22 },
]

const pieData = [
  { name: "Product A", value: 400, color: "#0088FE" },
  { name: "Product B", value: 300, color: "#00C49F" },
  { name: "Product C", value: 300, color: "#FFBB28" },
  { name: "Product D", value: 200, color: "#FF8042" },
]

export default function DataVisualization() {
  const [activeTab, setActiveTab] = useState("line")
  const [animateCharts, setAnimateCharts] = useState(false)
  const ref = useRef(null)
  const [isInView, setIsInView] = useState(false)
  const [isMounted, setIsMounted] = useState(false)
  const isMobile = useMobile()
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    setIsMounted(true)

// Set a timeout to hide loading state
    const timeout = setTimeout(() => {
      setIsLoading(false)
    }, 1000)

return () => clearTimeout(timeout)
  }, [])

// Check if element is in view
  useEffect(() => {
    if (!ref.current) return

const observer = new IntersectionObserver(
      ([entry]) => {
        setIsInView(entry.isIntersecting)
        if (entry.isIntersecting) {
          setAnimateCharts(true)
        }
      },
      { threshold: 0.1 },
    )

observer.observe(ref.current)

return () => {
      if (ref.current) {
        observer.unobserve(ref.current)
      }
    }
  }, [])

// Handle iOS Safari issues with charts
  const [windowWidth, setWindowWidth] = useState(0)

useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth)
    }

// Set initial width
    handleResize()

// Add event listener
    window.addEventListener("resize", handleResize)

// Clean up
    return () => window.removeEventListener("resize", handleResize)
  }, [])

return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
      transition={{ duration: 0.8 }}
      className="max-w-4xl mx-auto"
    >
      <Card className="overflow-hidden">
        <CardHeader>
          <CardTitle className="text-2xl gradient-text">Interactive Data Visualization</CardTitle>
        </CardHeader>
        <CardContent>
          {isLoading && (
            <div className="h-[400px] flex items-center justify-center">
              <div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
            </div>
          )}

{isMounted && !isLoading && (
            <Tabs defaultValue="line" value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="grid grid-cols-4 mb-8">
                <TabsTrigger value="line">Line Chart</TabsTrigger>
                <TabsTrigger value="area">Area Chart</TabsTrigger>
                <TabsTrigger value="bar">Bar Chart</TabsTrigger>
                <TabsTrigger value="pie">Pie Chart</TabsTrigger>
              </TabsList>

<TabsContent value="pie" className="h-full">
                  <AnimatedPieChart data={pieData} animate={animateCharts} windowWidth={windowWidth} />
                </TabsContent>
              </div>
            </Tabs>
          )}
        </CardContent>
      </Card>
    </motion.div>
  )
}

function AnimatedLineChart({ data, animate, windowWidth }: { data: any[]; animate: boolean; windowWidth: number }) {
  // Optimize for mobile
  const isMobile = windowWidth < 768

return (
    <ChartContainer className="h-full">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data} margin={{ top: 20, right: 30, left: isMobile ? 0 : 20, bottom: 20 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="var(--muted)" opacity={0.3} />
          <XAxis
            dataKey="name"
            stroke="var(--muted-foreground)"
            tickLine={false}
            tick={{ fontSize: isMobile ? 10 : 12 }}
            interval={isMobile ? 1 : 0}
          />
          <YAxis
            stroke="var(--muted-foreground)"
            tickLine={false}
            axisLine={false}
            tick={{ fontSize: isMobile ? 10 : 12 }}
            width={isMobile ? 30 : 40}
          />
          <Tooltip
            content={({ active, payload, label }) => {
              if (active && payload && payload.length) {
                return (
                  <ChartTooltip>
                    <ChartTooltipContent>
                      <div className="font-medium">{label}</div>
                      <div className="flex items-center">
                        <div className="h-2 w-2 rounded-full bg-primary mr-2" />
                        <span className="font-medium">Value: {payload[0].value}</span>
                      </div>
                      <div className="flex items-center">
                        <div className="h-2 w-2 rounded-full bg-blue-500 mr-2" />
                        <span className="font-medium">Growth: {payload[1].value}%</span>
                      </div>
                    </ChartTooltipContent>
                  </ChartTooltip>
                )
              }
              return null
            }}
          />
          <Line
            type="monotone"
            dataKey="value"
            stroke="var(--primary)"
            strokeWidth={3}
            dot={{ r: isMobile ? 2 : 4 }}
            activeDot={{ r: isMobile ? 6 : 8 }}
            isAnimationActive={animate}
            animationDuration={2000}
            animationEasing="ease-in-out"
          />
          <Line
            type="monotone"
            dataKey="growth"
            stroke="var(--blue-500)"
            strokeWidth={2}
            dot={{ r: isMobile ? 2 : 3 }}
            isAnimationActive={animate}
            animationDuration={2000}
            animationEasing="ease-in-out"
            animationBegin={300}
          />
          <Legend
            content={(props) => (
              <ChartLegend>
                <ChartLegendItem color="var(--primary)" label="Value" />
                <ChartLegendItem color="var(--blue-500)" label="Growth %" />
              </ChartLegend>
            )}
          />
        </LineChart>
      </ResponsiveContainer>
    </ChartContainer>
  )
}

function AnimatedAreaChart({ data, animate, windowWidth }: { data: any[]; animate: boolean; windowWidth: number }) {
  // Optimize for mobile
  const isMobile = windowWidth < 768

return (
    <ChartContainer className="h-full">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={data} margin={{ top: 20, right: 30, left: isMobile ? 0 : 20, bottom: 20 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="var(--muted)" opacity={0.3} />
          <XAxis
            dataKey="name"
            stroke="var(--muted-foreground)"
            tickLine={false}
            tick={{ fontSize: isMobile ? 10 : 12 }}
            interval={isMobile ? 1 : 0}
          />
          <YAxis
            stroke="var(--muted-foreground)"
            tickLine={false}
            axisLine={false}
            tick={{ fontSize: isMobile ? 10 : 12 }}
            width={isMobile ? 30 : 40}
          />
          <Tooltip
            content={({ active, payload, label }) => {
              if (active && payload && payload.length) {
                return (
                  <ChartTooltip>
                    <ChartTooltipContent>
                      <div className="font-medium">{label}</div>
                      <div className="flex items-center">
                        <div className="h-2 w-2 rounded-full bg-primary mr-2" />
                        <span className="font-medium">Value: {payload[0].value}</span>
                      </div>
                    </ChartTooltipContent>
                  </ChartTooltip>
                )
              }
              return null
            }}
          />
          <Area
            type="monotone"
            dataKey="value"
            stroke="var(--primary)"
            fill="var(--primary)"
            fillOpacity={0.3}
            strokeWidth={2}
            isAnimationActive={animate}
            animationDuration={2000}
            animationEasing="ease-in-out"
          />
          <Legend
            content={(props) => (
              <ChartLegend>
                <ChartLegendItem color="var(--primary)" label="Monthly Value" />
              </ChartLegend>
            )}
          />
        </AreaChart>
      </ResponsiveContainer>
    </ChartContainer>
  )
}

function AnimatedBarChart({ data, animate, windowWidth }: { data: any[]; animate: boolean; windowWidth: number }) {
  // Optimize for mobile
  const isMobile = windowWidth < 768

return (
    <ChartContainer className="h-full">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} margin={{ top: 20, right: 30, left: isMobile ? 0 : 20, bottom: 20 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="var(--muted)" opacity={0.3} />
          <XAxis
            dataKey="name"
            stroke="var(--muted-foreground)"
            tickLine={false}
            tick={{ fontSize: isMobile ? 10 : 12 }}
            interval={isMobile ? 1 : 0}
          />
          <YAxis
            stroke="var(--muted-foreground)"
            tickLine={false}
            axisLine={false}
            tick={{ fontSize: isMobile ? 10 : 12 }}
            width={isMobile ? 30 : 40}
          />
          <Tooltip
            content={({ active, payload, label }) => {
              if (active && payload && payload.length) {
                return (
                  <ChartTooltip>
                    <ChartTooltipContent>
                      <div className="font-medium">{label}</div>
                      <div className="flex items-center">
                        <div className="h-2 w-2 rounded-full bg-primary mr-2" />
                        <span className="font-medium">Value: {payload[0].value}</span>
                      </div>
                    </ChartTooltipContent>
                  </ChartTooltip>
                )
              }
              return null
            }}
          />
          <Bar
            dataKey="value"
            fill="var(--primary)"
            radius={[4, 4, 0, 0]}
            isAnimationActive={animate}
            animationDuration={2000}
            animationEasing="ease-in-out"
          />
          <Legend
            content={(props) => (
              <ChartLegend>
                <ChartLegendItem color="var(--primary)" label="Monthly Value" />
              </ChartLegend>
            )}
          />
        </BarChart>
      </ResponsiveContainer>
    </ChartContainer>
  )
}

function AnimatedPieChart({ data, animate, windowWidth }: { data: any[]; animate: boolean; windowWidth: number }) {
  // Optimize for mobile
  const isMobile = windowWidth < 768
  const outerRadius = isMobile ? 80 : 120

return (
    <ChartContainer className="h-full">
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            labelLine={false}
            outerRadius={outerRadius}
            fill="#8884d8"
            dataKey="value"
            isAnimationActive={animate}
            animationDuration={2000}
            animationEasing="ease-in-out"
            label={({ name, percent }) => (isMobile ? `${name}` : `${name}: ${(percent * 100).toFixed(0)}%`)}
          >
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={entry.color} />
            ))}
          </Pie>
          <Tooltip
            content={({ active, payload }) => {
              if (active && payload && payload.length) {
                return (
                  <ChartTooltip>
                    <ChartTooltipContent>
                      <div className="font-medium">{payload[0].name}</div>
                      <div className="flex items-center">
                        <div
                          className="h-2 w-2 rounded-full mr-2"
                          style={{ backgroundColor: payload[0].payload.color }}
                        />
                        <span className="font-medium">Value: {payload[0].value}</span>
                      </div>
                    </ChartTooltipContent>
                  </ChartTooltip>
                )
              }
              return null
            }}
          />
          <Legend
            content={(props) => (
              <ChartLegend>
                {data.map((entry, index) => (
                  <ChartLegendItem key={`legend-${index}`} color={entry.color} label={entry.name} />
                ))}
              </ChartLegend>
            )}
          />
        </PieChart>
      </ResponsiveContainer>
    </ChartContainer>
  )
}

[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

.dark {
    --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%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    overscroll-behavior-y: none;
  }

/* Smooth scrolling */
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    height: -webkit-fill-available;
  }

/* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

::-webkit-scrollbar-track {
    @apply bg-muted/50;
  }

::-webkit-scrollbar-thumb {
    @apply bg-primary/50 rounded-full;
  }

::-webkit-scrollbar-thumb:hover {
    @apply bg-primary/70;
  }

/* iOS specific fixes */
  input,
  textarea,
  button,
  select,
  a {
    -webkit-tap-highlight-color: transparent;
  }

/* Fix for iOS momentum scrolling */
  .overflow-scroll,
  .overflow-auto,
  .overflow-y-scroll,
  .overflow-y-auto,
  .overflow-x-scroll,
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out forwards;
}

/* Add more custom animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-slow {
  animation: pulse 4s ease-in-out infinite;
}

/* Add gradient text effect */
.gradient-text {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-500;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .h-screen {
    height: 100vh; /* Fallback */
    height: -webkit-fill-available;
  }

/* Fix for iOS 100vh issue */
  .min-h-screen {
    min-height: 100vh; /* Fallback */
    min-height: -webkit-fill-available;
  }

/* Fix for iOS fixed position elements */
  .fixed {
    position: fixed;
    width: 100%;
    -webkit-transform: translateZ(0);
  }
}

/* Use svh (small viewport height) for modern browsers */
@supports (height: 100svh) {
  .h-screen {
    height: 100svh;
  }

.min-h-screen {
    min-height: 100svh;
  }
}

/* Fix for iOS Safari image rendering */
img {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0);
}

/* Prevent pull-to-refresh on iOS */
body {
  overscroll-behavior-y: contain;
}

/* Fix for iOS Safari overflow issues */
.overflow-hidden {
  overflow: hidden;
  position: relative;
  -webkit-overflow-scrolling: auto;
}

[V0_FILE]plaintext:file="public/3d-objects/cube.png" url="https://v0.blob.com/pjtmy8OGJ.png"

[V0_FILE]plaintext:file="public/3d-objects/sphere.png" url="https://v0.blob.com/pjtmy8OGJ.png"

[V0_FILE]plaintext:file="public/3d-objects/torus.png" url="https://v0.blob.com/pjtmy8OGJ.png"

[V0_FILE]plaintext:file="public/gallery/abstract-design.jpg" url="https://v0.blob.com/pjtmy8OGJ.png"

[V0_FILE]plaintext:file="public/gallery/landscape-view.jpg" url="https://v0.blob.com/pjtmy8OGJ.png"

[V0_FILE]plaintext:file="public/gallery/product-showcase.jpg" url="https://v0.blob.com/pjtmy8OGJ.png"

[V0_FILE]plaintext:file="public/gallery/artistic-portrait.jpg" url="https://v0.blob.com/pjtmy8OGJ.png"

[V0_FILE]plaintext:file="public/gallery/urban-architecture.jpg" url="https://v0.blob.com/pjtmy8OGJ.png"

7a:["$","$L82",null,{"chatId":"A1bQhedfY8w","children":["$","$L83",null,{"data":{"@\"active-block\",\"A1bQhedfY8w\",":{"id":"llzKm1gmHAt","messageId":"oGsPsw6bhGHB0WvtLcGrizNgjDBhTUqL","source":"$84","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"interactive-ui","type":"code-project","project":"interactive-ui"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"A1bQhedfY8w\",":false,"":null},"children":"$L85"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from rajshah9305

More Templates Like This