470 lines
18 KiB
TypeScript
470 lines
18 KiB
TypeScript
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Navigation } from "../components/Navigation";
|
|
import { Footer } from "../components/Footer";
|
|
import { HeroBanner } from "../components/HeroBanner";
|
|
import { ProcessSection } from "../components/ProcessSection";
|
|
import { WhyChooseWDI } from "../components/WhyChooseWDI";
|
|
import { FAQSection } from "../components/FAQSection";
|
|
import { SplitCallToAction } from "../components/SplitCallToAction";
|
|
import { Card, CardContent } from "../components/ui/card";
|
|
import { Badge } from "../components/ui/badge";
|
|
import { Button } from "../components/ui/button";
|
|
import {
|
|
Search,
|
|
MapPin,
|
|
CreditCard,
|
|
Users,
|
|
Calendar,
|
|
QrCode,
|
|
BarChart3,
|
|
Target,
|
|
CheckCircle,
|
|
Star,
|
|
Zap,
|
|
Shield,
|
|
Globe,
|
|
Award,
|
|
Bell,
|
|
} from "lucide-react";
|
|
|
|
// Problem Solution Block Component
|
|
const ProblemSolutionBlock = () => {
|
|
return (
|
|
<section className="py-20 bg-[#0E0E0E]">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-6xl mx-auto"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold text-center mb-16">
|
|
<span className="text-white">
|
|
Addressing the Core Challenges of{" "}
|
|
</span>
|
|
<span className="text-[#E5195E]">Event & Ticketing Solutions</span>
|
|
</h2>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-6"
|
|
>
|
|
<div className="bg-red-500/10 border border-red-500/20 rounded-2xl p-8">
|
|
<h3 className="text-xl font-semibold text-white mb-4 flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-red-500/20 rounded-lg flex items-center justify-center">
|
|
<Target className="w-4 h-4 text-red-400" />
|
|
</div>
|
|
The Challenge
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
Managing events and selling tickets efficiently requires
|
|
platforms that can handle high transaction volumes, provide
|
|
secure ticketing and access control, and offer intuitive
|
|
experiences for both organizers and attendees. Challenges
|
|
include fraud prevention, real-time inventory management, and
|
|
engaging audiences before, during, and after events.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-6"
|
|
>
|
|
<div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8">
|
|
<h3 className="text-xl font-semibold text-white mb-4 flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-green-500/20 rounded-lg flex items-center justify-center">
|
|
<CheckCircle className="w-4 h-4 text-green-400" />
|
|
</div>
|
|
Our Event & Ticketing Solution
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
WDI specializes in building comprehensive event and ticketing
|
|
platforms. We create solutions for event discovery, secure
|
|
online ticket sales, attendee registration, and venue
|
|
management, focusing on user experience, scalability, robust
|
|
security, and powerful analytics to ensure successful events
|
|
and satisfied attendees.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Features Grid Component
|
|
const IconWithDescriptionGrid = () => {
|
|
const features = [
|
|
{
|
|
icon: Search,
|
|
title: "Event Listing & Discovery",
|
|
description:
|
|
"Intuitive search, filtering, and categorization for users to find events by genre, date, location, and popularity.",
|
|
},
|
|
{
|
|
icon: CreditCard,
|
|
title: "Secure Online Ticketing & Sales",
|
|
description:
|
|
"Seamless ticket purchase workflows, secure payment gateway integrations, and support for various ticket types (e.g., VIP, early bird).",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Attendee Registration & Management",
|
|
description:
|
|
"Tools for collecting attendee information, sending confirmations, and managing attendee lists.",
|
|
},
|
|
{
|
|
icon: MapPin,
|
|
title: "Venue Management & Seating Maps",
|
|
description:
|
|
"Interactive seating charts, capacity management, and booking for specific areas within a venue.",
|
|
},
|
|
{
|
|
icon: QrCode,
|
|
title: "Ticket Validation & Access Control",
|
|
description:
|
|
"Mobile scanning solutions (QR/barcode), digital check-in, and fraud prevention mechanisms at entry points.",
|
|
},
|
|
{
|
|
icon: Bell,
|
|
title: "Event Promotion & Marketing Tools",
|
|
description:
|
|
"Integrated features for email campaigns, social media sharing, and tracking marketing effectiveness.",
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: "Real-time Analytics & Reporting",
|
|
description:
|
|
"Dashboards for event organizers to monitor ticket sales, attendance rates, and revenue in real time.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
|
|
Powerful Features for Your Event & Ticketing Solutions
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Comprehensive tools to create seamless event experiences that
|
|
maximize attendance and engagement.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{features.map((feature, index) => {
|
|
const IconComponent = feature.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-gray-900/50 border-gray-800 hover:border-[#E5195E]/30 transition-all duration-300 h-full">
|
|
<CardContent className="p-8">
|
|
<div className="w-12 h-12 bg-[#E5195E]/20 rounded-lg flex items-center justify-center mb-6">
|
|
<IconComponent className="w-6 h-6 text-[#E5195E]" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Three Column Feature Block Component
|
|
const ThreeColumnFeatureBlock = () => {
|
|
const advantages = [
|
|
{
|
|
icon: Zap,
|
|
title: "High-Volume Transaction Handling",
|
|
description:
|
|
"Building robust systems designed to manage sudden surges in ticket sales without outages.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Advanced Security & Fraud Prevention",
|
|
description:
|
|
"Implementing sophisticated measures to protect against ticket fraud and secure payment data.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Seamless Attendee Experience",
|
|
description:
|
|
"Focusing on intuitive booking flows, easy digital ticket access, and smooth check-in processes.",
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: "Customization & Integration",
|
|
description:
|
|
"Tailoring platforms to unique event needs and integrating with CRM, marketing, or venue management systems.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-[#0E0E0E]">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
|
|
Why Partner with WDI for Event & Ticketing Solution Development?
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Leverage our expertise to create event platforms that truly serve
|
|
organizers and delight attendees.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{advantages.map((advantage, index) => {
|
|
const IconComponent = advantage.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<div className="w-16 h-16 bg-[#E5195E]/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-[#E5195E]" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{advantage.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
{advantage.description}
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Case Study Component
|
|
const CaseStudyHighlightGrid = () => {
|
|
const caseStudies = [
|
|
{
|
|
title: "Large-Scale Music Festival Ticketing Platform",
|
|
problem:
|
|
"An event organizer needed a secure and scalable platform to handle millions of ticket sales for a major music festival.",
|
|
solution:
|
|
"WDI developed a custom ticketing platform with advanced fraud detection, queue management during peak sales, and mobile check-in.",
|
|
results:
|
|
"Successfully managed over 2 million ticket sales with zero security breaches and a smooth check-in process for attendees.",
|
|
metrics: ["2M+ Tickets", "Zero Breaches", "Music Festival"],
|
|
},
|
|
{
|
|
title: "Corporate Event Management & Registration System",
|
|
problem:
|
|
"A professional events company struggled with manual registration and attendee management for its numerous corporate conferences.",
|
|
solution:
|
|
"Built an integrated event management system featuring online registration, personalized agendas, networking tools, and post-event analytics.",
|
|
results:
|
|
"Reduced registration time by 50% and improved attendee engagement by 20% through in-app features.",
|
|
metrics: [
|
|
"50% ↓ Registration Time",
|
|
"20% ↑ Engagement",
|
|
"Corporate Events",
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
|
|
Event & Ticketing Solution Success Stories
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Real results from our event platform implementations that
|
|
transformed event management.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-8">
|
|
{caseStudies.map((study, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.2 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Card className="bg-gray-900/50 border-gray-800 hover:border-[#E5195E]/30 transition-all duration-300 h-full">
|
|
<CardContent className="p-8">
|
|
<div className="flex gap-2 mb-4">
|
|
{study.metrics.map((metric, i) => (
|
|
<Badge
|
|
key={i}
|
|
variant="secondary"
|
|
className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30"
|
|
>
|
|
{metric}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{study.title}
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h4 className="font-medium text-gray-300 mb-2">
|
|
Problem:
|
|
</h4>
|
|
<p className="text-gray-400 text-sm">{study.problem}</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-300 mb-2">
|
|
Solution:
|
|
</h4>
|
|
<p className="text-gray-400 text-sm">{study.solution}</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-300 mb-2">
|
|
Results:
|
|
</h4>
|
|
<p className="text-gray-400 text-sm">{study.results}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// FAQ Data
|
|
const eventTicketingFAQs = [
|
|
{
|
|
question:
|
|
"How do you ensure scalability for high-volume ticket sales for popular events?",
|
|
answer:
|
|
"We implement cloud-native architectures with auto-scaling, load balancing, queue management systems, and CDN integration. Our platforms are designed to handle millions of concurrent users during peak sales periods without performance degradation.",
|
|
},
|
|
{
|
|
question:
|
|
"What security measures do you implement to prevent ticket fraud and protect payment data?",
|
|
answer:
|
|
"We implement advanced fraud detection algorithms, blockchain-based ticket authentication, PCI DSS compliant payment processing, encrypted QR/barcode generation, and real-time monitoring systems to prevent fraudulent activities.",
|
|
},
|
|
{
|
|
question:
|
|
"Can you integrate with venue management systems or access control hardware?",
|
|
answer:
|
|
"Yes, we have extensive experience integrating with venue management systems, turnstile hardware, barcode scanners, RFID readers, and mobile check-in devices. We ensure seamless data flow between platforms and physical access control systems.",
|
|
},
|
|
{
|
|
question:
|
|
"Do you offer solutions for virtual or hybrid events in addition to in-person?",
|
|
answer:
|
|
"Absolutely! We develop comprehensive solutions for virtual events, hybrid experiences, and live streaming integration. Our platforms support virtual networking, online presentations, interactive Q&A, and digital attendance tracking.",
|
|
},
|
|
{
|
|
question:
|
|
"What kind of analytics and reporting do you provide for event organizers?",
|
|
answer:
|
|
"Our platforms provide real-time dashboards with ticket sales analytics, attendance tracking, revenue reporting, demographic insights, marketing campaign effectiveness, and post-event surveys. All data is presented in intuitive, actionable formats.",
|
|
},
|
|
];
|
|
|
|
export const EventTicketingSolutions = () => {
|
|
return (
|
|
<div className="min-h-screen bg-[#0E0E0E]">
|
|
<Navigation />
|
|
|
|
<HeroBanner
|
|
category="Commerce & Consumer"
|
|
title="Event & Ticketing Solutions"
|
|
description="Create seamless experiences for event discovery, ticket sales, and attendee management with robust and scalable event and ticketing platforms."
|
|
primaryCTA={{
|
|
text: "Get a Free Consultation",
|
|
// href: "/contact/schedule-a-discovery-call"
|
|
href: "/start-a-project",
|
|
}}
|
|
secondaryCTA={{
|
|
text: "View EventTech Case Studies",
|
|
href: "/case-studies",
|
|
}}
|
|
/>
|
|
|
|
<ProblemSolutionBlock />
|
|
|
|
<IconWithDescriptionGrid />
|
|
|
|
<ThreeColumnFeatureBlock />
|
|
|
|
<div className="bg-[#0E0E0E]">
|
|
<ProcessSection />
|
|
</div>
|
|
|
|
<CaseStudyHighlightGrid />
|
|
|
|
<div className="bg-[#0E0E0E]">
|
|
<FAQSection
|
|
title="Event & Ticketing Solution FAQs"
|
|
subtitle="Get answers to common questions about our event and ticketing platform development services."
|
|
faqs={eventTicketingFAQs}
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-black">
|
|
<SplitCallToAction />
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|