Information 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;