FeatureCards

The FeatureCards component is an Angular component designed to showcase a collection of features with icons, descriptions, and time-saving benefits.

Features

Icon-Based Representation: Displays each feature with a meaningful and visually appealing icon.
Time-Saving Highlights: Includes labels for the hours saved by each feature.
Customizable Feature List: The features array can be modified to add or remove feature cards.
Responsive Grid Layout: Adapts to different screen sizes for an optimized viewing experience.
Engaging Design: Combines modern styles and dynamic elements to attract user attention.
Lucide Icon Library: Uses the Lucide library for scalable, customizable icons.

Usage

Step 1: Import the Component

Add the FeatureCardsComponent to your Angular project by including it in your module or component imports array.

import { FeatureCardsComponent } from "src/app/components/feature-cards/feature-cards.component";
 
@Component({
  ...
  imports: [..., FeatureCardsComponent],
  ...
})

Step 2: Add the Template

Include the component in your template:

<feature-cards></feature-cards>

Configuration

Feature Data Interface

The features are defined using the FeatureCardData interface. This ensures consistent structure and easy extensibility.

Interface Definition

interface FeatureCardData {
  name: string; // The name of the feature
  description: string; // A brief description of the feature
  icon: any; // The icon representing the feature (from Lucide library)
  savedTimeInHours?: number; // Optional: Estimated time saved in hours
  iconColor?: string; // Optional: Custom color for the icon
}

Example Features Array

features: FeatureCardData[] = [
  {
    name: 'Angular Boilerplate',
    description: 'Use a complete Angular template with essential tools to speed up development.',
    icon: Rocket,
    savedTimeInHours: 7,
  },
  {
    name: 'Ready-to-Use Components',
    description: 'Build landing pages effortlessly with ready-made components and animations.',
    icon: Puzzle,
    iconColor: '#1ed760',
    savedTimeInHours: 10,
  },
  {
    name: 'Payment Gateway Integration',
    description: 'Quickly integrate Stripe and other gateways for secure payments.',
    icon: CreditCard,
    iconColor: '#cd389a',
    savedTimeInHours: 5,
  },
  {
    name: 'Email Handling',
    description: 'Manage emails and notifications with Mailgun integration.',
    icon: Mail,
    savedTimeInHours: 2,
  },
  {
    name: 'Database Setup',
    description: 'Connect MongoDB for dynamic, data-driven applications.',
    icon: Database,
    savedTimeInHours: 6,
  },
  {
    name: 'Artificial Intelligence',
    description: 'Add AI-powered features with OpenAI integration.',
    icon: BotMessageSquare,
    iconColor: '#1ed760',
    savedTimeInHours: 9,
  },
  {
    name: 'Analytics Integration',
    description: 'Track user behavior and optimize with advanced analytics tools.',
    icon: ChartNoAxesColumnIncreasing,
    iconColor: '#f59342',
    savedTimeInHours: 3,
  },
  {
    name: 'SEO Optimization',
    description: 'Boost visibility with SEO best practices for better rankings.',
    icon: Search,
    savedTimeInHours: 3,
  },
];

Icon Library

The FeatureCardsComponent uses icons from the Lucide Angular library. To use icons, import them into your component:

Example Icon Import

import {
  Rocket,
  Puzzle,
  CreditCard,
  Mail,
  Database,
  BotMessageSquare,
  ChartNoAxesColumnIncreasing,
  Search,
} from "lucide-angular";

You can assign these icons to the icon property in the FeatureCardData array.

Default Icon Color

The component provides a default icon color (#FF6B6B). However, you can override it for specific features by setting the iconColor property.

Example

features: FeatureCardData[] = [
  {
    name: 'Custom Feature',
    description: 'A description of your custom feature.',
    icon: Mail,
    iconColor: '#4CAF50', // Custom color for this feature
  },
  {
    name: 'Default Feature',
    description: 'This feature will use the default icon color.',
    icon: Rocket,
  },
];

If no iconColor is specified, the default color will be applied.

FeatureCards

On this page