Modernize README with enhanced design and improved navigation

[adnan-bhaldar]

PR Checklist

• Functionality has been tested, no obvious bugs
• Code style follows project conventions
• Documentation/comments updated (if applicable)

Brief Description of Changes

Please briefly describe the main changes in this PR:

Description

Modernized the README with a contemporary design and improved user experience.

Key Changes

• 🎨 Added animated fluent emoji icons throughout for visual engagement
• 🧭 Implemented quick navigation table with icon links
• 📊 Reorganized content with better visual hierarchy and spacing
• 🎯 Enhanced plugin showcase with feature highlights in vertical format
• 🔧 Updated badges with consistent styling and proper logos
• 📱 Improved installation options presentation with clear comparison
• ⌨️ Organized keyboard shortcuts in categorized tables
• 💡 Added "The Problem" section for better context
• 🎨 Modernized overall layout with better spacing and readability

Visual Improvements

• Modern badge styling with for-the-badge format
• Centered hero section with clear value proposition
• Feature cards with emoji headers
• Color-coded download options
• Better typography and section dividers

The new design maintains all original information while presenting it in a more engaging, scannable, and modern format.

Related Issue (if any)

Please provide related issue numbers:

Additional Notes

Add any extra notes here:

Compatibility

• All changes are purely visual/structural - no functional changes
• Markdown is fully compatible with GitHub's renderer
• Emoji URLs use stable CDN links (raw.githubusercontent.com)
• All existing links and references preserved

Design Decisions

• Used animated fluent emojis for modern, friendly aesthetic
• Maintained accessibility with proper alt text on all images
• Kept information hierarchy clear with visual cues
• Used collapsible sections for optional detailed content

Browser/Platform Support

• Renders correctly on GitHub web interface
• Mobile-friendly responsive tables
• Dark/light mode compatible
• Works in GitHub mobile app

Future Considerations

• Badge URLs are dynamic and will update automatically
• Emoji links may need occasional validation
• Consider adding a table of contents generator for longer sections
• Could add GIF demos in future iterations

Testing

• ✅ Previewed locally in Markdown viewer
• ✅ Verified all emoji image URLs load correctly
• ✅ Checked all internal anchor links work
• ✅ Confirmed external links are valid

Summary by Sourcery

Modernize the README to provide a more engaging, marketing-oriented introduction to QuickLook with clearer structure for discovery, installation, and contribution.

Documentation:

• Redesign README with a hero section, modern badges, and quick navigation to key topics like problem statement, features, installation, extensions, community, and license.
• Expand user-facing documentation with detailed feature breakdowns, supported scenarios, installation paths comparison, keyboard shortcuts, and plugin guidance.
• Reorganize community, credits, and licensing information into visually distinct sections emphasizing open source, contributors, and ways to get involved.

[sourcery-ai]

Reviewer's Guide

Rewrites and restructures README.md into a marketing-style landing page with hero section, icon-based navigation, feature breakdown, installation comparison, keyboard shortcut tables, plugin showcase, community/credits, and license sections, using richer HTML/Markdown, animated emoji assets, and modern badges while preserving original information and links.

Flow diagram for the new README content structure and navigation

flowchart TD
  A_Hero[Hero_section_logo_tagline_badges]
  B_Quick_Nav[Icon_navigation_table]
  C_Problem[Section_The_Problem]
  D_Superpowers[Section_Superpowers_feature_grids]
  E_GetStarted[Section_Get_Started_installation_options]
  F_Shortcuts[Section_Master_the_Shortcuts]
  G_Extend[Section_Extend_plugins_and_instructions]
  H_Community[Section_Community_and_for_developers]
  I_Credits[Section_Credits]
  J_License[Section_License_details]
  K_CallToAction[Final_call_to_action_star_docs_download]

  A_Hero --> B_Quick_Nav
  B_Quick_Nav --> C_Problem
  B_Quick_Nav --> D_Superpowers
  B_Quick_Nav --> E_GetStarted
  B_Quick_Nav --> G_Extend
  B_Quick_Nav --> H_Community

  C_Problem --> D_Superpowers
  D_Superpowers --> E_GetStarted
  E_GetStarted --> F_Shortcuts
  F_Shortcuts --> G_Extend
  G_Extend --> H_Community
  H_Community --> I_Credits
  I_Credits --> J_License
  J_License --> K_CallToAction

