import React from 'react'; import { Shield, Clock, Star, Users, ArrowRight, Search, Heart, MessageSquare } from 'lucide-react'; interface BenefitCardProps { icon: React.ElementType; title: string; description: string; gradient: string; innerShadowFrom: string; innerShadowTo: string; } const BenefitCard: React.FC = ({ icon: Icon, title, description, gradient, innerShadowFrom, innerShadowTo }) => (

{title}

{description}

); const NeuromorphicBenefitsGrid: React.FC = () => { const benefits: BenefitCardProps[] = [ { icon: Shield, title: 'Secure & Trusted', description: 'Highest level of security for all transactions and data.', gradient: 'bg-gradient-to-r from-blue-400 to-blue-600', innerShadowFrom: 'rgba(30, 64, 175, 0.3)', innerShadowTo: 'rgba(59, 130, 246, 0.2)', }, { icon: Clock, title: 'Time-Saving', description: 'Find professionals quickly and efficiently.', gradient: 'bg-gradient-to-r from-purple-400 to-purple-600', innerShadowFrom: 'rgba(88, 28, 135, 0.3)', innerShadowTo: 'rgba(168, 85, 247, 0.2)', }, { icon: Star, title: 'Quality Assured', description: 'All professionals are vetted and highly rated.', gradient: 'bg-gradient-to-r from-yellow-400 to-yellow-600', innerShadowFrom: 'rgba(146, 64, 14, 0.3)', innerShadowTo: 'rgba(234, 179, 8, 0.2)', }, { icon: Users, title: 'Community Driven', description: 'Join a thriving community of homeowners and pros.', gradient: 'bg-gradient-to-r from-green-400 to-green-600', innerShadowFrom: 'rgba(21, 128, 61, 0.3)', innerShadowTo: 'rgba(34, 197, 94, 0.2)', }, ]; return (

{/* Logo Section */}

Helper

{/* Post Task Button */}

{/* Benefits Grid */}

{benefits.map((benefit, index) => ( ))}

{/* Additional Sections */}

{/* Illustration Section */}

{/* Icons Section */}

{[Search, Heart, Star].map((Icon, index) => (

))}

); }; export default NeuromorphicBenefitsGrid;

Clean Components

Neumorphic Bento Grid

Clean Minimalism Hero