Implement Premium SaaS UI for Collaborations Pages
Description
This issue covers the implementation of the new premium SaaS UI system on the Sources and Collaborations pages of the VISWAM.AI website.
The UI must follow the same design system used across the rest of the website:
- Dark theme with gradient glow (purple → blue → cyan)
- Glassmorphism cards
- Clean typography and spacing
- Modern SaaS layout (Stripe / Linear inspired)
- Consistent navbar and footer
- Reusable card and section components
This task is UI implementation only.
Content, layout structure, and sections must remain unchanged.
🎯 Goal
Implement consistent premium UI styling for:
- Sources Page
- Collaborations Page
Using the shared VISWAM UI system.
🧩 Pages to Implement
Sources Page
UI updates should include:
- Dark theme layout
- Glassmorphism cards for source items
- Gradient section headings
- Styled buttons
- Proper spacing and layout alignment
- Hover effects on cards
- Consistent typography
- Updated navbar and footer styling
Do not change content or structure. Only update UI styling.
Collaborations Page
UI updates should include:
- Dark theme layout
- Glass cards for collaborations / partners / projects
- Gradient headings
- Team / collaborators grid styling
- Timeline styling (if present)
- Card hover effects
- Consistent spacing and layout
- Updated navbar and footer styling
Do not change content or structure. Only update UI styling.
🧩 Shared Components to Use
Use the same shared components/design system:
- Navbar (glass + dropdown)
- Footer (minimal dark)
- Glass Cards
- Gradient Buttons
- Section Layout Spacing
- Grid Layouts
- Icons (Material Symbols)
- Timeline styling (if applicable)
🎨 UI Style Reference
The UI system should follow:
- Background: Dark (#0e0e0e)
- Glass cards: blur + transparent background
- Gradient accents: Purple → Blue → Cyan
- Rounded corners
- Soft borders
- Glow effects
- Inter font
- Clean spacing
- Modern SaaS design style
⚠ ️ Important Constraints
❌ Do NOT:
- Change content
- Change headings
- Change section order
- Add new sections
- Remove sections
- Change layout structure
- Change grids
- Rewrite text
✅ Only:
- Update UI styling
- Apply design system
- Use shared components
- Improve visual consistency
✅ Acceptance Criteria
-
Sources page uses new premium UI
-
Collaborations page uses new premium UI
-
UI matches rest of VISWAM website
-
Content remains unchanged
-
Layout structure remains unchanged
-
Responsive design works
-
Uses shared components
-
Glassmorphism styling applied
-
Gradient theme applied
Related Issue: