[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Navbar } from "@/components/navbar" import { Hero } from "@/components/hero" import { Features } from "@/components/features" import { PaymentCards } from "@/components/payment-cards" import { HowItWorks } from "@/components/how-it-works" import { Pricing } from "@/components/pricing" import { Footer } from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/how-it-works.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { UserPlus, LinkIcon, CreditCard, DollarSign } from "lucide-react" export function HowItWorks() { const steps = [ { icon: , title: "Create an Account", description: "Sign up for DesireLovell in just a few minutes with our simple onboarding process.", }, { icon: , title: "Share Your Link", description: "Get your personalized payment link and share it with clients via email, social media, or your website.", }, { icon: , title: "Client Makes Payment", description: "Clients can pay you securely using credit cards, bank transfers, or other payment methods.", }, { icon: , title: "Receive Your Money", description: "Get paid directly to your bank account with fast processing times and low fees.", }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100, damping: 15, }, }, } return (

How It Works

Get started with DesireLovell in four simple steps

{steps.map((step, index) => ( {/* Step number */}

{index + 1}

{/* Step content */}

{step.icon}

{step.title}

{step.description}

{/* Connector line */} {index < steps.length - 1 && (

)} ))}

) } [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 { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { ArrowLeft, Github, Mail } from "lucide-react" import { motion } from "framer-motion" export default function SignupPage() { const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle signup logic here console.log({ name, email, password }) } return (

Back to home

DesireLovell

Create your account

Start accepting payments in minutes

Or continue with

Full Name setName(e.target.value)} required />

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

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

Must be at least 8 characters with 1 uppercase, 1 number, and 1 special character

I agree to the{" "} Terms of Service {" "} and{" "} Privacy Policy

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BarChart3, Bell, CreditCard, DollarSign, Download, Home, LinkIcon, LogOut, Menu, Plus, Settings, User, Users, X, } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export default function DashboardPage() { const [isSidebarOpen, setIsSidebarOpen] = useState(false) return (

{/* Mobile sidebar toggle */}

DesireLovell

{/* Sidebar */}

DesireLovell

John Doe

john@example.com

Profile Settings Log out

{/* Main content */}

Dashboard

Total Revenue

$45,231.89

+20.1% from last month

Pending

$5,231.89

+4.5% from last month

Clients

+12

+3 new this month

Active Links

+2 from last month

Overview Analytics Reports

Revenue Over Time

Revenue chart visualization

Recent Transactions Your most recent payments

{[1, 2, 3, 4].map((i) => (

Client {i}

{i % 2 === 0 ? "Completed" : "Pending"} • {new Date().toLocaleDateString()}

${(Math.random() * 1000).toFixed(2)}

))}

Your Payment Links Create and manage your payment links

{[1, 2, 3, 4, 5].map((i) => ( ))}

Name	Status	Created	Amount	Actions
Design Services {i}	{i % 2 === 0 ? "Active" : "Draft"}	{new Date().toLocaleDateString()}	${(Math.random() * 1000).toFixed(2)}

Analytics Detailed analytics about your payment activity

Analytics visualization

Reports Generate and download reports

Reports interface

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="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: "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))", }, // Custom colors for DesireLovell - Cosmic Theme highlight: "#8A2BE2", // Bright purple highlight card1: "#6A5ACD", // Slate blue card card2: "#9370DB", // Medium purple card card3: "#4169E1", // Royal blue card cosmic: { purple: "#8A2BE2", blue: "#4169E1", indigo: "#483D8B", violet: "#9400D3", lavender: "#E6E6FA", }, }, 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" }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, "pulse-subtle": { "0%, 100%": { opacity: "1" }, "50%": { opacity: "0.8" }, }, twinkle: { "0%, 100%": { opacity: "0.8" }, "50%": { opacity: "1" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", float: "float 6s ease-in-out infinite", "pulse-subtle": "pulse-subtle 3s ease-in-out infinite", twinkle: "twinkle 4s ease-in-out infinite", }, backgroundImage: { cosmic: "url('/cosmic-background.png')", stars: "radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%), url('/stars-bg.png')", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 240 20% 3%; --foreground: 240 10% 98%; --card: 240 20% 5%; --card-foreground: 240 10% 98%; --popover: 240 20% 5%; --popover-foreground: 240 10% 98%; --primary: 270 100% 50%; --primary-foreground: 240 10% 98%; --secondary: 240 20% 10%; --secondary-foreground: 240 10% 98%; --muted: 240 20% 15%; --muted-foreground: 240 10% 70%; --accent: 270 100% 50%; --accent-foreground: 240 10% 98%; --destructive: 0 100% 50%; --destructive-foreground: 240 10% 98%; --border: 240 20% 20%; --input: 240 20% 20%; --ring: 270 100% 50%; --radius: 0.75rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; background-image: radial-gradient(circle at center, rgba(138, 43, 226, 0.05) 0%, rgba(0, 0, 0, 0) 70%); } } .gradient-text { background: linear-gradient(to right, #8a2be2, #4169e1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .highlight-underline { position: relative; } .highlight-underline::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 10px; background-color: #8a2be2; z-index: -1; border-radius: 5px; } .cosmic-bg { position: relative; } .cosmic-bg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at center, rgba(138, 43, 226, 0.1) 0%, rgba(0, 0, 0, 0) 70%); z-index: -1; } .star { position: absolute; width: 2px; height: 2px; background-color: white; border-radius: 50%; opacity: 0.8; animation: twinkle 4s ease-in-out infinite; } .star:nth-child(2n) { animation-delay: 1s; } .star:nth-child(3n) { animation-delay: 2s; } .star:nth-child(4n) { animation-delay: 3s; } @keyframes twinkle { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } [V0_FILE]plaintext:file="public/cosmic-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_7316-fj7cHFK8P7Efy8LNoaUNuRGuEUaHb4.png" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "DesireLovell - Your Personal Payment Platform", description: "Sell professional services to any business in the world with DesireLovell's secure payment platform.", icons: { icon: "/cosmic-icon.png", apple: "/cosmic-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" "use client" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" import Link from "next/link" import { useState, useEffect } from "react" import Image from "next/image" export function Hero() { const [activeTab, setActiveTab] = useState("independents") const [stars, setStars] = useState<{ top: string; left: string; size: string; delay: string }[]>([]) useEffect(() => { // Create random stars const newStars = Array.from({ length: 50 }).map(() => ({ top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, size: `${Math.random() * 2 + 1}px`, delay: `${Math.random() * 4}s`, })) setStars(newStars) }, []) return (

{/* Background gradient */}

{/* Stars background */}

{stars.map((star, i) => (

))}

{/* Animated background elements */}

{/* Cosmic icon */}

{/* Tabs */}

{/* Main content */}

INDEPENDENT'S
PAY BUTTON This is your personal pay button. Use it to sell professional services to any business in the world.

) } [V0_FILE]typescriptreact:file="components/payment-cards.tsx" isEdit="true" "use client" import { motion } from "framer-motion" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export function PaymentCards() { const cards = [ { color: "bg-card1", name: "Lena", service: "App development", amount: "$7,100", date: "Wed, 5 Aug 2024", avatar: "/placeholder.svg?height=50&width=50", }, { color: "bg-card2", name: "Marcus", service: "Logo design", amount: "$3,620", date: "Mon, 8 Aug 2024", avatar: "/placeholder.svg?height=50&width=50", }, { color: "bg-card3", name: "Anna", service: "Brand consultancy", amount: "$4,400", date: "Tue, 9 Aug 2024", avatar: "/placeholder.svg?height=50&width=50", }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, } const cardVariants = { hidden: { y: 50, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100, damping: 15, }, }, hover: { y: -10, transition: { type: "spring", stiffness: 300, damping: 15, }, }, } return (

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

Payment Request

{card.name.charAt(0)}

Service description

{card.service}

{card.amount}

Due Date

{card.date}

VAT

20%

))}

) } [V0_FILE]typescriptreact:file="components/features.tsx" isEdit="true" "use client" import { motion } from "framer-motion" import { CreditCard, Shield, Globe, Zap, BarChart, Clock, CheckCircle } from "lucide-react" export function Features() { const features = [ { icon: , title: "Secure Payments", description: "Accept payments from clients worldwide with bank-level security and encryption.", }, { icon: , title: "Fraud Protection", description: "Advanced fraud detection systems to keep your transactions safe and secure.", }, { icon: , title: "Global Reach", description: "Connect with clients from over 190 countries and get paid in your preferred currency.", }, { icon: , title: "Instant Setup", description: "Get started in minutes with our easy-to-use platform and customizable options.", }, { icon: , title: "Analytics Dashboard", description: "Track your earnings, client engagement, and business growth with detailed insights.", }, { icon: , title: "Automated Invoicing", description: "Save time with automated invoicing, payment reminders, and receipt generation.", }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100, damping: 15, }, }, } return (

{/* Cosmic background effect */}

Powerful Features

Everything you need to manage your freelance business and get paid faster

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

{feature.icon}

{feature.title}

{feature.description}

))}

