774-feat: Mentorship post release updates: Course card design update

src/core/styles/_constants.scss

@@ -82,3 +82,7 @@ $opacity-20: 0.2;
 $opacity-10: 0.1;
 $opacity-8: 0.08;
 $opacity-0: 0;
+
+// Easing functions
+$ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
+$ease-emphasize-decelerate: cubic-bezier(0, 0, 0, 1);

src/core/styles/_mixins.scss

@@ -46,24 +46,24 @@
   content: '';
 
   position: absolute;
-  z-index: 1;
   right: -152px;
   bottom: -176px;
 
   display: block;
 
-  width: 256px;
-  height: 248px;
+  width: 310px;
+  height: 300px;
+  border-radius: 100%;
 
   opacity: 0.5;
   background-color: $bg-color;
   filter: blur(32px);
-  border-radius: 100%;
+
+  transition: all 200ms $ease-standard-accelerate;
 
   @if $isHovered {
-    right: -130px;
-    bottom: -160px;
-    width: 279px;
-    height: 270px;
+    translate: -22px -16px;
+    scale: 1.25;
+    transition: all 500ms 100ms $ease-emphasize-decelerate;
   }
 }

src/entities/course/ui/course-card/course-card.module.scss

@@ -3,57 +3,110 @@
 
   @extend %transition-all;
 
+  position: relative;
+
   display: flex;
   flex-direction: column;
 
-  width: 380px;
   min-width: 100px;
   height: 100%;
-
   border-radius: 12px;
 
