Homepage Hero Section Redesign

Goal

Redesign the hero section of zafron.dev to look more professional and drive user registrations. The target audience is developers, makers, students, and educators.

Problem

The current hero section feels like a template rather than a real product page:

• Animated floating dots, gradient text animations, and decorative noise distract from the message
• Fake stats (10,000+ devices, 500+ developers, 99% uptime) with fabricated growth percentages (+15%, +22%) erode trust for an early-stage platform
• A simulated dashboard widget with hardcoded numbers (2.4M data points, 847 sensors) is not credible
• "Kickstart Your IoT Journey Seamlessly" is generic startup-speak
• "Simple and Easy" features headline is vague
• "Learn more" links on feature cards are dead links

Approach

Approach B: Split Layout — Message + Skeleton Product Showcase

Keep the two-column layout but replace all fake/decorative elements with honest messaging and a skeleton UI illustration of the real Zafron dashboard, presented on a soft gradient background card (inspired by Identifee's product showcase style).

Design

Hero Section — Left Column

Remove:

• "New: Advanced Analytics Dashboard" badge
• All animated floating dots (dot1–dot5)
• Grid pattern background overlay
• Animated stats section (devices, developers, uptime with trend indicators)
• Play icon on CTA button

Keep:

• Dark gradient background (works well, gives the page character)
• One subtle radial gradient overlay for depth
• Bottom wave divider

Remove imports: Play, Sparkles, TrendingUp from lucide-react; useState, useEffect from React (only used for animated stats counter).

New content:

• Headline: "Connect, Monitor, and Visualize Your IoT Devices" — plain white text, no gradient animation
• Subtitle: "A free IoT platform for developers, makers, and educators. Connect your devices over MQTT or LoRaWAN and start visualizing data in minutes."
• CTA button: "Get Started Free" with ArrowRight icon only (remove Play icon)
• Trust note: Small muted text below CTA: "No credit card required" — 0.875rem, slate-400 color, 0.5rem top margin

Hero Section — Right Column

Remove:

• The entire DashboardPreview component (simulated metrics, cycling animation, fake bar chart)
• Floating background glow elements (bgGlow, bgFloat1, bgFloat2)

Replace with: A DashboardSkeleton component — a React/CSS skeleton UI that illustrates the real Zafron dashboard layout without using an actual screenshot image.

Skeleton UI spec (based on the real Zafron device overview dashboard — temperature/humidity charts, SNR bars, battery ring, RSSI/voltage metrics):

The skeleton component renders a simplified, stylized representation of the Zafron device overview page:

1. Container: Rounded card (border-radius: 1rem) sitting on a soft gradient background (e.g., light blue-to-purple or blue-to-cyan gradient, similar to Identifee's product cards). Subtle box-shadow for elevation.

2. Skeleton nav bar: A thin horizontal bar at the top with:

   • Small "Z" logo block (circle or square)
   • 3-4 small gray rectangles representing nav items
   • Muted colors (white/light gray on slightly darker background)

3. Device header row:

   • Left: A small icon block + two skeleton text lines (device name + ID)
   • Right: A small green "Online" pill badge

4. Tab bar: A row of small skeleton text blocks representing tabs (Overview, Logs, Rules, Settings, Debug)

5. Main content area — chart cards grid:

   • Large card (temperature): Rounded rectangle with a skeleton label at top, and a smooth curved area chart shape rendered as an SVG path or CSS gradient — uses a soft blue fill
   • Medium card (SNR): Similar card with vertical bar chart shapes — simple CSS rectangles of varying heights in a row
   • Small card (battery): A circle/ring shape with a number placeholder inside

6. Second row:

   • Large card (humidity): Bar chart skeleton similar to SNR
   • Small cards (RSSI, voltage): Simple blocks with an icon placeholder and a large number placeholder

Skeleton styling principles:

• All elements use muted, desaturated colors (grays, soft blues, light purples)
• No real data or text — just shapes representing the layout
• Subtle rounded corners on all blocks
• Slight opacity variations to create visual hierarchy
• No animations (static, clean, intentional)
• The gradient backdrop card sits behind the skeleton, visible as padding/border around it

Responsive behavior: On screens below 1024px (where the two-column grid stacks), the skeleton component should use a fixed aspect ratio container with overflow: hidden and scale down proportionally via max-width: 100%. Internal elements do not need to reflow — the skeleton is illustrative, not functional.

Features Section — Minor Updates

These are small fixes to the existing features section (no major redesign):

1. Headline change: "Simple and Easy" → "Everything You Need to Build IoT Projects"
2. Remove dead links: Remove the "Learn more >" footer from all feature cards since they don't link anywhere
3. Keep everything else: Card layout, icons, badges, descriptions, CTA buttons all stay as-is

Files to Modify

File	Changes
src/components/Homepage/HeroSection.js	Replace content with new headline, subtitle, CTA, trust note. Remove stats, floating dots, badge. Replace DashboardPreview with DashboardSkeleton.
src/components/Homepage/HeroSection.module.css	Remove floating dot styles, stats grid styles. Add trust note styles. Simplify background.
src/components/Homepage/DashboardPreview.js	Delete entirely (replaced by DashboardSkeleton). Must be deleted in tandem with HeroSection.js update — HeroSection imports DashboardPreview, so both changes must land together to avoid a broken build.
src/components/Homepage/DashboardPreview.module.css	Delete entirely
src/components/Homepage/DashboardSkeleton.js	New file. Skeleton UI component.
src/components/Homepage/DashboardSkeleton.module.css	New file. Styles for skeleton UI and gradient backdrop.
src/components/Homepage/homepage-globals.css	Remove unused animation keyframes (hp-float-around, hp-drift-wide, hp-wander, hp-circle-drift, hp-zigzag, hp-gradient-x). Remove .hp-animate-gradient-x utility class. Keep hp-float and hp-pulse-soft only (still used by bottom wave and potential future elements).
src/components/Homepage/FeaturesSection.js	Change headline text. Remove "Learn more" footer from cards. Remove ChevronRight import from lucide-react.
src/components/Homepage/FeaturesSection.module.css	Remove .cardFooter, .learnMore, .chevron styles, including hover-state rules (.card:hover .learnMore, .card:hover .chevron).

Files NOT Modified

File	Reason
src/pages/index.js	No changes needed — same components imported
src/components/Homepage/navbar-fixes.css	Unrelated to hero
src/css/custom.css	Unrelated to hero

Out of Scope

• Mobile responsiveness improvements beyond what already exists
• Dark mode support for features section
• Adding new sections (testimonials, pricing, etc.)
• Changing the navbar or footer
• Reworking the features section into screenshot-card style (future consideration)