Create a fully responsive, modern, AI-Powered Study Material / Notes Marketplace website with the following structure and features: --- ### 1️⃣ Folder / File Structure: /project-root │ ├─ index.html # Homepage ├─ categories.html # Category listing page ├─ post-upload.html # Post your notes / content ├─ ai-tools.html # AI Tools page (Summarizer, PDF Generator, Tagging) ├─ blog.html # Blog section ├─ about.html ├─ contact.html ├─ faq.html ├─ privacy-policy.html ├─ terms.html ├─ disclaimer.html │ ├─ /css │ ├─ style.css │ └─ responsive.css │ ├─ /js │ ├─ main.js │ └─ ai-tools.js │ ├─ /images # Placeholder images │ └─ /assets # Fonts / icons / additional assets --- ### 2️⃣ Homepage (index.html) Requirements: - Hero section with background image / illustration - CTA buttons: “Browse Notes”, “Upload Content” - Featured Categories section (Class Notes, Exam Prep, Mock Tests, Recorded Videos, Assignments, Study Guides) - Featured / Popular Notes section (with dummy notes cards) - AI Tools promo section (Summarizer, PDF Generator, Tagging) - Blog preview section - Newsletter subscription form - Footer with links: About, Contact, FAQ, Privacy, Terms, Disclaimer + social media icons --- ### 3️⃣ Categories Page (categories.html): - Grid layout of all categories with icon/image - Search bar & filters: Class, Exam, Subject, File type, Country/City - Pagination for large content - Each card: Note thumbnail, title, author, rating, price, download button --- ### 4️⃣ Post Upload Page (post-upload.html): - User login / signup form placeholder - Form fields: - Title - Category / Subcategory - Class / Exam - Description - Upload File (PDF, Video) - Price (Free / Paid) - AI Summarizer button: Summarizes uploaded content - AI Tagging button: Automatically generate tags / keywords - Submit button --- ### 5️⃣ AI Tools Page (ai-tools.html): - Three sections: 1. AI Notes Summarizer 2. AI PDF Generator 3. AI Content Tagging - Each tool: Textarea for input, process button, result display - Placeholder for AI API integration - Clean, interactive UI --- ### 6️⃣ Blog Page (blog.html): - Blog post cards with title, snippet, image, read more button - Categories/tags filter - Pagination --- ### 7️⃣ Navigation Menu: - Links: Home, Categories, Post Notes, AI Tools, Blog, About, Contact - Sticky / responsive nav for mobile - Dropdowns for categories --- ### 8️⃣ Footer: - Quick links: About, Contact, FAQ, Privacy, Terms, Disclaimer - Newsletter subscription form - Social media icons - Copyright --- ### 9️⃣ CSS & JS Requirements: - Modern responsive design - Smooth hover animations - Grid layouts for cards - Mobile-first responsive breakpoints - JS for: - Navigation toggle - Search/filter functionality - AI tools interaction (placeholder) - Form validation - Dynamic content preview --- ### 10️⃣ Dummy Content / Placeholders: - Add placeholder images, text, and dummy notes / videos - AI Tools: Buttons should show placeholder output for demo - Categories: Minimum 6 categories with sample content - Blog: 3–5 sample posts --- ### 11️⃣ Technical Notes: - Fully frontend ready (HTML/CSS/JS) - AI tools require backend/API integration separately - Site should be scalable for thousands of notes / users - SEO-friendly structure with proper meta tags --- ### 12️⃣ Design & Branding: - Colors: Light background (#f9f9f9), accent colors (#1E90FF, #28a745, #FF8C00) - Fonts: Sans-serif (Roboto, Open Sans) - Hero illustrations: Students, Teachers, Notes, Books - Buttons: Rounded corners, hover effects - Cards: Shadow, hover lift effect --- **Important:** The generated code should allow immediate preview in browser with all sections visible, responsive layout, and placeholders for AI tools functionality. Full AI functionality can be integrated later via APIs.