Components
Loading preview...
Feature Spotlight A responsive section component designed to highlight a key product feature. It juxtaposes a detailed text description, including a pre-header, main heading, and call-to-action, with a dynamic visual element. The component includes subtle, continuous animations on floating images to draw user attention and add a modern feel. It is fully theme-adaptive, using shadcn/ui variables for colors and styling.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/feature-spotlightimport { Eye } from 'lucide-react';
// Update the import to the new animated component
import { AnimatedFeatureSpotlight } from '@/components/ui/feature-spotlight';
// The demo showcases the component with animations firing on load.
export default function AnimatedFeatureSpotlightDemo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-muted p-4">
<AnimatedFeatureSpotlight
preheaderIcon={<Eye className="h-4 w-4" />}
preheaderText="See the Market From Every Angle"
heading={
<>
<span className="text-primary">Uncover</span> Untapped{' '}
<span className="text-primary">Potential</span>
</>
}
description="Filter the global market instantly with powerful screeners tailored to your trading style. Quickly identify the most promising assets based on specific criteria and market conditions, so you never miss the next big thing."
buttonText="Try Now for Free"
buttonProps={{ onClick: () => alert('Button Clicked!') }}
imageUrl="https://forecaster.biz/wp-content/uploads/2025/06/screener-1536x993.avif"
imageAlt="A screenshot of the market screener feature"
/>
</div>
);
}