docs(chapter1): improve introduction page readability and accessibility

[SouparnaChatterjee]

Fixes #487

Changes done:

• Fixed grammar: "electronic engineers" → "electronics engineers"
• Fixed grammar: "play with digital circuit simulations" → "experiment with digital circuit simulations"
• Fixed grammar: "yield their curiosity" → "satisfy their curiosity"
• Fixed grammar: "high class learning experience" → "high-quality learning experience"
• Reduced repetitive use of "different" for better flow
• Added section headings for improved readability (Classroom Management for Educators, Chrome Extension, Community & Collaboration, Platform Demo)
• Split lengthy paragraphs into smaller, logical sections
• Added bullet list for key educator features
• Added descriptive alt text to all images for accessibility
• Added title attributes to iframes for screen readers
• Added fallback YouTube link for users who cannot view embedded videos
• Replaced deprecated <div align="center"> with Markdown-compatible italics formatting
• Used self-closing iframe tags and JSX-style frameBorder attribute

Screenshots:

Preview Link(s):

✅️ By submitting this PR, I have verified the following

• Checked to see if a similar PR has already been opened 🤔️
• Reviewed the contributing guidelines 🔍️
• Sample preview link added (add a link from the checks tab after checks complete)
• Tried Squashing the commits into one

[coderabbitai]

Walkthrough

The documentation for Chapter 1 Introduction has been restructured and reorganized. The previous introductory narrative was replaced with an updated content structure, including a revised iframe embedding approach, removal of extensive descriptive paragraphs and figure blocks, and addition of new sections covering Classroom Management for Educators, Chrome Extension, Community & Collaboration, and Platform Demo. A new MDX documentation file was created containing front matter metadata (id, title, description, slug) and introductory content about CircuitVerse, with embedded video content and updated imagery and descriptions.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'docs(chapter1): improve introduction page readability and accessibility' directly reflects the main changes in the PR—improved readability, grammar fixes, and enhanced accessibility in the documentation.
Linked Issues check	✅ Passed	The PR successfully addresses all coding objectives from issue #487: grammar corrections, paragraph restructuring, section headings, descriptive alt text, deprecated HTML replacement, and iframe accessibility improvements are all implemented.
Out of Scope Changes check	✅ Passed	All changes are scoped to the introduction documentation file and directly support issue #487's objectives; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

docs/chapter1/1introduction.md (1)

10-20: Minor iframe attribute consistency.

The first iframe (line 10-20) omits the frameBorder="0" attribute, while the second iframe (line 70-81) includes it. For consistency and to maintain a clean border appearance on both embeds, consider adding frameBorder="0" to the first iframe as well.

🔎 Proposed consistency update

 <iframe
   width="100%"
   height="330px"
   src="https://circuitverse.org/simulator/embed/701"
   id="projectPreview"
   scrolling="no"
   webkitAllowFullScreen
   mozAllowFullScreen
   allowFullScreen
+  frameBorder="0"
   title="CircuitVerse Simulator - Interactive Demo"
 />

Also applies to: 70-81

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bace6c5 and 2c946c9.

📒 Files selected for processing (2)

• docs/chapter1/1introduction.md
• docs/chapter1/chapter1-introduction.mdx

🧰 Additional context used

🪛 markdownlint-cli2 (0.18.1)

docs/chapter1/1introduction.md

30-30: Emphasis used instead of a heading

(MD036, no-emphasis-as-heading)

---

48-48: Emphasis used instead of a heading

(MD036, no-emphasis-as-heading)

---

62-62: Emphasis used instead of a heading

(MD036, no-emphasis-as-heading)

🔇 Additional comments (2)

docs/chapter1/1introduction.md (1)

1-81: Accessibility improvements are well-implemented.

The file properly includes:

• Descriptive alt text for all images
• Title attributes on both iframes
• A fallback YouTube link for non-embedded viewers
• Proper heading hierarchy
• No deprecated HTML elements

These changes effectively address the accessibility objectives from issue #487.

docs/chapter1/chapter1-introduction.mdx (1)

1-57: Clarify the relationship between the two introduction files.

The repository now contains two nearly identical documentation files:

• docs/chapter1/1introduction.md (81 lines)
• docs/chapter1/chapter1-introduction.mdx (57 lines)

Both files cover the same content (What is CircuitVerse, Classroom Management, Community & Collaboration, and Platform Demo) with only minor wording differences. Having duplicate documentation creates maintenance burden and risks divergence.

Please clarify the intent:

• Should one file replace the other?
• Is this a deliberate consolidation strategy where the old file will be removed in a follow-up?
• Should these be merged into a single authoritative source?