[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowRight, ChevronDown, Headphones, Shield, Zap, Users, Mail, BarChart3, Clock, AlertTriangle, BookOpen, MessageSquare, Settings, } from "lucide-react" import { motion } from "framer-motion" const fadeInUp = { initial: { opacity: 0, y: 60 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.6, ease: "easeOut" }, } const fadeInLeft = { initial: { opacity: 0, x: -60 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.6, ease: "easeOut" }, } const fadeInRight = { initial: { opacity: 0, x: 60 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.6, ease: "easeOut" }, } const staggerContainer = { animate: { transition: { staggerChildren: 0.1, }, }, } const scaleIn = { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut" }, } export default function HelpdeskLanding() { return (

{/* Background Effects */}

{/* Glassmorphism Header */}

SupportHub Pro

{/* Migration Banner */}

Migrating from{" "} Zendesk, Freshdesk, or ServiceNow?

{/* Social Proof */}

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

1000+ organizations trust SupportHub Pro

{/* New Feature Banner */}

NEW AI-powered smart routing + real-time feedback system

{/* Hero Section */}

Transform customer support into customer success The complete support management system for any organization. Streamline{" "} ticket management ,{" "} auto-escalation ,{" "} role-based security , and{" "} team collaboration {" "} in one powerful platform. {/* Ship Fast Banner */}

🚀 Ship fast, build fast, break fast, iterate fast • No worries about user requirements • Get real-time feedback from users

{/* Integration Section */} Integrates with your existing tools and workflows View all integrations {Array.from({ length: 12 }).map((_, i) => (

))}

{/* Dashboard Preview */}

Support Dashboard

Search tickets, users, knowledge base...

⌘K

{[ { title: "Open Tickets", value: "42", color: "purple" }, { title: "Urgent", value: "5", color: "red" }, { title: "Resolved Today", value: "28", color: "green" }, ].map((stat, i) => (

{stat.title}

{stat.value}

Last 24 hours

))}

{/* The Problem Section */}

PROBLEM Support Management is{" "} Chaotic! {[ { icon: , title: "Requests Get Lost", description: "Important queries slip through the cracks without proper tracking and follow-up systems.", }, { icon: , title: "Slow Response Times", description: "Manual processes and scattered communication lead to delayed responses and frustrated users.", }, { icon: , title: "Poor Team Coordination", description: "Lack of visibility into workload distribution creates confusion and duplicated efforts.", }, { icon: , title: "Security & Privacy Issues", description: "Without proper access controls, sensitive information can be exposed to wrong people.", }, { icon: , title: "Communication Chaos", description: "Support requests scattered across emails, chats, and multiple platforms create confusion.", }, { icon: , title: "No Performance Insights", description: "Difficult to measure team performance, user satisfaction, and identify improvement areas.", }, ].map((problem, index) => ( {problem.icon}

{problem.title}

{problem.description}

))}

{/* Services/Features Section */}

CORE FEATURES Everything you need for{" "} exceptional support From intelligent ticket routing to advanced analytics, we've built the complete support management solution for any organization.

{/* Row 1: Smart Ticket Management */}

Smart Ticket Management

AI-powered routing automatically assigns tickets to the right team members based on skills, workload, and priority. Auto-escalation ensures critical issues never get missed with real-time feedback loops.

{["Auto-routing", "Smart Escalation", "Real-time Feedback"].map((tag, i) => ( {tag} ))}

{[ { id: "#1234", title: "System Access Issue - Critical", priority: "High", assignee: "John D.", status: "In Progress", type: "IT", }, { id: "#1235", title: "Course Material Question", priority: "Low", assignee: "Sarah M.", status: "Resolved", type: "Education", }, { id: "#1236", title: "Product Feature Request", priority: "Medium", assignee: "Mike R.", status: "Pending", type: "Support", }, ].map((ticket, i) => (

{ticket.id} {ticket.title} {ticket.type}

{ticket.priority} {ticket.assignee}

))}

Role-Based Security

Advanced permission system with granular access controls for different user types and departments.

{["Admin Access", "Agent Permissions", "User Portal", "Department Controls"].map((item, i) => ( ✓ {item} ))}

{/* Row 2: Communication & Analytics */}

Real-time Analytics

Live insights into team performance, response times, user satisfaction, and feedback trends.

1.8min

Avg Response Time

Unified Communication Hub

Multi-channel support with email integration, live chat, knowledge base, and automated responses. Perfect for customer support, IT helpdesk, and educational institutions.

{["Multi-channel", "Auto-responses", "Knowledge Base", "Live Chat"].map((tag, i) => ( {tag} ))}

Communication Channels All Active

{[ { name: "Email Support", status: "42 new tickets", color: "purple", icon: "📧" }, { name: "Live Chat", status: "8 active chats", color: "green", icon: "💬" }, { name: "Knowledge Base", status: "156 articles viewed", color: "blue", icon: "📚" }, ].map((item, i) => (

{item.icon} {item.name}

{item.status} ))}

{/* Perfect For Section */}

PERFECT FOR ANY ORGANIZATION Built for{" "} every industry {[ { title: "IT & Tech Companies", description: "Internal helpdesk for technical support, system issues, and infrastructure management. Perfect for IT teams handling employee requests.", features: ["Technical ticket routing", "System monitoring alerts", "Asset management"], icon: , tickets: [ { id: "#1234", priority: "High", status: "Server Down", type: "Infrastructure" }, { id: "#1235", priority: "Medium", status: "Software Install", type: "Request" }, { id: "#1236", priority: "Low", status: "Password Reset", type: "Access" }, ], }, { title: "Educational Institutions", description: "Student support system for academic queries, course doubts, and administrative requests. Streamline communication between students and faculty.", features: ["Student query management", "Course support", "Faculty collaboration"], icon: , students: [ { name: "Alex Johnson", query: "Assignment Help", status: "Answered" }, { name: "Sarah Wilson", query: "Course Material", status: "In Progress" }, { name: "Mike Chen", query: "Exam Schedule", status: "Resolved" }, ], }, { title: "Customer Support Teams", description: "Complete customer service solution with multi-channel support, knowledge base, and satisfaction tracking for any business.", features: ["Multi-channel support", "Customer satisfaction", "Knowledge base"], icon: , channels: [ { name: "📧 Email Support", count: "24 tickets", status: "Active" }, { name: "💬 Live Chat", count: "8 conversations", status: "Online" }, { name: "📞 Phone Support", count: "12 calls", status: "Available" }, ], }, ].map((service, index) => ( {service.icon} {service.title} {service.description} {service.features.length > 0 && (

{service.features.map((feature, i) => ( ✓ {feature} ))}

)} {service.tickets && ( {service.tickets.map((ticket, i) => (

{ticket.id} {ticket.status}

{ticket.priority} ))} )} {service.students && ( {service.students.map((student, i) => (

{student.name} {student.query}

{student.status} ))} )} {service.channels && (

{service.channels.map((channel, i) => (

{channel.name} {channel.count}

{channel.status} ))}

)} ))}

{/* How It Works Section */}

HOW IT WORKS Ship fast, iterate{" "} faster Our streamlined setup process gets your support system running quickly, so you can start providing better service immediately and gather real-time feedback.

{[ { number: "1", title: "Setup Your Support Hub", description: "Configure your team, roles, and basic settings in under 5 minutes - no complex requirements needed", }, { number: "2", title: "Connect & Integrate", description: "Link your existing tools, email, and communication channels seamlessly with one-click integrations", }, { number: "3", title: "Start Supporting & Iterating", description: "Begin managing requests with intelligent routing, get real-time user feedback, and iterate fast", }, ].map((step, index) => ( {step.number}

{step.title}

{step.description}

))}

SupportHub Pro Setup

Quick Setup Progress 92% Complete

{[ { label: "Team Setup", status: "✓" }, { label: "Integrations", status: "✓" }, { label: "Permissions", status: "✓" }, { label: "Go Live", status: "..." }, ].map((item, i) => ( {item.label} {item.status} ))}

{/* Testimonials Section */}

TESTIMONIALS Loved by{" "} organizations See how different organizations are transforming their support operations with SupportHub Pro. {/* First Row - Moving Left */}

{/* First set of testimonials */} {[ { name: "David Martinez", title: "IT Director, TechFlow Solutions", content: "SupportHub Pro transformed our internal IT helpdesk. Response times dropped by 65% and our team can finally focus on strategic projects instead of chasing tickets.", avatar: "DM", }, { name: "Dr. Sarah Chen", title: "Dean of Student Affairs, Metro University", content: "Perfect for educational institutions! Students can easily submit queries about courses, assignments, and administrative issues. Faculty collaboration has never been smoother.", avatar: "SC", }, { name: "Michael Rodriguez", title: "Customer Success Manager, CloudFirst", content: "The multi-channel support is incredible. Email, chat, knowledge base - everything in one place. Our customer satisfaction scores improved by 40%.", avatar: "MR", }, { name: "Jennifer Park", title: "Operations Manager, StartupHub", content: "Ship fast, iterate fast - that's exactly what we needed. The real-time feedback system helps us understand user needs instantly and improve continuously.", avatar: "JP", }, { name: "Robert Kim", title: "Help Desk Supervisor, Enterprise Corp", content: "The role-based security is enterprise-grade. Different departments have appropriate access levels, and sensitive information stays protected.", avatar: "RK", }, ].map((testimonial, index) => (

{testimonial.avatar}

{testimonial.name}

{testimonial.title}

{testimonial.content}

))} {/* Duplicate set for seamless loop */} {[ { name: "David Martinez", title: "IT Director, TechFlow Solutions", content: "SupportHub Pro transformed our internal IT helpdesk. Response times dropped by 65% and our team can finally focus on strategic projects instead of chasing tickets.", avatar: "DM", }, { name: "Dr. Sarah Chen", title: "Dean of Student Affairs, Metro University", content: "Perfect for educational institutions! Students can easily submit queries about courses, assignments, and administrative issues. Faculty collaboration has never been smoother.", avatar: "SC", }, { name: "Michael Rodriguez", title: "Customer Success Manager, CloudFirst", content: "The multi-channel support is incredible. Email, chat, knowledge base - everything in one place. Our customer satisfaction scores improved by 40%.", avatar: "MR", }, { name: "Jennifer Park", title: "Operations Manager, StartupHub", content: "Ship fast, iterate fast - that's exactly what we needed. The real-time feedback system helps us understand user needs instantly and improve continuously.", avatar: "JP", }, { name: "Robert Kim", title: "Help Desk Supervisor, Enterprise Corp", content: "The role-based security is enterprise-grade. Different departments have appropriate access levels, and sensitive information stays protected.", avatar: "RK", }, ].map((testimonial, index) => (

{testimonial.avatar}

{testimonial.name}

{testimonial.title}

{testimonial.content}

{testimonial.avatar}

{testimonial.name}

{testimonial.title}

{testimonial.content}

))}

{/* Second Row - Moving Right */}

{/* Second set of testimonials */} {[ { name: "Lisa Thompson", title: "Student Services Coordinator, Tech Institute", content: "Students love the knowledge base feature. Common questions about enrollment, courses, and campus services are answered instantly, reducing our workload by 50%.", avatar: "LT", }, { name: "James Wilson", title: "Support Team Lead, SaaS Company", content: "The auto-escalation ensures no customer issue gets forgotten. Critical problems reach the right people immediately, and our SLA compliance is now 99.8%.", avatar: "JW", }, { name: "Amanda Foster", title: "IT Manager, Healthcare Group", content: "Security and compliance are crucial in healthcare. The role-based permissions and audit trails give us the control and visibility we need.", avatar: "AF", }, { name: "Carlos Mendez", title: "Customer Experience Director, E-commerce", content: "Real-time feedback collection helps us understand customer pain points immediately. We can iterate and improve our service continuously.", avatar: "CM", }, { name: "Rachel Green", title: "Academic Support Manager, Online University", content: "Managing student queries across multiple courses and programs was chaotic. Now everything is organized, tracked, and resolved efficiently.", avatar: "RG", }, ].map((testimonial, index) => (

{testimonial.avatar}

{testimonial.name}

{testimonial.title}

{testimonial.content}

))} {/* Duplicate set for seamless loop */} {[ { name: "Lisa Thompson", title: "Student Services Coordinator, Tech Institute", content: "Students love the knowledge base feature. Common questions about enrollment, courses, and campus services are answered instantly, reducing our workload by 50%.", avatar: "LT", }, { name: "James Wilson", title: "Support Team Lead, SaaS Company", content: "The auto-escalation ensures no customer issue gets forgotten. Critical problems reach the right people immediately, and our SLA compliance is now 99.8%.", avatar: "JW", }, { name: "Amanda Foster", title: "IT Manager, Healthcare Group", content: "Security and compliance are crucial in healthcare. The role-based permissions and audit trails give us the control and visibility we need.", avatar: "AF", }, { name: "Carlos Mendez", title: "Customer Experience Director, E-commerce", content: "Real-time feedback collection helps us understand customer pain points immediately. We can iterate and improve our service continuously.", avatar: "CM", }, { name: "Rachel Green", title: "Academic Support Manager, Online University", content: "Managing student queries across multiple courses and programs was chaotic. Now everything is organized, tracked, and resolved efficiently.", avatar: "RG", }, ].map((testimonial, index) => (

{testimonial.avatar}

{testimonial.name}

{testimonial.title}

{testimonial.content}

))}

{/* FAQ Section */}

Frequently asked{" "} questions {[ { question: "Can SupportHub Pro work for different types of organizations?", answer: "Our platform is designed for versatility - from IT helpdesks and customer support teams to educational institutions managing student queries. The role-based permissions and customizable workflows adapt to any organization's needs.", }, { question: "How does the 'ship fast, iterate fast' approach work?", answer: "You can get started in minutes without worrying about complex user requirements upfront. Our real-time feedback system captures user insights as you go, allowing you to iterate and improve your support processes continuously based on actual usage data.", }, { question: "What makes the auto-escalation feature special?", answer: "Our intelligent escalation monitors ticket priority, response times, and SLA requirements. When thresholds are exceeded, tickets automatically escalate to appropriate team members with instant notifications, ensuring critical issues never get missed.", }, { question: "Is the platform suitable for educational institutions?", answer: "Yes! Educational institutions love our platform for managing student queries, course doubts, and administrative requests. The knowledge base reduces repetitive questions, and faculty can collaborate efficiently on student support.", }, { question: "How secure is the role-based access system?", answer: "We provide enterprise-grade security with granular permission controls. You can set different access levels for admins, agents, departments, and end-users, ensuring sensitive information is only accessible to authorized personnel.", }, { question: "Can I migrate from my current support system?", answer: "Yes! We provide free migration assistance for all plans. Our team helps transfer your tickets, users, and configurations from systems like Zendesk, Freshdesk, ServiceNow, and others with minimal downtime.", }, ].map((faq, index) => (

{faq.question}

{faq.answer}

))}

{/* CTA Section */}

Ready to transform your{" "} support operations? Join thousands of organizations who have streamlined their support operations with SupportHub Pro. Ship fast, get real-time feedback, and iterate continuously.

🚀 No complex setup • Real-time user feedback • Iterate at lightning speed

No credit card required • Setup in minutes • Cancel anytime

{/* Footer */}

{/* Brand Section */}

SupportHub Pro

The complete support management solution for any organization. Transform your support operations today.

{/* Product Links */}

Product

{["Features", "Pricing", "Integrations", "Security", "API"].map((link, i) => ( {link} ))}

{/* Use Cases Links */}

Use Cases

{["IT Helpdesk", "Customer Support", "Educational Support", "Healthcare", "E-commerce"].map( (link, i) => ( {link} ), )}

{/* Company Links */}

Company

{["About", "Careers", "Contact", "Privacy", "Terms"].map((link, i) => ( {link} ))}

{/* Copyright */}

) }