HireAnything.com - Your Trusted Service Provider Platform

'use client' import React, { useState } from 'react' import { motion } from 'framer motion' import { FaArrowRight, FaPlay, FaEnvelope, FaPhone } from 'react icons/fa' import Image from 'next/image' const EnhancedBlueBannerHeroSection: React.FC = () => { const [isVideoModalOpen, setIsVideoModalOpen] = useState(false) return ( <section className="relative min h screen bg gradient to br from blue 600 to indigo 900 overflow hidden"> {/* Background pattern */} <div className="absolute inset 0 opacity 10"> <Image src="/placeholder.svg?height=600&width=600" alt="Background pattern" layout="fill" objectFit="cover" /> </div> <div className="container mx auto px 6 py 20 relative z 10"> <div className="flex flex col lg:flex row items center justify between"> {/* Left column: Text content */} <motion.div className="lg:w 1/2 text white" initial={{ opacity: 0, x: 50 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.8 }} > <h1 className="text 4xl md:text 6xl font bold mb 6"> HireAnything.com </h1> <p className="text xl md:text 2xl mb 8"> Find the Perfect Service Provider </p> <div className="flex flex col sm:flex row gap 4 mb 8"> <button className="px 8 py 4 bg white text blue 600 rounded full font semibold text lg transition all duration 300 transform hover:scale 105 hover:shadow lg flex items center gap 2 group"> Get Started <FaArrowRight className="group hover:translate x 1 transition transform duration 300" /> </button> <button className="px 8 py 4 border 2 border white text white rounded full font semibold text lg hover:bg white hover:text blue 600 transition all duration 300 flex items center gap 2" onClick={() => setIsVideoModalOpen(true)} > <FaPlay /> Watch Demo </button> </div> <div className="flex flex col sm:flex row gap 4 text white"> <a href="mailto:hireanything2024@gmail.com" className="flex items center gap 2 hover:text blue 200 transition colors"> <FaEnvelope /> hireanything2024@gmail.com </a> <a href="tel:+447800909102" className="flex items center gap 2 hover:text blue 200 transition colors"> <FaPhone /> +44 7800 909102 </a> </div> </motion.div> {/* Right column: Images */} <motion.div className="lg:w 1/2 mt 12 lg:mt 0" initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.2 }} > <div className="relative w full h 96"> <Image src="/placeholder.svg?height=400&width=600" alt="Service providers" layout="fill" objectFit="cover" className="rounded lg shadow 2xl" /> <motion.div className="absolute inset 0 bg gradient to tr from blue 500 to indigo 500 opacity 30 rounded lg" animate={{ opacity: [0.3, 0.5, 0.3] }} transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }} /> </div> </motion.div> </div> {/* Services section */} <motion.div className="mt 20 grid grid cols 2 md:grid cols 4 gap 8 text white" initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.4 }} > {[ { label: 'Professional Equipment', icon: '🛠️' }, { label: 'Expert Consultations', icon: '👨‍💼' }, { label: 'Specialized Services', icon: '🔧' }, { label: 'On Demand Solutions', icon: '⏱️' }, ].map((service, index) => ( <div key={index} className="text center"> <motion.div className="text 4xl mb 2" initial={{ scale: 1 }} whileHover={{ scale: 1.1 }} transition={{ type: 'spring', stiffness: 400, damping: 10 }} > {service.icon} </motion.div> <div className="text blue 200">{service.label}</div> </div> ))} </motion.div> </div> {/* Video Modal */} {isVideoModalOpen && ( <motion.div className="fixed inset 0 bg black bg opacity 75 flex items center justify center z 50" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} > <div className="bg white p 4 rounded lg max w 3xl w full"> <div className="aspect w 16 aspect h 9"> <iframe src="https://www.youtube nocookie.com/embed/dQw4w9WgXcQ" frameBorder="0" allow="autoplay; encrypted media" allowFullScreen className="w full h full" ></iframe> </div> <button className="mt 4 px 4 py 2 bg blue 600 text white rounded hover:bg blue 700 transition colors" onClick={() => setIsVideoModalOpen(false)} > Close </button> </div> </motion.div> )} </section> ) } export default EnhancedBlueBannerHeroSection