+  &::before {
+    content: '';
+
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+
+    border-radius: inherit;
+
+    opacity: 0;
+    background-color: hsla(from $color-black h s l/ $opacity-20);
+    backdrop-filter: blur(6px);
+
+    transition: ease-in 200ms;
+  }
+
   .card-header {
     position: relative;
 
     overflow: hidden;
     display: flex;
-    gap: 24px;
+    gap: 16px;
     align-items: center;
 
     height: 100%;
     min-height: 112px;
-    padding: 0 24px;
+    padding: 36px 32px;
+    border-radius: 12px 12px 0 0;
 
     background-color: $color-purple-50;
-    border: solid $color-gray-200;
-    border-width: 1px 1px 0 1px;
-    border-radius: 12px 12px 0 0;
 
     &::after {
-      @extend %transition-all;
-
       @include card-corner-accent($accent-color);
     }
 
     img {
       flex-shrink: 0;
-      width: 60px;
-      height: 54px;
+      width: auto;
+      height: 100px;
       object-fit: contain;
     }
+
+    @include media-laptop-medium {
+      min-height: 215px;
+    }
+
+    @include media-tablet-large {
+      min-height: unset;
+    }
+
+    @include media-mobile-landscape {
+      min-height: 200px;
+      padding: 24px;
+    }
   }
 
   .course-info {
     display: flex;
+    gap: 16px;
     align-items: center;
     justify-content: space-between;
 
-    padding: 24px;
-
-    background-color: hsla(from $color-gray-100 h s l/ $opacity-20);
-    border: solid $color-gray-200;
+    padding: 32px;
+    border-color: $color-gray-200;
+    border-style: solid;
     border-width: 0 1px 1px 1px;
     border-radius: 0 0 12px 12px;
+
+    background-color: $color-white;
+
+    @include media-laptop-medium {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    @include media-tablet-large {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    @include media-mobile-landscape {
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 24px;
+    }
+  }
+
+  .course-title {
+    z-index: 2;
+  }
+
+  .course-link {
+    @include media-mobile-landscape {
+      width: 100%;
+    }
   }
 
   @include media-hover {
@@ -70,7 +123,11 @@
 @include media-hover {
   .course-card {
     &:hover {
-      box-shadow: 0 4px 16px 0 hsla(from $color-black h s l/ $opacity-20);
+      &::before {
+        opacity: 1;
+        filter: blur(10px);
+        transition: ease-out 200ms;
+      }
     }
   }
 }

src/entities/course/ui/course-card/course-card.test.tsx

@@ -34,10 +34,11 @@ describe('CourseCard', () => {
   });
 
   it('renders the course card content correctly', () => {
+    const language = mockProps.language === 'ru' ? 'Russian' : 'English';
+
     expect(screen.getByText(mockProps.title)).toBeVisible();
     expect(screen.getByText(`${mockProps.startDate}`)).toBeVisible();
-    expect(screen.getByText(mockProps.language)).toBeVisible();
-    expect(screen.getByText(`${mockProps.mode}`)).toBeVisible();
+    expect(screen.getByText(language)).toBeVisible();
     expect(screen.getByRole('link')).toHaveAttribute('href', mockProps.detailsUrl);
   });
 

src/entities/course/ui/course-card/course-card.tsx

@@ -29,7 +29,6 @@ export const CourseCard = ({
   startDate,
   registrationEndDate,
   detailsUrl,
-  mode,
   language,
   backgroundStyle,
   className,
@@ -45,18 +44,18 @@ export const CourseCard = ({
     <article className={cx('course-card', className)} data-testid="course-card">
       <div className={cx('card-header')} style={cardStyle} data-testid="card-header">
         <Image src={iconSrc} alt={title} />
-        <Subtitle fontSize="small">{title}</Subtitle>
+        <Subtitle className={cx('course-title')} fontSize="large">{title}</Subtitle>
       </div>
       <div className={cx('course-info')}>
         <DateLang
           startDate={startDate}
           registrationEndDate={registrationEndDate}
           language={language}
-          mode={mode}
         />
         <LinkCustom
+          className={cx('course-link')}
           href={detailsUrl}
-          variant="rounded"
+          variant="secondary"
           aria-label="View course details"
           data-testid="course-link"
         >

src/shared/icons/arrow-icon.tsx

@@ -2,13 +2,11 @@ import Image from 'next/image';
 
 import arrow from '@/shared/assets/svg/arrow.svg';
 
-export const ArrowIcon = ({ size = 24 }: { size?: number }) => {
+export const ArrowIcon = () => {
   return (
     <Image
       src={arrow}
       alt="arrow icon"
-      height={size}
-      width={size}
       data-testid="arrow-icon"
     />
   );

src/shared/ui/date-lang/date-lang.module.scss

@@ -12,23 +12,22 @@
 .date,
 .additional-info {
   display: flex;
-  gap: 4px;
+  gap: 8px;
   align-items: center;
   justify-content: flex-start;
 
   margin: 0;
 
-  font-size: 14px;
   color: $color-gray-600;
 }
 
-.icon {
-  width: 16px;
-  height: 16px;
+.bold {
+  font-weight: 700;
 }
 
-.language {
-  text-transform: uppercase;
+.icon {
+  width: 24px;
+  height: 24px;
 }
 
 .mode {

src/shared/ui/date-lang/date-lang.test.tsx

@@ -16,21 +16,13 @@ describe('DateLang', () => {
         startDate={startDate}
         registrationEndDate={registrationEndDate}
         language="en"
-        mode=""
       />,
     );
     expect(screen.getByText(`${startDate}`)).toBeInTheDocument();
   });
 
-  it('renders the mode correctly', () => {
-    const mode = 'Online';
-
-    render(<DateLang startDate="" registrationEndDate="" language="en" mode={mode} />);
-    expect(screen.getByText(`${mode}`)).toBeInTheDocument();
-  });
-
   it('displays the correct note and microphone icons', () => {
-    render(<DateLang startDate="" registrationEndDate="" language="en" mode="" />);
+    render(<DateLang startDate="" registrationEndDate="" language="en" />);
     expect(screen.getByAltText('note-icon')).toHaveAttribute('src', noteIcon.src);
     expect(screen.getByRole('img', { name: 'microphone-icon' })).toHaveAttribute(
       'src',

src/shared/ui/date-lang/date-lang.tsx

@@ -13,7 +13,6 @@ const cx = classNames.bind(styles);
 interface DateLangProps {
   startDate: string;
   registrationEndDate: string;
-  mode: string;
   language: Language;
   withMargin?: boolean;
 }
@@ -22,21 +21,20 @@ export const DateLang = ({
   startDate,
   registrationEndDate,
   language,
-  mode,
   withMargin,
 }: DateLangProps) => {
+  const courseLanguage = language === 'ru' ? 'Russian' : 'English';
+
   return (
     <section className={cx('info', { margin: withMargin })}>
       <p className={cx('date')}>
         <Image className={cx('icon')} src={noteIcon} alt="note-icon" />
-        <span>Start:</span>
+        <span className={cx('bold')}>Course starts on:</span>
         <DateStart courseStartDate={startDate} registrationEndDate={registrationEndDate} />
       </p>
       <p className={cx('additional-info')}>
         <Image className={cx('icon')} src={micIcon} alt="microphone-icon" />
-        <span className={cx('language')}>{language}</span>
-        <span>•</span>
-        <span className={cx('mode')}>{mode}</span>
+        <span>{courseLanguage}</span>
       </p>
     </section>
   );

src/shared/ui/link-custom/link-custom.module.scss

@@ -16,14 +16,19 @@
 
 .secondary {
   width: max-content;
-  padding: 16px 24px;
-  border: 2px solid $color-black;
+  padding: 12px 24px;
+  border: 1px solid $color-black;
 
   font-size: 18px;
   color: $color-black;
 
-  img {
-    filter: invert(100%);
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 24px;
+    min-height: 24px;
   }
 
   &:hover {
@@ -64,8 +69,13 @@
 
   background-color: #eee;
 
-  img {
-    filter: invert(100%);
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 16px;
+    min-height: 16px;
   }
 
   &:hover {