Study Notes Component - Copy this React, Tailwind Component to your project

1.-Page-Title-&-Introduction:-Title:-"Study-Notes:-Access-Notes-from-Leading-Academies"-Centered-heading-with-a-large-font-size-(e.g.,-36px).-Use-a-bold,-easy-to-read-font-like-Montserrat-or-Poppins.-Subtitle:-"Browse,-Preview,-and-Download-Notes-on-Subjects-like-Hindi,-English,-Math,-Reasoning,-GK"-Smaller-font-under-the-main-title-for-clarity,-in-a-lighter-color.-Search-Bar:-A-search-bar-at-the-top-of-the-page-where-students-can-search-for-notes-by-subject-or-academy.-Include-a-filter-dropdown-next-to-the-search-bar-for-filtering-by-Academy-(Sigma,-Gurukul,-ICS,-Udaan-Academy).-The-search-should-dynamically-filter-results-based-on-the-entered-keyword-or-selected-filter.-2.-Notes-Filter-Section:-Academy-Filter:-Dropdown-Menu-to-select-the-academy:-Options:-Sigma,-Gurukul,-ICS,-Udaan-Academy.-Ensure-the-dropdown-is-collapsible-and-clean.-Subject-Filter:-Dropdown-Menu-to-select-subject:-Options:-Hindi,-English,-Math,-Reasoning,-GK.-Clear,-consistent-labeling.-Difficulty-Level-Filter-(Optional):-Dropdown-to-filter-by-difficulty-level:-Easy,-Medium,-Hard.-3.-Notes-Display-Section-(Grid-Layout):-Layout:-Grid-of-Cards-or-List-View-(option-to-toggle-between-grid/list-view):-Grid-View:-3-or-4-columns-based-on-screen-size-(desktop-vs-mobile).-List-View:-A-single-column-view-with-more-detailed-descriptions.-Each-Note-Card-should-include:-Academy-Logo:-(e.g.,-small-logo-of-Sigma,-Gurukul,-ICS,-Udaan).-Subject:-Bold-font-displaying-the-subject-(e.g.,-Hindi,-Math).-Title-of-the-Notes:-The-title-of-the-PDF-or-resource-(e.g.,-"Advanced-Algebra-Notes").-Short-Description:-A-1-2-line-description-of-the-content-of-the-note-(e.g.,-"Covers-basic-to-advanced-algebra-concepts-for-Class-10").-Download-Button:-A-clear-"Download"-button-on-each-card.-Preview-Button-(Optional):-A-button-that-allows-students-to-preview-the-first-few-pages-of-the-PDF-before-downloading.-Example-Card-Layout:-Top:-Academy-logo-in-the-top-left-corner,-subject-in-the-top-right-corner.-Middle:-Title-of-the-note,-description.-Bottom:-Download-and-preview-buttons.-4.-Sorting-&-Pagination:-Sorting-Options:-Provide-sorting-options-for-notes-based-on:-Most-Recent-Alphabetical-Popularity-(Most-Downloaded)-Pagination:-Display-notes-in-pages-(e.g.,-10-notes-per-page),-with-pagination-controls-(Next/Previous-buttons,-and-page-numbers).-Ensure-the-page-loads-smoothly-with-pagination-(no-reloads,-infinite-scroll-option-is-also-possible).-5.-Featured-Notes-Section-(Optional):-Section-Title:-"Featured-Notes"-Display-a-carousel-or-grid-of-premium-notes-that-are-recommended-or-most-popular.-These-notes-can-be-curated-by-your-team-based-on-quality,-popularity,-or-student-feedback.-6.-Note-Detail-Page-(Optional-Preview-Link):-When-students-click-on-a-note,-they-should-be-redirected-to-a-detailed-page-for-that-note-(or-a-modal-popup).-Note-Details-Page-should-include:-Full-Description:-A-longer-description-of-what-the-note-covers.-Preview-PDF:-Display-the-first-few-pages-in-a-PDF-viewer.-Download-Button:-A-clear-call-to-action-for-downloading-the-PDF-file.-Other-Related-Notes:-A-carousel-or-grid-of-other-notes-related-to-the-current-subject-or-academy.-7.-Responsive-Design-Features:-Mobile-First-Layout:-Collapsible-Filters:-On-mobile-devices,-make-the-subject-and-academy-filters-collapsible,-ensuring-a-clean-design.-Cards:-In-mobile-view,-show-notes-in-a-single-column-for-better-readability.-Download-Button:-Large,-easy-to-tap-download-button-on-mobile.-Pagination:-Stack-pagination-controls-vertically-for-better-interaction-on-smaller-screens.-Color-Scheme-&-Typography:-Primary-Colors:-Background:-White-or-light-gray-background-for-a-clean,-minimalistic-feel.-Buttons:-Use-a-bright-color-(Blue/Green-for-action-buttons-like-"Download",-"Preview").-Card-Backgrounds:-Soft-shadows-on-cards-to-create-depth,-and-a-hover-effect-when-users-interact-with-cards-(scale-up,-change-in-color).-Active-Filters:-Highlight-active-filters-with-a-bold-color-(e.g.,-light-blue-for-selected-filters).-Font-Style:-Title/Heading:-Bold-sans-serif-font-(e.g.,-Montserrat,-Poppins)-for-headings.-Body-Text:-Clean,-sans-serif-font-(e.g.,-Open-Sans,-Roboto)-for-the-description-and-content.-Buttons:-Bold-and-large-for-visibility.-(e.g.,-“Download-Now”).-Footer-Section-(Optional,-but-for-consistency):-Quick-Links:-Terms-&-Conditions,-Privacy-Policy,-Contact-Support.-Social-Media-Links:-Facebook,-Instagram,-YouTube,-LinkedIn.-Newsletter-Signup:-Form-to-sign-up-for-email-notifications-and-updates.