From 0ea865f898295e142aa85a10d4d6f296380729a1 Mon Sep 17 00:00:00 2001
From: Mohamed Ali Alkassas <elasasmohamed97@gmail.com>
Date: Mon, 23 Dec 2024 08:43:30 +0200
Subject: [PATCH] feat(luna): render tutor card v1

---
 .../src/components/ServerStats/Chart.tsx      |   2 +-
 .../src/components/UserDetails/Content.tsx    |   2 +-
 apps/dashboard/src/pages/PlatformSettings.tsx |   2 +-
 apps/nova/src/components/Tutors/Content.tsx   |  12 +-
 .../luna/src/components/Avatar/Avatar.tsx     |   5 +-
 .../components/Call/PreCallUserPreview.tsx    |   2 +-
 .../src/components/Call/UnFocusedStream.tsx   |   2 +-
 .../Chat/ChatSummary/ChatSummary.tsx          |   2 +-
 .../Lessons/UpcomingLessonsSummary.tsx        |   2 +-
 .../components/MultiSelect/MultiSelect.tsx    |   6 +-
 .../luna/src/components/Select/Select.tsx     |   6 +-
 .../StudentOverview/StudentOverview.tsx       |   2 +-
 .../src/components/TutorCard/TutorCard.tsx    |  27 ++-
 .../TutorCard/TutorCardV1.stories.tsx         | 105 +++++++++
 .../src/components/TutorCard/TutorCardV1.tsx  | 222 ++++++++++++++++++
 .../luna/src/components/TutorCard/index.ts    |   1 +
 .../luna/src/components/TutorCard/types.ts    |  15 ++
 packages/luna/src/locales/ar-eg.json          |   2 +-
 packages/luna/tailwind.config.js              |   3 +-
 19 files changed, 384 insertions(+), 36 deletions(-)
 create mode 100644 packages/luna/src/components/TutorCard/TutorCardV1.stories.tsx
 create mode 100644 packages/luna/src/components/TutorCard/TutorCardV1.tsx
 create mode 100644 packages/luna/src/components/TutorCard/types.ts

