[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" 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: "#FFD100", // Yellow foreground: "#000000", }, secondary: { DEFAULT: "#00A651", // Green foreground: "#FFFFFF", }, 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="app/signup/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/campaigns/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Car, Filter, Plus, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" export default function CampaignsPage() { const [searchQuery, setSearchQuery] = useState("") const campaigns = [ { id: "camp-001", title: "Summer Promotion", status: "active", budget: 5000, spent: 2340, reach: "45.2K", vehicles: 8, startDate: "Mar 1, 2025", endDate: "May 31, 2025", locations: ["Downtown", "Suburbs", "Shopping District"], description: "Seasonal promotion targeting summer shoppers and tourists in high-traffic areas.", impressions: 125000, clicks: 3200, ctr: "2.56%", }, { id: "camp-002", title: "Product Launch", status: "active", budget: 10000, spent: 3200, reach: "62.8K", vehicles: 12, startDate: "Mar 10, 2025", endDate: "Jun 10, 2025", locations: ["City Center", "Business District", "University Area"], description: "New product launch campaign targeting young professionals and students.", impressions: 180000, clicks: 5400, ctr: "3.00%", }, { id: "camp-003", title: "Holiday Special", status: "scheduled", budget: 7500, spent: 0, reach: "0", vehicles: 15, startDate: "Apr 1, 2025", endDate: "Apr 30, 2025", locations: ["Shopping Malls", "Entertainment District", "Residential Areas"], description: "Holiday-themed campaign targeting families and shoppers during the spring season.", impressions: 0, clicks: 0, ctr: "0.00%", }, { id: "camp-004", title: "Brand Awareness", status: "completed", budget: 4000, spent: 4000, reach: "38.5K", vehicles: 6, startDate: "Jan 15, 2025", endDate: "Feb 28, 2025", locations: ["Downtown", "Tourist Areas", "Convention Center"], description: "General brand awareness campaign targeting diverse audiences in high-visibility areas.", impressions: 95000, clicks: 2100, ctr: "2.21%", }, { id: "camp-005", title: "Local Business Promotion", status: "paused", budget: 3000, spent: 1200, reach: "15.3K", vehicles: 4, startDate: "Feb 10, 2025", endDate: "Apr 10, 2025", locations: ["Local Neighborhoods", "Business District"], description: "Targeted campaign promoting local businesses to community residents.", impressions: 42000, clicks: 980, ctr: "2.33%", }, { id: "camp-006", title: "Tech Conference", status: "active", budget: 8500, spent: 3100, reach: "28.7K", vehicles: 10, startDate: "Mar 5, 2025", endDate: "Apr 15, 2025", locations: ["Convention Center", "Tech Hub", "Airport"], description: "Promotional campaign for annual tech conference targeting industry professionals.", impressions: 85000, clicks: 3800, ctr: "4.47%", }, { id: "camp-007", title: "Restaurant Week", status: "scheduled", budget: 4500, spent: 0, reach: "0", vehicles: 8, startDate: "Apr 10, 2025", endDate: "Apr 20, 2025", locations: ["Dining Districts", "Downtown", "Tourist Areas"], description: "Promotional campaign for city-wide restaurant week event.", impressions: 0, clicks: 0, ctr: "0.00%", }, { id: "camp-008", title: "Fitness Challenge", status: "active", budget: 6000, spent: 2800, reach: "32.1K", vehicles: 7, startDate: "Feb 15, 2025", endDate: "Apr 15, 2025", locations: ["Fitness Centers", "Parks", "University Campus"], description: "Community fitness challenge promotion targeting health-conscious individuals.", impressions: 78000, clicks: 4100, ctr: "5.26%", }, ] const filteredCampaigns = campaigns.filter((campaign) => campaign.title.toLowerCase().includes(searchQuery.toLowerCase()), ) return (

Campaigns

Manage and monitor your advertising campaigns

setSearchQuery(e.target.value)} />

All Campaigns Active Scheduled Completed Paused

{filteredCampaigns.map((campaign) => (

{campaign.title} {campaign.status.charAt(0).toUpperCase() + campaign.status.slice(1)}

{campaign.startDate} - {campaign.endDate}

Budget spent ${campaign.spent} / ${campaign.budget}

{campaign.vehicles} vehicles

{campaign.reach} reach

{campaign.description}

{campaign.locations.slice(0, 2).map((location, index) => ( {location} ))} {campaign.locations.length > 2 && ( +{campaign.locations.length - 2} more )}

))}

{filteredCampaigns .filter((campaign) => campaign.status === "active") .map((campaign) => (

{campaign.title} Active

{campaign.startDate} - {campaign.endDate}

Budget spent ${campaign.spent} / ${campaign.budget}

{campaign.vehicles} vehicles

{campaign.reach} reach

{campaign.description}

{campaign.locations.slice(0, 2).map((location, index) => ( {location} ))} {campaign.locations.length > 2 && ( +{campaign.locations.length - 2} more )}

))}

{/* Similar content for other tabs */}

) } [V0_FILE]typescriptreact:file="app/dashboard/campaigns/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/tracking/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Filter, MapPin, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function TrackingPage() { const [searchQuery, setSearchQuery] = useState("") const [selectedCampaign, setSelectedCampaign] = useState("all") const vehicles = [ { id: "veh-001", driver: "John Smith", vehicle: "Toyota Camry", licensePlate: "ABC-1234", campaign: "Summer Promotion", status: "active", location: "Downtown", lastUpdated: "5 mins ago", distance: "12.5 miles today", impressions: "2.3K today", }, { id: "veh-002", driver: "Sarah Johnson", vehicle: "Honda Civic", licensePlate: "XYZ-5678", campaign: "Product Launch", status: "active", location: "Shopping District", lastUpdated: "2 mins ago", distance: "8.2 miles today", impressions: "1.8K today", }, { id: "veh-003", driver: "Michael Brown", vehicle: "Ford F-150", licensePlate: "DEF-9012", campaign: "Summer Promotion", status: "inactive", location: "Suburbs", lastUpdated: "1 hour ago", distance: "5.7 miles today", impressions: "950 today", }, { id: "veh-004", driver: "Emily Davis", vehicle: "Chevrolet Malibu", licensePlate: "GHI-3456", campaign: "Brand Awareness", status: "active", location: "Business District", lastUpdated: "10 mins ago", distance: "10.3 miles today", impressions: "2.1K today", }, { id: "veh-005", driver: "David Wilson", vehicle: "Nissan Altima", licensePlate: "JKL-7890", campaign: "Local Business Promotion", status: "active", location: "University Area", lastUpdated: "15 mins ago", distance: "7.8 miles today", impressions: "1.5K today", }, ] const filteredVehicles = vehicles.filter( (vehicle) => (vehicle.driver.toLowerCase().includes(searchQuery.toLowerCase()) || vehicle.vehicle.toLowerCase().includes(searchQuery.toLowerCase()) || vehicle.licensePlate.toLowerCase().includes(searchQuery.toLowerCase())) && (selectedCampaign === "all" || vehicle.campaign === selectedCampaign), ) const campaigns = [...new Set(vehicles.map((vehicle) => vehicle.campaign))] return (

Vehicle Tracking

Track and monitor your advertising vehicles in real-time

setSearchQuery(e.target.value)} />

List View Map View

{filteredVehicles.map((vehicle) => (

{vehicle.driver} {vehicle.vehicle} • {vehicle.licensePlate}

{vehicle.status.charAt(0).toUpperCase() + vehicle.status.slice(1)}

Campaign

{vehicle.campaign}

Location

{vehicle.location}

Last Updated

{vehicle.lastUpdated}

Distance Traveled

{vehicle.distance}

Impressions

{vehicle.impressions}

))}

Vehicle Locations Real-time tracking of all active vehicles

Map view will be displayed here