Enterprise-Grade Security

DesireLovell uses the same security infrastructure trusted by the world's largest financial institutions.

{item}

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Menu, X } from "lucide-react" import Image from "next/image" export function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false) return (

DesireLovell

{/* Desktop Navigation */}

How It Works Features Pricing

Resources

Blog Guides Help Center

{/* Mobile Menu Button */}

{/* Mobile Menu */} {isMenuOpen && (

setIsMenuOpen(false)} > How It Works setIsMenuOpen(false)} > Features setIsMenuOpen(false)} > Pricing setIsMenuOpen(false)} > Resources

)}

) } [V0_FILE]typescriptreact:file="components/pricing.tsx" isEdit="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Check } from "lucide-react" import { useState } from "react" export function Pricing() { const [billingCycle, setBillingCycle] = useState("monthly") const plans = [ { name: "Starter", description: "Perfect for freelancers just getting started", price: { monthly: "$9", yearly: "$90", }, savings: "Save $18", features: [ "Up to 10 payment requests per month", "Basic analytics", "Email support", "Custom payment link", "Automated invoicing", ], }, { name: "Professional", description: "For established freelancers with regular clients", price: { monthly: "$29", yearly: "$290", }, savings: "Save $58", popular: true, features: [ "Unlimited payment requests", "Advanced analytics", "Priority support", "Custom branding", "Client portal", "Multiple currencies", "Subscription payments", ], }, { name: "Business", description: "For agencies and teams managing multiple clients", price: { monthly: "$79", yearly: "$790", }, savings: "Save $158", features: [ "Everything in Professional", "Team accounts", "API access", "Dedicated account manager", "Custom integrations", "Advanced reporting", "Bulk invoicing", ], }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100, damping: 15, }, }, } return (

