A
Anonymous

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

Create-a-responsive-webpage-for-a-course-landing-page.-It-will-feature-a-large-banner-(70-90vh)-with-a-background-image-that-fades-from-dark-on-the-left-to-clear-on-the-right.-Bold,-italicized-text-on-the-left-side-will-say-'AI-Development-Complete-Course,'-styled-prominently-as-a-large,-eye-catching-heading.-Below,-add-a-brief-description-and-a-'Watch-Trailer-Now'-button,-which-scrolls-to-a-video-section-on-click.-In-the-video-section,-include-an-embedded-video-player-with-a-pop-up-effect-on-play,-low-brightness-overlay-background,-a-close-icon-at-the-top,-and-rounded-borders.-Following-the-video,-add-three-centered-boxes-with-shadow-effects.-The-first-box-will-say-'Why-I-Chose-This-Course,'-with-animated-question-marks-on-the-right.-Then-add-a-'Course-Curriculum'-section-with-a-bold,-red-heading.-This-section-has-two-parts:-Left:-A-69%-width-dropdown-for-each-chapter.-The-first-dropdown-will-display-'Chapter-01:-Basic-to-ChatGPT,'-with-clickable-video-items-for-each-lesson.-Right:-A-box-with-a-course-thumbnail,-a-full-description,-and-two-buttons—'Check-Free-Week'-and-'Buy-Full-Course.'-Finally,-add-a-footer-with-social-media-icons.-Ensure-all-headings-are-large,-bold,-and-visually-appealing,-with-responsive-buttons-and-smooth,-fast-loading-components-throughout.

Prompt
Component Preview

About

CourseLanding - Create a responsive course page with a large banner, video player, curriculum dropdowns, and social icons, built with. Download free code!

Share

Last updated 1 month ago