VY
vinay yadav

Hero Section - Copy this React, Tailwind Component to your project

Design a highly interactive and animated hero section for a web development company. The background should feature a vibrant blur gradient in shades of yellow and white, giving a luminous and ethereal effect. At the center, include a bold, modern heading that reads 'Crafting Digital Masterpieces' in a sleek sans serif font with a glowing white outline. Below the heading, place a dynamic subheading: 'Empowering Businesses Through Cutting Edge Web Solutions,' which appears with a typewriter animation. Include an engaging call to action button that says 'Get Started' with a hover effect that transitions the color from yellow to white and back, accompanied by a soft glow animation. Add subtle floating 3D geometric shapes (like cubes and spheres) in white and translucent yellow, moving slowly across the screen for interactivity. When hovered over, these shapes should expand slightly or rotate with smooth transitions. To enhance animation, integrate a parallax scrolling effect where different elements (heading, subheading, and shapes) move at varying speeds. Ensure a responsive design that adapts gracefully to all screen sizes." Navbar Prompt "Create an animated and interactive navbar with a clean, minimalistic design that complements the hero section. The navbar should use a semi transparent yellow blur background with rounded edges, giving it a modern and sleek appearance. Include the company logo on the left, with the text 'WebDevPro' glowing softly in white. Align navigation links ('Home,' 'About Us,' 'Services,' 'Portfolio,' 'Contact') to the center. Each link should have a hover animation where the text transforms from white to yellow and scales up slightly. On the right side, add a glowing button labeled 'Get a Quote,' which subtly pulses with a yellow to white gradient. For interactivity, incorporate a sticky behavior where the navbar remains fixed at the top of the page during scrolling. As the user scrolls down, the navbar's background should subtly shift to a solid yellow with a soft drop shadow effect."

Prompt
Component Preview

About

HeroSection - Create an animated hero with a vibrant blur gradient, glowing text, typewriter subheading, 3D shapes, and parallax effec. Get code instantly!

Share

Last updated 1 month ago