HADAF
A comprehensive sales intelligence platform where artificial intelligence meets human intuition -- transforming raw lead data into actionable pipeline clarity
Modern B2B sales teams drown in data but starve for insight. Hadaf was conceived as an answer to that paradox: a demo-grade SaaS platform that showcases how AI-powered lead scoring, automated outreach sequences, and rich analytics can transform a sales team's workflow from reactive to predictive.
The platform spans two complete experiences: a polished marketing landing page with bilingual Arabic/English support, and a fully interactive dashboard application with six distinct views. Every screen is populated with realistic MENA-region mock data -- 18 leads across 10 companies, 60 activity records, 4 automation sequences, and 5 AI-generated insights.
What sets Hadaf apart as a portfolio piece is its depth. This is not a static mockup or a single-page demo. It is a navigable, interactive application where leads can be filtered, sorted, and inspected; where workflow builders render visual flowcharts; where chart data reflects actual MENA business patterns including Friday/Saturday weekends.
Live Screenshots
Two Experiences, One Platform
A marketing facade and the operational engine behind it -- both fully realized, both fully interactive
The Promise
A conversion-optimized landing page with bilingual Arabic/English support, showcasing the product through animated statistics, feature grids, pricing tiers, testimonials, and a simulated sign-up flow.
- Hero with parallax gradient circles and animated counters
- Problem statement, features grid, how-it-works flow
- 3-tier pricing section with feature comparison
- Testimonials carousel and CTA section
- Fake sign-up modal with toast notifications
- Full AR/EN toggle with RTL layout switching
The Proof
A six-view dashboard application with real data models, interactive tables, chart visualizations, workflow builders, and AI-powered insights -- demonstrating the product the landing page promises.
- 6 KPI stat cards with count-up animations and sparklines
- Pipeline funnel visualization with stage metrics
- AI insights panel with prioritized recommendations
- Activity feed tracking every lead interaction
- Cmd+K command palette for power-user navigation
- Collapsible sidebar with breadcrumbs and mobile drawer
Six Dashboard Views
Each view is a complete, interactive experience -- not a wireframe, not a mockup, but a functioning interface with real data flows
Dashboard
The command center. A bird's-eye view of the entire sales pipeline with real-time intelligence.
- 6 animated KPI stat cards with count-up and sparkline charts
- Pipeline funnel visualization with stage-by-stage conversion
- AI insights panel surfacing opportunities, risks, and suggestions
- Activity feed with chronological lead interactions
- Date range selector for time-scoped analysis
Leads
A data-rich table with powerful filtering, sorting, and bulk operations for managing 18 fully-modeled MENA-region leads.
- Multi-column sortable table with AI score badges
- Filter by score tier (hot/warm/cold), status, and source
- Full-text search across English and Arabic names
- Checkbox selection with floating bulk action bar
- Pagination with per-page item control
Lead Detail
A comprehensive two-column profile for each lead, blending AI intelligence with human context.
- Animated SVG AI score gauge with spring physics
- Score factor breakdown bars (Company Fit, Engagement, Intent)
- AI-suggested next actions tailored to lead status
- Auto-generated email preview personalized to the lead
- Activity timeline, contact info, firmographics, tags, and notes
Sequences
Automated outreach workflows displayed as visual flowcharts with performance metrics at each step.
- Custom CSS workflow builder with typed nodes
- Node types: trigger, email, wait, branch, call, LinkedIn
- Per-step analytics (sent, opened, replied)
- Sequence status management (active, paused, draft)
- Sequence table with open rate and reply rate columns
Analytics
Four distinct chart types providing different lenses into sales performance, powered by Recharts 3.6.
- Leads Over Time area chart with 30-day MENA weekend patterns
- Leads by Source horizontal bar chart with percentage breakdown
- Conversion funnel from visitor to closed-won
- Summary stat cards with trend indicators
- AI insights panel with pattern detection and recommendations
Settings
A fully interactive settings panel with profile editing, integrations, team management, and notification control.
- Editable profile section with avatar and role fields
- 6 integration cards with toggle switches (Salesforce, Slack, Gmail...)
- Team members list with role assignments
- Notification preferences by channel (email, push, in-app)
Design Language
A Linear/Vercel-inspired aesthetic -- clean surfaces, purposeful color, and typography that communicates hierarchy at a glance
The Aesthetic Philosophy
Hadaf borrows its visual DNA from the tools modern developers and designers actually use -- Linear, Vercel, Raycast. White cards on light gray backgrounds. Subtle shadows that deepen on hover. Color reserved for meaning: green for growth, red for risk, blue for navigation. Every pixel of whitespace is intentional, every border radius is 8px or 12px, every transition is 150-200ms.
Technical Architecture
Built on the cutting edge of the React ecosystem -- every dependency chosen for purpose, not fashion
Zustand State Architecture
A vanilla Zustand store manages language, sidebar state, and active filters across all dashboard views, with a React provider for SSR-safe hydration.
Recharts 3.6 Visualizations
Four distinct chart types -- area, bar, funnel, and sparkline -- each with custom configs, animation durations, and responsive containers.
cmdk Command Palette
A Cmd+K searchable command palette for instant navigation and quick actions, with grouped commands and keyboard hints.
Custom Workflow Builder
Sequence workflows rendered as visual flowcharts using custom CSS nodes and connectors, with type-differentiated styling for triggers, emails, waits, and branches.
Bilingual Landing (next-intl)
The marketing site supports full Arabic/English toggle with next-intl v4.7, including RTL layout switching and font family changes (Inter to Cairo).
Motion v12 Animations
Spring-physics AI score gauge, staggered card entrances, scroll-linked parallax on the hero, count-up stat animations, and reduced motion support throughout.