feat: add screenshot section to README

- Add dedicated screenshots section after Live Demo for immediate visual impact
- Create .github/screenshots/ directory for organized image storage
- Include placeholders for light mode, dark mode, and mobile screenshots
- Add comprehensive screenshot guide with specific instructions
- Provide realistic content examples and technical specifications

Screenshots will showcase:
- Split-view editor/preview layout
- Dark/light mode themes
- Mobile responsive design
- Real markdown content examples

This addresses the missing visual element that makes READMEs much more compelling.

Author: SolutionsRMe

.github/screenshots/README.md

@@ -0,0 +1,64 @@
+# Screenshots Guide
+
+This directory contains screenshots for the README.md file.
+
+## Required Screenshots:
+
+### 1. `light-mode.png`
+- Take a screenshot of the app in light mode
+- Show the split-view with editor on left, preview on right
+- Include some sample markdown content (like meeting notes)
+- Make sure the sidebar with notes list is visible
+- Recommended size: 1200x800px or similar
+
+### 2. `dark-mode.png`
+- Same layout as light mode but with dark theme enabled
+- Use Ctrl+D to toggle to dark mode before taking screenshot
+- Show the same or similar content for consistency
+- Recommended size: 1200x800px or similar
+
+### 3. `mobile.png`
+- Take a screenshot on mobile device or use browser dev tools
+- Show how the app adapts to smaller screens
+- Demonstrate the responsive design
+- Recommended size: 375x812px (iPhone size) or similar mobile dimensions
+
+## Tips for Great Screenshots:
+
+1. **Use realistic content** - Don't use "Lorem ipsum", use actual markdown like:
+   ```markdown
+   # Project Meeting Notes
+   
+   ## Action Items
+   - [x] Review design mockups
+   - [ ] Schedule client call
+   - [ ] Update timeline
+   
+   ## Code Review
+   ```javascript
+   const handleSubmit = async (data) => {
+     return await api.post('/notes', data);
+   };
+   ```
+
+2. **Show key features**:
+   - Multiple notes in sidebar
+   - Live preview working
+   - Word count in footer
+   - Clean, professional interface
+
+3. **Good lighting/contrast** - Make sure text is clearly readable
+
+4. **Consistent styling** - Use the same zoom level and window size
+
+## How to Take Screenshots:
+
+1. Open the app at: https://thesolutiondeskandcompany.github.io/markdown-notes/
+2. Create some sample notes with realistic content
+3. For light mode: Take screenshot
+4. Press Ctrl+D to switch to dark mode
+5. Take dark mode screenshot
+6. Use browser dev tools (F12) to simulate mobile view
+7. Take mobile screenshot
+
+Save the files as PNG format with the exact names listed above.

README.md

@@ -12,6 +12,17 @@
 
 👉 [Try it now!](https://thesolutiondeskandcompany.github.io/markdown-notes/)
 
+## 📸 Screenshots
+
+### Light Mode
+![Markdown Notes - Light Mode](.github/screenshots/light-mode.png)
+
+### Dark Mode
+![Markdown Notes - Dark Mode](.github/screenshots/dark-mode.png)
+
+### Mobile Responsive
+![Markdown Notes - Mobile](.github/screenshots/mobile.png)
+
 ---
 
 ## ⚡ Quick Start