'use client'; import React, { useEffect } from 'react'; const LearnAndGrowCard: React.FC = () => { useEffect(() => { const phoneGradient = document.getElementById('glowingGradient'); let angle = 0; let animationFrameId: number; const animateGradients = () => { angle = (angle + 1) % 360; const x1 = 50 + 45 * Math.cos((angle * Math.PI) / 180); const y1 = 50 + 45 * Math.sin((angle * Math.PI) / 180); const x2 = 50 + 45 * Math.cos(((angle + 180) * Math.PI) / 180); const y2 = 50 + 45 * Math.sin(((angle + 180) * Math.PI) / 180); if (phoneGradient) { phoneGradient.setAttribute('x1', `${x1}%`); phoneGradient.setAttribute('y1', `${y1}%`); phoneGradient.setAttribute('x2', `${x2}%`); phoneGradient.setAttribute('y2', `${y2}%`); } animationFrameId = requestAnimationFrame(animateGradients); }; animateGradients(); return () => { cancelAnimationFrame(animationFrameId); }; }, []); return ( <>

{/* Phone body */}

{/* Screen shape */}

{/* Screen content */}

{/* Status bar */}

9:41

Design Courses

{/* Play button positioned in the middle of the 4 rectangles with animated blobs */}

{/* Animated blobs */}

{/* Play icon */}

{/* Phone outline with animated stroke */}

Learn and Grow

Access guides and resources to enhance your design skills and advance your career

); }; export default LearnAndGrowCard;