Add Beginner-Friendly Computer Networks Documentation for Semester 4

[ayushyadav0707]

Related Issue

Related to #12

Description

This PR introduces structured and beginner-friendly documentation for the Computer Networks subject in Semester 4. The update establishes the foundational content architecture for the subject while adding core networking concepts designed to improve accessibility, navigation, and understanding for students.

The implementation also enhances the learning experience through modular navigation, technical diagrams, and an improved UI layout consistent with the platform’s modern design system.

Changes Made
Subject Structure
Created the app/sem4/cn directory structure
Added a dedicated layout.tsx and custom Sidebar for Computer Networks
Implemented a dynamic chapter-based routing system for scalable content organization and easier chapter navigation
Content Modules Added

Chapter 0 — Course Outline
Added a complete overview of the course structure and modules
Provides students with a roadmap of topics covered in Computer Networks

Chapter 1 — Reference Models
Added detailed explanations of:
OSI Model
TCP/IP Model

Included:
Layer-by-layer breakdowns
Comparison tables
Easy-to-remember mnemonics for better retention
Beginner-friendly explanations of networking fundamentals

Chapter 2 — Networking Devices

Added beginner-friendly explanations of:

Hubs
Switches
Routers
Bridges
Gateways
Repeaters
Modems

Included:

Operating layer references
Networking roles and real-world usage explanations for each device
Visual Enhancements

Added custom technical diagrams for:

OSI Model
TCP/IP Model
Hubs
Switches

These visuals improve conceptual clarity and make the documentation more engaging and easier to understand for students.

UI Integration
Updated the SubjectsSection component
Moved Computer Networks from:
“Coming Soon”
→ “Available”

This enables users to directly access the newly added content.

Cleanup & Refinements
Removed the previously added "Key Interview Questions" section based on review feedback
Planned to reintroduce it later as a dedicated Quiz/Practice feature

Aesthetic Improvements
Enhanced the CN landing page using:
Modern gradients
Improved spacing
Premium layout styling
Improved visual consistency with the overall platform UI

Type of Change
New feature
Documentation update
UI/UX improvement

Screenshots / Demo

How Has This Been Tested?
Verified all chapter routes render correctly
Tested sidebar navigation between CN modules and chapters
Confirmed responsive rendering across desktop and mobile layouts
Validated formatting consistency with existing subject documentation
Verified all custom diagrams render correctly
Confirmed the subject now appears correctly under “Available” in SubjectsSection
Checked that layout integration works without affecting existing pages

Checklist
My code follows the project structure and conventions
I have tested the changes locally
I have linked the related issue properly
No existing functionality was broken

[vercel]

@shimonenator is attempting to deploy a commit to the PushkarScripts Team on Vercel.

A member of the Team first needs to authorize it.

[pushkarscripts]

There're some problems:

• PR Description needs to be rewritten.
• Since there'll be more patch under this issue, replace Fixes # to Related to #
• Sidebar is missing:
  
• layout.tsx, page.tsx, components/ folder is completely missing.
• Diagrams/Images are missing for topics like: Hubs, Switch, TCP/IP models etc.
• Remove "Key Interview Questions" section entirely as Quizzes will be a separate feature to be added in future.

Implement these changes and update the PR

[ayushyadav0707]

Okayyy I am working on it.

[ayushyadav0707]

I have made the changes in the files you asked for and uploaded the images in the "public/" file....Please check @pushkarscripts