Revamp documentation page for improved readability and visuals

[dhananjay6561]

Docs Page Revamp – Visual & UX Improvements

Overview

This PR delivers a comprehensive visual and UX revamp of the documentation site with a focus on:

• Cleaner, modern layout and improved sidebar
• Better responsiveness across devices (desktop, tablet, mobile)
• Enhanced dark mode experience
• Improved Table of Contents (TOC) usability and configuration

---

Key Changes

Visual Overhaul

• Refined layout in src/theme/DocItem/styles.module.css for a cleaner documentation experience
• Applied DM Sans font across the site for improved readability
• Enhanced sidebar and TOC styling for clearer navigation

Responsiveness

• Optimized layouts for desktop, tablet, and mobile screens
• Adjusted paddings, margins, and typography for consistency across breakpoints

Dark Mode Enhancements

• Improved dark mode styling in:
  • ProductTier.js
  • TierCallout.js
• Enhanced contrast, chips, and note components for better visibility

TOC Improvements

• Added min/max heading level configuration in docusaurus.config.js
• Improved TOC styling and readability

Miscellaneous

• Removed hash symbols after headings (src/theme/Heading/styles.module.css)
• Minor content and metadata update in docs/gsoc/contribution-guide.md

---

Files Changed

• src/css/custom.css
• src/theme/DocItem/styles.module.css
• src/theme/Heading/styles.module.css
• src/components/ProductTier.js
• src/components/TierCallout.js
• docusaurus.config.js
• docs/gsoc/contribution-guide.md
• src/theme/DocItem/index.js

Total: 603 additions, 264 deletions

---

Screenshots

Desktop Responsiveness

Before vs After

---

Tablet View

Before vs After

---

Mobile View

Before vs After

---

Dark Mode

Before vs After

---

Build Verification

Successful production build

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in keploy

[Copilot]

Pull request overview

This PR revamps the Docusaurus docs UI (layout, typography, sidebar/TOC, dark mode styling) to improve readability and navigation across breakpoints.

Changes:

• Applies a new visual system (DM Sans typography, updated spacing, refreshed sidebar/TOC styling).
• Improves dark-mode styling for tier chips/callouts and code/inline-code presentation.
• Adjusts TOC configuration globally (min/max heading levels) and per-doc metadata.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/css/custom.css	Global typography enforcement, code/TOC/sidebar/pagination styling refinements, dark-mode adjustments.
src/theme/DocItem/styles.module.css	Adds DocItem-level styling overrides (layout/sidebar/TOC/typography).
src/theme/Heading/styles.module.css	Removes visible # marker from heading anchor links.
src/components/ProductTier.js	Updates dark-mode chip appearance.
src/components/TierCallout.js	Improves dark-mode note/chip contrast.
docusaurus.config.js	Sets global TOC heading-level configuration.
docs/gsoc/contribution-guide.md	Adds TOC front-matter configuration for the page.
src/theme/DocItem/index.js	Minor formatting change; DocItem/TOC rendering remains the same.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.