Enhanced modal guidance documentation while maintaining consistency

[Souradip121]

Description

This PR fixes #6292

Notes for Reviewers
I have put consistent styling along with implementing guidance section and elaborating on the code section with basic imports

2025-04-02.12-32-50.mp4

Signed commits

• Yes, I signed my commits.

[Souradip121]

@vishalvivekm take a look at my changes

[l5io]

🚀 Preview for commit 8f441a1 at: https://67ece58889990cd3f22385e3--layer5.netlify.app

[Copilot]

Pull Request Overview

This PR enhances the modal documentation and consistency by introducing new styled components for documentation tables, refining guidance content, and updating code examples.

• Introduces new styled components (DocsTable, TableHead, TableBody, guidance list styles)
• Updates modal navigation (TabButton routes) and documentation structure in the modal guidance and code examples
• Refines inline styling and code snippet examples for clarity and consistency

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/sections/Projects/Sistent/sistent.style.js	Adds styled components for documentation tables and guidance list styling
src/sections/Projects/Sistent/components/modal/index.js	Removes redundant commented code and corrects TabButton navigation
src/sections/Projects/Sistent/components/modal/guidance.js	Reorders imports, applies dark mode hook, and improves guidance section structure
src/sections/Projects/Sistent/components/modal/code.js	Updates code examples with refined button styling, documentation tables, and snippet improvements

Comments suppressed due to low confidence (1)

src/sections/Projects/Sistent/components/modal/code.js:103

• The usage of the 'text' prop for CustomInput differs from the previous usage with the 'label' prop; ensure that the CustomInput component implementation is updated accordingly, or revert the prop change to maintain consistency.

<CustomInput text="Name" />

[Copilot]

The code example uses useState to manage modal visibility without including its import; consider adding an import statement (e.g., 'import React, { useState } from "react";') for completeness in the snippet.

Suggested change

	const importExample = `// Import the necessary components
	const importExample = `// Import the necessary components
	import React, { useState } from "react";