A
Anonymous

Landing Page - Copy this React, Tailwind Component to your project

Create-a-fully-responsive-landing-page-for-a-company-called-QubeLabs.-Requirements:-Tech-Stack:-Use-Astro,-React,-TailwindCSS,-View-Transitions,-Framer-Motion,-and-Shadcn-to-build-the-page.-Style-and-Color-Palette:-Main-palette:-purple-and-black.-Follow-modern,-minimalistic-design-best-practices.-Use-a-parallax-effect-in-the-Hero-section-and-smooth-animations-for-all-components-as-the-user-scrolls-(with-Framer-Motion).-SEO-and-Accessibility:-Utilize-semantic-HTML-and-adhere-to-best-practices-for-search-engine-optimization-(SEO).-Ensure-an-accessible-design-for-all-users.-Page-Structure:-The-page-should-include-the-following-sections:-Hero:-An-engaging-title,-a-subtitle-briefly-describing-the-company’s-services,-and-a-call-to-action-(CTA)-button.-Animated-background-with-a-parallax-effect.-Services:-A-clear-list-of-services:-digital-marketing,-custom-software-development,-growth-marketing,-and-community-management.-Each-service-should-feature-a-small-animated-icon-or-illustration-with-a-hover-effect.-Partners:-Display-logos-of-partners-or-placeholders-to-be-replaced-later.-Include-an-animated-carousel-that-moves-automatically-or-has-manual-controls.-About-Us:-A-brief-description-of-the-company,-its-mission,-and-vision.-Include-an-animated-grid-featuring-team-member-photos-(with-placeholders).-Contact-Form:-A-functional-form-with-fields-for-Name,-Email,-Message,-and-a-Submit-button.-Include-field-validation-and-a-success-message-upon-submission.-Images:-Use-placeholders-for-images-that-can-be-replaced-later.-Additional-Interactivity:-Add-smooth-transitions-between-sections-using-View-Transitions.-Include-hover-effects-and-micro-interactions-using-Shadcn-and-TailwindCSS.-Extras:-The-design-must-be-fully-responsive,-adapting-seamlessly-to-mobile,-tablet,-and-desktop-devices.-Add-comments-in-the-code-explaining-key-parts-to-facilitate-future-modifications.

Prompt
Component Preview

About

LandingPage - Create a responsive landing page with a parallax hero, animated services, and smooth transitions, built with react and t. Download code free!

Share

Last updated 1 month ago