Features - Copy this React, Tailwind Component to your project

Design to continue flow. this is the next section. import React from "react"; import { motion } from "framer motion"; import { FaTicketAlt, FaChartLine, FaClock, FaTools, FaLock, FaTasks } from "react icons/fa"; const features = [ { icon: <FaTicketAlt className="w 8 h 8 text indigo 600" />, title: "Unlimited Ticket Generation", subtitle: "Create Without Limits", description: "Create an infinite number of valid event tickets, ensuring your audience can always expand without constraints", benefits: ["Bulk ticket generation", "Custom ticket templates", "QR code integration"] }, { icon: <FaClock className="w 8 h 8 text indigo 600" />, title: "Real Time Ticket Tracking", subtitle: "Monitor Live Updates", description: "Log and authenticate distributed tickets instantly, ensuring secure and seamless event access for all attendees", benefits: ["Live status updates", "Instant notifications", "Activity timeline"] }, { icon: <FaChartLine className="w 8 h 8 text indigo 600" />, title: "Actionable Ticket Analytics", subtitle: "Data Driven Insights", description: "Gain real time insights into ticket usage, distribution patterns, and attendance trends to optimize event strategies", benefits: ["Performance metrics", "Custom reports", "Trend analysis"] }, { icon: <FaTools className="w 8 h 8 text indigo 600" />, title: "Feature rich Platform", subtitle: "Advanced Tools", description: "Equipped with all essential features, our platform guarantees a flawless and streamlined experience", benefits: ["Advanced search", "Batch operations", "Export capabilities"] }, { icon: <FaLock className="w 8 h 8 text indigo 600" />, title: "Instant Access Control", subtitle: "Secure Management", description: "Activate or deactivate tickets on demand, maintaining full authority over who can enter", benefits: ["Role based access", "Security protocols", "Authentication system"] }, { icon: <FaTasks className="w 8 h 8 text indigo 600" />, title: "Comprehensive Management", subtitle: "Complete Control", description: "Manage ticket visibility and statuses, ensuring authorized access and efficient tracking of all ticket stages", benefits: ["Centralized control", "Workflow automation", "Integration options"] } ]; const HowItWorks = () => { return ( <div className="min h screen bg gradient to br from indigo 50 via white to purple 50 py 12 px 4 sm:px 6 lg:px 8"> <div className="max w 7xl mx auto"> <div className="text center mb 16"> <motion.h1 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="text 4xl font bold text gray 900 mb 4" > Core Features </motion.h1> <motion.p initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }} className="text xl text gray 600" > Secure, Simple, and Smart Ticket Management </motion.p> </div> <div className="grid md:grid cols 2 lg:grid cols 3 gap 8 mb 16"> {features.map((feature, index) => ( <motion.div key={index} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: index * 0.1 }} className="bg white rounded lg p 8 shadow lg hover:shadow xl transition shadow duration 300" > <div className="mb 4">{feature.icon}</div> <h3 className="text xl font semibold text gray 900 mb 2"> {feature.title} </h3> <p className="text sm text indigo 600 mb 4">{feature.subtitle}</p> <p className="text gray 600 mb 6">{feature.description}</p> <ul className="space y 2"> {feature.benefits.map((benefit, idx) => ( <li key={idx} className="flex items center"> <span className="w 2 h 2 bg indigo 600 rounded full mr 2"></span> <span className="text gray 600">{benefit}</span> </li> ))} </ul> </motion.div> ))} </div> </div> </div> ); }; export default HowItWorks;