feat: Add new recommendation box

Author: raminr77

src/data/recommendations.ts

@@ -15,6 +15,8 @@ export const RECOMMENDATION_PAGE_DATA = {
   title: 'Recommendations',
   description:
     'I have had the pleasure of working with many talented individuals throughout my career. <br /> Here are some of the recommendations I have received from my colleagues and managers. <br /> You can also find more Recommendations on my LinkedIn profile.',
+  aboutMeDescription:
+    'I have had the pleasure of working with many talented individuals throughout my career. <br /> Here are some of the recommendations I have received from them.',
   footer: 'If you would like to know more about me, feel free to reach out.',
   footerActionLabel: 'Contact Me',
   footerActionURL: ROUTES.CONTACT_ME,

src/domains/about-me/components/recommendations-box/index.tsx

@@ -0,0 +1,37 @@
+import { RECOMMENDATION_PAGE_DATA, RECOMMENDATIONS, type RecommendationItem } from "@/data";
+import { ROUTES } from "@/shared/constants";
+import Image from "next/image";
+import Link from "next/link";
+
+export function RecommendationsBox() {
+    return (
+        <div className='w-full flex flex-col mt-5 items-center'>
+            <p className="w-full mb-4" dangerouslySetInnerHTML={{ __html: RECOMMENDATION_PAGE_DATA.aboutMeDescription }} />
+
+            <div className="max-h-[210px] w-full flex flex-wrap items-center justify-center gap-2 overflow-hidden">
+                {RECOMMENDATIONS.slice(0, 17).map(({ id, fullName, imageURL }: RecommendationItem) => imageURL && (
+                    <Link
+                        key={id}
+                        href={ROUTES.RECOMMENDATIONS}
+                    >
+                        <Image
+                            width={100}
+                            height={100}
+                            alt={fullName}
+                            src={imageURL}
+                            loading="lazy"
+                            className="grayscale rounded-md w-[100px] h-[100px]"
+                        />
+                    </Link>
+                ))}
+            </div>
+
+            <Link
+                href={ROUTES.RECOMMENDATIONS}
+                className="border-b border-orange-500 px-5 pb-1 duration-200 hover:px-8 my-5"
+            >
+                See all recommendations
+            </Link>
+        </div>
+    );
+}

src/domains/projects/index.tsx

@@ -48,7 +48,7 @@ export function ProjectsPage() {
         <p>{PROJECTS_DATA.footer}</p>
         <Link
           href={PROJECTS_DATA.footerActionURL}
-          className="border-b border-orange-500 px-5 pb-1 duration-200 hover:px-8 hover:text-orange-500"
+          className="border-b border-orange-500 px-5 pb-1 duration-200 hover:px-8"
         >
           {PROJECTS_DATA.footerActionLabel}
         </Link>

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

@@ -26,6 +26,7 @@ export function RecommendationCard({
 
   return (
     <div
+      id={`item-${data.id}`}
       style={{ animationDelay }}
       className={clsx(
         'w-full flex flex-col items-start gap-2 bg-white  p-4 dark:bg-black/50',

src/domains/recommendations/index.tsx

@@ -48,7 +48,7 @@ export function RecommendationsPage() {
         <p>{RECOMMENDATION_PAGE_DATA.footer}</p>
         <Link
           href={RECOMMENDATION_PAGE_DATA.footerActionURL}
-          className="border-b border-orange-500 px-5 pb-1 duration-200 hover:px-8 hover:text-orange-500"
+          className="border-b border-orange-500 px-5 pb-1 duration-200 hover:px-8"
         >
           {RECOMMENDATION_PAGE_DATA.footerActionLabel}
         </Link>