Services Data - Copy this React, Tailwind Component to your project

Import React from 'react'; import { motion, AnimatePresence } from "framer motion"; import { useState } from "react"; import Footer from '../components/Footer'; import { useTransform, useScroll, useSpring } from "framer motion"; import { useNavigate } from "react router dom"; import { Code, Phone, ShieldCheck, Rocket, Cloud, BrainCircuit, Router, Cpu, Building2, Paintbrush, Box, X } from 'lucide react'; import Header from '../components/Header'; const Services = () => { const navigate = useNavigate(); const [selectedService, setSelectedService] = useState(null); const { scrollYProgress } = useScroll(); const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30 }); const services = [ { icon: <Code className="text 5xl" />, title: "Web Development", description: "Custom web solutions built with cutting edge technologies for optimal performance and user experience.", gradient: "from [#d3a154] via [#e5b76a] to [#f8d088]", image: "/webdev.jpg", delay: 0.1 }, { icon: <Phone className="text 5xl" />, title: "App Development", description: "Native and cross platform mobile applications that deliver seamless experiences across devices.", gradient: "from [#d3a154] via [#c89647] to [#b68a3d]", image: "/appdev.jpg", delay: 0.2 }, { icon: <Cloud className="text 5xl" />, title: "Cloud Computing", description: "Scalable cloud solutions for efficient business operations and seamless data management.", gradient: "from [#e5b76a] via [#d3a154] to [#c89647]", image: "/cloud.jpg", delay: 0.3 }, { icon: <ShieldCheck className="text 5xl" />, title: "Cyber Security", description: "Comprehensive security solutions to protect your business from cyber threats.", gradient: "from [#d3a154] via [#e5b76a] to [#c89647]", image: "/cybersecurity.jpg", delay: 0.4 }, { icon: <Code className="text 5xl" />, // You can choose another icon if you'd like title: "Personal Portfolio Making", description: "Stand out online with a stunning, custom designed personal portfolio tailored to showcase your unique skills and story.", gradient: "from [#d3a154] via [#c89647] to [#b68a3d]", image: "/portfolio.png", // Make sure this image exists in your public folder delay: 0.45 }, { icon: <Paintbrush className="text 5xl" />, // Changed Shield to Paintbrush title: "Interior & Furnishing", description: "Luxury and smart interior designs with advanced furnishing solutions.", gradient: "from [#d3a154] via [#c89647] to [#b68a3d]", image: "/interior.jpg", delay: 0.5 }, { icon: <Rocket className="text 5xl" />, title: "Digital Marketing", description: "Strategic digital marketing solutions to boost your online presence and drive growth.", gradient: "from [#b68a3d] via [#d3a154] to [#e5b76a]", image: "/digitalmarketing.jpg", delay: 0.6 }, { icon: <Cpu className="text 5xl" />, title: "Process Automation", description: "AI driven automation solutions to optimize workflows and increase efficiency.", gradient: "from [#e5b76a] via [#d3a154] to [#c89647]", image: "/processautomation.jpg", delay: 0.7 }, { icon: <Router className="text 5xl" />, title: "IoT Security & Smart Sensors", description: "Robust security solutions for Internet of Things devices and networks.", gradient: "from [#d3a154] via [#c89647] to [#b68a3d]", image: "/iotsecu.jpg", delay: 0.8 }, { icon: < BrainCircuit className="text 5xl" />, title: "AI/ML & Generative AI Solutions", description: "Advanced AI and machine learning solutions for business automation and innovation.", gradient: "from [#e5b76a] via [#d3a154] to [#c89647]", image: "/aiml.jpg", delay: 0.9 }, { icon: <Building2 className="text 5xl" />, title: "Architectural Design", description: "Innovative architectural solutions that blend creativity and functionality.", gradient: "from [#d3a154] via [#c89647] to [#b68a3d]", image: "/architecturaldesign.jpg", delay: 1.0 }, { icon: <Box className="text 5xl" />, title: "3D Visualization & Rendering", description: "High quality 3D visualizations for architecture, interiors, and product design.", gradient: "from [#d3a154] via [#c89647] to [#b68a3d]", image: "/3drendering.jpg", delay: 1.1 } ]; const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.15 } } }; const cardVariants = { hidden: { opacity: 0, y: 50, scale: 0.95 }, visible: delay => ({ opacity: 1, y: 0, scale: 1, transition: { delay, duration: 0.8, ease: [0.215, 0.610, 0.355, 1.000] } }) }; return ( <div className="min h screen bg [#0A0A0F] relative"> {/* Header */} <Header className="fixed top 0 left 0 right 0 bg black/50 z 50 backdrop blur xl" /> <motion.div className="fixed top 0 left 0 right 0 h 1.5 bg [#d3a154]/20 z 50" style={{ scaleX }} > <div className="absolute inset 0 bg gradient to r from [#d3a154] to [#b8860c] shadow [0_0_20px_rgba(211,161,84,0.3)]" /> </motion.div> <div className="pt 24 pb 0 px 4 sm:px 6 lg:px 8 overflow hidden"> {/* Background Effects */} <div className="absolute inset 0 overflow hidden"> <div className="absolute top 1/2 left 1/2 w full h full bg gradient to br from [#d3a154]/10 via [#c89647]/10 to [#b68a3d]/10 blur 3xl transform rotate 12 animate pulse" /> <div className="absolute bottom 1/2 right 1/2 w full h full bg gradient to tl from [#e5b76a]/10 via [#d3a154]/10 to [#c89647]/10 blur 3xl transform rotate 12 animate pulse" /> </div> {/* Content Container */} <div className="relative z 10"> {/* Header Section */} <div className="text center mb 20"> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, ease: "easeOut" }} className="inline block mb 6" > <span className="px 4 py 2 rounded full text sm font semibold bg gradient to r from [#d3a154]/10 to [#e5b76a]/10 border border [#d3a154]/20 text [#d3a154]"> Our Expertise </span> </motion.div> <motion.h2 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.2 }} className="text 5xl sm:text 6xl md:text 7xl font black bg gradient to r from [#d3a154] via [#d3a154] to [#b8860c] bg clip text text transparent mb 6 tracking tight" > Our Premium Services </motion.h2> <motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4, duration: 0.8 }} className="text xl md:text 2xl text gray 300 max w 3xl mx auto leading relaxed font light" > Empowering your digital journey with cutting edge solutions and innovative technologies </motion.p> </div> {/* Services Grid */} <motion.div variants={containerVariants} initial="hidden" animate="visible" className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 8 max w 7xl mx auto" > {services.map((service, index) => ( <motion.div key={index} custom={service.delay} variants={cardVariants} whileHover={{ scale: 1.03, translateY: 5 }} className="relative group" > {/* Card Glow Effect */} <div className="absolute inset 0 bg gradient to r w full h full blur xl opacity 25 group hover:opacity 50 transition all duration 500" style={{ background: `linear gradient(to right, ${service.gradient})` }} /> {/* Card Content */} <div className="relative backdrop blur xl bg white/5 rounded 2xl border border [#d3a154]/10 hover:border [#d3a154]/30 transition all duration 500 h full overflow hidden"> {/* Image Container */} <div className="relative h 48 overflow hidden"> <div className="absolute inset 0 bg gradient to b from transparent to [#0A0A0F]/90 z 10" /> <motion.img initial={{ scale: 1.2 }} whileHover={{ scale: 1.1 }} transition={{ duration: 0.4 }} src={service.image} alt={service.title} className="w full h full object cover transform group hover:scale 110 transition transform duration 700" loading="lazy" onError={(e) => { e.target.src = '/images/services/fallback.jpg'; }} /> </div> <div className="p 8 relative z 20"> {/* Icon Container */} <div className={`w 20 h 20 rounded xl bg gradient to r ${service.gradient} p 0.5 mt 16 mb 6 transform group hover:rotate 6 group hover:scale 110 transition all duration 500 relative z 20`}> <div className="w full h full bg [#0A0A0F] rounded [10px] flex items center justify center"> <div className="text [#d3a154]">{service.icon}</div> </div> </div> {/* Content */} <h3 className="text 2xl font bold text white mb 4 group hover:text [#d3a154] transition all duration 300"> {service.title} </h3> <p className="text gray 400 group hover:text gray 300 transition colors duration 300 leading relaxed"> {service.description} </p> </div> </div> </motion.div> ))} </motion.div> </div> </div> {/* Why Choose Us Section Moved outside the main content container */} <section className="relative w full bg gradient to r from gray 900 to black"> <div className="absolute inset 0 z 0"> <video src="/ba.mp4" type="video/mp4" autoPlay loop muted className="w full h full object cover opacity 40" /> <div className="absolute inset 0 bg black opacity 50" /> </div> <div className="container mx auto px 4 sm:px 6 lg:px 8 py 24 relative z 10"> <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} className="grid grid cols 1 lg:grid cols 2 gap 12 items center max w 7xl mx auto" > <motion.div initial={{ x: 50 }} whileInView={{ x: 0 }} transition={{ type: "spring" }} viewport={{ once: true }} className="relative rounded 3xl overflow hidden" > <div className="absolute inset 0 bg gradient to br from [#d3a154] to [#b8860c] opacity 20" /> <div className="relative z 10 p 8"> <div className="w full h 96 bg gray 800 rounded 2xl overflow hidden"> <img src="/choose.jpg" alt="Customer testimonial" className="w full h full object cover" /> </div> </div> </motion.div> <div className="space y 8"> <motion.h2 initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} transition={{ delay: 0.2 }} viewport={{ once: true }} className="text 4xl font bold text white" > Why Choose Our Services? </motion.h2> <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} transition={{ delay: 0.4 }} viewport={{ once: true }} className="space y 6" > {[ "Enterprise Grade Security & Compliance", "24/7 Dedicated Support & Maintenance", "Scalable & Future Ready Solutions", "Seamless Integration & Interoperability", "Transparent & Collaborative Communication" ].map((feature, index) => ( <div key={index} className="flex items start space x 4"> <div className="w 8 h 8 rounded full bg gradient to br from [#d3a154] to [#b8860c] flex items center justify center"> <span className="text white text sm font bold">{index + 1}</span> </div> <p className="text gray 300 text lg">{feature}</p> </div> ))} </motion.div> </div> </motion.div> </div> </section> {/* Stats Section */} <section className="relative py 24 bg [#0A0A0F]"> <div className="container mx auto px 4 sm:px 6 lg:px 8"> <div className="grid grid cols 2 md:grid cols 4 gap 8 max w 7xl mx auto"> {[ { number: "20+", label: "Projects Completed" }, { number: "99%", label: "Client Satisfaction" }, { number: "20+", label: "Expert Team" }, { number: "24/7", label: "Support Available" } ].map((stat, index) => ( <motion.div key={index} initial={{ scale: 0.8 }} whileInView={{ scale: 1 }} viewport={{ once: true }} transition={{ type: "spring", delay: index * 0.1 }} className="text center p 6 rounded 2xl bg gradient to br from gray 900 to black" > <div className="text 4xl font bold text [#d3a154] mb 2">{stat.number}</div> <div className="text gray 300">{stat.label}</div> </motion.div> ))} </div> </div> </section> <Footer /> {/* Service Detail Overlay */} <AnimatePresence> {selectedService && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset 0 bg black/90 z 50 flex items center justify center p 4" > <motion.div initial={{ scale: 0.8 }} animate={{ scale: 1 }} exit={{ scale: 0.8 }} className="relative max w 4xl w full bg gradient to br from gray 900 to black rounded 3xl p 8 border border [#d3a154]/30" > <button onClick={() => setSelectedService(null)} className="absolute top 4 right 4 p 2 text [#d3a154] hover:text white transition colors" > <X className="w 6 h 6" /> </button> <div className="grid grid cols 1 lg:grid cols 2 gap 8"> <div className="space y 6"> <div className="w 20 h 20 rounded xl bg gradient to br from [#d3a154] to [#b8860c] p 4 text white"> <selectedService.icon className="w 12 h 12" /> </div> <h2 className="text 4xl font bold text white">{selectedService.title}</h2> <p className="text gray 300">{selectedService.description}</p> </div> <div className="space y 6"> <h3 className="text 2xl font bold text [#d3a154]">Key Features</h3> <div className="space y 4"> {selectedService.features?.map((feature, index) => ( <motion.div key={index} initial={{ x: 20 }} animate={{ x: 0 }} transition={{ delay: index * 0.1 }} className="flex items center p 4 bg gray 800/50 rounded xl" > <div className="w 8 h 8 rounded full bg [#d3a154] flex items center justify center mr 4"> <span className="text white font bold">{index + 1}</span> </div> <span className="text gray 300">{feature}</span> </motion.div> ))} </div> </div> </div> <div className="mt 8 pt 8 border t border [#d3a154]/20"> <h3 className="text 2xl font bold text [#d3a154] mb 4">Technical Stack</h3> <div className="flex flex wrap gap 4"> {['React', 'Node.js', 'AWS', 'TensorFlow', 'Three.js'].map((tech, index) => ( <motion.span key={index} initial={{ scale: 0 }} animate={{ scale: 1 }} className="px 4 py 2 bg gray 800/50 rounded full text gray 300" > {tech} </motion.span> ))} </div> </div> </motion.div> </motion.div> )} </AnimatePresence> </div> ); }; export default Services; add here loading icon also for if all data is not loaded then it shows loading