Feature Card

A versatile card component with a gradient background, logo, title, description, and an optional screenshot image. Perfect for showcasing features on landing pages.

jeem.quadeer.in

JEEM UI Component

This is an example of the FeatureCard component with a logo, title, and screenshot.

Usage

import FeatureCard from '@/components/FeatureCard';

export default function MyPage() {
  return (
    <FeatureCard 
      logo="/your-logo.png"
      domain="example.com"
      title="Your Amazing Feature"
      description="Describe your feature in an engaging way that makes users want to learn more."
      screenshot="/your-screenshot.png"
      backgroundColor="from-blue-300 to-purple-200"
    />
  );
}

Examples

Basic Feature Card

A simple feature card with default styling.

jeem.quadeer.in

JEEM UI Component Library

A collection of neobrutalism-styled components for your next project.

<FeatureCard 
  logo="/logo.png"
  domain="jeem.quadeer.in"
  title="JEEM UI Component Library"
  description="A collection of neobrutalism-styled components for your next project."
  screenshot="/bg.png"
/>

Custom Background Color

Using a different gradient background.

custom.example.com

Customizable Background

You can easily change the background gradient to match your brand colors.

<FeatureCard 
  logo="/logo.png"
  domain="custom.example.com"
  title="Customizable Background"
  description="You can easily change the background gradient to match your brand colors."
  screenshot="/bg.png"
  backgroundColor="from-blue-300 via-indigo-200 to-purple-200"
/>