instead of this, add carousel effect to the certificates which must look awesome and amazing with mobile compatibility as well accordingly "// src/components/sections/certifications.js

import React, { useEffect } from 'react';
import styled, { css, keyframes } from 'styled-components'; // Correct import
import { srConfig } from '@config';
import sr from '@utils/sr';
import { usePrefersReducedMotion } from '@hooks';

// Optional: Define FadeIn Animation for future use
const fadeIn = keyframes`
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

// Dummy Certification Data (10 Certifications)
const certifications = [
  {
    id: 1,
    name: 'Certified React Developer',
    issuer: 'React Training',
    image: 'https://via.placeholder.com/150x100',
    date: 'June 2023',
    description:
      'Completed advanced React development training covering hooks, state management, and performance optimization.',
    url: 'https://example.com/certificates/react-developer',
  },
  {
    id: 2,
    name: 'Full Stack Web Development',
    issuer: 'Udemy',
    image: 'https://via.placeholder.com/150x100',
    date: 'March 2023',
    description:
      'Comprehensive course on full stack development including Node.js, Express, MongoDB, and React.',
    url: 'https://example.com/certificates/full-stack-web-development',
  },
  {
    id: 3,
    name: 'AWS Certified Solutions Architect',
    issuer: 'Amazon Web Services',
    image: 'https://via.placeholder.com/150x100',
    date: 'January 2023',
    description:
      'Validated expertise in designing and deploying scalable systems on AWS.',
    url: 'https://example.com/certificates/aws-certified-solutions-architect',
  },
  {
    id: 4,
    name: 'Google Analytics IQ',
    issuer: 'Google',
    image: 'https://via.placeholder.com/150x100',
    date: 'December 2022',
    description:
      'Certified in using Google Analytics for data analysis and decision-making.',
    url: 'https://example.com/certificates/google-analytics-iq',
  },
  {
    id: 5,
    name: 'Certified Scrum Master',
    issuer: 'Scrum Alliance',
    image: 'https://via.placeholder.com/150x100',
    date: 'November 2022',
    description:
      'Certified to lead Agile teams using Scrum framework effectively.',
    url: 'https://example.com/certificates/certified-scrum-master',
  },
  {
    id: 6,
    name: 'Data Science Professional',
    issuer: 'Coursera',
    image: 'https://via.placeholder.com/150x100',
    date: 'October 2022',
    description:
      'Completed a professional program in data science covering Python, machine learning, and statistical analysis.',
    url: 'https://example.com/certificates/data-science-professional',
  },
  {
    id: 7,
    name: 'Certified Kubernetes Administrator',
    issuer: 'Cloud Native Computing Foundation',
    image: 'https://via.placeholder.com/150x100',
    date: 'September 2022',
    description:
      'Demonstrated proficiency in Kubernetes cluster administration and management.',
    url: 'https://example.com/certificates/certified-kubernetes-administrator',
  },
  {
    id: 8,
    name: 'Professional Data Engineer',
    issuer: 'Google Cloud',
    image: 'https://via.placeholder.com/150x100',
    date: 'August 2022',
    description:
      'Certified to design, build, operationalize, secure, and monitor data processing systems.',
    url: 'https://example.com/certificates/professional-data-engineer',
  },
  {
    id: 9,
    name: 'Certified React Developer',
    issuer: 'React Training',
    image: 'https://via.placeholder.com/150x100',
    date: 'June 2023',
    description:
      'Completed advanced React development training covering hooks, state management, and performance optimization.',
    url: 'https://example.com/certificates/react-developer',
  },
  {
    id: 10,
    name: 'Full Stack Web Development',
    issuer: 'Udemy',
    image: 'https://via.placeholder.com/150x100',
    date: 'March 2023',
    description:
      'Comprehensive course on full stack development including Node.js, Express, MongoDB, and React.',
    url: 'https://example.com/certificates/full-stack-web-development',
  },
];

// Styled Components

const StyledCertificationsSection = styled.section`
  max-width: 1200px; /* Increased max-width for better spacing */
  margin: 0 auto;
  padding: 2rem 1rem; /* Reduced padding for compactness */

  h2.numbered-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 5vw, var(--fz-heading));
    width: 100%;
    margin: 40px 0; /* Adjust margin as needed */

    /* Pseudo-elements for horizontal lines */
    &::before,
    &::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid SlateGray; /* Adjust color and thickness as needed */
      margin: 0 15px; /* Space between lines and text */
    }
  }



  .heading {
    text-align: center;
    margin-bottom: 2rem; /* Reduced margin */
    font-size: 2rem; /* Slightly smaller font size */
    position: relative;
    color: var(--green); /* Ensure heading matches theme color */

    &::after {
      content: '';
      width: 60px; /* Adjusted line width */
      height: 3px;
      background: var(--green);
      display: block;
      margin: 0.5rem auto 0;
      border-radius: 2px;
    }
  }