diff --git a/apps/dashboard/src/components/ServerStats/Chart.tsx b/apps/dashboard/src/components/ServerStats/Chart.tsx
index 35802724d..24dddf27a 100644
--- a/apps/dashboard/src/components/ServerStats/Chart.tsx
+++ b/apps/dashboard/src/components/ServerStats/Chart.tsx
@@ -24,7 +24,7 @@ const Chart = <T extends { timestamp: number }>({
   dataKey?: keyof T;
 }) => {
   return (
-    <div className="h-[20rem] shadow-ls-small rounded-md p-4" dir="ltr">
+    <div className="h-[20rem] shadow-ls-x-small rounded-md p-4" dir="ltr">
       <ResponsiveContainer>
         <LineChart data={data}>
           {lines.map((key) => (
diff --git a/apps/dashboard/src/components/UserDetails/Content.tsx b/apps/dashboard/src/components/UserDetails/Content.tsx
index 34ceaadaf..e591c2f3b 100644
--- a/apps/dashboard/src/components/UserDetails/Content.tsx
+++ b/apps/dashboard/src/components/UserDetails/Content.tsx
@@ -39,7 +39,7 @@ const Content: React.FC<{
   if (!user) return;
 
   return (
-    <div className="p-4 mx-auto mt-6 border border-border-strong rounded-md shadow-ls-small w-full">
+    <div className="p-4 mx-auto mt-6 border border-border-strong rounded-md shadow-ls-x-small w-full">
       <div className="flex gap-2 ">
         <div className="relative">
           {user.image ? (
diff --git a/apps/dashboard/src/pages/PlatformSettings.tsx b/apps/dashboard/src/pages/PlatformSettings.tsx
index 856a420a3..dcfcafd6b 100644
--- a/apps/dashboard/src/pages/PlatformSettings.tsx
+++ b/apps/dashboard/src/pages/PlatformSettings.tsx
@@ -2,7 +2,7 @@ import Cache from "@/components/Settings/Cache";
 
 const Settings = () => {
   return (
-    <div className="w-full flex flex-col max-w-screen-2xl mx-auto m-6 p-6 shadow-ls-small rounded-md h-fit">
+    <div className="w-full flex flex-col max-w-screen-2xl mx-auto m-6 p-6 shadow-ls-x-small rounded-md h-fit">
       <Cache />
     </div>
   );
diff --git a/apps/nova/src/components/Tutors/Content.tsx b/apps/nova/src/components/Tutors/Content.tsx
index b8d883339..ad51179b6 100644
--- a/apps/nova/src/components/Tutors/Content.tsx
+++ b/apps/nova/src/components/Tutors/Content.tsx
@@ -1,13 +1,12 @@
+import BookLesson from "@/components/Lessons/BookLesson";
+import { Route } from "@/types/routes";
 import { Loading } from "@litespace/luna/Loading";
-import { Element, ITutor, Void } from "@litespace/types";
-import React, { useCallback, useState } from "react";
 import { TutorCard } from "@litespace/luna/TutorCard";
 import { asFullAssetUrl } from "@litespace/luna/backend";
-import { Route } from "@/types/routes";
-import { useNavigate } from "react-router-dom";
+import { Element, ITutor, Void } from "@litespace/types";
 import { motion } from "framer-motion";
+import React, { useCallback, useState } from "react";
 import { InView } from "react-intersection-observer";
-import BookLesson from "@/components/Lessons/BookLesson";
 
 type Tutor = Element<ITutor.FindOnboardedTutorsApiResponse["list"]>;
 
@@ -19,8 +18,6 @@ const Content: React.FC<{
   more: Void;
   hasMore: boolean;
 }> = ({ tutors, loading, error, more, hasMore, fetching }) => {
-  const navigate = useNavigate();
-
   const [tutor, setTutor] = useState<Tutor | null>(null);
 
   const openBookingDialog = useCallback((tutor: Tutor) => setTutor(tutor), []);
@@ -53,7 +50,6 @@ const Content: React.FC<{
                 studentCount={tutor.studentCount}
                 rating={tutor.avgRating}
                 onBook={() => openBookingDialog(tutor)}
-                onOpenProfile={() => navigate(profileUrl)}
                 profileUrl={profileUrl}
                 imageUrl={tutor.image ? asFullAssetUrl(tutor.image) : null}
               />
diff --git a/packages/luna/src/components/Avatar/Avatar.tsx b/packages/luna/src/components/Avatar/Avatar.tsx
index a029fd387..08bc7c565 100644
--- a/packages/luna/src/components/Avatar/Avatar.tsx
+++ b/packages/luna/src/components/Avatar/Avatar.tsx
@@ -40,7 +40,10 @@ export const Avatar: React.FC<{
           "tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[1]"
         )}
       >
-        <JazzIcon seed={seed || alt || src || "litespace"} />
+        <JazzIcon
+          seed={seed || alt || src || "litespace"}
+          className="tw-h-full"
+        />
       </div>
     </div>
   );
diff --git a/packages/luna/src/components/Call/PreCallUserPreview.tsx b/packages/luna/src/components/Call/PreCallUserPreview.tsx
index 4e028304e..56b5df72c 100644
--- a/packages/luna/src/components/Call/PreCallUserPreview.tsx
+++ b/packages/luna/src/components/Call/PreCallUserPreview.tsx
@@ -17,7 +17,7 @@ export const PreCallUserPreview: React.FC<{
   }, [stream, camera]);
 
   return (
-    <div className="tw-aspect-video tw-w-full tw-grow tw-max-w-[700px] tw-rounded-lg tw-shadow-ls-small tw-overflow-hidden">
+    <div className="tw-aspect-video tw-w-full tw-grow tw-max-w-[700px] tw-rounded-lg tw-shadow-ls-x-small tw-overflow-hidden">
       {camera ? (
         <video ref={videoRef} autoPlay muted={false} playsInline />
       ) : (
diff --git a/packages/luna/src/components/Call/UnFocusedStream.tsx b/packages/luna/src/components/Call/UnFocusedStream.tsx
index c809510d4..caf6f401d 100644
--- a/packages/luna/src/components/Call/UnFocusedStream.tsx
+++ b/packages/luna/src/components/Call/UnFocusedStream.tsx
@@ -21,7 +21,7 @@ export const UnFocusedStream: React.FC<{
         duration: 0.3,
         ease: "easeInOut",
       }}
-      className="tw-aspect-video tw-w-[219px] tw-border tw-border-natural-500 tw-flex tw-items-center tw-justify-center tw-backdrop-blur-[15px] tw-bg-background-indicator tw-rounded-lg tw-shadow-ls-small tw-overflow-hidden"
+      className="tw-aspect-video tw-w-[219px] tw-border tw-border-natural-500 tw-flex tw-items-center tw-justify-center tw-backdrop-blur-[15px] tw-bg-background-indicator tw-rounded-lg tw-shadow-ls-x-small tw-overflow-hidden"
     >
       {stream.camera || stream.cast ? (
         // todo: should only be muted for the current user (props)
diff --git a/packages/luna/src/components/Chat/ChatSummary/ChatSummary.tsx b/packages/luna/src/components/Chat/ChatSummary/ChatSummary.tsx
index 2e0561b10..0f7b3930c 100644
--- a/packages/luna/src/components/Chat/ChatSummary/ChatSummary.tsx
+++ b/packages/luna/src/components/Chat/ChatSummary/ChatSummary.tsx
@@ -48,7 +48,7 @@ export const ChatSummary: React.FC<Props> = ({ rooms, chatsUrl }) => {
   return (
     <div
       className={cn(
-        "tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-small tw-bg-natural-50"
+        "tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-x-small tw-bg-natural-50"
       )}
     >
       <Typography
diff --git a/packages/luna/src/components/Lessons/UpcomingLessonsSummary.tsx b/packages/luna/src/components/Lessons/UpcomingLessonsSummary.tsx
index cecd72768..d3036a07b 100644
--- a/packages/luna/src/components/Lessons/UpcomingLessonsSummary.tsx
+++ b/packages/luna/src/components/Lessons/UpcomingLessonsSummary.tsx
@@ -40,7 +40,7 @@ export const UpcomingLessonsSummary: React.FC<Props> = ({
   return (
     <div
       className={cn(
-        "tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-small tw-bg-natural-50"
+        "tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-x-small tw-bg-natural-50"
       )}
     >
       <Typography
diff --git a/packages/luna/src/components/MultiSelect/MultiSelect.tsx b/packages/luna/src/components/MultiSelect/MultiSelect.tsx
index 690966489..4b61bf70b 100644
--- a/packages/luna/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/luna/src/components/MultiSelect/MultiSelect.tsx
@@ -58,10 +58,10 @@ export const MultiSelect = <T,>({
           className={cn(
             "tw-w-full tw-h-14 tw-rounded-lg tw-p-2 tw-transition-colors tw-duration-200",
             "tw-border tw-border-natural-300 hover:tw-border-brand-200 focus:tw-border-brand-500",
-            "data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
-            "focus:tw-outline-none focus:tw-shadow-ls-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
+            "data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-x-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
+            "focus:tw-outline-none focus:tw-shadow-ls-x-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
             "tw-bg-natural-50 hover:tw-bg-brand-50",
-            "data-[open=true]:tw-shadow-ls-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
+            "data-[open=true]:tw-shadow-ls-x-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
           )}
           onClick={() => setOpen(true)}
         >
diff --git a/packages/luna/src/components/Select/Select.tsx b/packages/luna/src/components/Select/Select.tsx
index f81236180..d1eee6eb0 100644
--- a/packages/luna/src/components/Select/Select.tsx
+++ b/packages/luna/src/components/Select/Select.tsx
@@ -64,10 +64,10 @@ export const Select = <T extends string | number>({
           "tw-flex tw-flex-row tw-justify-between tw-items-center",
           "tw-w-full tw-h-14 tw-rounded-lg tw-p-2 tw-transition-colors tw-duration-200",
           "tw-border tw-border-natural-300 hover:tw-border-brand-200 focus:tw-border-brand-500",
-          "data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
-          "focus:tw-outline-none focus:tw-shadow-ls-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
+          "data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-x-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
+          "focus:tw-outline-none focus:tw-shadow-ls-x-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
           "tw-bg-natural-50 hover:tw-bg-brand-50",
-          "data-[open=true]:tw-shadow-ls-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
+          "data-[open=true]:tw-shadow-ls-x-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
         )}
       >
         <Value>
diff --git a/packages/luna/src/components/StudentOverview/StudentOverview.tsx b/packages/luna/src/components/StudentOverview/StudentOverview.tsx
index 2b4e78219..3aede5a03 100644
--- a/packages/luna/src/components/StudentOverview/StudentOverview.tsx
+++ b/packages/luna/src/components/StudentOverview/StudentOverview.tsx
@@ -104,7 +104,7 @@ export const Card: React.FC<{
   return (
     <div
       className={cn(
-        "tw-p-4 tw-bg-natural-50 tw-rounded-2xl tw-shadow-ls-small",
+        "tw-p-4 tw-bg-natural-50 tw-rounded-2xl tw-shadow-ls-x-small",
         "tw-border tw-border-transparent hover:tw-border-natural-100",
         "tw-basis-full tw-flex tw-flex-col tw-gap-2"
       )}
diff --git a/packages/luna/src/components/TutorCard/TutorCard.tsx b/packages/luna/src/components/TutorCard/TutorCard.tsx
index d5654ef7e..80aa3ebdd 100644
--- a/packages/luna/src/components/TutorCard/TutorCard.tsx
+++ b/packages/luna/src/components/TutorCard/TutorCard.tsx
@@ -27,7 +27,6 @@ type Props = {
   imageUrl?: string | null;
   profileUrl: string;
   onBook: Void;
-  onOpenProfile: Void;
 };
 
 export const TutorCard: React.FC<Props> = ({
@@ -41,7 +40,6 @@ export const TutorCard: React.FC<Props> = ({
   profileUrl,
   rating,
   onBook,
-  onOpenProfile,
 }) => {
   const intl = useFormatMessage();
   return (
@@ -49,7 +47,7 @@ export const TutorCard: React.FC<Props> = ({
       className={cn(
         "tw-flex tw-flex-col",
         "tw-bg-natural-50 tw-border tw-border-natural-100",
-        "tw-p-4 tw-shadow-ls-small tw-rounded-lg"
+        "tw-p-4 tw-shadow-ls-x-small tw-rounded-lg"
       )}
     >
       <div className="tw-flex tw-flex-row tw-gap-2 tw-mb-4">
@@ -157,15 +155,22 @@ export const TutorCard: React.FC<Props> = ({
         >
           {intl("tutors.card.book-button.label")}
         </Button>
-        <Button
-          onClick={onOpenProfile}
-          className="tw-w-full"
-          type={ButtonType.Main}
-          variant={ButtonVariant.Secondary}
-          size={ButtonSize.Tiny}
+        <Link
+          to={profileUrl}
+          className={cn(
+            "tw-block tw-grow tw-basis-1/2 tw-text-center tw-px-4 tw-py-2 tw-border tw-border-brand-700 tw-rounded-lg tw-w-full",
+            "hover:tw-bg-brand-100 hover:tw-border-brand-700 focus:tw-bg-brand-200 focus:tw-ring-1 focus:tw-ring-brand-900",
+            "tw-transition-colors tw-ease-out tw-duration-200"
+          )}
         >
-          {intl("tutors.card.profile-button.label")}
-        </Button>
+          <Typography
+            element="caption"
+            weight="semibold"
+            className="tw-text-brand-700"
+          >
+            {intl("tutors.card.profile-button.label")}
+          </Typography>
+        </Link>
       </div>
     </div>
   );
diff --git a/packages/luna/src/components/TutorCard/TutorCardV1.stories.tsx b/packages/luna/src/components/TutorCard/TutorCardV1.stories.tsx
new file mode 100644
index 000000000..537804b05
--- /dev/null
+++ b/packages/luna/src/components/TutorCard/TutorCardV1.stories.tsx
@@ -0,0 +1,105 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TutorCardV1 } from "@/components/TutorCard";
+import { CardProps } from "@/components/TutorCard/types";
+import { faker } from "@faker-js/faker/locale/ar";
+import React from "react";
+import { range } from "lodash";
+
+type Story = StoryObj<CardProps>;
+
+const meta: Meta<CardProps> = {
+  title: "TutorCardV1",
+  component: TutorCardV1,
+  decorators: [
+    (Story) => (
+      <div style={{ width: "568px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const makeTopics = (count: number, wordLength?: number | null) =>
+  range(count).map(() => {
+    return faker.word.sample({ length: wordLength || { min: 5, max: 15 } });
+  });
+
+export const TutorWithoutName: Story = {
+  args: {
+    id: faker.number.int(),
+    name: null,
+    about: faker.lorem.paragraphs(3),
+    studentCount: faker.number.int({ min: 10, max: 1_000 }),
+    lessonCount: faker.number.int({ min: 10, max: 500 }),
+    rating: faker.number.int({ min: 0, max: 5 }),
+    imageUrl: faker.image.urlPicsumPhotos({ width: 200, height: 300 }),
+    topics: makeTopics(7),
+  },
+};
+
+export const TutorWithoutImage: Story = {
+  args: {
+    id: faker.number.int(),
+    name: null,
+    about: faker.lorem.paragraphs(3),
+    studentCount: faker.number.int({ min: 10, max: 1_000 }),
+    lessonCount: faker.number.int({ min: 10, max: 500 }),
+    rating: faker.number.int({ min: 0, max: 5 }),
+    imageUrl: null,
+    topics: makeTopics(7),
+  },
+};
+
+export const TutorWithStats: Story = {
+  args: {
+    id: faker.number.int(),
+    name: faker.person.fullName(),
+    about: faker.lorem.paragraphs(3),
+    studentCount: faker.number.int({ min: 10, max: 1_000 }),
+    lessonCount: faker.number.int({ min: 10, max: 500 }),
+    rating: faker.number.int({ min: 0, max: 5 }),
+    imageUrl: faker.image.urlPicsumPhotos({ width: 200, height: 300 }),
+    topics: makeTopics(7),
+  },
+};
+
+export const TutorWithHighStats: Story = {
+  args: {
+    id: faker.number.int(),
+    name: faker.person.fullName(),
+    about: faker.lorem.paragraphs(3),
+    studentCount: faker.number.int({ min: 1_000, max: 10_000 }),
+    lessonCount: faker.number.int({ min: 1_000, max: 10_000 }),
+    rating: faker.number.int({ min: 0, max: 5 }),
+    imageUrl: faker.image.urlPicsumPhotos({ width: 200, height: 300 }),
+    topics: makeTopics(12, 10),
+  },
+};
+
+export const TutorWithouStats: Story = {
+  args: {
+    id: faker.number.int(),
+    name: faker.person.fullName(),
+    about: faker.lorem.paragraphs(3),
+    studentCount: 0,
+    lessonCount: 0,
+    rating: 0,
+    imageUrl: faker.image.urlPicsumPhotos({ width: 200, height: 300 }),
+    topics: makeTopics(12),
+  },
+};
+
+export const TutorWithoutRating: Story = {
+  args: {
+    id: faker.number.int(),
+    name: faker.person.fullName(),
+    about: faker.lorem.paragraphs(3),
+    studentCount: faker.number.int({ min: 1, max: 200 }),
+    lessonCount: faker.number.int({ min: 1, max: 200 }),
+    rating: 0,
+    imageUrl: faker.image.urlPicsumPhotos({ width: 200, height: 300 }),
+    topics: makeTopics(12),
+  },
+};
+
+export default meta;
diff --git a/packages/luna/src/components/TutorCard/TutorCardV1.tsx b/packages/luna/src/components/TutorCard/TutorCardV1.tsx
new file mode 100644
index 000000000..1bb964e0d
--- /dev/null
+++ b/packages/luna/src/components/TutorCard/TutorCardV1.tsx
@@ -0,0 +1,222 @@
+import { Avatar } from "@/components/Avatar";
+import {
+  Button,
+  ButtonSize,
+  ButtonType,
+  ButtonVariant,
+} from "@/components/Button";
+import { CardProps } from "@/components/TutorCard/types";
+import { Typography } from "@/components/Typography";
+import { formatNumber } from "@/components/utils";
+import { useFormatMessage } from "@/hooks";
+import SStar from "@litespace/assets/SStar";
+import { orUndefined } from "@litespace/sol/utils";
+import cn from "classnames";
+import { isEmpty } from "lodash";
+import React, { useMemo } from "react";
+import { Link } from "react-router-dom";
+
+export const TutorCardV1: React.FC<CardProps> = ({
+  id,
+  name,
+  about,
+  imageUrl,
+  lessonCount,
+  studentCount,
+  profileUrl,
+  rating,
+  topics,
+  onBook,
+}) => {
+  const intl = useFormatMessage();
+  const isNewTutor = useMemo(
+    () => !studentCount && !lessonCount && !rating,
+    [lessonCount, rating, studentCount]
+  );
+
+  const { displayedTopics, remainingTopicsCount } = useMemo(() => {
+    const topicCount = !isNewTutor ? 4 : 8;
+    const displayedTopics = topics.slice(0, topicCount);
+    if (!isNewTutor && displayedTopics.join("").length > 27)
+      displayedTopics.pop();
+    if (isNewTutor && displayedTopics.join("").length > 54)
+      displayedTopics.pop();
+    const totalTopics = topics.length;
+    const remainingTopicsCount =
+      totalTopics < topicCount ? 0 : totalTopics - topicCount;
+    return { displayedTopics, remainingTopicsCount };
+  }, [isNewTutor, topics]);
+
+  return (
+    <div
+      className={cn(
+        "tw-bg-natural-50 tw-flex tw-gap-4",
+        "tw-border tw-border-transparent hover:tw-border hover:tw-border-natural-100",
+        "tw-p-4 tw-shadow-ls-small tw-rounded-lg"
+      )}
+    >
+      <div className="tw-rounded-lg tw-overflow-hidden tw-shrink-0 tw-w-[200px] [&>div>img:tw-object-cover]">
+        <Avatar
+          src={orUndefined(imageUrl)}
+          alt={orUndefined(name)}
+          seed={id.toString()}
+        />
+      </div>
+      <div>
+        <Typography
+          element="subtitle-1"
+          weight="bold"
+          className="tw-text-brand-700 tw-mb-1 tw-line-clamp-1"
+        >
+          {name}
+        </Typography>
+
+        <Typography
+          element="caption"
+          weight="regular"
+          className="tw-ellipsis tw-line-clamp-2 tw-text-natural-800"
+        >
+          {about}
+        </Typography>
+
+        <Link to={profileUrl} className="tw-cursor-pointer">
+          <Typography
+            element="caption"
+            weight="bold"
+            className="tw-ellipsis tw-line-clamp-2 tw-text-natural-800 tw-underline"
+          >
+            {intl("tutors.card.label.read-more")}
+          </Typography>
+        </Link>
+
+        {!isNewTutor ? (
+          <div className={cn("tw-flex tw-gap-8 tw-my-[15px]")}>
+            {studentCount ? (
+              <div className="tw-flex tw-flex-col tw-gap-1">
+                <Typography
+                  element="caption"
+                  weight="regular"
+                  className="tw-text-natural-800"
+                >
+                  {intl("tutors.card.label.students")}
+                </Typography>
+                <Typography
+                  element="body"
+                  weight="semibold"
+                  className="tw-text-natural-950"
+                >
+                  {formatNumber(studentCount)}
+                </Typography>
+              </div>
+            ) : null}
+
+            {lessonCount ? (
+              <div className="tw-flex tw-flex-col tw-gap-1">
+                <Typography
+                  element="caption"
+                  weight="regular"
+                  className="tw-text-natural-800"
+                >
+                  {intl("tutors.card.label.lessons")}
+                </Typography>
+                <Typography
+                  element="body"
+                  weight="semibold"
+                  className="tw-text-natural-950"
+                >
+                  {formatNumber(lessonCount)}
+                </Typography>
+              </div>
+            ) : null}
+
+            {rating ? (
+              <div className="tw-flex tw-flex-col tw-gap-1">
+                <Typography
+                  element="caption"
+                  weight="regular"
+                  className="tw-text-natural-800"
+                >
+                  {intl("tutors.card.label.rating")}
+                </Typography>
+                <div className="tw-flex tw-flex-row tw-items-center tw-gap-[5px] tw-h-full">
+                  <Typography
+                    element="tiny-text"
+                    weight="semibold"
+                    className="tw-inline-block tw-text-natural-950"
+                  >
+                    {rating}
+                  </Typography>
+                  <SStar
+                    width={15}
+                    height={15}
+                    className="[&>*]:tw-fill-warning-500"
+                  />
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {!isEmpty(topics) ? (
+          <div className="tw-flex tw-mt-4 tw-gap-2 tw-flex-wrap tw-justify-start">
+            {displayedTopics.map((topic, idx) => {
+              return (
+                <Typography
+                  key={idx}
+                  element="tiny-text"
+                  weight="regular"
+                  className="tw-inline-block tw-text-natural-50 tw-bg-brand-700 tw-px-3 tw-py-2 tw-rounded-3xl"
+                >
+                  {topic}
+                </Typography>
+              );
+            })}
+            <Typography
+              element="tiny-text"
+              weight="regular"
+              className="tw-inline-block tw-text-natural-50 tw-bg-brand-700 tw-px-3 tw-py-2 tw-rounded-3xl"
+            >
+              {remainingTopicsCount}
+              {"+"}
+            </Typography>
+          </div>
+        ) : null}
+        <div className="tw-flex tw-gap-3 tw-mt-4">
+          <Button
+            onClick={onBook}
+            className="tw-grow tw-basis-1/2 tw-w-full"
+            type={ButtonType.Main}
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Tiny}
+          >
+            <Typography
+              element="caption"
+              weight="semibold"
+              className="tw-text-natural-50"
+            >
+              {intl("tutors.card.book-button.label")}
+            </Typography>
+          </Button>
+          <Link
+            to={profileUrl}
+            className={cn(
+              "tw-block tw-grow tw-basis-1/2 tw-text-center tw-px-4 tw-py-2 tw-border tw-border-brand-700 tw-rounded-lg tw-w-full",
+              "hover:tw-bg-brand-100 hover:tw-border-brand-700 focus:tw-bg-brand-200 focus:tw-ring-1 focus:tw-ring-brand-900",
+              "tw-transition-colors tw-ease-out tw-duration-200"
+            )}
+          >
+            <Typography
+              element="caption"
+              weight="semibold"
+              className="tw-text-brand-700"
+            >
+              {intl("tutors.card.profile-button.label")}
+            </Typography>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TutorCardV1;
diff --git a/packages/luna/src/components/TutorCard/index.ts b/packages/luna/src/components/TutorCard/index.ts
index 3340132a8..0d12a744f 100644
--- a/packages/luna/src/components/TutorCard/index.ts
+++ b/packages/luna/src/components/TutorCard/index.ts
@@ -1 +1,2 @@
 export { TutorCard } from "@/components/TutorCard/TutorCard";
+export { TutorCardV1 } from "@/components/TutorCard/TutorCardV1";
diff --git a/packages/luna/src/components/TutorCard/types.ts b/packages/luna/src/components/TutorCard/types.ts
new file mode 100644
index 000000000..99671fd95
--- /dev/null
+++ b/packages/luna/src/components/TutorCard/types.ts
@@ -0,0 +1,15 @@
+import { Void } from "@litespace/types";
+
+export type CardProps = {
+  id: number;
+  name: string | null;
+  bio: string | null;
+  about: string | null;
+  studentCount: number;
+  lessonCount: number;
+  rating: number;
+  imageUrl?: string | null;
+  profileUrl: string;
+  topics: Array<string>;
+  onBook: Void;
+};
diff --git a/packages/luna/src/locales/ar-eg.json b/packages/luna/src/locales/ar-eg.json
index ef1041c63..161a46c52 100644
--- a/packages/luna/src/locales/ar-eg.json
+++ b/packages/luna/src/locales/ar-eg.json
@@ -692,4 +692,4 @@
   "error.password.short": "رقم سري قصير",
   "error.password.long": "رقم سري طويل",
   "error.password.invalid": "يجب أن يحتوي علي أرقام، حروف ، رموز"
-}
\ No newline at end of file
+}
diff --git a/packages/luna/tailwind.config.js b/packages/luna/tailwind.config.js
index d27a4b00a..3f88264e1 100644
--- a/packages/luna/tailwind.config.js
+++ b/packages/luna/tailwind.config.js
@@ -263,7 +263,8 @@ export default {
       },
     },
     boxShadow: {
-      "ls-small": "0px 6px 20px 0px rgba(0, 0, 0, 0.08)",
+      "ls-x-small": "0px 6px 20px 0px rgba(0, 0, 0, 0.08)",
+      "ls-small": "0px 6px 20px 0px rgba(0, 0, 0, 0.1)",
       "ls-medium": "0px 6px 20px 0px rgba(0, 0, 0, 0.15)",
       "ls-large": "0px 6px 20px 0px rgba(0, 0, 0, 0.2)",
       "ls-x-large": "0px 6px 20px 0px rgba(0, 0, 0, 0.25)",