Achievement Cards

Cards 98

About

Achievement Cards – Visual recognition component. Highlights awards, partnerships, features, and milestones with branded icons and concise labels. Ideal for startup landing pages, portfolios, or pitch decks to build trust and showcase credibility.

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

Code

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

Usage.tsx

import { AwardCard } from "@/components/ui/achievement-cards"; // Adjust path
import { motion } from "framer-motion";
import { Rocket, Trophy } from "lucide-react";

// Data using reliable jsDelivr CDN for simple-icons + lucide-react fallbacks
//To use src image (replace this icon segment ang use src image)
// icon: (
//     <img
//       src="https://cdn.21st.dev/assets/mirror/37/374969a20e37254cb819dcd250c13159c0f500562dfd926f5d1315c69b6e36ec.svg"
//       alt="SketchUp logo"
//       className="h-8 w-8 object-contain"
//     />
//   ),
//
const awardsData = [
  {
    icon: (
      <img
        src="https://cdn.21st.dev/assets/localized/4833dd802dd55468cf9113f4f40831380a3e8f431ccc7c2b0a34866430ca2af3.svg"
        alt="Paddle logo"
        className="h-8 w-8 object-contain dark:invert"
      />
    ),
    title: "1st Place",
    description: "Clerk",
  },
  {
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/2b/2b87e7cd0c48dbf324666f347340afc1156fc86a466021e480ac9c288c618fd6.svg"
        alt="Procure"
        className="h-8 w-8 object-contain"
      />
    ),
    title: "People's Choice",
    description: "Procure",
  },
  {
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/72/726aa11548b3771591ccbd747f744fbc8acc6879594c14edc740f2c0a00f016b.svg"
        alt="Microsoft logo"
        className="h-8 w-8 object-contain"
      />
    ),
    title: "Supported by",
    description: "Microsoft for Startups",
  },
  {
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/67/67c8db8ca7f814273f1080cfea82c093aa33799543da97c124b2310cfc028cf4.svg"
        alt="Product Hunt logo"
        className="h-8 w-8 object-contain"
      />
    ),
    title: "Featured on",
    description: "Product Hunt",
  },
  {
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/e5/e59687194f210fc30319202cc66185e83a0bd8962c0d60ab4257bb10b07050d8.svg"
        alt="Replicate logo"
        className="h-8 w-8 object-contain dark:invert"
      />
    ),
    title: "Sponsorship from",
    description: "Replicate",
  },
  {
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/0b/0b8ffab7955ccdd02e8a3a8cfc0091abb1ddb2d1e9eb0861a4c6ee3bad7d3582.svg"
        alt="Apple"
        className="h-8 w-8 object-contain dark:invert"
      />
    ),
    title: "2nd Runner up",
    description: "Apple",
  },
  {
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/fa/fa70a8395db5875747df112606379788854a86ac0d39d06914d5fd0c7ba7dc76.svg"
        alt="crome"
        className="h-8 w-8 object-contain"
      />
    ),
    title: "2nd Runner up",
    description: "Chrome",
  },
  {
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/60/60a4c31343f8356ecbaaee324bd6253deacd8a6c27c3fe33f06ecc59ed4bd164.svg"
        alt="crome"
        className="h-8 w-8 object-contain"
      />
    ),
    title: "Top 10 Startup",
    description: "Blender",
  },
];

// Framer Motion animation variants
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.5,
      ease: "easeOut",
    },
  },
};

export default function AwardCardGridDemo() {
  return (
    <div className="w-full max-w-6xl p-4" aria-label="Awards and Recognitions">
      <motion.div
        className="flex gap-4 overflow-x-auto pb-4 md:grid md:grid-cols-2 md:overflow-visible lg:grid-cols-3 xl:grid-cols-4"
        role="list"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        {awardsData.map((award, index) => (
          <motion.div key={index} variants={itemVariants} role="listitem">
            <AwardCard
              icon={award.icon}
              title={award.title}
              description={award.description}
            />
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
}