|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { useState } from 'react'; |
| 4 | +import { FaReact, FaVuejs, FaAngular, FaNodeJs, FaPython } from 'react-icons/fa'; |
| 5 | +import { SiSvelte } from 'react-icons/si'; |
| 6 | +import { SiNextdotjs, SiTypescript, SiJavascript, SiOpenai, SiTensorflow } from 'react-icons/si'; |
| 7 | +import { RiGeminiFill } from "react-icons/ri"; |
| 8 | +import AJHeadphones from '@/components/icons/aj-headphones'; |
| 9 | +import AJPrimary from '@/components/icons/aj-primary-alt'; |
| 10 | + |
| 11 | +const icons = [ |
| 12 | + { icon: <FaReact />, name: 'React' }, |
| 13 | + { icon: <FaVuejs />, name: 'Vue.js' }, |
| 14 | + { icon: <FaAngular />, name: 'Angular' }, |
| 15 | + { icon: <SiSvelte />, name: 'Svelte' }, |
| 16 | + { icon: <FaNodeJs />, name: 'Node.js' }, |
| 17 | + { icon: <SiNextdotjs />, name: 'Next.js' }, |
| 18 | + { icon: <SiTypescript />, name: 'TypeScript' }, |
| 19 | + { icon: <SiJavascript />, name: 'JavaScript' }, |
| 20 | + { icon: <FaPython />, name: 'Python' }, |
| 21 | + { icon: <SiOpenai />, name: 'OpenAI' }, |
| 22 | + { icon: <SiTensorflow />, name: 'TensorFlow' }, |
| 23 | + { icon: <RiGeminiFill />, name: 'Gemini' }, |
| 24 | +]; |
| 25 | + |
| 26 | +export default function AnimatedHero() { |
| 27 | + const [isHovered, setIsHovered] = useState(false); |
| 28 | + |
| 29 | + return ( |
| 30 | + <div className="relative w-full h-[500px] overflow-hidden"> |
| 31 | + <div className="absolute inset-0 grid grid-cols-4 grid-rows-3 gap-4"> |
| 32 | + {icons.map((item, index) => ( |
| 33 | + <div |
| 34 | + key={item.name} |
| 35 | + className="flex items-center justify-center text-6xl text-muted-foreground/20" |
| 36 | + style={{ |
| 37 | + animation: `float 6s ease-in-out infinite`, |
| 38 | + animationDelay: `${index * 0.5}s`, |
| 39 | + }} |
| 40 | + > |
| 41 | + {item.icon} |
| 42 | + </div> |
| 43 | + ))} |
| 44 | + </div> |
| 45 | + <div className="relative z-10 flex flex-col items-center justify-center h-full space-y-4"> |
| 46 | + <div |
| 47 | + className="relative bg-background/80 p-8 rounded-lg" |
| 48 | + onMouseEnter={() => setIsHovered(true)} |
| 49 | + onMouseLeave={() => setIsHovered(false)} |
| 50 | + > |
| 51 | + <h1 className="text-4xl font-bold tracking-tighter text-center sm:text-5xl md:text-6xl"> |
| 52 | + CodingCat.dev Podcast |
| 53 | + </h1> |
| 54 | + <p className="max-w-[600px] text-center text-muted-foreground md:text-xl/relaxed"> |
| 55 | + Purrfect Podcast for Web Developers |
| 56 | + </p> |
| 57 | + <div className="absolute top-0 left-0 w-full h-full overflow-hidden rounded-lg"> |
| 58 | + <AJHeadphones |
| 59 | + cls={`absolute w-24 h-24 -top-12 -right-12 transition-transform duration-500 ${isHovered ? 'translate-x-32 -translate-y-32 rotate-45' : 'animate-paw-one'}`} |
| 60 | + /> |
| 61 | + <AJPrimary |
| 62 | + cls={`absolute w-24 h-24 -bottom-12 -left-12 transition-transform duration-500 ${isHovered ? '-translate-x-32 translate-y-32 -rotate-45' : 'animate-paw-two'}`} |
| 63 | + /> |
| 64 | + </div> |
| 65 | + </div> |
| 66 | + </div> |
| 67 | + </div> |
| 68 | + ); |
| 69 | +} |
0 commit comments