Loading

File-Level Changes

Change	Details	Files
Redesigned hero section with logo, tagline, badges, and hero image using HTML wrappers and responsive-friendly markup.	Replaced plain logo image with a element that respects dark mode and adds alt text and increased logo size. Wrapped project title, tagline, and badges in a centered using HTML headings and animated emoji icons. Replaced simple shields.io badges with for-the-badge style badges including additional build, platform, license, stars, release, and downloads indicators. Styled the main preview screenshot as a large hero image with rounded corners.	README.md
Introduced icon-based quick navigation and a new problem/solution narrative section to explain QuickLook’s value proposition.	Added a quick navigation table with icon links that jump to key sections via anchors. Replaced the plain Background section with a new "The Problem" section describing the macOS Quick Look gap and Windows solution using copy, emojis, and a comparison code block. Reframed the existing highlights into a "Superpowers" section with feature cards and categorized feature lists for file types and environments.	README.md
Reorganized installation and usage instructions into a visually structured "Get Started" flow with comparison and call-to-action badges.	Replaced the simple bullet list of distribution options with a four-column install options table (Store, Installer, Scoop, Nightly) including icons, pros/cons, and CTA badges. Embedded a details/summary element with a feature comparison table across distributions, linking to the existing wiki comparison page. Converted the textual "Typical usecase" into a "Quick Start" step diagram and pro tips list in a two-column layout.	README.md
Modernized shortcut, plugin, and integration sections into categorized tables and feature cards while preserving original content.	Replaced the flat hotkey list with three categorized keyboard shortcut tables (Basic Controls, Navigation, Advanced) under a new shortcuts section. Expanded the plugins section into a plugin showcase grid with individual cards, descriptive bullets, and download badges for official plugins, plus explicit install/upgrade/remove steps using tables. Referenced existing documentation pages (Supported formats, file managers wiki, plugin lists) via clearer, more prominent links rather than inline sections.	README.md
Consolidated community, translation, developer, credits, and licensing information into dedicated, visually distinct sections.	Introduced a "Community" section with cards for QQ group, translations, starring the repo, and developer resources with CTA badges. Refactored the previous "Thanks to", "Developer", and "Licenses" sections into separate "Credits" and "License" sections with icons, grouped attribution, and GPL v3 badge imagery. Retained and relinked prior references to contributors, translations guide, libraries used, and license terms while framing them in more marketing-friendly copy. Added a closing call-to-action block encouraging stars, documentation visits, issue reporting, and downloads, plus a small animated emoji footer.	README.md

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• The README now relies heavily on external emoji/image CDNs (many raw.githubusercontent.com/Tarikul-Islam-Anik/... links); consider reducing or consolidating these assets to avoid performance issues, broken previews if the repo changes, and visual noise for users on slower connections.
• There are many HTML tables and complex layout elements in the README; you may want to simplify some of these or fall back to plain Markdown where possible to improve readability on narrow screens and for screen readers.
• Several decorative images lack alt text or use descriptive alt text even when purely decorative (e.g., emojis in headings and grids); standardizing alt usage (empty alt for decorative, meaningful alt for informative) would keep the design accessible while preserving the visual style.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The README now relies heavily on external emoji/image CDNs (many `raw.githubusercontent.com/Tarikul-Islam-Anik/...` links); consider reducing or consolidating these assets to avoid performance issues, broken previews if the repo changes, and visual noise for users on slower connections.
- There are many HTML tables and complex layout elements in the README; you may want to simplify some of these or fall back to plain Markdown where possible to improve readability on narrow screens and for screen readers.
- Several decorative images lack `alt` text or use descriptive `alt` text even when purely decorative (e.g., emojis in headings and grids); standardizing alt usage (empty alt for decorative, meaningful alt for informative) would keep the design accessible while preserving the visual style.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[emako]

I feel that some of the content could be improved. I’ll take a closer look first.

[adnan-bhaldar]

• i have also updated SUPPORTED_FORMATS.md file so check it