Feature Card

This is a Feature Card component.

We are Solaris !

At Solaris we are dedicated to work hard for better future.

Installation

1. Dependencies

npm install clsx tailwind-merge framer-motion

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Feature Card Code

Copy Feature Card Code

FeatureCard Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The child elements to be rendered inside the card.
className	string	No	""	Additional class names for styling.

FeatureCardHeader Props

Name	Type	Required	Default	Description
heading	string	Yes	undefined	The title of the feature.
text	string	Yes	undefined	The description of the feature.
hovered	boolean	No	false	Indicates if the card is hovered.

FeatureCardMedia Props

Name	Type	Required	Default	Description
img	string	Yes	undefined	The source of the image.
heading	string	Yes	undefined	The title of the feature.
mockupSize	string	Yes	undefined	The size class for the mockup image.
mockupPosition	string	Yes	undefined	The position class for the mockup image.
hovered	boolean	No	false	Indicates if the card is hovered.

FeatureCardVideo Props

Name	Type	Required	Default	Description
video	string	Yes	undefined	The source of the video.
hovered	boolean	No	false	Indicates if the card is hovered.