[PULSE-43] Design system standardization and branding alignment

[uz1mani]

Work Item

[PULSE-43]

Summary

• Standardized button styling, border radius, and card components across entire Pulse frontend for visual consistency
• Enhanced footer with comprehensive layout for unauthenticated users while maintaining simple footer for dashboard
• Improved empty states with icons and helpful messaging; added entrance animations to marketing pages
• Fixed PWA service worker bug, improved loading states, and ensured all UI elements match Ciphera branding guidelines

Changes

Phase 1: Button Standardization & Core Utilities (11 files)

• Button Components: Removed all btn-primary/btn-secondary className usage; replaced with proper variant="primary"|"secondary" on Button components across homepage, pricing, dashboard, funnels, settings, 404, and public share pages
• Pricing Page: Standardized button hierarchy - Team plan uses primary variant (orange), Solo/Business use secondary variant (neutral)
• CSS Cleanup: Added TODO comment in styles/globals.css for future consolidation to @ciphera-net/ui
• PWA Fix: Deleted malformed icon files (Icon Padding left & right 192x192.png, Icon Padding left & right 512x512.png) causing service worker precaching errors

Files: styles/globals.css, components/PricingSection.tsx, app/page.tsx, components/sites/SiteList.tsx, app/share/[id]/page.tsx, app/faq/page.tsx, app/not-found.tsx, app/sites/[id]/funnels/[funnelId]/page.tsx, app/sites/[id]/funnels/new/page.tsx, app/sites/[id]/funnels/page.tsx, app/sites/[id]/page.tsx

Phase 2: Footer Enhancement (2 files)

• Footer Component: Complete rewrite with conditional rendering based on authentication state
• Unauthenticated Footer: Comprehensive 5-column layout (Brand with Pulse logo/tagline, Products, Company, Resources with Installation/Integrations/Status/Docs/GitHub, Legal) plus Swiss flag indicator, social icons, and "Where Privacy Still Exists" tagline
• Authenticated Footer: Simple footer with copyright + Why Pulse/Pricing/FAQ links; added gradient background effect for consistency
• Layout Integration: Updated layout-content.tsx to import local Footer component and pass isAuthenticated prop

Files: components/Footer.tsx, app/layout-content.tsx

Phase 3: Border Radius & Card Standardization (26 files)

• Cards: Standardized 30+ card containers from rounded-xl (12px) to rounded-2xl (16px) across all dashboard components, funnels, settings, and site management pages
• Dashboard Components: Updated Chart, ContentStats, TopReferrers, Locations, TechSpecs, Campaigns, GoalStats, PerformanceStats, RealtimeVisitors, TopPages, Countries components
• Tab Buttons: Changed 4 tab button groups from rounded-md (6px) to rounded-lg (8px) for better visual consistency
• Input Fields: Standardized 15+ input/select fields from rounded-xl to rounded-lg including PasswordInput component, site settings inputs, funnel selectors
• Info/Warning Cards: Updated 12+ info boxes and danger zone cards to rounded-2xl in settings pages

