Blog Details

Add a CSS override for the icon color on hover. Since you don't have a separate CSS file for this, add a <style> tag or use a global CSS file:

'use client'
import Link from 'next/link';
import React from 'react';
import { useHomePage } from '@/context/HomePageContext';

const ICONS = ['icon-38', 'icon-39', 'icon-40', 'icon-41', 'icon-42', 'icon-43'];

const FALLBACK_IMAGES = [
  'assets/images/resource/coaching-7.jpg',
  'assets/images/resource/coaching-8.jpg',
  'assets/images/resource/coaching-9.jpg',
  'assets/images/resource/coaching-10.jpg',
];

function stripHtml(html: string): string {
  return html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').trim().slice(0, 120) + '...';
}

export default function Coaching() {
  const { data, loading } = useHomePage();

  if (loading) return null;

  const services = Array.isArray(data?.testPreparation) ? data.testPreparation.slice(0, 4) : [];

  if (services.length === 0) return null;

  return (
    <>
      <style>{`
        .coaching-block-three .inner-box:hover .overlay-content .icon-box i,
        .coaching-block-three .inner-box:hover .overlay-content .icon-box i:before {
          color: var(--secondary-color) !important;
        }
        .coaching-block-three .inner-box:hover .static-content .icon-box i,
        .coaching-block-three .inner-box:hover .static-content .icon-box i:before {
          color: var(--secondary-color) !important;
        }
      `}</style>

      <section className="coaching-style-three">
        <div className="outer-container clearfix" style={{ marginTop: '-160px' }}>
          {services.map((service, index) => {
            const icon = ICONS[index % ICONS.length];
            const fallbackImage = FALLBACK_IMAGES[index % FALLBACK_IMAGES.length];
            const image = service.image ?? fallbackImage;
            const shortDesc = service.description ? stripHtml(service.description) : '';

            return (
              <div key={service.slug} className="coaching-block-three">
                <div className="inner-box">

                  <div className="static-content">
                    <figure className="image-box">
                      <img src={image} alt={service.title} />
                    </figure>
                    <div className="content-box">
                      <div className="icon-box"><i className={icon}></i></div>
                      <h3>
                        <Link href={`/services/${service.slug}`}>{service.title}</Link>
                      </h3>
                      <p>{service.sub_title}</p>
                    </div>
                  </div>

                  <div className="overlay-content">
                    <figure className="image-box">
                      <img src={image} alt={service.title} />
                    </figure>
                    <div className="content-box">
                      <div className="icon-box"><i className={icon}></i></div>
                      <h3>
                        <Link href={`/services/${service.slug}`}>{service.title}</Link>
                      </h3>
                      <p>{shortDesc}</p>
                    </div>
                  </div>

                </div>
              </div>
            );
          })}
        </div>
      </section>
    </>
  );
}

If var(--secondary-color) doesn't work for your case (e.g. you want white on hover), just replace it with whatever color you need — #ffffff, #fec326, etc. You can also put the styles in your globals.css instead of the inline <style> tag if you prefer to keep components clean.