12 days ago

Redesign the LinkedIn “Catch up” tab (screenshot provided) into a smarter feature called “CatchUp+” inside the 'My Network' section. The design should use LinkedIn’s native UI structure, colors, and layout. Keep the top navigation, left sidebar, and replace the main feed area with role-based smart suggestions and networking progress. Remove the right sidebar and replace it with a bottom ‘engagement’ section for insights and tips. Layout should use a clean 2-column structure for desktop (left nav + center content). 🔹 TOP NAVIGATION (Header Bar): Include LinkedIn’s main navigation bar as seen in screenshot: Icons: Home, My Network (highlighted), Jobs, Messaging, Notifications, Me Top-right: Search bar, grid icon (Apps), and “For Business” Retain LinkedIn logo on the far left Tabs under ‘My Network’: Grow | CatchUp+ (CatchUp+ selected with green underline) 🔹 LEFT SIDEBAR (No Change): Show sidebar options: Connections (1,289), Contacts (552), Following & followers, Groups, Events, Pages, Newsletters Highlight “CatchUp+” in blue to show current tab is active 🔹 CENTER MAIN CONTENT (Stacked Layout): 🧩 Section 1: Page Header & Filter Page Title: “Start catching up with your network” Subtitle: “Based on your job search activity, we’ve grouped people you can follow up with.” Below that, include pill-style filters (horizontal): All, Product Managers, Data Analysts, Business Analysts Add search bar to the top right of this content area: “Search roles or people…” 📊 Section 2: Role Summary Cards (Dashboard Overview) Horizontally aligned cards for 3 roles: Product Managers: “12 PMs in your network – 4 at applied companies” Data Analysts: “8 DAs – 3 match your applications” Business Analysts: “15 BAs – 5 relevant to your search” Each card shows: Role icon (🧑‍💼, 📊, 🧮) 3 overlapping avatars Blue “View connections” button “Updated 2 days ago” tag Style: Rounded corners, white background, soft shadows 🧠 Section 3: Smart Feed of Connections Vertical feed of individual cards showing real people from the user's network Each profile card includes: Profile image, Name, Job Title, Company Smart prompt: “You applied to Flipkart – message Rahul (PM there)” Tags: “Applied 2 days ago”, “3 mutuals” CTA: 📨 Message icon (hover: “Send message”), ❌ Dismiss icon 🔻 BOTTOM SECTION (Replacing Right Sidebar): 📈 Progress Tracker Box Title: “CatchUp+ Progress” Show: “4 connections contacted this week” “2 replies received” “1 referral requested” Add small progress bar or tracker icons CTA: “View activity log” 💡 Smart Networking Tips Title: “Tips to improve responses” List of tips: “Reach out within 48 hrs of applying” “Mention a mutual connection” “Be specific with your ask” Add 💡 icon and subtle gray background ✨ Motivational Tile (Optional) Quote card: “Your next opportunity may already be in your network.” – LinkedIn Career Coach 🎨 DESIGN STYLE: Color palette: white background, light gray dividers, blue buttons Font: Sans-serif (Segoe UI or SF Pro style) Cards: rounded edges, soft drop shadows Buttons: blue, pill-shaped with hover effects Use LinkedIn-standard grid spacing (24px gutter) Accessibility: WCAG AA compliant (good contrast, tooltip support, 44px button areas)

Fork

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates