[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "framer-motion": "12.23.24", "motion": "12.23.24" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/features-section.tsx" isEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Zap, Shield, BarChart3, Workflow, Globe, Lock } from "lucide-react" import { motion } from "framer-motion" export function FeaturesSection() { const features = [ { icon: Zap, title: "Lightning Fast", description: "Built for speed with edge computing and global CDN. Your users get instant responses every time.", }, { icon: Shield, title: "Enterprise Security", description: "Bank-level encryption and compliance with SOC 2, GDPR, and HIPAA standards.", }, { icon: BarChart3, title: "Advanced Analytics", description: "Real-time insights and detailed reports to track performance and make data-driven decisions.", }, { icon: Workflow, title: "Seamless Integration", description: "Connect with your favorite tools through our extensive API and pre-built integrations.", }, { icon: Globe, title: "Global Scale", description: "Deploy worldwide with automatic scaling and 99.9% uptime guarantee.", }, { icon: Lock, title: "Privacy First", description: "Your data stays yours. We never sell or share your information with third parties.", }, ] return (

Everything you need to succeed

Powerful features designed to help you build, ship, and scale your products faster than ever before.

{features.map((feature, index) => { const Icon = feature.icon return (

{feature.title}

{feature.description}

) })}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap"); @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.569 0.196 253.5); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.569 0.196 253.5); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.569 0.196 253.5); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.569 0.196 253.5); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } /* Properly configure Satoshi font for Tailwind CSS v4 */ @theme inline { --font-display: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/shiny-button.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import "./shiny-button.css" interface ShinyButtonProps { children: React.ReactNode onClick?: () => void className?: string variant?: "primary" | "secondary" disabled?: boolean } export function ShinyButton({ children, onClick, className = "", variant = "primary", disabled = false, }: ShinyButtonProps) { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const [isHovered, setIsHovered] = useState(false) const buttonRef = useRef(null) const handleMouseMove = (e: React.MouseEvent) => { if (buttonRef.current) { const rect = buttonRef.current.getBoundingClientRect() setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) } } return ( ) } [V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { ShinyButton } from "@/components/ui/shiny-button" import { motion } from "framer-motion" export function Navigation() { return (

YourSaaS

Features Pricing About

) } [V0_FILE]typescriptreact:file="components/social-proof.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" export function SocialProof() { const companies = [ { name: "DOMO", width: 100 }, { name: "netradyne", width: 140 }, { name: "SOPHOS", width: 140 }, { name: "RobCo", width: 120 }, ] return (

{/* Left side: Trust text */}

Trusted by over 2,000
vendors & buyers

{/* Right side: Company logos in a horizontal row */}

{companies.map((company, index) => ( {company.name} ))}

) } [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isMerged="true" "use client" import { motion } from "motion/react" import { TestimonialsColumn } from "@/components/ui/testimonials-column" const testimonials = [ { text: "This platform revolutionized our operations, streamlining our workflow and boosting productivity. The intuitive interface keeps our team efficient.", image: "https://randomuser.me/api/portraits/women/1.jpg", name: "Sarah Chen", role: "Operations Director", }, { text: "Implementation was seamless and the results were immediate. Our team adapted quickly thanks to the user-friendly design.", image: "https://randomuser.me/api/portraits/men/2.jpg", name: "Michael Rodriguez", role: "IT Manager", }, { text: "The support team is outstanding. They guided us through every step and continue to provide exceptional assistance.", image: "https://randomuser.me/api/portraits/women/3.jpg", name: "Emily Watson", role: "Customer Success Lead", }, { text: "This solution transformed how we work. The seamless integration and powerful features exceeded our expectations.", image: "https://randomuser.me/api/portraits/men/4.jpg", name: "David Kim", role: "CEO", }, { text: "The robust features and responsive support have made our workflow significantly more efficient and streamlined.", image: "https://randomuser.me/api/portraits/women/5.jpg", name: "Jessica Martinez", role: "Project Manager", }, { text: "Implementation exceeded our expectations. It streamlined our processes and improved overall business performance dramatically.", image: "https://randomuser.me/api/portraits/women/6.jpg", name: "Amanda Foster", role: "Business Analyst", }, { text: "The user-friendly design and powerful capabilities have transformed how our team collaborates and delivers results.", image: "https://randomuser.me/api/portraits/men/7.jpg", name: "James Wilson", role: "Marketing Director", }, { text: "They delivered a solution that truly understood our needs and enhanced our operations beyond what we imagined possible.", image: "https://randomuser.me/api/portraits/women/8.jpg", name: "Rachel Thompson", role: "Sales Manager", }, { text: "Our productivity and efficiency improved dramatically. This platform has become essential to our daily operations.", image: "https://randomuser.me/api/portraits/men/9.jpg", name: "Daniel Park", role: "Operations Manager", }, ] const firstColumn = testimonials.slice(0, 3) const secondColumn = testimonials.slice(3, 6) const thirdColumn = testimonials.slice(6, 9) export function TestimonialsSection() { return (

Testimonials

What our users say

See what our customers have to say about us.

) } [V0_FILE]typescriptreact:file="components/faq-section.tsx" isMerged="true" "use client" import { motion } from "motion/react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" const faqs = [ { question: "What is your pricing model?", answer: "We offer flexible pricing plans to suit businesses of all sizes. Our plans start with a free tier for small teams, and scale up based on your needs. Contact us for custom enterprise pricing.", }, { question: "How long does implementation take?", answer: "Most teams are up and running within 24 hours. Our streamlined onboarding process and dedicated support team ensure a smooth transition with minimal disruption to your workflow.", }, { question: "Do you offer customer support?", answer: "Yes! We provide 24/7 customer support via email, chat, and phone. Our dedicated support team is always ready to help you get the most out of our platform.", }, { question: "Can I integrate with my existing tools?", answer: "Absolutely. We offer seamless integrations with popular tools like Slack, Google Workspace, Microsoft 365, and many more. Our API also allows for custom integrations.", }, { question: "Is my data secure?", answer: "Security is our top priority. We use enterprise-grade encryption, regular security audits, and comply with industry standards including SOC 2, GDPR, and HIPAA.", }, { question: "Can I cancel my subscription anytime?", answer: "Yes, you can cancel your subscription at any time with no penalties. We believe in earning your business every month, not locking you into long-term contracts.", }, ] export function FAQSection() { return (

FAQ

Frequently asked questions

Everything you need to know about our platform.

{faqs.map((faq, index) => ( {faq.question} {faq.answer} ))}

) } [V0_FILE]typescriptreact:file="components/ui/testimonials-column.tsx" isEdit="true" isMerged="true" "use client" import React from "react" import { motion } from "motion/react" interface Testimonial { text: string image: string name: string role: string } interface TestimonialsColumnProps { className?: string testimonials: Testimonial[] duration?: number } export const TestimonialsColumn = (props: TestimonialsColumnProps) => { return (

{[ ...new Array(2).fill(0).map((_, index) => ( {props.testimonials.map(({ text, image, name, role }, i) => (

{text}

{name}

{role}

))} )), ]}

) } [V0_FILE]css:file="components/ui/shiny-button.css" isEdit="true" isQuickEdit="true" isMerged="true" @property --gradient-angle { syntax: ""; initial-value: 0deg; inherits: false; } @property --gradient-angle-offset { syntax: ""; initial-value: 0deg; inherits: false; } @property --gradient-percent { syntax: ""; initial-value: 5%; inherits: false; } @property --gradient-shine { syntax: ""; initial-value: white; inherits: false; } .shiny-cta { /* Updated colors to blue-500 and related blues */ --shiny-cta-bg: #3b82f6; --shiny-cta-bg-subtle: #2563eb; --shiny-cta-fg: #ffffff; --shiny-cta-highlight: #60a5fa; --shiny-cta-highlight-subtle: #bfdbfe; --animation: gradient-angle linear infinite; --duration: 3s; --shadow-size: 2px; --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1); isolation: isolate; position: relative; overflow: hidden; cursor: pointer; outline-offset: 4px; padding: 0.75rem 1.5rem; font-family: "Outfit", "Inter", sans-serif; font-size: 0.9375rem; line-height: 1.2; font-weight: 500; border: 0.5px solid var(--shiny-cta-bg); border-radius: 16px; color: var(--shiny-cta-fg); background: var(--shiny-cta-bg); box-shadow: inset 0 0 0 1px var(--shiny-cta-bg), inset 0 -3px 8px 0 rgba(191, 219, 254, 0.6), 0 4px 12px -2px rgba(59, 130, 246, 0.25); transition: var(--transition); transition-property: background, border-color, box-shadow; } .shiny-cta.secondary { --shiny-cta-bg: #e5e7eb; --shiny-cta-bg-subtle: #d1d5db; --shiny-cta-fg: #001523; --shiny-cta-highlight: #bfdbfe; --shiny-cta-highlight-subtle: #dbeafe; border-color: #9ca3af; } .shiny-cta:disabled { opacity: 0.5; cursor: not-allowed; } .shiny-cta::before, .shiny-cta::after, .shiny-cta span::before { content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; } .shiny-cta:active { translate: 0 1px; } .shiny-cta::before { width: 100%; height: 100%; --dot-size: 1.5px; --dot-space: 8px; background: radial-gradient( circle at var(--dot-space) var(--dot-space), rgba(255, 255, 255, 0.8) var(--dot-size), transparent var(--dot-size) ); background-size: var(--dot-space) var(--dot-space); background-position: 0 0; border-radius: inherit; opacity: 0; z-index: 2; pointer-events: none; mask-image: radial-gradient(circle 80px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); transition: opacity 0.3s ease; } .shiny-cta::after { width: 100%; aspect-ratio: 1; background: linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent); mask-image: radial-gradient(circle at bottom, transparent 40%, black); opacity: 0; transition: opacity var(--transition); animation: none; } .shiny-cta span { z-index: 1; /* Add flex layout to keep icon and text on one line */ display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .shiny-cta span::before { --size: calc(100% + 1rem); width: var(--size); height: var(--size); box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight); opacity: 0; transition: opacity var(--transition); animation: calc(var(--duration) * 1.5) breathe linear infinite; } .shiny-cta:is(:hover, :focus-visible) { background: var(--shiny-cta-bg); border-color: var(--shiny-cta-bg); box-shadow: inset 0 0 0 1px var(--shiny-cta-bg), inset 0 -30px 40px -20px rgba(191, 219, 254, 0.35), 0 4px 16px -2px rgba(59, 130, 246, 0.35); } .shiny-cta:is(:hover, :focus-visible)::before { opacity: 1; } .shiny-cta:is(:hover, :focus-visible)::after { opacity: 0; } .shiny-cta:is(:hover, :focus-visible) span::before { opacity: 1; } .shiny-cta:disabled:is(:hover, :focus-visible) { background: var(--shiny-cta-bg); border-color: var(--shiny-cta-bg-subtle); box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle); } .shiny-cta:disabled:is(:hover, :focus-visible)::before, .shiny-cta:disabled:is(:hover, :focus-visible)::after { opacity: 0; animation: none; } .shiny-cta.secondary:is(:hover, :focus-visible) { background: #e5e7eb; border-color: #9ca3af; box-shadow: inset 0 0 0 1px #9ca3af, inset 0 -30px 40px -20px rgba(191, 219, 254, 0.4); } .shiny-cta.secondary:is(:hover, :focus-visible)::before { opacity: 0.6; } .shiny-cta.secondary::before { background: radial-gradient( circle at var(--dot-space) var(--dot-space), rgba(0, 0, 0, 0.3) var(--dot-size), transparent var(--dot-size) ); background-size: var(--dot-space) var(--dot-space); } @keyframes gradient-angle { to { --gradient-angle: 360deg; } } @keyframes shimmer { to { rotate: 360deg; } } @keyframes breathe { from, to { scale: 1; } 50% { scale: 1.2; } } [V0_FILE]typescriptreact:file="components/pricing-section.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Check } from "lucide-react" import { Card } from "@/components/ui/card" import { ShinyButton } from "@/components/ui/shiny-button" const pricingTiers = [ { name: "Starter", price: "$29", period: "/month", description: "Perfect for individuals and small teams getting started", features: [ "Up to 5 team members", "10GB storage", "Basic analytics", "Email support", "Core features", "Mobile app access", ], cta: "Start free trial", popular: false, }, { name: "Professional", price: "$99", period: "/month", description: "For growing teams that need advanced features", features: [ "Up to 25 team members", "100GB storage", "Advanced analytics", "Priority support", "All features", "API access", "Custom integrations", "Advanced security", ], cta: "Start free trial", popular: true, }, { name: "Enterprise", price: "Custom", period: "", description: "For large organizations with custom needs", features: [ "Unlimited team members", "Unlimited storage", "Custom analytics", "24/7 dedicated support", "All features", "Custom API access", "White-label options", "SLA guarantee", "Dedicated account manager", ], cta: "Contact sales", popular: false, }, ] export function PricingSection() { return (

Simple, transparent pricing

Choose the perfect plan for your team. All plans include a 14-day free trial.

{pricingTiers.map((tier, index) => ( {tier.popular && (

{tier.name}

{tier.description}

{tier.price} {tier.period && {tier.period}}

{feature}

{tier.cta} ))}

) } [V0_FILE]typescriptreact:file="components/how-it-works-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { CreditCard, TrendingUp, Zap, Brain, Activity, CheckCircle2, ArrowUpRight, BarChart3 } from "lucide-react" import { Card } from "@/components/ui/card" export function HowItWorksSection() { const steps = [ { icon: CreditCard, title: "Connect Your Tools", description: "Integrate with your existing workflow in minutes. Our platform seamlessly connects with the tools you already use every day.", visual: (

Enterprise Plan

Premium Access

$45,000

Monthly $3,750 / month

Quarterly $11,250 / quarter

), }, { icon: TrendingUp, title: "AI-Powered Automation", description: "Let our intelligent system handle the heavy lifting. Automate repetitive tasks and focus on what matters most to your business.", visual: (

AI Assistant

Active

Invoice Processing

Automated 247 invoices

Customer Onboarding

32 new accounts created

Time saved this week: 18.5 hours

), }, { icon: Zap, title: "Scale With Confidence", description: "Close high-velocity transactions in minutes, not weeks. Our platform is built to handle your growth without compromising on speed or reliability.", visual: (

Growth Metrics

+24%

Transaction Volume $2.4M

Active Deals 156

Avg. Close Time 4.2 days

Success Rate

94%

Uptime

99.9%

), }, ] return (

How It Works

Get started in three simple steps and transform your workflow

{steps.map((step, index) => (

{step.visual}

{step.title}

{step.description}

))}

) } [V0_FILE]typescriptreact:file="components/features-slideshow-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" const slides = [ { id: 1, title: "Vendors & Manufacturers", description: "Get paid upfront, empower customers with flexible payments, and leave the collections burden to us. Partner channel approved.", image: "/placeholder.svg?height=400&width=600", }, { id: 2, title: "Reseller Partners", description: "Cut closing from weeks to minutes with easy financing, seamless checkout, and faster payouts.", image: "/placeholder.svg?height=400&width=600", }, { id: 3, title: "Buyers", description: "Allow your customers to access the technology and services they need to be successful with flexible payment options.", image: "/placeholder.svg?height=400&width=600", }, { id: 4, title: "Enterprise Solutions", description: "Scale your business with enterprise-grade financing solutions, custom terms, and dedicated support for high-volume transactions.", image: "/placeholder.svg?height=400&width=600", }, ] export function FeaturesSlideshowSection() { const [currentIndex, setCurrentIndex] = useState(0) const nextSlide = () => { setCurrentIndex((prev) => (prev + 1) % slides.length) } const prevSlide = () => { setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length) } // Calculate which slides to show (current + next 1 or 2 depending on screen size) const getVisibleSlides = () => { const visible = [] for (let i = 0; i < 3; i++) { visible.push(slides[(currentIndex + i) % slides.length]) } return visible } return (

