create a landing page for a software product called Miniblocks, which is a no code mobile app development platform for kids aged 8 to 15. Use next and shadcn to build this. Use light colors and for the font use child friendly ones. Make the entire UI appealing to kids. Have animations when scrolling down with grafitti elements appearing in the background if possible. Tagline is: Where tiny builders dream big!
e3bfc35 verified | @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translateY(-20px) rotate(5deg); | |
| } | |
| } | |
| @keyframes float-delay { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translateY(-15px) rotate(-3deg); | |
| } | |
| } | |
| @keyframes float-delay-2 { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translateY(-25px) rotate(8deg); | |
| } | |
| } | |
| .animate-float { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| .animate-float-delay { | |
| animation: float-delay 5s ease-in-out infinite; | |
| animation-delay: 0.5s; | |
| } | |
| .animate-float-delay-2 { | |
| animation: float-delay-2 6s ease-in-out infinite; | |
| animation-delay: 1s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .mockup-phone { | |
| perspective: 1000px; | |
| } | |
| .phone-frame { | |
| transform: rotateY(-15deg) rotateX(5deg); | |
| transition: transform 0.5s ease; | |
| } | |
| .mockup-phone:hover .phone-frame { | |
| transform: rotateY(-5deg) rotateX(2deg); | |
| } | |
| /* Graffiti elements */ | |
| .graffiti-element { | |
| transition: opacity 1s ease, transform 1s ease; | |
| will-change: opacity, transform; | |
| } | |
| .graffiti-element.active { | |
| opacity: 0.5; | |
| } |