feat(tarko-agent-ui): welcome cards - #1643

…rlay cards

…over prompts

…op-down flow

…ove min-height constraint

…oss tabs

…yout across tabs"

This reverts commit 8d24c08.

…layout sections

…le layout

- Add beautiful background images with proper scaling and gradients
- Implement glassmorphism design with backdrop blur effects
- Add hover animations with lift effect and arrow indicators
- Include category badges with counts in pill-style tabs
- Support fallback gradients for cards without images
- Add loading states with spinner overlay
- Improve responsive grid layout (up to 4 columns)
- Enhance typography and spacing for better readability

…t input stability

- Remove fixed h-screen constraint that prevented scrolling
- Replace fixed height sections with flexible min-height approach
- Use min-h-[60vh] for chat input area to maintain visual balance
- Enable natural page scroll for welcome cards section
- Preserve chat input position stability during tab switches

…nable scrolling

- Remove overflow-hidden constraint from homepage route container
- Keep overflow-hidden only for session pages where it's needed
- Enable natural page scrolling for homepage content
- Maintain proper layout structure without scroll restrictions

…-screen for scrollability

- Replace h-screen with min-h-screen in homepage route container
- Allow content to expand beyond viewport height and enable scrolling
- Maintain minimum viewport height while permitting overflow
- Fix the root cause of scrolling prevention in homepage layout

…ut for homepage

- Restore h-screen container to keep sidebar fixed in position
- Add overflow-hidden to main container and overflow-y-auto to content area
- Create proper scroll boundary: sidebar fixed, right content scrollable
- Remove min-h-screen from WelcomePage to work within scroll container
- Achieve desktop app behavior: fixed sidebar + scrollable main content

…aesthetics

🎨 Premium Design Features:
- Glassmorphism effects with backdrop blur and translucent borders
- Sophisticated gradient backgrounds with 8 premium color schemes
- Dynamic geometric decorations and animated light effects
- Luxury tab design with glowing backgrounds and smooth transitions

✨ Advanced Interactions:
- Elegant hover animations with scale, lift, and rotation effects
- Smooth category switching with spring-based transitions
- Loading states with spinning indicators and opacity changes
- Ripple effects on card interactions

🌙 Perfect Dark Mode Support:
- Carefully crafted opacity levels for light/dark themes
- Consistent color schemes across all UI states
- Enhanced contrast and readability in both modes

🎭 Micro-animations:
- Staggered card entrance animations with custom easing
- Floating geometric shapes with hover transformations
- Dynamic light sweeps across gradient backgrounds
- Smooth layout transitions between categories

📐 Typography & Spacing:
- Increased card height (384px) for premium feel
- Generous padding and refined text hierarchy
- Elegant empty states with sophisticated placeholders
- Optimized responsive grid with larger gaps

…elcome cards

🌅 Light Mode Transformation:
- Replace harsh white backgrounds with elegant gray-100/80 tones
- Add proper shadows and borders for depth and definition
- Enhance card gradients with darker 700-900 ranges for better contrast
- Implement sophisticated shadow system (shadow-lg/shadow-xl)

🎨 Visual Hierarchy Improvements:
- Tab container: gray-100/80 background with subtle borders
- Active tabs: pure white with soft shadows
- Cards: white backgrounds with gray-200/40 borders
- Better text contrast with gray-900/gray-500 color scheme

✨ Enhanced Contrast & Readability:
- Darker gradient backgrounds (700-900) for better text visibility
- Black/20 overlays on card elements instead of white/20
- Improved category badge contrast with black backgrounds
- Consistent shadow elevation system

🎯 Refined Details:
- Empty state with proper gray backgrounds and borders
- Hover effects with shadow-xl for premium feel
- Maintained dark mode perfection while fixing light mode
- Smooth transitions between light/dark themes

Result: Light mode now matches the elegance of dark mode!

🎨 Theme Toggle Component:
- Create standalone ThemeToggle component for code reusability
- Support multiple variants: navbar, floating, button
- Configurable sizes: small, medium, large
- Consistent styling across different contexts

🏠 Homepage Theme Toggle:
- Add floating theme toggle in top-right corner
- Beautiful entrance animation with scale and opacity effects
- Fixed positioning with proper z-index layering
- Elegant floating style with shadow and backdrop

🔄 Code Reusability:
- Refactor Navbar to use new ThemeToggle component
- Maintain exact same functionality and appearance
- Centralized theme toggle logic in shared component
- Clean separation of concerns

✨ Enhanced UX:
- Users can now toggle theme directly from homepage
- Smooth animations and hover effects
- Consistent theme switching behavior across app
- Professional floating button design

🎯 Technical Benefits:
- DRY principle - no code duplication
- Easy to maintain and update theme logic
- Flexible component API for future use cases
- Type-safe props with TypeScript interfaces