feat:Feature/pages ui

🎯 Overview

This Merge Request transforms the Swecha landing page from a basic static layout into a visually premium, modern, and highly interactive experience. The redesign is inspired by industry-leading interfaces (Linear, Vercel, Stripe) and aims to position Swecha as a cutting-edge technology movement for society.

✨ Key Changes

🎨 Design System & Foundation

• Premium Typography: Integrated Plus Jakarta Sans for high-impact headings and Inter for clean, readable body text.
• Modern Color Palette: Switched to a vibrant Indigo-to-Cyan primary gradient with soft lavender overlays and off-white backgrounds.
• Glassmorphism & Depth: Implemented a sophisticated elevation system using high-blur backdrop filters, subtle borders, and multi-layered shadows.

🚀 Hero Section (Reimagined)

• Split-Screen Composition: Reorganized the hero into a balanced layout with bold, impactful typography and interactive visual elements.
• Animated Background: Added "Floating Blobs" and a subtle grid pattern to add texture and depth, removing the "empty white" feeling.
• Interactive Visuals: Introduced floating interactive cards using Framer Motion that represent core community values (Secure Nodes, Collaboration).

🍱 Bento Grid Knowledge Library

• Dynamic Layout: Replaced the standard grid with a responsive Bento-style grid, allowing for varied card sizes and a more engaging visual rhythm.
• Enhanced Interactions: Cards now feature hover-lift effects, interactive glow indicators, and a more refined internal hierarchy.

🧭 Navigation & Footer

• Sticky Glassmorphism Navbar: A persistent, translucent navigation bar with smooth transitions on scroll and animated active indicators.
• Structured Footer: A comprehensive 4-column footer redesign that organizes community, movement, and initiative links with modern social interactions.

🛠 Technical Highlights

• Framer Motion Integration: Leveraged for fluid entrance animations, magnetic hover effects, and scroll-triggered reveals.
• Lucide-React Update: Modernized the icon language across the platform.
• Responsive Architecture: Fully optimized for Desktop, Tablet, and Mobile views.
• CSS-First Styling: Built with modern Vanilla CSS (Variables, Gradients, Filters) for maximum performance and flexibility.

🧪 Verification Plan

• Build Pass: Verified successful compilation with npm run build.
• Animation Audit: Checked all Framer Motion transitions for performance and smoothness.
• Cross-Device Testing: Verified responsiveness across all major breakpoints.
• Link Integrity: Ensured all navigation and CTA elements are functional.

Type of Change:

• Feature
• UI/UX Improvement
• Style Update
• Refactor