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
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize GSAP animations for graffiti elements | |
| const graffitiElements = document.querySelectorAll('.graffiti-element'); | |
| graffitiElements.forEach(element => { | |
| gsap.fromTo(element, | |
| { opacity: 0, y: 50 }, | |
| { | |
| opacity: 0.5, | |
| y: 0, | |
| duration: 1, | |
| ease: "power2.out", | |
| scrollTrigger: { | |
| trigger: element, | |
| start: "top 80%", | |
| toggleActions: "play none none none", | |
| onEnter: () => element.classList.add('active') | |
| } | |
| } | |
| ); | |
| }); | |
| // Animate feature cards on scroll | |
| gsap.utils.toArray('.feature-card').forEach(card => { | |
| gsap.fromTo(card, | |
| { opacity: 0, y: 30 }, | |
| { | |
| opacity: 1, | |
| y: 0, | |
| duration: 0.8, | |
| scrollTrigger: { | |
| trigger: card, | |
| start: "top 80%" | |
| } | |
| } | |
| ); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); |