Integrated with Google Maps API

) } [V0_FILE]typescriptreact:file="app/dashboard/tracking/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/wallet/page.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowDownUp, CreditCard, DollarSign, Download, Plus, Wallet } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function WalletPage() { const [period, setPeriod] = useState("month") const transactions = [ { id: "tx-001", description: "Campaign Payment - Summer Promotion", type: "payment", amount: 1200.0, status: "completed", date: "Mar 15, 2025", }, { id: "tx-002", description: "Campaign Payment - Product Launch", type: "payment", amount: 950.0, status: "completed", date: "Mar 10, 2025", }, { id: "tx-003", description: "Withdrawal to Bank Account", type: "withdrawal", amount: 2000.0, status: "completed", date: "Mar 5, 2025", }, { id: "tx-004", description: "Campaign Payment - Brand Awareness", type: "payment", amount: 750.0, status: "pending", date: "Mar 3, 2025", }, { id: "tx-005", description: "Deposit from Credit Card", type: "deposit", amount: 3000.0, status: "completed", date: "Feb 28, 2025", }, ] return (

Wallet

Manage your funds and track your transactions

Available Balance

$5,280.65

Available for campaigns or withdrawal

Total Spent

$12,450.00

{period === "month" ? "This month" : period === "year" ? "This year" : "All time"}

Pending

$750.00

Transactions in progress

Payment Methods

Active payment methods

Transactions Payment Methods Settings

Transaction History

View all your recent transactions Description Type Date Status Amount {transactions.map((transaction) => ( {transaction.description} {transaction.type.charAt(0).toUpperCase() + transaction.type.slice(1)} {transaction.date} {transaction.status.charAt(0).toUpperCase() + transaction.status.slice(1)} {transaction.type === "withdrawal" ? "-" : ""}${transaction.amount.toFixed(2)} ))}

Payment Methods

Manage your payment methods

Visa ending in 4242

Expires 04/26

Default

Mastercard ending in 5678

Expires 08/27

Bank Account

Chase ****1234

Wallet Settings Configure your wallet preferences

Auto-withdraw to bank account

Automatically withdraw funds when balance exceeds $5,000

Transaction notifications

Receive email and push notifications for all transactions

Currency preferences

Set your preferred currency for transactions

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Car, Eye, EyeOff, AlertCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Alert, AlertDescription } from "@/components/ui/alert" export default function LoginPage() { const router = useRouter() const [showPassword, setShowPassword] = useState(false) const [loading, setLoading] = useState(false) const [error, setError] = useState("") // Form data const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [phone, setPhone] = useState("") const [activeTab, setActiveTab] = useState("email") const validateEmail = (email: string) => { return String(email) .toLowerCase() .match( /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, ) } const validatePhone = (phone: string) => { return String(phone).match(/^\+?[0-9]{10,15}$/) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError("") // Validate form if (activeTab === "email") { if (!validateEmail(email)) { setError("Please enter a valid email address") return } if (password.length < 6) { setError("Password must be at least 6 characters") return } } else { if (!validatePhone(phone)) { setError("Please enter a valid phone number") return } } setLoading(true) try { // Simulate authentication await new Promise((resolve) => setTimeout(resolve, 1500)) // In a real app, you would make an API call to your authentication endpoint // For demo purposes, we'll just redirect to the dashboard router.push("/dashboard") } catch (err) { setError("Authentication failed. Please try again.") } finally { setLoading(false) } } return (

MotionFleet

Welcome back

Enter your credentials to access your account

{error && ( {error} )} Email Phone

Email setEmail(e.target.value)} required />

Password Forgot password?

setPassword(e.target.value)} required />

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

) } [V0_FILE]typescriptreact:file="app/signup/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter, useSearchParams } from "next/navigation" import { Car, Eye, EyeOff, AlertCircle, CheckCircle2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Alert, AlertDescription } from "@/components/ui/alert" export default function SignupPage() { const router = useRouter() const searchParams = useSearchParams() const userType = searchParams.get("type") || "driver" const [showPassword, setShowPassword] = useState(false) const [loading, setLoading] = useState(false) const [accountType, setAccountType] = useState(userType) const [error, setError] = useState("") const [success, setSuccess] = useState("") // Form data for driver const [driverFirstName, setDriverFirstName] = useState("") const [driverLastName, setDriverLastName] = useState("") const [driverEmail, setDriverEmail] = useState("") const [driverPhone, setDriverPhone] = useState("") const [driverVehicleType, setDriverVehicleType] = useState("car") const [driverPassword, setDriverPassword] = useState("") // Form data for advertiser const [companyName, setCompanyName] = useState("") const [businessEmail, setBusinessEmail] = useState("") const [businessPhone, setBusinessPhone] = useState("") const [industry, setIndustry] = useState("") const [advertiserPassword, setAdvertiserPassword] = useState("") const validateEmail = (email: string) => { return String(email) .toLowerCase() .match( /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, ) } const validatePhone = (phone: string) => { return String(phone).match(/^\+?[0-9]{10,15}$/) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError("") setSuccess("") // Validate form if (accountType === "driver") { if (!driverFirstName || !driverLastName) { setError("Please enter your full name") return } if (!validateEmail(driverEmail)) { setError("Please enter a valid email address") return } if (!validatePhone(driverPhone)) { setError("Please enter a valid phone number") return } if (driverPassword.length < 6) { setError("Password must be at least 6 characters") return } } else { if (!companyName) { setError("Please enter your company name") return } if (!validateEmail(businessEmail)) { setError("Please enter a valid business email address") return } if (!validatePhone(businessPhone)) { setError("Please enter a valid phone number") return } if (!industry) { setError("Please enter your industry") return } if (advertiserPassword.length < 6) { setError("Password must be at least 6 characters") return } } setLoading(true) try { // Simulate account creation await new Promise((resolve) => setTimeout(resolve, 1500)) // Show success message setSuccess("Account created successfully! Redirecting to dashboard...") // Redirect after a short delay setTimeout(() => { router.push("/dashboard") }, 2000) } catch (err) { setError("Account creation failed. Please try again.") } finally { setLoading(false) } } return (

MotionFleet

Create an account

Enter your information to get started

{error && ( {error} )} {success && ( {success} )} Vehicle Owner Advertiser

First name setDriverFirstName(e.target.value)} required />

Last name setDriverLastName(e.target.value)} required />

Email setDriverEmail(e.target.value)} required />

Phone Number setDriverPhone(e.target.value)} required />

Vehicle Type

Car

SUV

Truck

Van

Password

setDriverPassword(e.target.value)} required />

Company name setCompanyName(e.target.value)} required />

Business email setBusinessEmail(e.target.value)} required />

Phone Number setBusinessPhone(e.target.value)} required />

Industry setIndustry(e.target.value)} required />

Password

setAdvertiserPassword(e.target.value)} required />

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { usePathname, useRouter } from "next/navigation" import { BarChart3, Bell, Car, CreditCard, LogOut, MapPin, Menu, MessageSquare, Settings, User, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { ThemeSwitcher } from "@/components/theme-switcher" interface DashboardLayoutProps { children: React.ReactNode } export default function DashboardLayout({ children }: DashboardLayoutProps) { const pathname = usePathname() const router = useRouter() const [open, setOpen] = useState(false) const [notifications, setNotifications] = useState(3) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate loading const timer = setTimeout(() => { setIsLoading(false) }, 1000) return () => clearTimeout(timer) }, []) const routes = [ { href: "/dashboard", label: "Dashboard", icon: , }, { href: "/dashboard/campaigns", label: "Campaigns", icon: , }, { href: "/dashboard/tracking", label: "Tracking", icon: , }, { href: "/dashboard/wallet", label: "Wallet", icon: , }, { href: "/dashboard/messages", label: "Messages", icon: , }, { href: "/dashboard/settings", label: "Settings", icon: , }, ] const handleLogout = () => { // In a real app, you would handle logout logic here router.push("/") } if (isLoading) { return (

Loading your dashboard...

) } return (

MotionFleet

Notifications {[ { title: "New campaign application", desc: "Vehicle #12 applied to your campaign", time: "5 minutes ago", }, { title: "Payment received", desc: "You received $950 for Campaign #1233", time: "1 hour ago" }, { title: "Campaign completed", desc: "Campaign #1231 has ended successfully", time: "1 day ago" }, ].map((notification, i) => (

{notification.title}

{notification.desc}

{notification.time}

))} My Account router.push("/dashboard/settings")}> Profile router.push("/dashboard/settings")}> Settings Log out

