enhancement(docs): Improve landing page experience (#398)

* Add animated terminal console to documentation homepage

- Create new AnimatedConsole.astro component with typing animation
- Display actual pathfinder scan output with command and results
- Start with command being typed, then stream output quickly
- Use terminal-style colors (Catppuccin-inspired)
- Remove borders for authentic terminal experience
- Add blinking cursor that disappears when animation completes
- Use IntersectionObserver to trigger animation on scroll
- Update index.mdx to use AnimatedConsole instead of static code block

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Refine animated console styling and formatting

- Update command to use rules directory instead of specific file
- Apply critical-label color to entire heading line (through A03:2021)
- Adjust code color to lighter shade for better readability
- Improve spacing: larger padding (28px 32px), wider container (920px)
- Increase font size to 14px and line height to 1.6
- Enhance border radius to 12px for smoother appearance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Fix spacing between command and output in animated console

- Add proper line break after command execution
- Improve visual separation between input and output sections

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Add fixed height and auto-scroll to animated console

- Set max-height to 500px with vertical scrolling
- Auto-scroll to bottom as animation progresses
- Creates a more compact, terminal-like experience

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Add auto-loop to animated console with 5-second pause

- Animation restarts automatically after completion
- 5-second pause between loops
- Clears output and scrolls to top before restarting
- Creates continuous demo effect for homepage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Add macOS-style terminal header with fixed height

- Add terminal header with red, yellow, green buttons (macOS style)
- Set fixed height of 500px for terminal container
- Terminal body uses flexbox to fill remaining space
- Content scrolls within fixed terminal window
- More authentic macOS terminal appearance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Improve terminal spacing and animation speed

- Reduce line-height from 1.6 to 1.4 for tighter vertical spacing
- Fix command-output alignment with proper line breaks
- Speed up animation: char delays reduced to 1-3ms (from 3-8ms)
- Reduce section pauses to 50ms (from 100-200ms)
- Faster, more natural terminal output experience

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Add random vulnerability selection and improve naming

- Create pool of 10 different vulnerability types
- Randomly select 2 vulnerabilities each animation loop
- Update project name to flask_webapp (clearer than python_cpf_app)
- Update rules to owasp_ruleset (clearer than cpf_rules)
- Green color for rule names for better visual hierarchy
- Reduced line-height to 1.25 for tighter spacing
- Faster animation (1ms delays for most content)
- Added left margin to scan output only

---------

Co-authored-by: Claude <[email protected]>

Author: shivasurya