Win-win for your business, partners, and customers

{getVisibleSlides().map((slide) => (

{slide.title}

{slide.description}

))}

{/* Slide indicators */}

{slides.map((_, idx) => (

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Navigation } from "@/components/navigation" import { HeroSection } from "@/components/hero-section" import { SocialProof } from "@/components/social-proof" import { HowItWorksSection } from "@/components/how-it-works-section" import { FeaturesSection } from "@/components/features-section" import { FeaturesSlideshowSection } from "@/components/features-slideshow-section" import { TestimonialsSection } from "@/components/testimonials-section" import { PricingSection } from "@/components/pricing-section" import { FAQSection } from "@/components/faq-section" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true" "use client" import { ShinyButton } from "@/components/ui/shiny-button" import { ArrowRight } from "lucide-react" import { motion } from "framer-motion" export function HeroSection() { return (

{/* Grid Background with Alpha Mask */}

{/* Left Column - Content */}

The fastest way to finance SaaS and hardware

Choose Capchase as your financing partner to close deals faster and increase your earnings. Approve your buyer, configure your offer, and win your deal in minutes.

Book a call {/* Right Column - Chat Interface Mockup */}

{/* Buyer Message */}

Buyer

Hey, can I pay monthly for this contract?

{/* Vendor Message */}

Vendor

Sure, here's the proposal: capchase.com/73d6

{/* Capchase Message 1 */}

Capchase

Catalog AI accepted proposal

{/* Capchase Message 2 */}

Capchase

Catalog AI completed payment link

) }

About

Tags

Share

About

Tags

Share

More from mikeyi2a

More Templates Like This

About

Tags

Share

About

Tags

Share

More from mikeyi2a

More Templates Like This