Components
Loading preview...
Feature Highlight Card This component, FeatureHighlightCard, is designed to showcase a specific feature, complete with an image, title, description, and a call-to-action button. It uses framer-motion for smooth, staggered animations and is styled with shadcn/ui theme variables to ensure it adapts to both light and dark modes.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/feature-highlight-cardimport { FeatureHighlightCard } from "@/components/ui/feature-highlight-card";
/**
* A demo component to showcase the FeatureHighlightCard.
*/
export default function FeatureHighlightCardDemo() {
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<FeatureHighlightCard
// Replace this with your actual image source
imageSrc="https://forecaster.biz/wp-content/uploads/2025/06/Forecaster-terminal_OBS_Home-Page.avif"
imageAlt="Stopwatch and financial chart on a phone screen"
title="Perfect Your Timing"
description="Utilize advanced technical indicators to pinpoint ideal entry and exit points. Clearly identify overbought and oversold conditions in real-time, ensuring optimal timing and better risk management for your trades."
buttonText="Try Now for Free"
/>
</div>
);
}