{children}

) } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" "use client" import * as React from "react" export const Chart = React.forwardRef>( ({ className, ...props }, ref) =>

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

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

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

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

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

, ) ChartLegendItem.displayName = "ChartLegendItem" [V0_FILE]typescriptreact:file="components/cursor-animation.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { usePathname } from "next/navigation" export default function CursorAnimation() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const [isClient, setIsClient] = useState(false) const pathname = usePathname() useEffect(() => { setIsClient(true) const updateMousePosition = (e: MouseEvent) => { setMousePosition({ x: e.clientX, y: e.clientY }) } window.addEventListener("mousemove", updateMousePosition) return () => { window.removeEventListener("mousemove", updateMousePosition) } }, []) // Reset position when navigating between pages useEffect(() => { setMousePosition({ x: 0, y: 0 }) }, [pathname]) if (!isClient) return null return (

) } [V0_FILE]typescriptreact:file="components/interactive-cursor.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, useMotionValue, useSpring } from "framer-motion" export default function InteractiveCursor() { const [isHovering, setIsHovering] = useState(false) const [isClient, setIsClient] = useState(false) const cursorX = useMotionValue(0) const cursorY = useMotionValue(0) // Use spring for smoother animation const springX = useSpring(cursorX, { damping: 25, stiffness: 300 }) const springY = useSpring(cursorY, { damping: 25, stiffness: 300 }) useEffect(() => { setIsClient(true) const moveCursor = (e: MouseEvent) => { cursorX.set(e.clientX) cursorY.set(e.clientY) } const handleMouseOver = (e: MouseEvent) => { const target = e.target as HTMLElement if ( target.tagName === "BUTTON" || target.tagName === "A" || target.closest("button") || target.closest("a") || target.classList.contains("interactive") ) { setIsHovering(true) } else { setIsHovering(false) } } window.addEventListener("mousemove", moveCursor) window.addEventListener("mouseover", handleMouseOver) return () => { window.removeEventListener("mousemove", moveCursor) window.removeEventListener("mouseover", handleMouseOver) } }, [cursorX, cursorY]) if (!isClient) return null return ( ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-switcher.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useTheme } from "next-themes" import { Moon, Sun, Monitor } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeSwitcher() { const [mounted, setMounted] = useState(false) const { theme, setTheme } = useTheme() // Ensure component is mounted before accessing theme useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return ( setTheme("light")}> Light setTheme("dark")}> Dark setTheme("system")}> System ) } [V0_FILE]typescriptreact:file="components/car-cursor.tsx" "use client" import { useState, useEffect, useRef } from "react" import { motion, useSpring, useMotionValue } from "framer-motion" import { Car } from "lucide-react" export default function CarCursor() { const [isClient, setIsClient] = useState(false) const cursorX = useMotionValue(0) const cursorY = useMotionValue(0) const carRef = useRef(null) // Use spring for smoother animation with slight delay for natural movement const springX = useSpring(cursorX, { damping: 15, stiffness: 150, mass: 0.5 }) const springY = useSpring(cursorY, { damping: 15, stiffness: 150, mass: 0.5 }) // Track rotation based on movement direction const [rotation, setRotation] = useState(0) const prevX = useRef(0) useEffect(() => { setIsClient(true) const handleMouseMove = (e: MouseEvent) => { // Calculate rotation based on horizontal movement direction const currentX = e.clientX if (Math.abs(currentX - prevX.current) > 5) { const direction = currentX > prevX.current ? 0 : 180 setRotation(direction) prevX.current = currentX } cursorX.set(e.clientX) cursorY.set(e.clientY) } window.addEventListener("mousemove", handleMouseMove) return () => { window.removeEventListener("mousemove", handleMouseMove) } }, [cursorX, cursorY]) if (!isClient) return null return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import SplashCursor from "@/components/splash-cursor" import CarCursor from "@/components/car-cursor" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "MotionFleet - Vehicle-Based Advertising Platform", description: "Connect advertisers with vehicle owners for dynamic mobile advertising campaigns", } export const viewport: Viewport = { themeColor: [ { media: "(prefers-color-scheme: light)", color: "#3B82F6" }, { media: "(prefers-color-scheme: dark)", color: "#FFD100" }, ], } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/splash-cursor.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef } from "react" function SplashCursor({ // You can customize these props if you want SIM_RESOLUTION = 128, DYE_RESOLUTION = 1024, CAPTURE_RESOLUTION = 512, DENSITY_DISSIPATION = 3.5, VELOCITY_DISSIPATION = 2, PRESSURE = 0.1, PRESSURE_ITERATIONS = 20, CURL = 3, SPLAT_RADIUS = 0.2, SPLAT_FORCE = 6000, SHADING = true, COLOR_UPDATE_SPEED = 10, BACK_COLOR = { r: 0.5, g: 0, b: 0 }, TRANSPARENT = true, }) { const canvasRef = useRef(null) const programRefs = useRef({}) useEffect(() => { const canvas = canvasRef.current if (!canvas) return function pointerPrototype() { this.id = -1 this.texcoordX = 0 this.texcoordY = 0 this.prevTexcoordX = 0 this.prevTexcoordY = 0 this.deltaX = 0 this.deltaY = 0 this.down = false this.moved = false this.color = [0, 0, 0] } const config = { SIM_RESOLUTION, DYE_RESOLUTION, CAPTURE_RESOLUTION, DENSITY_DISSIPATION, VELOCITY_DISSIPATION, PRESSURE, PRESSURE_ITERATIONS, CURL, SPLAT_RADIUS, SPLAT_FORCE, SHADING, COLOR_UPDATE_SPEED, PAUSED: false, BACK_COLOR, TRANSPARENT, } const pointers = [new pointerPrototype()] const { gl, ext } = getWebGLContext(canvas) if (!ext.supportLinearFiltering) { config.DYE_RESOLUTION = 256 config.SHADING = false } function getWebGLContext(canvas) { const params = { alpha: true, depth: false, stencil: false, antialias: false, preserveDrawingBuffer: false, } let gl = canvas.getContext("webgl2", params) const isWebGL2 = !!gl if (!isWebGL2) gl = canvas.getContext("webgl", params) || canvas.getContext("experimental-webgl", params) let halfFloat let supportLinearFiltering if (isWebGL2) { gl.getExtension("EXT_color_buffer_float") supportLinearFiltering = gl.getExtension("OES_texture_float_linear") } else { halfFloat = gl.getExtension("OES_texture_half_float") supportLinearFiltering = gl.getExtension("OES_texture_half_float_linear") } gl.clearColor(0.0, 0.0, 0.0, 1.0) const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat && halfFloat.HALF_FLOAT_OES let formatRGBA let formatRG let formatR if (isWebGL2) { formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType) formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType) formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType) } else { formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType) formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType) formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType) } return { gl, ext: { formatRGBA, formatRG, formatR, halfFloatTexType, supportLinearFiltering, }, } } function getSupportedFormat(gl, internalFormat, format, type) { if (!supportRenderTextureFormat(gl, internalFormat, format, type)) { switch (internalFormat) { case gl.R16F: return getSupportedFormat(gl, gl.RG16F, gl.RG, type) case gl.RG16F: return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type) default: return null } } return { internalFormat, format } } function supportRenderTextureFormat(gl, internalFormat, format, type) { const texture = gl.createTexture() gl.bindTexture(gl.TEXTURE_2D, texture) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE) gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null) const fbo = gl.createFramebuffer() gl.bindFramebuffer(gl.FRAMEBUFFER, fbo) gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0) const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER) return status === gl.FRAMEBUFFER_COMPLETE } class Material { constructor(vertexShader, fragmentShaderSource) { this.vertexShader = vertexShader this.fragmentShaderSource = fragmentShaderSource this.programs = [] this.activeProgram = null this.uniforms = [] } setKeywords(keywords) { let hash = 0 for (let i = 0; i < keywords.length; i++) hash += hashCode(keywords[i]) let program = this.programs[hash] if (program == null) { const fragmentShader = compileShader(gl.FRAGMENT_SHADER, this.fragmentShaderSource, keywords) program = createProgram(this.vertexShader, fragmentShader) this.programs[hash] = program } if (program === this.activeProgram) return this.uniforms = getUniforms(program) this.activeProgram = program } bind() { gl.useProgram(this.activeProgram) } } class Program { constructor(vertexShader, fragmentShader) { this.uniforms = {} this.program = createProgram(vertexShader, fragmentShader) this.uniforms = getUniforms(this.program) } bind() { gl.useProgram(this.program) } } function createProgram(vertexShader, fragmentShader) { const program = gl.createProgram() gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) gl.linkProgram(program) if (!gl.getProgramParameter(program, gl.LINK_STATUS)) console.trace(gl.getProgramInfoLog(program)) return program } function getUniforms(program) { const uniforms = [] const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS) for (let i = 0; i < uniformCount; i++) { const uniformName = gl.getActiveUniform(program, i).name uniforms[uniformName] = gl.getUniformLocation(program, uniformName) } return uniforms } function compileShader(type, source, keywords) { source = addKeywords(source, keywords) const shader = gl.createShader(type) gl.shaderSource(shader, source) gl.compileShader(shader) if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) console.trace(gl.getShaderInfoLog(shader)) return shader } function addKeywords(source, keywords) { if (!keywords) return source let keywordsString = "" keywords.forEach((keyword) => { keywordsString += "#define " + keyword + "\n" }) return keywordsString + source } const baseVertexShader = compileShader( gl.VERTEX_SHADER, ` precision highp float; attribute vec2 aPosition; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform vec2 texelSize; void main () { vUv = aPosition * 0.5 + 0.5; vL = vUv - vec2(texelSize.x, 0.0); vR = vUv + vec2(texelSize.x, 0.0); vT = vUv + vec2(0.0, texelSize.y); vB = vUv - vec2(0.0, texelSize.y); gl_Position = vec4(aPosition, 0.0, 1.0); } `, ) const copyShader = compileShader( gl.FRAGMENT_SHADER, ` precision mediump float; precision mediump sampler2D; varying highp vec2 vUv; uniform sampler2D uTexture; void main () { gl_FragColor = texture2D(uTexture, vUv); } `, ) const clearShader = compileShader( gl.FRAGMENT_SHADER, ` precision mediump float; precision mediump sampler2D; varying highp vec2 vUv; uniform sampler2D uTexture; uniform float value; void main () { gl_FragColor = value * texture2D(uTexture, vUv); } `, ) const displayShaderSource = ` precision highp float; precision highp sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uTexture; uniform sampler2D uDithering; uniform vec2 ditherScale; uniform vec2 texelSize; vec3 linearToGamma (vec3 color) { color = max(color, vec3(0)); return max(1.055 * pow(color, vec3(0.416666667)) - 0.055, vec3(0)); } void main () { vec3 c = texture2D(uTexture, vUv).rgb; #ifdef SHADING vec3 lc = texture2D(uTexture, vL).rgb; vec3 rc = texture2D(uTexture, vR).rgb; vec3 tc = texture2D(uTexture, vT).rgb; vec3 bc = texture2D(uTexture, vB).rgb; float dx = length(rc) - length(lc); float dy = length(tc) - length(bc); vec3 n = normalize(vec3(dx, dy, length(texelSize))); vec3 l = vec3(0.0, 0.0, 1.0); float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0); c *= diffuse; #endif float a = max(c.r, max(c.g, c.b)); gl_FragColor = vec4(c, a); } ` const splatShader = compileShader( gl.FRAGMENT_SHADER, ` precision highp float; precision highp sampler2D; varying vec2 vUv; uniform sampler2D uTarget; uniform float aspectRatio; uniform vec3 color; uniform vec2 point; uniform float radius; void main () { vec2 p = vUv - point.xy; p.x *= aspectRatio; vec3 splat = exp(-dot(p, p) / radius) * color; vec3 base = texture2D(uTarget, vUv).xyz; gl_FragColor = vec4(base + splat, 1.0); } `, ) const advectionShader = compileShader( gl.FRAGMENT_SHADER, ` precision highp float; precision highp sampler2D; varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 texelSize; uniform vec2 dyeTexelSize; uniform float dt; uniform float dissipation; vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) { vec2 st = uv / tsize - 0.5; vec2 iuv = floor(st); vec2 fuv = fract(st); vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize); vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize); vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize); vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize); return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y); } void main () { #ifdef MANUAL_FILTERING vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize; vec4 result = bilerp(uSource, coord, dyeTexelSize); #else vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize; vec4 result = texture2D(uSource, coord); #endif float decay = 1.0 + dissipation * dt; gl_FragColor = result / decay; } `, ext.supportLinearFiltering ? null : ["MANUAL_FILTERING"], ) const divergenceShader = compileShader( gl.FRAGMENT_SHADER, ` precision mediump float; precision mediump sampler2D; varying highp vec2 vUv; varying highp vec2 vL; varying highp vec2 vR; varying highp vec2 vT; varying highp vec2 vB; uniform sampler2D uVelocity; void main () { float L = texture2D(uVelocity, vL).x; float R = texture2D(uVelocity, vR).x; float T = texture2D(uVelocity, vT).y; float B = texture2D(uVelocity, vB).y; vec2 C = texture2D(uVelocity, vUv).xy; if (vL.x < 0.0) { L = -C.x; } if (vR.x > 1.0) { R = -C.x; } if (vT.y > 1.0) { T = -C.y; } if (vB.y < 0.0) { B = -C.y; } float div = 0.5 * (R - L + T - B); gl_FragColor = vec4(div, 0.0, 0.0, 1.0); } `, ) const curlShader = compileShader( gl.FRAGMENT_SHADER, ` precision mediump float; precision mediump sampler2D; varying highp vec2 vUv; varying highp vec2 vL; varying highp vec2 vR; varying highp vec2 vT; varying highp vec2 vB; uniform sampler2D uVelocity; void main () { float L = texture2D(uVelocity, vL).y; float R = texture2D(uVelocity, vR).y; float T = texture2D(uVelocity, vT).x; float B = texture2D(uVelocity, vB).x; float vorticity = R - L - T + B; gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0); } `, ) const vorticityShader = compileShader( gl.FRAGMENT_SHADER, ` precision highp float; precision highp sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; uniform sampler2D uCurl; uniform float curl; uniform float dt; void main () { float L = texture2D(uCurl, vL).x; float R = texture2D(uCurl, vR).x; float T = texture2D(uCurl, vT).x; float B = texture2D(uCurl, vB).x; float C = texture2D(uCurl, vUv).x; vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L)); force /= length(force) + 0.0001; force *= curl * C; force.y *= -1.0; vec2 velocity = texture2D(uVelocity, vUv).xy; velocity += force * dt; velocity = min(max(velocity, -1000.0), 1000.0); gl_FragColor = vec4(velocity, 0.0, 1.0); } `, ) const pressureShader = compileShader( gl.FRAGMENT_SHADER, ` precision mediump float; precision mediump sampler2D; varying highp vec2 vUv; varying highp vec2 vL; varying highp vec2 vR; varying highp vec2 vT; varying highp vec2 vB; uniform sampler2D uPressure; uniform sampler2D uDivergence; void main () { float L = texture2D(uPressure, vL).x; float R = texture2D(uPressure, vR).x; float T = texture2D(uPressure, vT).x; float B = texture2D(uPressure, vB).x; float C = texture2D(uPressure, vUv).x; float divergence = texture2D(uDivergence, vUv).x; float pressure = (L + R + B + T - divergence) * 0.25; gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0); } `, ) const gradientSubtractShader = compileShader( gl.FRAGMENT_SHADER, ` precision mediump float; precision mediump sampler2D; varying highp vec2 vUv; varying highp vec2 vL; varying highp vec2 vR; varying highp vec2 vT; varying highp vec2 vB; uniform sampler2D uPressure; uniform sampler2D uVelocity; void main () { float L = texture2D(uPressure, vL).x; float R = texture2D(uPressure, vR).x; float T = texture2D(uPressure, vT).x; float B = texture2D(uPressure, vB).x; vec2 velocity = texture2D(uVelocity, vUv).xy; velocity.xy -= vec2(R - L, T - B); gl_FragColor = vec4(velocity, 0.0, 1.0); } `, ) const blit = (() => { gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()) gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer()) gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW) gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0) gl.enableVertexAttribArray(0) return (target, clear = false) => { if (target == null) { gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight) gl.bindFramebuffer(gl.FRAMEBUFFER, null) } else { gl.viewport(0, 0, target.width, target.height) gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo) } if (clear) { gl.clearColor(0.0, 0.0, 0.0, 1.0) gl.clear(gl.COLOR_BUFFER_BIT) } gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0) } })() let dye, velocity, divergence, curl, pressure const copyProgram = new Program(baseVertexShader, copyShader) const clearProgram = new Program(baseVertexShader, clearShader) const splatProgram = new Program(baseVertexShader, splatShader) const advectionProgram = new Program(baseVertexShader, advectionShader) const divergenceProgram = new Program(baseVertexShader, divergenceShader) const curlProgram = new Program(baseVertexShader, curlShader) const vorticityProgram = new Program(baseVertexShader, vorticityShader) const pressureProgram = new Program(baseVertexShader, pressureShader) const gradienSubtractProgram = new Program(baseVertexShader, gradientSubtractShader) const displayMaterial = new Material(baseVertexShader, displayShaderSource) function initFramebuffers() { const simRes = getResolution(config.SIM_RESOLUTION) const dyeRes = getResolution(config.DYE_RESOLUTION) const texType = ext.halfFloatTexType const rgba = ext.formatRGBA const rg = ext.formatRG const r = ext.formatR const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST gl.disable(gl.BLEND) if (!dye) dye = createDoubleFBO(dyeRes.width, dyeRes.height, rgba.internalFormat, rgba.format, texType, filtering) else dye = resizeDoubleFBO(dye, dyeRes.width, dyeRes.height, rgba.internalFormat, rgba.format, texType, filtering) if (!velocity) velocity = createDoubleFBO(simRes.width, simRes.height, rg.internalFormat, rg.format, texType, filtering) else velocity = resizeDoubleFBO( velocity, simRes.width, simRes.height, rg.internalFormat, rg.format, texType, filtering, ) divergence = createFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST) curl = createFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST) pressure = createDoubleFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST) } function createFBO(w, h, internalFormat, format, type, param) { gl.activeTexture(gl.TEXTURE0) const texture = gl.createTexture() gl.bindTexture(gl.TEXTURE_2D, texture) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE) gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null) const fbo = gl.createFramebuffer() gl.bindFramebuffer(gl.FRAMEBUFFER, fbo) gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0) gl.viewport(0, 0, w, h) gl.clear(gl.COLOR_BUFFER_BIT) const texelSizeX = 1.0 / w const texelSizeY = 1.0 / h return { texture, fbo, width: w, height: h, texelSizeX, texelSizeY, attach(id) { gl.activeTexture(gl.TEXTURE0 + id) gl.bindTexture(gl.TEXTURE_2D, texture) return id }, } } function createDoubleFBO(w, h, internalFormat, format, type, param) { let fbo1 = createFBO(w, h, internalFormat, format, type, param) let fbo2 = createFBO(w, h, internalFormat, format, type, param) return { width: w, height: h, texelSizeX: fbo1.texelSizeX, texelSizeY: fbo1.texelSizeY, get read() { return fbo1 }, set read(value) { fbo1 = value }, get write() { return fbo2 }, set write(value) { fbo2 = value }, swap() { const temp = fbo1 fbo1 = fbo2 fbo2 = temp }, } } function resizeFBO(target, w, h, internalFormat, format, type, param) { const newFBO = createFBO(w, h, internalFormat, format, type, param) copyProgram.bind() gl.uniform1i(copyProgram.uniforms.uTexture, target.attach(0)) blit(newFBO) return newFBO } function resizeDoubleFBO(target, w, h, internalFormat, format, type, param) { if (target.width === w && target.height === h) return target target.read = resizeFBO(target.read, w, h, internalFormat, format, type, param) target.write = createFBO(w, h, internalFormat, format, type, param) target.width = w target.height = h target.texelSizeX = 1.0 / w target.texelSizeY = 1.0 / h return target } function updateKeywords() { const displayKeywords = [] if (config.SHADING) displayKeywords.push("SHADING") displayMaterial.setKeywords(displayKeywords) } updateKeywords() initFramebuffers() // Store programs in ref programRefs.current = { copyProgram, clearProgram, splatProgram, advectionProgram, divergenceProgram, curlProgram, vorticityProgram, pressureProgram, gradienSubtractProgram, displayMaterial, } let lastUpdateTime = Date.now() let colorUpdateTimer = 0.0 function updateFrame() { const dt = calcDeltaTime() if (resizeCanvas()) initFramebuffers() updateColors(dt) applyInputs() step(dt, gl) render(null, gl) requestAnimationFrame(updateFrame) } function calcDeltaTime() { const now = Date.now() let dt = (now - lastUpdateTime) / 1000 dt = Math.min(dt, 0.016666) lastUpdateTime = now return dt } function resizeCanvas() { const width = scaleByPixelRatio(canvas.clientWidth) const height = scaleByPixelRatio(canvas.clientHeight) if (canvas.width !== width || canvas.height !== height) { canvas.width = width canvas.height = height return true } return false } function updateColors(dt) { colorUpdateTimer += dt * config.COLOR_UPDATE_SPEED if (colorUpdateTimer >= 1) { colorUpdateTimer = wrap(colorUpdateTimer, 0, 1) pointers.forEach((p) => { p.color = generateColor() }) } } function applyInputs() { pointers.forEach((p) => { if (p.moved) { p.moved = false splatPointer(p) } }) } function step(dt, gl) { gl.disable(gl.BLEND) const { copyProgram, clearProgram, splatProgram, advectionProgram, divergenceProgram, curlProgram, vorticityProgram, pressureProgram, gradienSubtractProgram, displayMaterial, } = programRefs.current // Curl curlProgram.bind() gl.uniform2f(curlProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY) gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0)) blit(curl) // Vorticity vorticityProgram.bind() gl.uniform2f(vorticityProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY) gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.attach(0)) gl.uniform1i(vorticityProgram.uniforms.uCurl, curl.attach(1)) gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL) gl.uniform1f(vorticityProgram.uniforms.dt, dt) blit(velocity.write) velocity.swap() // Divergence divergenceProgram.bind() gl.uniform2f(divergenceProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY) gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.attach(0)) blit(divergence) // Clear pressure clearProgram.bind() gl.uniform1i(clearProgram.uniforms.uTexture, pressure.read.attach(0)) gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE) blit(pressure.write) pressure.swap() // Pressure pressureProgram.bind() gl.uniform2f(pressureProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY) gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence.attach(0)) for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) { gl.uniform1i(pressureProgram.uniforms.uPressure, pressure.read.attach(1)) blit(pressure.write) pressure.swap() } // Gradient Subtract gradienSubtractProgram.bind() gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY) gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read.attach(0)) gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read.attach(1)) blit(velocity.write) velocity.swap() // Advection advectionProgram.bind() gl.uniform2f(advectionProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY) if (!ext.supportLinearFiltering) gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, velocity.texelSizeX, velocity.texelSizeY) const velocityId = velocity.read.attach(0) gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId) gl.uniform1i(advectionProgram.uniforms.uSource, velocityId) gl.uniform1f(advectionProgram.uniforms.dt, dt) gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION) blit(velocity.write) velocity.swap() if (!ext.supportLinearFiltering) gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, dye.texelSizeX, dye.texelSizeY) gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.attach(0)) gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1)) gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION) blit(dye.write) dye.swap() } function render(target, gl) { gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA) gl.enable(gl.BLEND) drawDisplay(target, gl) } function drawDisplay(target, gl) { const { displayMaterial } = programRefs.current const width = target == null ? gl.drawingBufferWidth : target.width const height = target == null ? gl.drawingBufferHeight : target.height displayMaterial.bind() if (config.SHADING) gl.uniform2f(displayMaterial.uniforms.texelSize, 1.0 / width, 1.0 / height) gl.uniform1i(displayMaterial.uniforms.uTexture, dye.read.attach(0)) blit(target) } function splatPointer(pointer) { const dx = pointer.deltaX * config.SPLAT_FORCE const dy = pointer.deltaY * config.SPLAT_FORCE splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color) } function clickSplat(pointer) { const color = generateColor() color.r *= 10.0 color.g *= 10.0 color.b *= 10.0 const dx = 10 * (Math.random() - 0.5) const dy = 30 * (Math.random() - 0.5) splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color) } function splat(x, y, dx, dy, color) { const { splatProgram } = programRefs.current splatProgram.bind() gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0)) gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height) gl.uniform2f(splatProgram.uniforms.point, x, y) gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0.0) gl.uniform1f(splatProgram.uniforms.radius, correctRadius(config.SPLAT_RADIUS / 100.0)) blit(velocity.write) velocity.swap() gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0)) gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b) blit(dye.write) dye.swap() } function correctRadius(radius) { const aspectRatio = canvas.width / canvas.height if (aspectRatio > 1) radius *= aspectRatio return radius } function updatePointerDownData(pointer, id, posX, posY) { pointer.id = id pointer.down = true pointer.moved = false pointer.texcoordX = posX / canvas.width pointer.texcoordY = 1.0 - posY / canvas.height pointer.prevTexcoordX = pointer.texcoordX pointer.prevTexcoordY = pointer.texcoordY pointer.deltaX = 0 pointer.deltaY = 0 pointer.color = generateColor() } function updatePointerMoveData(pointer, posX, posY, color) { pointer.prevTexcoordX = pointer.texcoordX pointer.prevTexcoordY = pointer.texcoordY pointer.texcoordX = posX / canvas.width pointer.texcoordY = 1.0 - posY / canvas.height pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX) pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY) pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0 pointer.color = color } function updatePointerUpData(pointer) { pointer.down = false } function correctDeltaX(delta) { const aspectRatio = canvas.width / canvas.height if (aspectRatio < 1) delta *= aspectRatio return delta } function correctDeltaY(delta) { const aspectRatio = canvas.width / canvas.height if (aspectRatio > 1) delta /= aspectRatio return delta } function generateColor() { const c = HSVtoRGB(Math.random(), 1.0, 1.0) c.r *= 0.15 c.g *= 0.15 c.b *= 0.15 return c } function HSVtoRGB(h, s, v) { let r, g, b, i, f, p, q, t i = Math.floor(h * 6) f = h * 6 - i p = v * (1 - s) q = v * (1 - f * s) t = v * (1 - (1 - f) * s) switch (i % 6) { case 0: r = v g = t b = p break case 1: r = q g = v b = p break case 2: r = p g = v b = t break case 3: r = p g = q b = v break case 4: r = t g = p b = v break case 5: r = v g = p b = q break default: break } return { r, g, b } } function wrap(value, min, max) { const range = max - min if (range === 0) return min return ((value - min) % range) + min } function getResolution(resolution) { let aspectRatio = gl.drawingBufferWidth / gl.drawingBufferHeight if (aspectRatio < 1) aspectRatio = 1.0 / aspectRatio const min = Math.round(resolution) const max = Math.round(resolution * aspectRatio) if (gl.drawingBufferWidth > gl.drawingBufferHeight) return { width: max, height: min } else return { width: min, height: max } } function scaleByPixelRatio(input) { const pixelRatio = window.devicePixelRatio || 1 return Math.floor(input * pixelRatio) } function hashCode(s) { if (s.length === 0) return 0 let hash = 0 for (let i = 0; i < s.length; i++) { hash = (hash << 5) - hash + s.charCodeAt(i) hash |= 0 } return hash } window.addEventListener("mousedown", (e) => { const pointer = pointers[0] const posX = scaleByPixelRatio(e.clientX) const posY = scaleByPixelRatio(e.clientY) updatePointerDownData(pointer, -1, posX, posY) clickSplat(pointer) }) document.body.addEventListener("mousemove", function handleFirstMouseMove(e) { const pointer = pointers[0] const posX = scaleByPixelRatio(e.clientX) const posY = scaleByPixelRatio(e.clientY) const color = generateColor() updateFrame() // start animation loop updatePointerMoveData(pointer, posX, posY, color) document.body.removeEventListener("mousemove", handleFirstMouseMove) }) window.addEventListener("mousemove", (e) => { const pointer = pointers[0] const posX = scaleByPixelRatio(e.clientX) const posY = scaleByPixelRatio(e.clientY) const color = pointer.color updatePointerMoveData(pointer, posX, posY, color) }) document.body.addEventListener("touchstart", function handleFirstTouchStart(e) { const touches = e.targetTouches const pointer = pointers[0] for (let i = 0; i < touches.length; i++) { const posX = scaleByPixelRatio(touches[i].clientX) const posY = scaleByPixelRatio(touches[i].clientY) updateFrame() // start animation loop updatePointerDownData(pointer, touches[i].identifier, posX, posY) } document.body.removeEventListener("touchstart", handleFirstTouchStart) }) window.addEventListener("touchstart", (e) => { const touches = e.targetTouches const pointer = pointers[0] for (let i = 0; i < touches.length; i++) { const posX = scaleByPixelRatio(touches[i].clientX) const posY = scaleByPixelRatio(touches[i].clientY) updatePointerDownData(pointer, touches[i].identifier, posX, posY) } }) window.addEventListener( "touchmove", (e) => { const touches = e.targetTouches const pointer = pointers[0] for (let i = 0; i < touches.length; i++) { const posX = scaleByPixelRatio(touches[i].clientX) const posY = scaleByPixelRatio(touches[i].clientY) updatePointerMoveData(pointer, posX, posY, pointer.color) } }, false, ) window.addEventListener("touchend", (e) => { const touches = e.changedTouches const pointer = pointers[0] for (let i = 0; i < touches.length; i++) { updatePointerUpData(pointer) } }) updateFrame() // eslint-disable-next-line react-hooks/exhaustive-deps }, [ SIM_RESOLUTION, DYE_RESOLUTION, CAPTURE_RESOLUTION, DENSITY_DISSIPATION, VELOCITY_DISSIPATION, PRESSURE, PRESSURE_ITERATIONS, CURL, SPLAT_RADIUS, SPLAT_FORCE, SHADING, COLOR_UPDATE_SPEED, BACK_COLOR, TRANSPARENT, ]) return (

) } export default SplashCursor [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { MapPin, BarChart3, Car, DollarSign, Shield, ChevronRight, Play, Crown, Check, Star } from "lucide-react" import { ThemeSwitcher } from "@/components/theme-switcher" import { motion } from "framer-motion" export default function Home() { const [isVideoModalOpen, setIsVideoModalOpen] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const [selectedPlan, setSelectedPlan] = useState(null) // Handle form submission const handleContactSubmit = (e: React.FormEvent) => { e.preventDefault() // In a real app, you would send this data to your backend const formData = new FormData(e.currentTarget) const email = formData.get("email") const name = formData.get("name") const message = formData.get("message") // Send email to motionfleet7@gmail.com alert(`Thank you for your message! We'll get back to you soon at ${email}. Your message has been sent to: motionfleet7@gmail.com`) const form = e.target as HTMLFormElement form.reset() } // Scroll to section const scrollToSection = (id: string) => { const element = document.getElementById(id) if (element) { element.scrollIntoView({ behavior: "smooth" }) } setIsMobileMenuOpen(false) } // Handle pricing plan selection const handleSelectPlan = (plan: string) => { setSelectedPlan(plan) setTimeout(() => { alert(`You've selected the ${plan} plan. Let's get you started!`) window.location.href = `/signup?type=advertiser&plan=${plan.toLowerCase()}` }, 300) } // Animation variants const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 }, }, } const staggerContainer = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } useEffect(() => { // Add animation classes to elements when they come into view const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("animate-in") } }) }, { threshold: 0.1 }, ) document.querySelectorAll(".animate-on-scroll").forEach((el) => { observer.observe(el) }) return () => { document.querySelectorAll(".animate-on-scroll").forEach((el) => { observer.unobserve(el) }) } }, []) return (

MotionFleet

{isMobileMenuOpen && (

)}

Turn Your Vehicle Into A Revenue Stream

Join MotionFleet and earn money by displaying ads on your vehicle. Connect with advertisers and track your earnings in real-time.

See how MotionFleet works

Features

Everything You Need to Succeed

Our platform connects vehicle owners with advertisers, providing tools for both to maximize their success.

{[ { icon: , title: "Real-Time Tracking", description: "Track vehicle locations and ad exposure in real-time with our advanced GPS integration.", color: "primary", }, { icon: , title: "Advanced Analytics", description: "Get detailed insights on campaign performance, audience reach, and ROI metrics.", color: "primary", }, { icon: , title: "Secure Payments", description: "Integrated wallet system with secure payment processing for both advertisers and vehicle owners.", color: "primary", }, { icon: , title: "Secure Authentication", description: "Multi-factor authentication and robust security measures to protect your account and data.", color: "secondary", }, { icon: , title: "Campaign Management", description: "Easily create, manage, and optimize advertising campaigns with our intuitive dashboard.", color: "secondary", }, { icon: , title: "Dynamic Pricing", description: "AI-driven pricing based on location, time, and audience reach to maximize ROI.", color: "secondary", }, ].map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

How It Works

Simple Process, Powerful Results

Our platform makes it easy for both advertisers and vehicle owners to get started and see results.

{/* Connecting line */}

{[ { number: 1, title: "Sign Up", description: "Create an account as a vehicle owner or advertiser and complete your profile.", }, { number: 2, title: "Connect", description: "Vehicle owners apply for campaigns, advertisers select vehicles that match their target audience.", }, { number: 3, title: "Earn & Grow", description: "Track performance, receive payments, and optimize campaigns for better results.", }, ].map((step, index) => ( {step.number}

{step.title}

{step.description}

))}

Pricing

Transparent Pricing for Everyone

Choose the plan that works best for your advertising needs or vehicle type.

{[ { title: "Basic", subtitle: "For small businesses", price: "$299", features: [ "Up to 5 vehicles", "Basic analytics", "Standard support", "1 campaign at a time", "City-wide targeting", ], highlighted: false, buttonText: "Get Started", }, { title: "Pro", subtitle: "For growing businesses", price: "$599", features: [ "Up to 20 vehicles", "Advanced analytics", "Priority support", "Campaign optimization", "3 campaigns at a time", "Regional targeting", "Custom branding", ], highlighted: true, buttonText: "Get Started", }, { title: "Premium", subtitle: "For established businesses", price: "$999", features: [ "Up to 50 vehicles", "Premium analytics", "24/7 priority support", "Advanced campaign optimization", "10 campaigns at a time", "Multi-state targeting", "Custom branding & reporting", "Dedicated account manager", ], highlighted: false, buttonText: "Get Started", icon: , }, { title: "Enterprise", subtitle: "For large organizations", price: "Custom", features: [ "Unlimited vehicles", "Custom analytics", "Dedicated account manager", "API access", "Unlimited campaigns", "Nationwide targeting", "White-label solution", "Custom reporting", "Strategic consulting", ], highlighted: false, buttonText: "Contact Sales", icon: , }, ].map((plan, index) => (

{plan.title}

{plan.icon && plan.icon}

{plan.subtitle}

{plan.price}

{feature}

))}

Ready to Get Started?

Have questions or need more information? Our team is here to help.

Email us at: motionfleet7@gmail.com

Name

Message

</div>
                <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }}>
                  <Button type="submit" className="bg-primary text-black hover:bg-primary/90 transition-all w-full">
                    Send Message
                  </Button>
                </motion.div>
              </form>
            </motion.div>
          </div>
        </section>
      </main>
      <footer className="border-t py-6 md:py-0">
        <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
          <div className="flex items-center gap-2">
            <Car className="h-6 w-6 text-primary" />
            <span className="text-lg font-bold">MotionFleet</span>
          </div>
          <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
            © 2025 MotionFleet. All rights reserved.
          </p>
          <div className="flex items-center gap-4">
            <Link href="#" className="text-sm font-medium hover:text-primary transition-colors">
              Privacy Policy
            </Link>
            <Link href="#" className="text-sm font-medium hover:text-primary transition-colors">
              Terms of Service
            </Link>
          </div>
        </div>
      </footer>

{/* Video Modal */}
      {isVideoModalOpen && (
        <motion.div
          className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <motion.div
            className="relative bg-background rounded-lg w-full max-w-4xl"
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ type: "spring", damping: 20 }}
          >
            <button
              className="absolute top-2 right-2 text-gray-500 hover:text-gray-700 z-10"
              onClick={() => setIsVideoModalOpen(false)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-6 w-6"
              >
                <path d="M18 6 6 18M6 6l12 12" />
              </svg>
            </button>
            <div className="p-1">
              <div className="aspect-video w-full bg-black rounded-lg overflow-hidden">
                <div className="h-full w-full flex items-center justify-center">
                  <p className="text-white text-center p-8">Video player would be embedded here</p>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </div>
  )
}

