import React from "react"; // Configuration object for customizable content const config = { heading: "Our Cutting-Edge Features", features: [ { title: "Data Analytics", description: "Leverage powerful analytics to gain insights and make data-driven decisions.", colorClass: "bg-purple-300", accentColorClass: "bg-blue-300", }, { title: "AI Strategies", description: "Utilize cutting-edge AI algorithms to optimize your marketing campaigns.", colorClass: "bg-yellow-300", accentColorClass: "bg-green-300", }, { title: "Rapid Implementation", description: "Quick turnaround from strategy to execution, accelerating your time to market.", colorClass: "bg-pink-300", accentColorClass: "bg-orange-300", }, { title: "Targeted Campaigns", description: "Reach your ideal audience with precision-targeted marketing initiatives.", colorClass: "bg-purple-300", accentColorClass: "bg-blue-300", }, ], }; // TypeScript types for feature properties interface FeatureProps { title: string; description: string; colorClass: string; accentColorClass: string; } // FeatureCard component for individual feature display const FeatureCard: React.FC = ({ title, description, colorClass, accentColorClass, }) => (

{title}

{description}

); // Main component for the feature grid const ConsistentFeatureGrid = () => { return (

{/* Top wave */}

{/* White card container */}

{config.heading}

{config.features.map((feature, index) => ( ))}

{/* Bottom wave */}

); }; export default ConsistentFeatureGrid;

Colourful Components

Bubblegum Features