`;

const CertificationsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Flexible grid */
  gap: 1.5rem; /* Reduced space between grid items */
`;

const CertificationCard = styled.a`
  display: flex;
  flex-direction: column;
  background: var(--lightest-navy);
  padding: 1rem; /* Reduced padding for compactness */
  border-radius: var(--border-radius);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none; /* Remove default link styling */
  color: inherit; /* Inherit text color */
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for compact cards */
  position: relative;

  /* Initial state for animation */
  opacity: 0;
  transform: translateY(20px);

  /* Conditional Animation or Visibility */
  ${props =>
    !props.prefersReducedMotion
      ? css`
          animation: ${fadeIn} 0.5s ease-in-out forwards;
        `
      : css`
          opacity: 1;
          transform: translateY(0);
        `}

  &:hover,
  &:focus {
    background: var(--navy);
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-left: 3px solid var(--green);
  }

  &:hover .image-container img,
  &:focus .image-container img {
    transform: scale(1.05); /* Slight zoom on hover */
  }

  .image-container {
    width: 100%;
    height: 120px; /* Reduced height for compactness */
    margin-bottom: 0.75rem; /* Reduced margin */
    overflow: hidden;
    border-radius: var(--border-radius);
    background: #fff; /* Fallback background */

    img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* Maintain aspect ratio without cropping */
      transition: transform 0.3s ease;
    }
  }

  .details {
    flex: 1;
    display: flex;
    flex-direction: column;

    .header {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.5rem; /* Reduced margin */

      .title {
        font-size: 1.1rem; /* Slightly smaller font size */
        font-weight: 700;
        margin-bottom: 0.3rem; /* Reduced margin */
        color: var(--green);
      }

      .issuer {
        font-size: 0.8rem; /* Smaller font size */
        color: var(--slate);
      }
    }

    .date {
      font-size: 0.75rem; /* Smaller font size */
      color: var(--light-slate);
      margin-bottom: 0.5rem; /* Reduced margin */
    }

    .description {
      font-size: 0.8rem; /* Smaller font size */
      color: var(--light-slate);
      line-height: 1.3;
      /* Optional: Add more styling or limit lines */
    }
  }
`;

const CertificationsListComponent = () => {
  const prefersReducedMotion = usePrefersReducedMotion();

  useEffect(() => {
    if (prefersReducedMotion) {
      return;
    }

    sr.reveal('.certification-card', srConfig());
  }, [prefersReducedMotion]);

  return (
    <StyledCertificationsSection id="certifications">
      <h2 className="numbered-heading">About Me</h2>
      <CertificationsGrid>
        {certifications.map(cert => (
          <CertificationCard
            key={cert.id}
            href={cert.url}
            target="_blank"
            rel="noopener noreferrer"
            className="certification-card"
            prefersReducedMotion={prefersReducedMotion} // Pass as prop for conditional animations
          >
            <div className="image-container">
              <img src={cert.image} alt={`${cert.name} logo`} />
            </div>
            <div className="details">
              <div className="header">
                <h3 className="title">{cert.name}</h3>
                <span className="issuer">{cert.issuer}</span>
              </div>
              <div className="date">{cert.date}</div>
              <div className="description">{cert.description}</div>
            </div>
          </CertificationCard>
        ))}
      </CertificationsGrid>
    </StyledCertificationsSection>
  );
};

export default CertificationsListComponent;"