[V0_FILE]plaintext:file="public/favicon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_7317-xcQwefE2mCJgiEtXY57bCyr3uihYMm.jpeg" [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", cosmic: { blue: "#4169E1", purple: "#8A2BE2", pink: "#FF69B4", orange: "#FF7F50", red: "#FF4500", }, 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))", }, }, backgroundImage: { "cosmic-gradient": "linear-gradient(135deg, #4169E1, #8A2BE2, #FF69B4, #FF7F50, #FF4500)", "cosmic-gradient-alt": "linear-gradient(45deg, #4169E1, #8A2BE2, #FF69B4)", }, 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]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 217 91% 60%; --primary-foreground: 210 40% 98%; --secondary: 217 91% 60%; --secondary-foreground: 210 40% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; --radius: 0.5rem; } } @layer components { .cosmic-text { @apply bg-cosmic-gradient bg-clip-text text-transparent; } .cosmic-border { @apply border border-transparent bg-cosmic-gradient bg-origin-border; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: source-out; } .cosmic-card { @apply relative overflow-hidden rounded-xl border border-muted/20 bg-black/20 p-6 backdrop-blur-sm; } .cosmic-card::before { @apply absolute inset-0 -z-10 bg-cosmic-gradient opacity-10 blur-xl content-['']; } .cosmic-button { @apply relative inline-flex items-center justify-center overflow-hidden rounded-md bg-cosmic-gradient px-4 py-2 text-sm font-medium text-white transition-all hover:opacity-90; } } @layer utilities { .step { counter-increment: step; } .step:before { @apply absolute inline-flex h-8 w-8 items-center justify-center rounded-full bg-muted text-center -indent-px font-mono text-base font-semibold; @apply ml-[-41px] mt-[-4px]; content: counter(step); } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "@/app/globals.css" import { ThemeProvider } from "@/components/theme-provider" export const metadata = { title: "DesireLovell Payment Platform", description: "A cosmic payment experience for your business", icons: { icon: "/favicon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" import { Button } from "@/components/ui/button" import { ArrowRight, CreditCard, ShieldCheck, Zap } from "lucide-react" export function HeroSection() { return (

Cosmic Payment Solutions

Elevate your payment experience to stellar heights with our innovative platform. Seamlessly process transactions across the universe of commerce.

Seamless Transactions

Process payments with the speed of light across multiple galaxies of payment methods.

Stellar Security

Your data is protected by cosmic-grade encryption and advanced security protocols.

Universal Integration

Connect with any business system across the universe with our flexible API.

) } [V0_FILE]typescriptreact:file="components/features-section.tsx" import { BarChart3, Globe, Layers, Rocket, Shield, Sparkles } from "lucide-react" export function FeaturesSection() { return (

Cosmic Features

Our payment platform harnesses the power of the cosmos to deliver an out-of-this-world experience for your business.

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

{feature.title}

{feature.description}

))}

) } const features = [ { icon: Globe, title: "Global Reach", description: "Accept payments from customers across the entire universe with multi-currency support.", }, { icon: Shield, title: "Quantum Security", description: "Advanced encryption and security measures that protect your data across dimensions.", }, { icon: BarChart3, title: "Stellar Analytics", description: "Gain cosmic insights into your business with our powerful reporting dashboard.", }, { icon: Rocket, title: "Light-Speed Processing", description: "Process transactions at the speed of light with our optimized payment infrastructure.", }, { icon: Layers, title: "Nebula Integration", description: "Seamlessly connect with your existing business systems and third-party applications.", }, { icon: Sparkles, title: "Celestial Experience", description: "Provide your customers with a smooth, frictionless payment journey through the cosmos.", }, ] [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" import { Star } from "lucide-react" export function TestimonialsSection() { return (

Stellar Testimonials

See what businesses across the galaxy are saying about our cosmic payment solutions.

{testimonials.map((testimonial, index) => (

{[...Array(5)].map((_, i) => ( ))}

"{testimonial.quote}"

{testimonial.name}

{testimonial.title}

))}

) } const testimonials = [ { quote: "The DesireLovell Payment Platform revolutionized how we handle transactions. The cosmic-grade security gives us peace of mind.", name: "Alex Stellar", title: "CEO, Nebula Enterprises", }, { quote: "Integration was seamless and our payment processing speed increased by 300%. It's like our transactions travel at warp speed!", name: "Samantha Cosmos", title: "CTO, Galactic Commerce", }, { quote: "The analytics dashboard provides insights we never thought possible. It's like seeing into the future of our business.", name: "Marcus Nova", title: "CFO, Stardust Solutions", }, ] [V0_FILE]typescriptreact:file="components/pricing-section.tsx" import { Button } from "@/components/ui/button" import { Check } from "lucide-react" export function PricingSection() { return (

Universal Pricing

Choose the perfect plan for your business needs, from small startups to galactic enterprises.

{pricingPlans.map((plan, index) => (

{plan.name}

{plan.description}

${plan.price} /month

{feature}

))}

) } const pricingPlans = [ { name: "Startup", description: "Perfect for small businesses just launching into orbit", price: 49, features: [ "Process up to 1,000 transactions/month", "Basic analytics dashboard", "Email support", "2 payment methods", "Standard security", ], featured: false, }, { name: "Business", description: "For growing businesses ready to explore new galaxies", price: 99, features: [ "Process up to 10,000 transactions/month", "Advanced analytics dashboard", "Priority support", "All payment methods", "Enhanced security features", "Custom checkout experience", ], featured: true, }, { name: "Enterprise", description: "For galactic-scale operations with universal reach", price: 249, features: [ "Unlimited transactions", "Real-time analytics", "24/7 dedicated support", "All payment methods", "Quantum-grade security", "Custom integration support", "Multi-currency support", ], featured: false, }, ] [V0_FILE]typescriptreact:file="app/page.tsx" import { HeroSection } from "@/components/hero-section" import { FeaturesSection } from "@/components/features-section" import { TestimonialsSection } from "@/components/testimonials-section" import { PricingSection } from "@/components/pricing-section" export default function Home() { return (

) }

About

Tags

Share

More from desirelovell

More Templates Like This

About

Tags

Share

About

Tags

Share

More from desirelovell

More Templates Like This