57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { Key } from 'lucide-react'
|
|
|
|
export function FloatingCTA() {
|
|
const [showFloatingCTA, setShowFloatingCTA] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scrollY = window.scrollY
|
|
const windowHeight = window.innerHeight
|
|
const documentHeight = document.documentElement.scrollHeight
|
|
|
|
// Show floating CTA when user has scrolled past the hero section and generator is not in view
|
|
const shouldShow = scrollY > windowHeight * 0.5 && scrollY < documentHeight - windowHeight * 0.3
|
|
setShowFloatingCTA(shouldShow)
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll)
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
|
|
const scrollToGenerator = () => {
|
|
const generatorElement = document.getElementById('generator')
|
|
if (generatorElement) {
|
|
generatorElement.scrollIntoView({ behavior: 'smooth' })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{showFloatingCTA && (
|
|
<motion.div
|
|
className="fixed bottom-6 left-6 z-50"
|
|
initial={{ opacity: 0, x: -100, scale: 0.8 }}
|
|
animate={{ opacity: 1, x: 0, scale: 1 }}
|
|
exit={{ opacity: 0, x: -100, scale: 0.8 }}
|
|
transition={{ duration: 0.3, ease: 'easeOut' }}
|
|
>
|
|
<motion.button
|
|
onClick={scrollToGenerator}
|
|
className="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-full shadow-lg flex items-center space-x-2 transition-colors duration-200"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
aria-label="Generate password"
|
|
>
|
|
<Key className="h-5 w-5" />
|
|
<span className="font-medium">Generate Password</span>
|
|
</motion.button>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|