Files: All dashboard components (11 files), components/sites/SiteList.tsx, components/settings/OrganizationSettings.tsx, app/page.tsx, app/sites/[id]/funnels/*.tsx (3 files), app/sites/[id]/realtime/page.tsx, app/sites/new/page.tsx, app/share/[id]/page.tsx, components/PricingSection.tsx, components/WorkspaceSwitcher.tsx, components/PasswordInput.tsx, components/tools/UtmBuilder.tsx, app/sites/[id]/settings/page.tsx

Phase 4: Badge & Empty State Improvements (8 files)

• Badge Consolidation: Updated pricing "Most Popular" badge to use .badge-primary class for consistency with FAQ and homepage badges
• Empty States Enhanced: Added icons, helpful titles, and explanatory text to TopReferrers (GlobeIcon), TechSpecs (GridIcon), Locations (GlobeIcon), Countries (GlobeIcon for both countries/cities), TopPages (LayoutDashboardIcon), ContentStats (LayoutDashboardIcon), and Realtime (UserIcon)
• UX Improvements: Made realtime visitor counter clickable (navigates to /sites/[id]/realtime); fixed realtime page width from max-w-7xl to max-w-6xl to match dashboard

Files: components/PricingSection.tsx, components/dashboard/TopReferrers.tsx, components/dashboard/TechSpecs.tsx, components/dashboard/Locations.tsx, components/dashboard/Countries.tsx, components/dashboard/TopPages.tsx, components/dashboard/ContentStats.tsx, app/sites/[id]/realtime/page.tsx, app/sites/[id]/page.tsx

Phase 5: Animations & Final Polish (11 files)

• Homepage Animations: Added framer-motion entrance animations with staggered timing - badge (0s) → headline (0.1s) → subtitle (0.2s) → CTAs (0.3s); feature cards stagger (0.1s each) when scrolled into view
• About Page: Added fade-in animations to hero section, intro paragraph, and "What about Plausible?" callout box
• Integrations Page: Added hero fade-in and integration card stagger animations (0.1s delay per card)
• Pricing Page: Added fade-in animations to header section and pricing container
• Dashboard Subtle Animation: Added ultra-fast 0.2s opacity-only fade-in to prevent harsh pop-in without delaying data access
• Realtime Live Animations: Implemented entrance/exit animations for visitor list items using AnimatePresence for smooth real-time updates
• Loading State Polish: Enhanced 6 modal/component loading states with brand-orange spinning indicators instead of plain "Loading..." text

Files: app/page.tsx, app/about/page.tsx, app/integrations/page.tsx, components/PricingSection.tsx, app/sites/[id]/page.tsx, app/sites/[id]/realtime/page.tsx, components/dashboard/ContentStats.tsx, components/dashboard/TopReferrers.tsx, components/dashboard/TechSpecs.tsx, components/dashboard/Locations.tsx, components/dashboard/Campaigns.tsx

Test Plan

Phase 1: Button Standardization

[ ] Verify all primary CTAs use brand orange color (#FD5E0F)
[ ] Verify Team plan button is orange, Solo/Business are neutral on pricing page
[ ] Verify no PWA service worker errors in console
[ ] Test all button hover states in both light and dark modes

Phase 2: Footer

[ ] Logged-out footer shows 5 columns with all sections (Brand, Products, Company, Resources, Legal)
[ ] Swiss flag icon and social media icons render correctly
[ ] Logged-in footer shows simple version (copyright + 3 links)
[ ] All footer links navigate correctly; external links open in new tabs
[ ] Footer responsive on mobile (columns stack properly)
[ ] Pulse logo not stretched in footer

Phase 3: Border Radius

[ ] All dashboard cards have rounded-2xl (16px) corners
[ ] All input fields have rounded-lg (8px) corners
[ ] All tab buttons have rounded-lg corners
[ ] Visual consistency across all pages in both light and dark modes

Phase 4: Empty States & Badges

[ ] All empty states show icons, helpful titles, and descriptions
[ ] "Most Popular" badge matches FAQ and homepage badge styling
[ ] Realtime visitor counter is clickable and navigates to realtime page
[ ] Realtime page width matches dashboard width

Phase 5: Animations

[ ] Homepage: Badge → headline → subtitle → CTAs animate in sequence (0-0.3s)
[ ] Homepage: Feature cards stagger in when scrolled into view
[ ] About, Integrations, Pricing pages have smooth entrance animations
[ ] Dashboard fades in very quickly (barely noticeable, 0.2s)
[ ] Realtime: New visitors slide in from left smoothly
[ ] Modal loading states show spinners with brand orange accent
[ ] All animations run at 60fps without jank
[ ] Animations don't block user interaction

Cross-cutting

[ ] No linter errors introduced
[ ] Dark mode works correctly for all changes
[ ] Mobile responsive at all breakpoints
[ ] No layout shifts during animations
[ ] All existing functionality preserved

[greptile-apps]

Greptile Overview

Greptile Summary

This PR successfully standardizes the design system across the Pulse frontend, bringing visual consistency and improved UX throughout the application. The changes are well-organized into 5 phases covering button styling, footer enhancement, border radius standardization, empty states, and animations.

Key improvements:

• Replaced inconsistent className="btn-primary/secondary" with proper variant props on Button components
• Implemented conditional footer rendering with comprehensive layout for unauthenticated users and simplified version for authenticated users
• Standardized all cards to rounded-2xl (16px), inputs to rounded-lg (8px), and tabs to rounded-lg (8px) for consistent visual hierarchy
• Enhanced empty states with icons and helpful messaging across all dashboard components
• Added subtle entrance animations to marketing pages and realtime visitor tracking using framer-motion
• Fixed PWA service worker bug by removing malformed icon files
• Made realtime visitor counter clickable for better navigation

Code quality:

• Clean implementation with no security issues
• Proper use of framer-motion for animations with appropriate durations
• Good accessibility practices maintained (aria-labels, semantic HTML)
• Consistent dark mode support across all changes

The changes align well with Ciphera branding guidelines and maintain the privacy-first focus of the application.

Confidence Score: 5/5

• This PR is safe to merge with no blocking issues
• All changes are cosmetic and UI-focused with no logic changes that could introduce bugs. The code is well-structured, maintains existing functionality, and follows React best practices. No security vulnerabilities introduced.
• No files require special attention

Important Files Changed

Filename	Overview
components/Footer.tsx	Enhanced footer with conditional rendering based on authentication; comprehensive unauthenticated layout with 5 columns
components/PricingSection.tsx	Standardized button variants and added entrance animations to pricing page
app/page.tsx	Added staggered entrance animations to homepage hero section and feature cards; standardized button usage
app/sites/[id]/page.tsx	Added subtle fade-in animation and made realtime visitor counter clickable to navigate to realtime page
app/sites/[id]/realtime/page.tsx	Added entrance/exit animations for visitor list items and improved empty state; fixed width from max-w-7xl to max-w-6xl

Sequence Diagram

sequenceDiagram
    participant User
    participant Homepage
    participant Dashboard
    participant Realtime
    
    User->>Homepage: Visit site
    Homepage->>Homepage: Render with animations
    Homepage->>User: Show marketing content
    
    User->>Dashboard: Navigate to dashboard
    Dashboard->>Dashboard: Apply fade-in animation
    Dashboard->>User: Display site cards
    
    User->>Dashboard: Click realtime visitor counter
    Dashboard->>Realtime: Navigate to realtime page
    Realtime->>Realtime: Load visitor data
    Realtime->>User: Show visitor list
    
    loop Every 5 seconds
        Realtime->>Realtime: Poll for updates
        Realtime->>User: Animate visitor list changes
    end
    
    User->>Realtime: Select a visitor
    Realtime->>Realtime: Fetch session details
    Realtime->>User: Display session journey

Loading