Educational Website - Copy this React, Tailwind Component to your project
Create-a-fully-responsive,-professional-educational-website-with-a-clean,-modern-layout.-The-website-will-feature-an-intuitive-structure-that-adapts-smoothly-across-all-device-sizes,-with-specific-design-considerations-for-both-desktop-and-mobile-views.-Website-Layout-and-Features:-Header:-At-the-top-left,-display-a-logo-labeled-"Class-09".-A-navigation-menu-will-appear-on-the-right-side-with-five-primary-items:-Home,-Biology,-Chemistry,-Physics,-and-Talha.-The-Talha-menu-item-will-have-a-dropdown-on-desktop,-containing-Talha-Malik-Academy-and-Talha-Updates.-Mobile-View:-On-mobile-devices,-replace-the-main-navigation-with-a-hamburger-menu-icon.-When-tapped,-a-slide-out-menu-will-appear,-displaying-all-navigation-items-in-a-clean,-vertical-list,-with-any-dropdown-items-expandable-upon-tap.-Banner:-Feature-a-prominent-banner-with-a-main-heading,-"Class-09-Science-Books-Easy-Notes."-Include-a-secondary-heading-on-the-next-line:-"Sponsored-By-ChatGPT-and-Google".-The-word-Sponsored-should-be-underlined-in-red,-while-other-words-appear-in-contrasting-colors-for-emphasis.-Below-the-heading,-add-a-Subscribe-for-Premium-Notes-button-to-encourage-user-engagement.-Notes-Section:-Add-a-section-titled-"Notes"-with-three-cards-for-Biology,-Chemistry,-and-Physics.-Each-card-should-include-an-image-of-the-respective-book,-a-short-description,-and-an-Access-Now-button-to-guide-users-to-more-detailed-content.-Courses-Section:-Introduce-a-"Courses"-section-with-a-main-heading-and-four-course-cards.-Each-card-will-feature-a-course-image,-description,-and-a-colorful,-glowing-border-animation-to-attract-attention.-Teachers-Section:-This-section-will-showcase-teacher-information,-including-names,-images,-and-brief-bios.-Students-Section:-Add-a-Students-section-with-seven-student-cards-arranged-in-a-row.-Each-card-will-display-the-student’s-picture-and-a-short-bio-for-a-personal-touch.-Footer:-A-simple,-centered-footer-will-display-basic-information,-such-as-contact-details-or-copyright-text.-Additional-Elements:-Loader-Animation:-Add-a-unique-loading-animation-featuring-six-images-that-appear,-collapse-together,-and-create-a-flash-of-light,-followed-by-the-main-heading-"Class-09-Notes"-and-the-subheading-"Saidpur,-Islamabad"-before-the-main-page-content-loads.-Design-and-Responsiveness:-Color-Theme:-Use-a-sleek-black-theme-with-dotted-white-borders-for-a-modern,-high-contrast-look.-Responsiveness:-Ensure-the-layout-adapts-seamlessly-on-all-screen-sizes,-maintaining-readability-and-user-friendliness-across-desktops,-tablets,-and-smartphones.