[V0_FILE]json:file="package.json" isEdit="true"
{
  "name": "motionfleet",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-sheet": "^1.0.4",
    "@radix-ui/react-tabs": "^1.0.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "framer-motion": "^10.16.4",
    "lucide-react": "^0.294.0",
    "next": "14.0.4",
    "next-themes": "^0.2.1",
    "react": "^18",
    "react-dom": "^18",
    "recharts": "^2.10.3",
    "tailwind-merge": "^2.1.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { BarChart3, Car, DollarSign, MapPin, TrendingUp, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { motion } from "framer-motion"
import {
  AreaChart,
  BarChart as RechartsBarChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Area,
  Bar,
} from "recharts"

interface ChartDataPoint {
  name: string
  impressions: number
  reach: number
  revenue: number
}

export default function DashboardPage() {
  const [isLoading, setIsLoading] = useState(true)
  const [chartData, setChartData] = useState<ChartDataPoint[]>([])
  const [activeTab, setActiveTab] = useState("performance")

useEffect(() => {
    // Simulate data loading
    const timer = setTimeout(() => {
      setChartData([
        { name: "Jan", impressions: 12000, reach: 8500, revenue: 1200 },
        { name: "Feb", impressions: 19000, reach: 12500, revenue: 1800 },
        { name: "Mar", impressions: 22000, reach: 15000, revenue: 2200 },
        { name: "Apr", impressions: 25000, reach: 17500, revenue: 2500 },
        { name: "May", impressions: 32000, reach: 22000, revenue: 3200 },
        { name: "Jun", impressions: 38000, reach: 25000, revenue: 3800 },
        { name: "Jul", impressions: 42000, reach: 28000, revenue: 4200 },
      ])
      setIsLoading(false)
    }, 1500)

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

// Animation variants
  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  }

const item = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0 },
  }

return (
    <motion.div className="flex flex-col gap-6 p-4 md:p-6" initial="hidden" animate="show" variants={container}>
      <motion.div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between" variants={item}>
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
          <p className="text-muted-foreground">Welcome back! Here's an overview of your advertising campaigns.</p>
        </div>
        <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
          <Button className="bg-primary text-primary-foreground hover:bg-primary/90 transition-all">
            <TrendingUp className="mr-2 h-4 w-4" />
            View Analytics
          </Button>
        </motion.div>
      </motion.div>

<motion.div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4" variants={container}>
        {[
          {
            title: "Total Revenue",
            icon: <DollarSign className="h-4 w-4 text-muted-foreground" />,
            value: "$4,550.32",
            change: "+20.1% from last month",
          },
          {
            title: "Active Campaigns",
            icon: <BarChart3 className="h-4 w-4 text-muted-foreground" />,
            value: "12",
            change: "+2 new this week",
          },
          {
            title: "Vehicles",
            icon: <Car className="h-4 w-4 text-muted-foreground" />,
            value: "24",
            change: "+4 new this month",
          },
          {
            title: "Audience Reach",
            icon: <Users className="h-4 w-4 text-muted-foreground" />,
            value: "145.2K",
            change: "+12.3% from last month",
          },
        ].map((stat, index) => (
          <motion.div key={index} variants={item}>
            <motion.div
              className="overflow-hidden hover:shadow-md transition-all"
              whileHover={{
                y: -5,
                boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
              }}
            >
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
                  {stat.icon}
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{stat.value}</div>
                  <p className="text-xs text-muted-foreground">{stat.change}</p>
                </CardContent>
              </Card>
            </motion.div>
          </motion.div>
        ))}
      </motion.div>

<motion.div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7" variants={item}>
        <Card className="lg:col-span-4">
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Campaign Performance</CardTitle>
                <CardDescription>View the performance of your active campaigns</CardDescription>
              </div>
              <div className="flex space-x-2">
                <Button
                  variant={activeTab === "performance" ? "default" : "outline"}
                  size="sm"
                  onClick={() => setActiveTab("performance")}
                >
                  Performance
                </Button>
                <Button
                  variant={activeTab === "revenue" ? "default" : "outline"}
                  size="sm"
                  onClick={() => setActiveTab("revenue")}
                >
                  Revenue
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="h-[300px] w-full flex items-center justify-center">
                <div className="flex flex-col items-center">
                  <svg
                    className="animate-spin h-8 w-8 text-primary"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    ></circle>
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                  </svg>
                  <p className="mt-2 text-sm text-muted-foreground">Loading chart data...</p>
                </div>
              </div>
            ) : (
              <motion.div
                className="h-[300px] w-full"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.5 }}
              >
                {activeTab === "performance" ? (
                  <ResponsiveContainer width="100%" height="100%">
                    <AreaChart
                      data={chartData}
                      margin={{
                        top: 10,
                        right: 30,
                        left: 0,
                        bottom: 0,
                      }}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="name" />
                      <YAxis />
                      <Tooltip />
                      <Area type="monotone" dataKey="impressions" stackId="1" stroke="#FFD100" fill="#FFD100" />
                      <Area type="monotone" dataKey="reach" stackId="2" stroke="#00A651" fill="#00A651" />
                    </AreaChart>
                  </ResponsiveContainer>
                ) : (
                  <ResponsiveContainer width="100%" height="100%">
                    <RechartsBarChart
                      data={chartData}
                      margin={{
                        top: 10,
                        right: 30,
                        left: 0,
                        bottom: 0,
                      }}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="name" />
                      <YAxis />
                      <Tooltip />
                      <Bar dataKey="revenue" fill="#FFD100" />
                    </RechartsBarChart>
                  </ResponsiveContainer>
                )}
              </motion.div>
            )}
          </CardContent>
        </Card>
        <Card className="lg:col-span-3">
          <CardHeader>
            <CardTitle>Active Vehicles</CardTitle>
            <CardDescription>Vehicles currently displaying your ads</CardDescription>
          </CardHeader>
          <CardContent>
            <motion.div className="space-y-4" variants={container} initial="hidden" animate="show">
              {[1, 2, 3, 4].map((i) => (
                <motion.div
                  key={i}
                  className="flex items-center gap-4 p-2 rounded-lg hover:bg-muted/50 transition-colors cursor-pointer"
                  variants={item}
                  whileHover={{ x: 5 }}
                >
                  <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center">
                    <Car className="h-5 w-5 text-primary" />
                  </div>
                  <div className="flex-1 space-y-1">
                    <p className="text-sm font-medium leading-none">Vehicle #{i}</p>
                    <p className="text-xs text-muted-foreground">
                      <MapPin className="inline h-3 w-3 mr-1" />
                      Downtown Area
                    </p>
                  </div>
                  <div className="flex items-center">
                    <span className="inline-flex h-2 w-2 rounded-full bg-green-500 mr-2"></span>
                    <span className="text-sm text-muted-foreground">Active</span>
                  </div>
                </motion.div>
              ))}
              <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                <Button variant="outline" size="sm" className="w-full mt-2">
                  View All Vehicles
                </Button>
              </motion.div>
            </motion.div>
          </CardContent>
        </Card>
      </motion.div>

