650 exec img comp (#664)

* Added ExecImage component with hover and touch functionality.

- Created ExecImage component to display executive images with hover and touch effects.
- Integrated Next.js Image component for optimized image loading.
- Added props for executive title and name, displayed on hover and touch.
- Implemented CSS for hover effect and text overlay.
- Created Storybook stories for visual testing and documentation.
- Added ExecImageList component to render multiple ExecImage components using an array.

* prettier and codegen

* Refactored ExecImage component and its CSS to avoid using JavaScript for hover effects, using Tailwind CSS.

* adjusted colour css

* adjusted colour css

client/src/components/generic/ExecImage/ExecImage.story.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import ExecImage, { ExecImageProps } from "./ExecImage"
+
+const meta: Meta<typeof ExecImage> = {
+  component: ExecImage,
+  title: "Components/generic/ExecImage"
+}
+
+type Story = StoryObj<typeof meta>
+
+export default meta
+
+export const DefaultExecImage: Story = (args: ExecImageProps) => (
+  <ExecImage {...args} />
+)
+
+DefaultExecImage.args = {
+  src: "https://static01.nyt.com/images/2022/12/30/multimedia/30soccer-ronaldo-1-76fd/30soccer-ronaldo-1-76fd-mediumSquareAt3X.jpg",
+  alt: "Placeholder Image",
+  title: "Admin suii",
+  name: "Ronaldo"
+}

client/src/components/generic/ExecImage/ExecImage.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import Image from "next/image"
+
+export interface ExecImageProps {
+  src: string
+  alt: string
+  title: string
+  name: string
+}
+
+const ExecImage: React.FC<ExecImageProps> = ({ src, alt, title, name }) => {
+  return (
+    <div className="group relative flex h-[163px] w-[163px] flex-shrink-0 overflow-hidden rounded-[4px]">
+      <Image
+        src={src}
+        alt={alt}
+        width={163}
+        height={163}
+        className="h-full w-full object-cover transition-opacity duration-300"
+      />
+      <div className="bg-dark-blue-100 absolute left-0 top-0 h-full w-full opacity-0 transition-opacity duration-300 group-hover:opacity-80"></div>
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        <p className="text-[12px] font-bold uppercase tracking-wider text-white">
+          {title}
+        </p>
+        <p className="text-[16px] font-normal text-white">{name}</p>
+      </div>
+    </div>
+  )
+}
+
+export default ExecImage