feat: Add new recommendation page

Author: raminr77

src/domains/about-me/index.tsx

@@ -12,7 +12,7 @@ import { animator } from '@/shared/helpers';
 import { titleFont } from '@/app/fonts';
 import { PERSONAL_DATA } from '@/data';
 
-import { RecommendationSlider } from './components/RecommendationSlider';
+import { RecommendationsBox } from './components/recommendations-box';
 import styles from './about-me.module.scss';
 import { renderContent } from './helper';
 
@@ -69,7 +69,7 @@ export function AboutMePage() {
       >
         {ABOUT_ME_DATA.content.map((item: AboutMeContentItem, index: number) => {
           if (index === 3) {
-            return <RecommendationSlider key="linkedIn-Recommendations" />;
+            return <RecommendationsBox key="linkedIn-Recommendations" />;
           }
           return renderContent(index, item);
         })}

src/domains/recommendations/components/recommendation-card/index.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { sendGTMEvent } from '@next/third-parties/google';
+import Image from 'next/image';
+import Link from 'next/link';
+import { clsx } from 'clsx';
+
+
+import type { RecommendationItem } from '@/data';
+import { GTM_EVENTS } from '@/shared/constants';
+import { animator } from '@/shared/helpers';
+import { titleFont } from '@/app/fonts';
+
+import styles from './recommendation-card.module.scss';
+
+export function RecommendationCard({
+  data,
+  animationDelay = '0s'
+}: {
+  data: RecommendationItem;
+  animationDelay?: string;
+}) {
+  const { url, text, date, title, caption, fullName, imageURL } = data;
+
+  const sendEvent = () => sendGTMEvent(GTM_EVENTS.LINKEDIN_RECOMMENDATION(fullName));
+
+  return (
+    <div
+      style={{ animationDelay }}
+      className={clsx(
+        'w-full flex flex-col items-start gap-2 bg-white  p-4 dark:bg-black/50',
+        animator({ name: 'fadeIn' }),
+        styles['recommendation-card']
+      )}
+    >
+      <div
+        className='mb-2 flex w-full gap-3 text-left duration-500'
+      >
+        {imageURL && (
+          <Link href={url} onClick={sendEvent} target="_blank" rel="noopener noreferrer">
+            <Image
+              width={100}
+              height={100}
+              alt={fullName}
+              src={imageURL}
+              loading="lazy"
+              className={clsx(
+                'rounded-md grayscale duration-500',
+                styles['recommendation-card__profile-image']
+              )}
+            />
+          </Link>
+        )}
+        <div className="flex w-full flex-col gap-1 text-left">
+          <Link
+            href={url}
+            target="_blank"
+            onClick={sendEvent}
+            rel="noopener noreferrer"
+            className={clsx(titleFont.className, 'text-xl font-bold text-amber-500')}
+          >
+            {fullName.toUpperCase()}
+          </Link>
+          <p>{title}</p>
+          <div className="flex flex-wrap items-center gap-2">
+            <span>{caption}</span>
+            <span>( {date} )</span>
+          </div>
+        </div>
+      </div>
+
+      <p className="w-full text-left" dangerouslySetInnerHTML={{ __html: text }} />
+
+      <Link
+        href={url}
+        target="_blank"
+        onClick={sendEvent}
+        rel="noopener noreferrer"
+        className="text-amber-500"
+      >
+        LinkedIn
+      </Link>
+    </div>
+  );
+}

src/domains/recommendations/components/recommendation-card/recommendation-card.module.scss

@@ -0,0 +1,7 @@
+.recommendation-card {
+  &:hover & {
+    &__profile-image {
+      filter: grayscale(0);
+    }
+  }
+}

src/domains/recommendations/index.tsx

@@ -7,13 +7,13 @@ import { ContentContainer } from '@/layout/components/content-container';
 import { animator } from '@/shared/helpers';
 import { titleFont } from '@/app/fonts';
 
-import { RecommendationCard } from './components/RecommendationCard';
+import { RecommendationCard } from './components/recommendation-card';
 
 export const metadata: Metadata = {
   title: 'Recommendations'
 };
 
-export async function RecommendationsPage() {
+export function RecommendationsPage() {
   return (
     <ContentContainer>
       <h1
@@ -33,7 +33,7 @@ export async function RecommendationsPage() {
         dangerouslySetInnerHTML={{ __html: RECOMMENDATION_PAGE_DATA.description }}
       />
 
-      <div className="mt-8 flex flex-col gap-4 overflow-hidden">
+      <div className="mt-8 flex flex-col gap-6 overflow-hidden">
         {RECOMMENDATIONS.map((item: RecommendationItem, index: number) => (
           <RecommendationCard key={item.id} data={item} animationDelay={`${(index + 1) * 0.3}s`} />
         ))}