How It Works and Steps - Copy this React, Tailwind Component to your project

Task, revise the How It Works session by combinig a few templates together. Important: every template i give you is on purpose. I want a How It Works section beaituflly crafted that follows with Call To Action and then Step to get started First off, I like how this template section presented itself in the beginning. Please try to make this look incredible and appealing. 1. I like how this started, can you add arrows and a timer of 10 seconds that guide the user to the next stage ? <div className="relative mb-20"> {/* Process Navigation */} <div className="flex justify-between mb-12 relative"> {processes.map((process, index) => ( <button key={process.id} className={`relative z-10 flex flex-col items-center group ${ index === activeSection ? 'scale-110' : 'opacity-70' } transition-all duration-300`} onClick={() => setActiveSection(index)} > <div className={`w-16 h-16 rounded-full bg-gradient-to-r ${process.color} flex items-center justify-center text-white shadow-lg ${index === activeSection ? 'scale-110 ring-4 ring-white' : 'group-hover:scale-105'}`}> {process.icon} </div> <div className="absolute -bottom-6 w-max opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span className="text-sm font-medium text-gray-600">{process.title}</span> </div> </button> ))} {/* Connection Line */} <div className="absolute top-8 left-0 w-full h-0.5 bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 -z-0"></div> </div> {/* Active Process Content */} <div className="bg-white rounded-2xl shadow-xl p-8 transition-all duration-500"> <div className={`grid md:grid-cols-2 gap-8 items-center`}> {/* Content Side */} <div className="space-y-6"> <div className={`inline-flex items-center space-x-3 ${processes[activeSection].color} bg-clip-text text-transparent`}> {processes[activeSection].icon} <h3 className="text-2xl font-bold">{processes[activeSection].title}</h3> </div> <p className="text-gray-600 text-lg leading-relaxed"> {processes[activeSection].description} </p> <p className="text-gray-500 italic"> {processes[activeSection].details} </p> <div className="pt-4"> <h4 className="text-lg font-semibold text-gray-800 mb-3">Key Features:</h4> <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> {processes[activeSection].highlights.map((highlight, idx) => ( <div key={idx} className="flex items-center space-x-2"> <FaCheckCircle className="text-green-500 flex-shrink-0" /> <span className="text-gray-600">{highlight}</span> </div> ))} </div> </div> </div> {/* Visual Side */} <div className="relative h-full"> <div className="aspect-square w-full rounded-2xl bg-gradient-to-br from-gray-50 to-gray-100 p-8 flex items-center justify-center"> <div className={`transform transition-all duration-500 ${ isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0' }`}> <div className={`w-32 h-32 bg-gradient-to-r ${processes[activeSection].color} rounded-2xl shadow-lg flex items-center justify-center text-white text-6xl`}> {processes[activeSection].icon} </div> </div> </div> </div> </div> </div> </div> also include <div className="mt-32"> <h2 className="text-3xl font-extrabold text-gray-900 text-center sm:text-4xl"> Steps to Get Started </h2> <div className="mt-16 max-w-3xl mx-auto"> {steps.map((step, index) => ( <div key={index} className="flex items-start space-x-6 mb-12 last:mb-0" > <div className="flex-shrink-0 w-12 h-12 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"> {step.number} </div> <div> <h3 className="text-xl font-bold text-gray-900"> {step.title} </h3> <p className="mt-2 text-gray-600">{step.description}</p> </div> </div> ))} </div> </div> only use this content for a foundation. also i try to prevent cards and a creative compoent. Provide the Original Token: Simply share the original token from your ticket, and we’ll handle the rest—securely generating real-time rolling barcodes, validating tickets, and ensuring seamless resale. Generate Secure Tokenized Tickets: Our platform creates tokenized tickets with real-time rolling timestamps, ensuring each ticket is uniquely tied to the ticket holder. These dynamic tokens can bypass Ticketmaster's restrictions while maintaining security and validity. Validate Tickets with Real-Time Tools: The system uses time-based validation to verify ticket access instantly. Tickets are updated with rotating barcodes, ensuring they remain secure and usable even offline. Enable Resale Without Restrictions: Unlike traditional systems, our platform allows ticket holders to securely resell their tickets outside of closed marketplaces, providing users with the freedom to transfer tickets on their terms. Manage Ticket Access Seamlessly: Users can control access, track usage, and monitor activity logs through a comprehensive management suite, providing full transparency and control over their ticket sales and transfers. Deliver Transparency and Flexibility: With user-friendly tools, ticket holders can view logs, validate ticket authenticity, and manage their tickets without relying on proprietary platforms or third-party apps. This framework explains how your application offers a scalable and user-focused alternative to restrictive platforms like Ticketmaster, while addressing key pain points like validation, access control, and ticket resale. Let me know if this works or needs more refinement! 🚀 import React from "react"; import { FaTicketAlt, FaChartLine, FaCog, FaLock, FaUsersCog, FaClipboardCheck } from "react-icons/fa"; const TwoSectionDiv = () => { return ( <div className="min-h-screen bg-[#F5F9FD] p-6"> <div className="container mx-auto"> {/* Added Title and Subtitle Section */} <div className="text-center mb-12"> <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent pb-2">Our Features</h1> <p className="text-gray-600 text-lg mt-4 max-w-2xl mx-auto leading-relaxed"> Discover the powerful features that make our platform stand out from the rest </p> <div className="w-24 h-1 bg-gradient-to-r from-blue-600 to-purple-600 mx-auto mt-4 rounded-full"></div> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> {/* Card 1 */} <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out"> <div className="flex items-center gap-3 mb-4"> <FaTicketAlt className="text-3xl text-blue-500" /> <h2 className="text-2xl font-bold text-gray-800">Unlimited Ticket Generation</h2> </div> <ul className="list-disc pl-5 text-gray-600 space-y-2"> <li>Create unlimited valid event tickets</li> <li>Expand audience without constraints</li> <li>Flexible ticket generation system</li> </ul> </div> {/* Card 2 */} <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out"> <div className="flex items-center gap-3 mb-4"> <FaChartLine className="text-3xl text-purple-500" /> <h2 className="text-2xl font-bold text-gray-800">Real-Time Ticket Tracking</h2> </div> <ul className="list-disc pl-5 text-gray-600 space-y-2"> <li>Instant ticket authentication</li> <li>Secure event access control</li> <li>Seamless attendee verification</li> </ul> </div> {/* Card 3 */} <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out"> <div className="flex items-center gap-3 mb-4"> <FaClipboardCheck className="text-3xl text-green-500" /> <h2 className="text-2xl font-bold text-gray-800">Actionable Ticket Analytics</h2> </div> <ul className="list-disc pl-5 text-gray-600 space-y-2"> <li>Real-time usage insights</li> <li>Distribution pattern analysis</li> <li>Attendance trend monitoring</li> </ul> </div> {/* Card 4 */} <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out"> <div className="flex items-center gap-3 mb-4"> <FaCog className="text-3xl text-yellow-500" /> <h2 className="text-2xl font-bold text-gray-800">Feature-rich platform</h2> </div> <ul className="list-disc pl-5 text-gray-600 space-y-2"> <li>Essential features included</li> <li>Streamlined user experience</li> <li>Comprehensive functionality</li> </ul> </div> {/* Card 5 */} <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out"> <div className="flex items-center gap-3 mb-4"> <FaLock className="text-3xl text-red-500" /> <h2 className="text-2xl font-bold text-gray-800">Instant Access Control</h2> </div> <ul className="list-disc pl-5 text-gray-600 space-y-2"> <li>On-demand ticket activation</li> <li>Quick deactivation options</li> <li>Complete entry control</li> </ul> </div> {/* Card 6 */} <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out"> <div className="flex items-center gap-3 mb-4"> <FaUsersCog className="text-3xl text-indigo-500" /> <h2 className="text-2xl font-bold text-gray-800">Comprehensive Ticket Management</h2> </div> <ul className="list-disc pl-5 text-gray-600 space-y-2"> <li>Advanced visibility controls</li> <li>Status tracking system</li> <li>Efficient ticket lifecycle management</li> </ul> </div> </div> </div> </div> ); }; export default TwoSectionDiv; 2.import React from "react"; import { FaLightbulb, FaChartBar } from "react-icons/fa"; const TwoSectionDiv = () => { return ( <div className="min-h-screen bg-[#F5F9FD] p-6"> <div className="container mx-auto"> <div className="flex flex-col md:flex-row gap-8"> <div className="flex-1 bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out"> <div className="flex items-center gap-3 mb-4"> <FaLightbulb className="text-3xl text-blue-500" /> <h2 className="text-2xl font-bold text-gray-800">Innovation Hub</h2> </div> <p className="text-gray-600 leading-relaxed mb-4"> Discover cutting-edge solutions and innovative approaches to modern challenges. Our team of experts works tirelessly to develop groundbreaking technologies that reshape industries and improve lives. </p> <div className="bg-blue-50 p-4 rounded-lg"> <ul className="list-disc list-inside text-gray-700 space-y-2"> <li>Advanced AI Solutions</li> <li>Smart Technology Integration</li> <li>Future-Ready Infrastructure</li> </ul> </div> </div> <div className="flex-1 bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out"> <div className="flex items-center gap-3 mb-4"> <FaChartBar className="text-3xl text-green-500" /> <h2 className="text-2xl font-bold text-gray-800">Performance Metrics</h2> </div> <p className="text-gray-600 leading-relaxed mb-4"> Track and analyze your business performance with our comprehensive analytics dashboard. Get real-time insights and make data-driven decisions to optimize your operations. </p> <div className="bg-green-50 p-4 rounded-lg"> <div className="space-y-3"> <div className="flex justify-between items-center"> <span className="text-gray-700">Efficiency</span> <span className="text-green-600 font-semibold">94%</span> </div> <div className="flex justify-between items-center"> <span className="text-gray-700">Satisfaction</span> <span className="text-green-600 font-semibold">89%</span> </div> <div className="flex justify-between items-center"> <span className="text-gray-700">Growth</span> <span className="text-green-600 font-semibold">78%</span> </div> </div> </div> </div> </div> </div> </div> ); }; export default TwoSectionDiv; import React from "react"; import { FaLeaf, FaLightbulb } from "react-icons/fa"; const DividerSection = () => { return ( <div className="min-h-screen bg-gradient-to-b from-white to-gray-50"> <div className="container mx-auto px-4 py-12"> {/* Section One */} <div className="mb-16 transform transition-all hover:scale-105 duration-300"> <div className="flex items-center justify-center mb-6"> <FaLeaf className="text-green-500 text-4xl mr-3" /> <h2 className="text-3xl font-bold text-gray-800">Sustainable Living</h2> </div> <div className="bg-white rounded-xl shadow-lg p-8"> <p className="text-gray-600 leading-relaxed text-lg text-center"> Embrace a sustainable lifestyle through mindful choices and eco-friendly practices. Our commitment to environmental stewardship drives innovation and positive change for future generations. </p> </div> </div> {/* Custom Divider */} <div className="relative py-8 group"> <div className="absolute inset-0 flex items-center"> <div className="w-full border-t-4 border-dotted border-gray-200"></div> </div> <div className="relative flex justify-center"> <div className="bg-[#f5f9fd] transform group-hover:rotate-180 transition-transform duration-500 px-8 py-4 rounded-full shadow-xl"> <div className="w-4 h-4 bg-blue-500 rounded-full group-hover:bg-green-500 transition-colors duration-500"></div> </div> </div> </div> {/* Section Two */} <div className="mt-16 transform transition-all hover:scale-105 duration-300"> <div className="flex items-center justify-center mb-6"> <FaLightbulb className="text-yellow-500 text-4xl mr-3" /> <h2 className="text-3xl font-bold text-gray-800">Innovation Hub</h2> </div> <div className="bg-white rounded-xl shadow-lg p-8"> <p className="text-gray-600 leading-relaxed text-lg text-center"> Discover groundbreaking ideas and transformative solutions in our innovation hub. We foster creativity and collaboration to tackle tomorrow's challenges with today's ingenuity. </p> </div> </div> </div> </div> ); }; export default DividerSection; import { useState } from "react"; import { FaUser, FaClipboardCheck, FaRocket } from "react-icons/fa"; import { MdOutlineDesignServices, MdDeveloperMode, MdLaunch } from "react-icons/md"; import { BsCheck2Circle, BsArrowRight } from "react-icons/bs"; const HowItWorks = () => { const [activeTab, setActiveTab] = useState(0); const steps = [ { title: "Sign Up", description: "Create your account in just a few clicks and get started with our service", icon: <FaUser className="text-4xl text-blue-500" /> }, { title: "Complete Profile", description: "Fill in your details and preferences to personalize your experience", icon: <FaClipboardCheck className="text-4xl text-blue-500" /> }, { title: "Launch Project", description: "Start using our platform and watch your project take off", icon: <FaRocket className="text-4xl text-blue-500" /> } ]; const timelineSteps = [ { number: 1, title: "Design", description: "Our team creates beautiful and functional designs", icon: <MdOutlineDesignServices className="text-3xl text-purple-600" />, image: "https://images.unsplash.com/photo-1541462608143-67571c6738dd" }, { number: 2, title: "Develop", description: "Expert developers bring the design to life", icon: <MdDeveloperMode className="text-3xl text-purple-600" />, image: "https://images.unsplash.com/photo-1555066931-bf19f8fd1085" }, { number: 3, title: "Deploy", description: "Launch your project to the world", icon: <MdLaunch className="text-3xl text-purple-600" />, image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f" } ]; const accordionData = [ { title: "Initial Consultation", content: "We begin with a detailed discussion about your project requirements and goals. Our team will analyze your needs and provide expert recommendations." }, { title: "Project Planning", content: "Our team creates a comprehensive project plan, timeline, and milestone schedule to ensure smooth execution and delivery." }, { title: "Development & Testing", content: "We follow industry best practices in development and conduct thorough testing to ensure high-quality deliverables." } ]; const [activeAccordion, setActiveAccordion] = useState(null); return ( <div className="max-w-7xl mx-auto px-4 py-16"> {/* Section 1: Step-by-Step Process */} <div className="mb-20"> <h2 className="text-4xl font-bold text-center mb-12">How It Works</h2> <div className="grid md:grid-cols-3 gap-8"> {steps.map((step, index) => ( <div key={index} className="text-center p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"> <div className="flex justify-center mb-4">{step.icon}</div> <h3 className="text-xl font-semibold mb-2">{step.title}</h3> <p className="text-gray-600">{step.description}</p> </div> ))} </div> </div> {/* Section 2: Infographic Style */} <div className="mb-20"> <h2 className="text-4xl font-bold text-center mb-12">Our Process</h2> <div className="relative"> <div className="hidden md:block absolute top-1/2 left-0 right-0 h-0.5 bg-purple-200 -translate-y-1/2" /> <div className="grid md:grid-cols-3 gap-8"> {timelineSteps.map((step, index) => ( <div key={index} className="relative"> <div className="bg-white rounded-lg shadow-lg p-6 relative z-10"> <div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold"> {step.number} </div> <div className="mt-4"> <img src={step.image} alt={step.title} className="w-full h-48 object-cover rounded-lg mb-4" /> <div className="flex items-center gap-2 mb-2"> {step.icon} <h3 className="text-xl font-semibold">{step.title}</h3> </div> <p className="text-gray-600">{step.description}</p> </div> </div> {index < timelineSteps.length - 1 && ( <div className="hidden md:block absolute top-1/2 -right-4 text-purple-600 transform -translate-y-1/2"> <BsArrowRight className="text-2xl" /> </div> )} </div> ))} </div> </div> </div> {/* Section 3: Interactive Tabs/Accordion */} <div> <h2 className="text-4xl font-bold text-center mb-12">Detailed Process</h2> <div className="max-w-3xl mx-auto"> {accordionData.map((item, index) => ( <div key={index} className="mb-4"> <button className={`w-full p-4 text-left rounded-lg flex items-center justify-between ${ activeAccordion === index ? "bg-purple-600 text-white" : "bg-gray-100" }`} onClick={() => setActiveAccordion(activeAccordion === index ? null : index)} > <span className="text-lg font-semibold">{item.title}</span> <BsCheck2Circle className={`text-2xl transition-transform duration-300 ${ activeAccordion === index ? "rotate-180" : "" }`} /> </button> <div className={`overflow-hidden transition-all duration-300 ${ activeAccordion === index ? "max-h-40" : "max-h-0" }`} > <div className="p-4 bg-white border-x border-b rounded-b-lg"> {item.content} </div> </div> </div> ))} </div> </div> </div> ); }; export default HowItWorks; import React, { useState } from "react"; import { FaLock, FaQrcode, FaExchangeAlt, FaCog, FaChartLine } from "react-icons/fa"; const HowItWorks = () => { const [expandedFeature, setExpandedFeature] = useState(null); const features = [ { id: 1, icon: <FaLock className="text-4xl text-indigo-600" />, title: "Generate Secure Tokenized Tickets", description: "Create unique, time-stamped digital tickets with advanced tokenization for maximum security and authenticity verification.", details: "Our platform utilizes state-of-the-art encryption and blockchain technology to generate tamper-proof tickets with real-time rolling timestamps, ensuring each ticket is unique and secure." }, { id: 2, icon: <FaQrcode className="text-4xl text-indigo-600" />, title: "Validate Tickets with Real-Time Tools", description: "Implement dynamic validation using rotating barcodes and real-time verification systems.", details: "Our advanced validation system uses time-based rotating barcodes and instant verification tools to prevent fraud and ensure only valid tickets are accepted at entry points." }, { id: 3, icon: <FaExchangeAlt className="text-4xl text-indigo-600" />, title: "Enable Resale Without Restrictions", description: "Empower users to freely transfer and resell tickets without platform limitations.", details: "Break free from closed marketplaces. Our platform allows users to transfer or resell tickets through any channel they choose, while maintaining security and validity." }, { id: 4, icon: <FaCog className="text-4xl text-indigo-600" />, title: "Manage Ticket Access Seamlessly", description: "Take control of ticket distribution and access management through our comprehensive suite.", details: "Our intuitive management suite provides complete control over ticket access, usage tracking, and distribution, all from a single dashboard." }, { id: 5, icon: <FaChartLine className="text-4xl text-indigo-600" />, title: "Deliver Transparency and Flexibility", description: "Access detailed logs and manage tickets directly without third-party dependencies.", details: "Get full visibility into ticket usage and history with our transparent logging system, while maintaining complete control over your ticketing operations." } ]; return ( <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto"> {/* Introduction Section */} <div className="text-center mb-16"> <h1 className="text-4xl font-bold text-gray-900 mb-4"> How It Works </h1> <p className="text-xl text-gray-600 max-w-3xl mx-auto"> Experience the next generation of digital ticketing with our innovative platform. We combine security, flexibility, and ease of use to revolutionize how you manage and distribute tickets. </p> </div> {/* Feature Grid */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> {features.map((feature) => ( <div key={feature.id} className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300" onMouseEnter={() => setExpandedFeature(feature.id)} onMouseLeave={() => setExpandedFeature(null)} > <div className="flex items-center justify-center mb-4"> {feature.icon} </div> <h3 className="text-xl font-semibold text-gray-900 mb-2 text-center"> {feature.title} </h3> <p className="text-gray-600 text-center mb-4"> {feature.description} </p> <div className={`overflow-hidden transition-all duration-300 ${ expandedFeature === feature.id ? "max-h-40" : "max-h-0" }`} > <p className="text-sm text-gray-500 italic text-center"> {feature.details} </p> </div> </div> ))} </div> {/* Call to Action */} <div className="mt-16 text-center"> <button className="bg-indigo-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition-colors duration-300"> Get Started Today </button> <p className="mt-4 text-gray-600"> Join thousands of event organizers who trust our platform </p> </div> </div> </div> ); }; export default HowItWorks; Next Task: Task: Make a section after How It Works called "Steps to get started" import React, { useState } from "react"; import { FaUserPlus, FaClipboardList, FaRocket, FaCheckCircle } from "react-icons/fa"; import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io"; const HowItWorksSection = () => { const [openAccordion, setOpenAccordion] = useState(null); const processSteps = [ { title: "Create Account", description: "Begin your journey by setting up your personalized account", icon: <FaUserPlus className="w-8 h-8 text-blue-500" /> }, { title: "Complete Profile", description: "Fill in your details and preferences for a tailored experience", icon: <FaClipboardList className="w-8 h-8 text-blue-500" /> }, { title: "Launch Project", description: "Initialize your first project with our guided setup process", icon: <FaRocket className="w-8 h-8 text-blue-500" /> }, { title: "Track Progress", description: "Monitor and manage your project's development in real-time", icon: <FaCheckCircle className="w-8 h-8 text-blue-500" /> } ]; const accordionData = [ { title: "Initial Setup Phase", content: "During this phase, we'll guide you through account creation and basic configuration. Our team ensures a smooth onboarding process." }, { title: "Development Process", content: "Our agile development approach ensures quick iterations and continuous feedback. You'll be involved at every step of the journey." }, { title: "Deployment Strategy", content: "We implement industry-best deployment practices with thorough testing and validation before going live." } ]; const getStartedSteps = [ { number: "01", title: "Sign Up", description: "Create your account in less than 2 minutes" }, { number: "02", title: "Profile Setup", description: "Complete your profile with essential information" }, { number: "03", title: "Project Initialization", description: "Start your first project using our intuitive dashboard" } ]; const toggleAccordion = (index) => { setOpenAccordion(openAccordion === index ? null : index); }; return ( <div className="max-w-7xl mx-auto px-4 py-16 bg-gray-50"> <div className="mb-16"> <h2 className="text-4xl font-bold text-center mb-4 text-gray-800">How It Works</h2> <p className="text-center text-gray-600 mb-12">Discover our streamlined process to help you get started</p> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16"> {processSteps.map((step, index) => ( <div key={index} className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 transform hover:-translate-y-1" > <div className="flex flex-col items-center text-center"> <div className="mb-4">{step.icon}</div> <h3 className="text-xl font-semibold mb-2 text-gray-800">{step.title}</h3> <p className="text-gray-600">{step.description}</p> </div> </div> ))} </div> <div className="space-y-4"> {accordionData.map((item, index) => ( <div key={index} className="border rounded-lg overflow-hidden"> <button className="w-full px-6 py-4 flex justify-between items-center bg-white hover:bg-gray-50 transition-colors duration-200" onClick={() => toggleAccordion(index)} > <span className="text-lg font-medium text-gray-800">{item.title}</span> {openAccordion === index ? ( <IoMdArrowDropup className="w-6 h-6 text-blue-500" /> ) : ( <IoMdArrowDropdown className="w-6 h-6 text-blue-500" /> )} </button> {openAccordion === index && ( <div className="px-6 py-4 bg-gray-50"> <p className="text-gray-600">{item.content}</p> </div> )} </div> ))} </div> </div> <div className="mt-16"> <h2 className="text-4xl font-bold text-center mb-4 text-gray-800">Steps to Get Started</h2> <p className="text-center text-gray-600 mb-12">Follow these simple steps to begin your journey</p> <div className="space-y-8 max-w-3xl mx-auto"> {getStartedSteps.map((step, index) => ( <div key={index} className="flex items-start space-x-6 p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300" > <div className="flex-shrink-0"> <span className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white font-bold"> {step.number} </span> </div> <div> <h3 className="text-xl font-semibold mb-2 text-gray-800">{step.title}</h3> <p className="text-gray-600">{step.description}</p> </div> </div> ))} </div> </div> </div> ); }; export default HowItWorksSection; import React from "react"; import { FaLock, FaCheckCircle, FaExchangeAlt, FaCog, FaChartLine, FaUserPlus, FaUserEdit, FaRocket, FaShieldAlt, FaMobileAlt, FaRegLifeRing, FaUsers } from "react-icons/fa"; const HowItWorks = () => { const features = [ { icon: <FaLock className="text-4xl text-indigo-600" />, title: "Generate Secure Tokenized Tickets", description: "Real-time rolling timestamps ensure tickets are uniquely tied to the holder." }, { icon: <FaCheckCircle className="text-4xl text-indigo-600" />, title: "Validate Tickets with Real-Time Tools", description: "Instant verification with rotating barcodes." }, { icon: <FaExchangeAlt className="text-4xl text-indigo-600" />, title: "Enable Resale Without Restrictions", description: "Securely resell tickets outside of closed marketplaces." }, { icon: <FaCog className="text-4xl text-indigo-600" />, title: "Manage Ticket Access Seamlessly", description: "Full control over ticket access and tracking." }, { icon: <FaChartLine className="text-4xl text-indigo-600" />, title: "Deliver Transparency and Flexibility", description: "User-friendly tools for ticket management." }, { icon: <FaShieldAlt className="text-4xl text-indigo-600" />, title: "Advanced Fraud Prevention", description: "Built-in security features to prevent ticket fraud and duplication." }, { icon: <FaMobileAlt className="text-4xl text-indigo-600" />, title: "Mobile-First Experience", description: "Access and manage tickets seamlessly from any device." }, { icon: <FaRegLifeRing className="text-4xl text-indigo-600" />, title: "24/7 Support Access", description: "Round-the-clock assistance for all your ticketing needs." } ]; const steps = [ { icon: <FaUserPlus className="text-4xl text-indigo-600" />, title: "Sign Up", description: "Create your account in just a few clicks." }, { icon: <FaUserEdit className="text-4xl text-indigo-600" />, title: "Complete Your Profile", description: "Fill in your details for personalization." }, { icon: <FaUsers className="text-4xl text-indigo-600" />, title: "Build Your Network", description: "Connect with other event organizers and ticket sellers." }, { icon: <FaCog className="text-4xl text-indigo-600" />, title: "Configure Settings", description: "Customize your platform experience and preferences." }, { icon: <FaRocket className="text-4xl text-indigo-600" />, title: "Launch Your Project", description: "Start using our platform and manage your events." } ]; return ( <div className="container mx-auto px-4 py-16"> {/* How It Works Section */} <div className="mb-20"> <div className="text-center mb-16"> <h2 className="text-4xl font-bold text-gray-900 mb-4">How It Works</h2> <p className="text-xl text-gray-600 max-w-2xl mx-auto"> Our platform provides a seamless experience for managing and distributing digital tickets securely. </p> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> {features.map((feature, index) => ( <div key={index} className="p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out" > <div className="flex flex-col items-center text-center"> <div className="mb-4">{feature.icon}</div> <h3 className="text-xl font-semibold text-gray-900 mb-2"> {feature.title} </h3> <p className="text-gray-600">{feature.description}</p> </div> </div> ))} </div> </div> {/* Steps to Get Started Section */} <div> <div className="text-center mb-16"> <h2 className="text-4xl font-bold text-gray-900 mb-4">Steps to Get Started</h2> <p className="text-xl text-gray-600 max-w-2xl mx-auto"> Follow these simple steps to begin using our platform. </p> </div> <div className="max-w-4xl mx-auto"> {steps.map((step, index) => ( <div key={index} className="flex items-center mb-8 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out" > <div className="flex-shrink-0 mr-6"> <div className="w-16 h-16 flex items-center justify-center bg-indigo-100 rounded-full"> {step.icon} </div> </div> <div> <h3 className="text-xl font-semibold text-gray-900 mb-2"> Step {index + 1}: {step.title} </h3> <p className="text-gray-600">{step.description}</p> </div> </div> ))} </div> </div> </div> ); }; export default HowItWorks; import React from "react"; import { FaRocket, FaShieldAlt, FaCode, FaCog, FaChartLine, FaUsers } from "react-icons/fa"; const features = [ { id: 1, title: "Lightning Fast Performance", description: "Experience blazing-fast load times and smooth interactions with our optimized platform.", icon: FaRocket }, { id: 2, title: "Enhanced Security", description: "Your data is protected with enterprise-grade security measures and encryption protocols.", icon: FaShieldAlt }, { id: 3, title: "Clean Code Architecture", description: "Built with modern development practices ensuring scalability and maintainability.", icon: FaCode }, { id: 4, title: "Advanced Configuration", description: "Customize every aspect of your experience with powerful configuration options.", icon: FaCog }, { id: 5, title: "Analytics Dashboard", description: "Get detailed insights and metrics to make data-driven decisions for your business.", icon: FaChartLine }, { id: 6, title: "Team Collaboration", description: "Work seamlessly with your team members using our collaborative features.", icon: FaUsers } ]; const FeatureCard = ({ title, description, icon: Icon }) => { return ( <div className="p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 hover:bg-gray-50"> <div className="flex flex-col items-center text-center"> <div className="p-4 bg-blue-100 rounded-full mb-4"> <Icon className="w-8 h-8 text-blue-600" /> </div> <h3 className="text-xl font-bold mb-2 text-gray-800">{title}</h3> <p className="text-gray-600 leading-relaxed">{description}</p> </div> </div> ); }; const FeatureDisplay = () => { return ( <div className="container mx-auto px-4 py-16"> <div className="text-center mb-16"> <h2 className="text-4xl font-bold text-gray-900 mb-4">Our Features</h2> <p className="text-xl text-gray-600 max-w-2xl mx-auto"> Discover the powerful features that make our platform stand out from the rest </p> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> {features.map((feature) => ( <FeatureCard key={feature.id} title={feature.title} description={feature.description} icon={feature.icon} /> ))} </div> </div> ); }; export default FeatureDisplay; import React from "react"; import { FaLock, FaCheckCircle, FaExchangeAlt, FaCog, FaChartLine, FaUserPlus, FaUserEdit, FaRocket, FaShieldAlt, FaMobileAlt, FaRegLifeRing, FaUsers } from "react-icons/fa"; ] export default HowItWorks; <div className="mt-24"> <div className="text-center"> <h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">Steps to Get Started</h2> <p className="mt-4 text-lg text-gray-600"> Follow these simple steps to begin your journey. </p> </div>