"use client"; import React, { useRef } from 'react'; import AnimatedShinyText from '../ui/animated-shiny-text'; import { ArrowRightIcon } from 'lucide-react'; import { cn } from "@/lib/utils"; import { motion, useInView } from 'framer-motion'; export default function Hero() { // Create a ref for the container element const ref = useRef(null); // Use useInView hook to detect when the element is in viewport const isInView = useInView(ref, { once: true }); // Left right motion variants defined for the animations const leftVariants = { hidden: { x: -100, opacity: 0 }, visible: { x: 0, opacity: 1 }, }; const rightVariants = { hidden: { x: 100, opacity: 0 }, visible: { x: 0, opacity: 1 }, }; return ( <div ref={ref} className='text-white h-fit md:h-screen flex flex-col md:flex-row pt-40 md:pt-20'> <motion.div className='w-full md:w-1/2 flex flex-col items-start justify-center pl-20 px-10 space-y-5 md:space-y-10' initial="hidden" animate={isInView ? "visible" : "hidden"} variants={leftVariants} transition={{ duration: 0.5 }} > <div className={cn( "group rounded-full border text-xs md:text-base transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800", )} > <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400"> <span>✨ Introducing Everyday Series AI</span> <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" /> </AnimatedShinyText> </div> <h1 className='text-3xl md:text-6xl'>Automate your operations and scale businesses</h1> <p className='text-gray-500 text-sm md:text-base'>Empower your business with Micro-SaaS applications—designed by you, no coding required. Craft powerful workflows with our intuitive drag-and-drop builder, streamline approvals, and bring your ideas to life.</p> <button className='bg-violet-600 px-5 py-4 rounded-full text-sm md:text-base'>Get 14 days free</button> </motion.div> <motion.div className='w-full md:w-1/2 px-10 flex flex-col items-center justify-center' initial="hidden" animate={isInView ? "visible" : "hidden"} variants={rightVariants} transition={{ duration: 0.5 }} > <img src='https://res.cloudinary.com/dezd109fz/image/upload/v1737305415/Untitled_design_utuwwq.png' alt="Hero Image"/> </motion.div> </div> ); }