<motion.div variants={item}>
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Recent Transactions</CardTitle>
                <CardDescription>Your recent campaign payments and earnings</CardDescription>
              </div>
              <Button variant="outline" size="sm">
                View All
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Transaction</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead className="text-right">Amount</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {[
                  {
                    id: "tx-001",
                    name: "Campaign #1234",
                    status: "completed",
                    date: "Mar 15, 2025",
                    amount: "$1,200.00",
                  },
                  {
                    id: "tx-002",
                    name: "Campaign #1233",
                    status: "completed",
                    date: "Mar 10, 2025",
                    amount: "$950.00",
                  },
                  { id: "tx-003", name: "Campaign #1232", status: "pending", date: "Mar 5, 2025", amount: "$750.00" },
                  {
                    id: "tx-004",
                    name: "Campaign #1231",
                    status: "completed",
                    date: "Feb 28, 2025",
                    amount: "$1,650.00",
                  },
                ].map((transaction, index) => (
                  <motion.tr
                    key={transaction.id}
                    className="cursor-pointer hover:bg-muted/50 transition-colors"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 }}
                    whileHover={{ backgroundColor: "rgba(0,0,0,0.05)" }}
                  >
                    <TableCell className="font-medium">{transaction.name}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <div
                          className={`h-2 w-2 rounded-full ${transaction.status === "completed" ? "bg-green-500" : "bg-yellow-500"}`}
                        />
                        {transaction.status.charAt(0).toUpperCase() + transaction.status.slice(1)}
                      </div>
                    </TableCell>
                    <TableCell>{transaction.date}</TableCell>
                    <TableCell className="text-right">{transaction.amount}</TableCell>
                  </motion.tr>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]css:file="app/animations.css"
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

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

.animate-slide-left {
  animation: slideInFromLeft 0.5s ease-out forwards;
}

.animate-slide-right {
  animation: slideInFromRight 0.5s ease-out forwards;
}

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

.animate-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-400 {
  animation-delay: 400ms;
}

.delay-500 {
  animation-delay: 500ms;
}

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

--card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

--popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

/* Light theme uses blue as primary */
    --primary: 214 100% 50%;
    --primary-foreground: 0 0% 100%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 214 100% 50%;

--radius: 0.5rem;
  }

.dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

--card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

--popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

/* Dark theme keeps yellow as primary */
    --primary: 50 100% 50%;
    --primary-foreground: 0 0% 0%;

--secondary: 142 100% 33%;
    --secondary-foreground: 0 0% 100%;

--muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

--accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 50 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom cursor styles */
.cursor-none {
  cursor: none;
}

/* Splash animation */
@keyframes splash {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.splash {
  animation: splash 0.8s ease-out forwards;
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from abhiraj2241

More Templates Like This

About

Tags

Share

About

Tags

Share

More from abhiraj2241

More Templates Like This