Enhance Your UI with React, Framer Motion, and Dark Backgrounds
"use client"; import React, { useEffect, useState } from "react"; import { FiArrowRight } from "react-icons/fi"; import { motion } from "framer-motion"; import Image from "next/image"; import logo from "@/public/logo.png"; export default function Hero() { const [scrollPosition, setScrollPosition] = useState(0); useEffect(() => { const handleScroll = () => { setScrollPosition(window.scrollY); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.3, }, }, }; const itemVariants = { hidden: { y: 50, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { duration: 0.8, ease: "easeOut", }, }, }; return ( <><div className="relative min-h-screen overflow-hidden bg-black"> <div className="absolute inset-0 z-0" style={{ transform: `translateY(${scrollPosition * 0.5}px)`, backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url("images.unsplash.com/photo-1635776062360-af423907de1c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80")`, backgroundSize: "cover", backgroundPosition: "center", }} role="img" aria-label="Futuristic technology background" > <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black" /> </div> <div className="relative z-10 flex min-h-screen items-center justify-center px-4 sm:px-6 lg:px-8"> <motion.div className="text-center" variants={containerVariants} initial="hidden" animate="visible" > <motion.div variants={itemVariants} className="mb-8 flex justify-center" > <div className="relative h-24 w-24 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 p-1"> <Image src={logo} alt="Logo" className="h-12 w-12 text-indigo-500" /> </div> </motion.div> </motion.div> <motion.div variants={itemVariants} className="text-center" > <motion.h1 variants={itemVariants} className="mb-6 text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl lg:text-7xl" > <span className="block bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent"> Prathibha Innovations </span> <span className="mt-2 block text-2xl font-light text-indigo-300"> Shaping Tomorrow's Technology </span> </motion.h1> <motion.p variants={itemVariants} className="mx-auto mb-8 max-w-2xl text-xl text-gray-300 sm:text-2xl" > Pioneering revolutionary solutions through innovation, expertise, and dedication to excellence. We transform ideas into impactful realities. </motion.p> <motion.div variants={itemVariants} className="flex flex-col items-center justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0" > <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="group relative inline-flex items-center justify-center rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 px-8 py-3 text-lg font-semibold text-white transition-all duration-200 ease-in-out hover:shadow-lg hover:shadow-indigo-500/50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" onClick={() => console.log("Explore button clicked")} > Explore Now <FiArrowRight className="ml-2 transition-transform duration-200 ease-in-out group-hover:translate-x-1" /> </motion.button> <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="group relative inline-flex items-center justify-center rounded-full border-2 border-indigo-400 bg-transparent px-8 py-3 text-lg font-semibold text-indigo-400 transition-all duration-200 ease-in-out hover:border-purple-400 hover:text-purple-400 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2" onClick={() => console.log("Learn More button clicked")} > </motion.button> </motion.div> </motion.div> </div> <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent" /> </div> </> ); }; correct and make this awesome page with only while bg