Information Card

Rendered Component

Loading component...

Packages

npm install framer-motion
npm install lucide-react
yarn add framer-motion
yarn add lucide-react

Code

Details

The Information Card component is a versatile UI element designed to present concise information in a visually appealing manner. It\'s commonly used in dashboards, user profiles, and summary sections.

Usage

Import the InfoCard component and pass the required props such as title, content, and optionally an icon or image.

Examples

  • User profile summary card
  • Product information card in e-commerce
  • Dashboard summary card

Code



  import React from 'react';
  import Link from 'next/link';
  import { motion } from 'framer-motion';
  import * as LucideIcons from 'lucide-react';

  const gradients = [
    { gradient: 'from-blue-500 to-purple-600', border: 'border-blue-500' },
    // { gradient: 'from-green-400 to-blue-500', border: 'border-green-400' },
    // { gradient: 'from-pink-500 to-red-500', border: 'border-pink-500' },
  ];

  const laws = [
    {
      number: 1,
      name: 'Card Title',
      description: 'This is a sample description for Law 1.',
      icon: 'Layout',
    },
  ];

  const InformationCard = () => {
    const formatNameForUrl = (name) => name.toLowerCase().replace(/\s+/g, '-');

    if (!laws || laws.length === 0) {
      return <p className='text-white'>No laws available to display.</p>;
    }

    return (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
        className='grid grid-cols-1 max-w-3xl mx-auto px-4 relative z-10'
      >
        {laws.map((law) => {
          const IconComponent = LucideIcons[law.icon];
          const { gradient, border } =
            gradients[(law.number - 1) % gradients.length];

          return (
            <Link
              key={law.number}
              href={`/law/${formatNameForUrl(law.name)}`}
              passHref
            >
              <motion.div
                initial={{ scale: 0.9, opacity: 0 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5 }}
                className={`p-6 py-20 shadow rounded-lg hover:shadow-xl transition-all duration-300 flex flex-col justify-between h-full relative overflow-hidden group border ${border}`}
              >
                <div
                  className={`absolute inset-0 bg-gradient-to-br ${gradient} opacity-20 group-hover:opacity-30 transition-opacity duration-300`}
                ></div>
                <div className='relative z-10'>
                  <div className='flex items-center mb-4'>
                    <div className='p-3 bg-white/10 rounded-full mr-4'>
                      {IconComponent && (
                        <IconComponent className='w-6 h-6 text-white' />
                      )}
                    </div>
                    <h3 className='md:text-4xl text-xl font-bold text-white'>
                      {law.name}
                    </h3>
                  </div>
                  <p className='text-sm text-white/80 mb-4'>{law.description}</p>
                </div>
                <div className='flex justify-between items-center relative z-10'>
                  <button className='bg-white/10 no-underline group cursor-pointer relative shadow-2xl shadow-black/20 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block'>
                    <span className='absolute inset-0 overflow-hidden rounded-full'>
                      <span className='absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(255,255,255,0.3)_0%,rgba(255,255,255,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100' />
                    </span>
                    <div className='relative flex space-x-2 items-center z-10 rounded-full bg-black/30 py-1 px-4 ring-1 ring-white/10'>
                      <span className='select-none'>Learn More</span>
                      <svg
                        fill='none'
                        height='16'
                        viewBox='0 0 24 24'
                        width='16'
                        xmlns='http://www.w3.org/2000/svg'
                      >
                        <path
                          d='M10.75 8.75L14.25 12L10.75 15.25'
                          stroke='currentColor'
                          strokeLinecap='round'
                          strokeLinejoin='round'
                          strokeWidth='1.5'
                        />
                      </svg>
                    </div>
                    <span className='absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-white/0 via-white/90 to-white/0 transition-opacity duration-500 group-hover:opacity-40' />
                  </button>
                </div>
              </motion.div>
            </Link>
          );
        })}
      </motion.div>
    );
  };
    export default InformationCard;