Feature Highlight

Component 1

About

Feature Highlight A responsive and animated component designed to showcase a product's key features, stats, and imagery.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Feature Highlight to your project and fits it to your theme.

Code

How Feature Highlight is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FeatureHighlight } from "@/components/ui/feature-highlight-1"; // Adjust path as needed

// Demo data based on the provided image
const demoHeadline = "Long battery life for all-day watching";
const demoSubheadline = "Galaxy A56 5G";
const demoStats = [
  { value: "29 hrs", label: "Watch up to" },
  { value: "5,000 mAh" },
];

// Using a high-quality placeholder image of a phone.
// Replace this with your actual product image URL.
const demoImageUrl =
  "https://cdn.21st.dev/assets/mirror/0a/0afe975aedf05f432155e079cbe1344361b1fb4ddfb6c3de6f685727f022f5a1.png";

const demoImageAlt = "A modern smartphone showing a night city skyline.";

const demoDisclaimer =
  "Image simulated for illustrative purposes. Actual UI may be different. " +
  "Typical value tested under third-party laboratory condition. Typical value is the estimated average value considering " +
  "the deviation in battery capacity among the battery samples tested under IEC 61960 standard. " +
  "Rated (minimum) capacity is 4,905 mAh. Actual battery life varies by network environment, usage patterns and other factors.";

/**
 * Default demo for the FeatureHighlight component.
 */
export default function FeatureHighlightDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-4">
      <FeatureHighlight
        headline={demoHeadline}
        subheadline={demoSubheadline}
        stats={demoStats}
        imageUrl={demoImageUrl}
        imageAlt={demoImageAlt}
        disclaimerText={demoDisclaimer}
      />
    </div>
  );
}