{/* Cosmic background effect */}

Simple, Transparent Pricing

Choose the plan that works best for your business

{plans.map((plan, index) => ( {plan.popular && (

{plan.name}

{plan.description}

{plan.price[billingCycle]} {billingCycle === "monthly" ? "/month" : "/year"}

{billingCycle === "yearly" &&

{plan.savings}

}

{feature}

))}

All plans come with a 14-day free trial. No credit card required.

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Facebook, Instagram, Twitter, Linkedin } from "lucide-react" import Image from "next/image" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { ArrowLeft, Github, Mail } from "lucide-react" import { motion } from "framer-motion" import Image from "next/image" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [stars, setStars] = useState<{ top: string; left: string; size: string; delay: string }[]>([]) // Create stars effect useState(() => { const newStars = Array.from({ length: 50 }).map(() => ({ top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, size: `${Math.random() * 2 + 1}px`, delay: `${Math.random() * 4}s`, })) setStars(newStars) }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle login logic here console.log({ email, password }) } return (

{/* Stars background */}

{stars.map((star, i) => (

))} {/* Cosmic background glow */}

Back to home

DesireLovell

Welcome back

Or continue with

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

) }

About

Tags

Share

About

Tags

Share

More from desirelovell

More Templates Like This

About

Tags

Share

About

Tags

Share

More from desirelovell

More Templates Like This