Repository: Space2Study-UA-1355-02/Client-02
Pull request #42: 111-Implemented a rectangle offer card
Author: login: olena-kuziaieva
Created: 2025-05-08T13:53:52Z | Merged: 2025-05-09T09:56:20Z

![offer-card-rectangle](https://github.com/user-attachments/assets/04091607-30f4-4ad1-a6a2-7cf56e855b3d)

**Offer's card has the following components:**

1. **Author's profile picture (avatar)**
- Author's rating and amount of reviews
- Author's name
- Study subjects
- Price per hour
- Spoken languages
- Offer's title
- “Send message” button
- “Add to my list” button
2. **Price per hour is displayed in UAH currency.**
3. **Spoken languages from Author's profile are displayed below the study subjects.**
4. **Offers title is displayed near avatar.**
5. **Lesson price per hour is displayed in the upper right corner.**
6. **“Send message” button is clickable. When a user clicks on the “Send message” button, then the Write a message popup appears.**

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new offer card layout displaying user profile, course details, and pricing information.
  - Added interactive buttons for viewing details and sending messages directly from the offer card.
  - Implemented a modal dialog for composing and sending messages.
  - Enhanced the Find Offers page with a visual offer card component.

- **Style**
  - Applied modern, cohesive styling to offer cards and related UI elements for improved visual appeal.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx b/src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx
new file mode 100644
index 00000000..d4aa904a
--- /dev/null
+++ b/src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx
@@ -0,0 +1,36 @@
+import { Box, Typography } from '@mui/material'
+import LanguageIcon from '@mui/icons-material/Language'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const CourseDetails = ({
+  title = 'Advanced Quantum Mechanics: Theoretical Concepts, Mathematical Formulations in Modern Physics',
+  language = 'German',
+  level = 'Beginner - Advanced',
+  description = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, consectetur ex totam libero cum odit et, ullam corrupti corrupti corrupti doloribus optio esse reiciendis iusto fugit.',
+  spokenLanguages = 'Ukrainian, English'
+}) => {
+  return (
+    <>
+      <Typography gutterBottom sx={styles.subheadings} variant='h6'>
+        {title}
+      </Typography>
+      <Box sx={styles.subheadings}>
+        <Typography sx={styles.subheadingsLanguage} variant='body2'>
+          {language}
+        </Typography>
+        <Typography sx={styles.subheadingsLevel} variant='body2'>
+          {level}
+        </Typography>
+      </Box>
+      <Typography mb={2} sx={styles.description} variant='body2'>
+        {description}
+      </Typography>
+      <Box sx={styles.languages}>
+        <LanguageIcon fontSize='small' />
+        <Typography variant='body2'>{spokenLanguages}</Typography>
+      </Box>
+    </>
+  )
+}
+
+export default CourseDetails
diff --git a/src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx b/src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx
new file mode 100644
index 00000000..9e3de048
--- /dev/null
+++ b/src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import { Card, CardContent, Grid } from '@mui/material'
+
+import UserProfile from '~/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile'
+import CourseDetails from '~/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails'
+import PriceSection from '~/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection'
+
+import SendMessageModal from '~/components/send-message-modal/SendMessageModal'
+
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const OfferCardRectangle = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleOpenMessage = () => setIsModalOpen(true)
+  const handleCloseMessage = () => setIsModalOpen(false)
+  const handleSendMessage = () => {
+    console.log('Message sent!')
+  }
+
+  return (
+    <>
+      <Card sx={styles.card}>
+        <CardContent>
+          <Grid alignItems='flex-start' container spacing={2}>
+            <Grid item md={2} sm={4} sx={{ height: '100%' }} xs={12}>
+              <UserProfile />
+            </Grid>
+            <Grid item md={7} sm={8} sx={{ height: '100%' }} xs={12}>
+              <CourseDetails />
+            </Grid>
+            <Grid item md={3} sm={12} sx={{ height: '100%' }} xs={12}>
+              <PriceSection onOpenMessage={handleOpenMessage} />
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+
+      <SendMessageModal
+        onClose={handleCloseMessage}
+        onSend={handleSendMessage}
+        open={isModalOpen}
+      />
+    </>
+  )
+}
+
+export default OfferCardRectangle
diff --git a/src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles.js b/src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles.js
new file mode 100644
index 00000000..86377a86
--- /dev/null
+++ b/src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles.js
@@ -0,0 +1,100 @@
+import { lightGreen } from '@mui/material/colors'
+
+export const styles = {
+  card: {
+    p: { xs: 1, sm: 2, md: 3 },
+    borderRadius: 3,
+    boxShadow: 3,
+    width: '100%',
+    maxWidth: { xs: '100%', sm: '95%', md: '900px' },
+    ml: 'auto',
+    mr: '100px',
+    mb: { xs: 4, sm: 5 },
+    overflowX: 'visible'
+  },
+  leftColumn: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 1
+  },
+  avatar: {
+    width: 94,
+    height: 94,
+    border: '2px solid',
+    color: 'primary.600',
+    borderRadius: '50%'
+  },
+  ratingCaption: {
+    color: 'primary.400',
+    fontWeight: '400',
+    textAlign: 'left'
+  },
+  rating: {
+    backgroundColor: 'primary.50',
+    borderRadius: '3px',
+    padding: '2px 3px',
+    color: 'primary.600'
+  },
+  headings: {
+    fontWeight: '500',
+    color: 'primary.500'
+  },
+  subheadings: {
+    display: 'flex',
+    gap: 1,
+    marginBottom: 1,
+    color: 'primary.700'
+  },
+  subheadingsLanguage: {
+    backgroundColor: lightGreen[300],
+    borderRadius: '10px',
+    textTransform: 'uppercase',
+    padding: '5px 15px',
+    fontSize: '12px',
+    letterSpacing: '1px',
+    fontWeight: '600',
+    color: 'primary.600'
+  },
+  subheadingsLevel: {
+    backgroundColor: lightGreen[100],
+    borderRadius: '10px',
+    textTransform: 'uppercase',
+    padding: '5px 15px',
+    fontSize: '12px',
+    letterSpacing: '1px',
+    fontWeight: '500',
+    color: 'primary.500'
+  },
+  description: {
+    color: 'primary.500',
+    fontWeight: '400'
+  },
+  languages: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 1,
+    marginTop: 1,
+    color: 'primary.300'
+  },
+  topRight: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start'
+  },
+  buttons: {
+    mt: 3,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1,
+    flexWrap: 'wrap'
+  },
+  buttonSendMessage: {
+    backgroundColor: 'primary.50',
+    color: 'primary.800',
+    fontWeight: '600',
+    '&:hover': {
+      backgroundColor: 'primary.100'
+    }
+  }
+}
diff --git a/src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx b/src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
new file mode 100644
index 00000000..7a5eec3a
--- /dev/null
+++ b/src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
@@ -0,0 +1,37 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+import { useTranslation } from 'react-i18next'
+
+const PriceSection = ({ price = 75, onOpenMessage }) => {
+  const { t } = useTranslation()
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            {price} {t('common.uah')}
+          </Typography>
+          <Typography color='primary.600' variant='caption'>
+            /{t('common.hour')}
+          </Typography>
+        </Box>
+        <IconButton color='primary.800'>
+          <BookmarkBorderIcon />
+        </IconButton>
+      </Box>
+      <Box sx={styles.buttons}>
+        <Button variant='contained'>{t('common.labels.viewDetails')}</Button>
+        <Button
+          onClick={onOpenMessage}
+          sx={styles.buttonSendMessage}
+          variant='contained'
+        >
+          {t('common.labels.sendMessage')}
+        </Button>
+      </Box>
+    </>
+  )
+}
+
+export default PriceSection
diff --git a/src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx b/src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
new file mode 100644
index 00000000..9e77cef9
--- /dev/null
+++ b/src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
@@ -0,0 +1,27 @@
+import { Box, Typography, Avatar, Rating } from '@mui/material'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const UserProfile = ({
+  name = 'Jennifer W.',
+  avatarSrc = '/src/assets/img/tutor-profile-page/avatar.png',
+  rating = 5,
+  reviewCount = 10
+}) => {
+  return (
+    <Box sx={styles.leftColumn}>
+      <Avatar src={avatarSrc} sx={styles.avatar} />
+      <Typography color='primary.500' fontWeight='500' variant='subtitle1'>
+        {name}
+      </Typography>
+      <Box alignItems='center' display='flex' gap={1} sx={styles.rating}>
+        <Rating name='read-only' readOnly size='small' value={5} />
+        <Typography variant='body2'>{rating}</Typography>
+      </Box>
+      <Typography sx={styles.ratingCaption} variant='caption'>
+        {reviewCount} reviews
+      </Typography>
+    </Box>
+  )
+}
+
+export default UserProfile
diff --git a/src/components/send-message-modal/SendMessageModal.jsx b/src/components/send-message-modal/SendMessageModal.jsx
new file mode 100644
index 00000000..a9aa177c
--- /dev/null
+++ b/src/components/send-message-modal/SendMessageModal.jsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Button
+} from '@mui/material'
+import { useState } from 'react'
+
+const SendMessageModal = ({ open, onClose, onSend }) => {
+  const [message, setMessage] = useState('')
+  const handleSend = () => {
+    onSend(message)
+    onClose()
+    setMessage('')
+  }
+
+  const handleClose = () => {
+    onClose()
+    setMessage('')
+  }
+
+  return (
+    <Dialog
+      disableEnforceFocus
+      fullWidth
+      maxWidth='sm'
+      onClose={onClose}
+      open={open}
+    >
+      <DialogTitle>Write a message</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          fullWidth
+          label='Your message'
+          margin='dense'
+          multiline
+          onChange={(e) => setMessage(e.target.value)}
+          rows={4}
+          type='text'
+          value={message}
+          variant='outlined'
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button disabled={!message.trim()} onClick={handleSend}>
+          Send
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default SendMessageModal
diff --git a/src/containers/tutor-home-page/general-info-step/GeneralInfoStep.jsx b/src/containers/tutor-home-page/general-info-step/GeneralInfoStep.jsx
index 4091c4a8..e9fbf4b3 100644
--- a/src/containers/tutor-home-page/general-info-step/GeneralInfoStep.jsx
+++ b/src/containers/tutor-home-page/general-info-step/GeneralInfoStep.jsx
@@ -61,7 +61,9 @@ const GeneralInfoStep = ({ btnsBox, onErrorChange }) => {
         <TextField
           error={errors.firstName}
           fullWidth
-          helperText={errors.firstName && t('becomeTutor.generalInfo.firstNameLabelReq')}
+          helperText={
+            errors.firstName && t('becomeTutor.generalInfo.firstNameLabelReq')
+          }
           label={t('common.labels.firstName')}
           name='firstName'
           onBlur={validateForm}
@@ -72,7 +74,9 @@ const GeneralInfoStep = ({ btnsBox, onErrorChange }) => {
         <TextField
           error={errors.lastName}
           fullWidth
-          helperText={errors.lastName && t('becomeTutor.generalInfo.lastNameLabelReq')}
+          helperText={
+            errors.lastName && t('becomeTutor.generalInfo.lastNameLabelReq')
+          }
           label={t('common.labels.lastName')}
           name='lastName'
           onBlur={validateForm}
diff --git a/src/pages/find-offers/FindOffers.tsx b/src/pages/find-offers/FindOffers.tsx
index ea3ef0e1..06a4364e 100644
--- a/src/pages/find-offers/FindOffers.tsx
+++ b/src/pages/find-offers/FindOffers.tsx
@@ -1,7 +1,13 @@
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
+import OfferCardRectangle from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle'
 
 const FindOffers = () => {
-  return <PageWrapper>Find offers</PageWrapper>
+  return (
+    <>
+      <PageWrapper>Find offers</PageWrapper>
+      <OfferCardRectangle />
+    </>
+  )
 }
 
 export default FindOffers


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 16**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx (1)</summary><blockquote>

`1-46`: _🛠️ Refactor suggestion_

**Consider accessibility improvements.**

To ensure the component is accessible to all users, you should add appropriate ARIA attributes and semantic HTML.


- Add `aria-label` to the bookmark button
- Add `aria-labelledby` to connect labels with their controls
- Ensure color contrast meets WCAG standards
- Consider adding keyboard navigation support

Example improvement for the bookmark button:
```diff
-        <IconButton color='primary.800' onClick={onBookmark}>
+        <IconButton 
+          color='primary.800' 
+          onClick={onBookmark}
+          aria-label={`Bookmark ${offerData.title}`}
+        >
           <BookmarkBorderIcon />
         </IconButton>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (6)</summary><blockquote>

<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js (3)</summary><blockquote>

`1-1`: **Incorrect import path may lead to build issues.**

The file imports from '@mui/material/colors' but doesn't specify which color is being imported. While the import works, it's considered a best practice to import only the specific colors you need.

```diff
-import { lightGreen } from '@mui/material/colors'
+import { lightGreen } from '@mui/material/colors'
```

---

`5-11`: **Consider using MUI's spacing system for consistent spacing.**

Instead of hardcoded pixel values, consider using MUI's spacing system for better consistency across the application.

```diff
  card: {
-    padding: '2px',
+    padding: 0.25,
    borderRadius: 3,
    boxShadow: 3,
    maxWidth: '900px',
    margin: 'auto',
-    marginBottom: '50px'
+    marginBottom: 6
  },
```

---

`46-65`: **Duplicated styling properties between subheadingsLanguage and subheadingsLevel.**

There's significant duplication between these two style objects. Consider extracting the common properties to reduce duplication.

```diff
+  subheadingsBase: {
+    borderRadius: '10px',
+    textTransform: 'uppercase',
+    padding: '5px 15px',
+    fontSize: '12px',
+    letterSpacing: '1px',
+  },
  subheadingsLanguage: {
+    ...styles.subheadingsBase,
    backgroundColor: lightGreen[300],
-    borderRadius: '10px',
-    textTransform: 'uppercase',
-    padding: '5px 15px',
-    fontSize: '12px',
-    letterSpacing: '1px',
    fontWeight: '600',
    color: 'primary.600'
  },
  subheadingsLevel: {
+    ...styles.subheadingsBase,
    backgroundColor: lightGreen[100],
-    borderRadius: '10px',
-    textTransform: 'uppercase',
-    padding: '5px 15px',
-    fontSize: '12px',
-    letterSpacing: '1px',
    fontWeight: '500',
    color: 'primary.500'
  },
```

</blockquote></details>
<details>
<summary>src/components/send-message-modal/SendMessageModal.jsx (1)</summary><blockquote>

`11-11`: **Add PropTypes or TypeScript types for component props.**

For better code quality and maintainability, it's recommended to define the expected props using PropTypes or TypeScript interfaces.


For PropTypes:
```diff
+import PropTypes from 'prop-types';
import React from 'react'
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Button
} from '@mui/material'

const SendMessageModal = ({ open, onClose, onSend }) => {
  // Component implementation
}

+SendMessageModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSend: PropTypes.func.isRequired
+};

export default SendMessageModal
```

Or for TypeScript:
```typescript
interface SendMessageModalProps {
  open: boolean;
  onClose: () => void;
  onSend: (message: string) => void;
}

const SendMessageModal: React.FC<SendMessageModalProps> = ({ open, onClose, onSend }) => {
  // Component implementation
}
```

</blockquote></details>
<details>
<summary>src/pages/find-offers/FindOffers.tsx (1)</summary><blockquote>

`2-2`: **Component directory structure seems inconsistent.**

The import path suggests that `OfferCardRectangle` is nested under "offer-card-square", which is confusing for a rectangular component. Consider reorganizing your component structure to be more intuitive.

```diff
-import OfferCardRectangle from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle'
+import OfferCardRectangle from '~/components/offer-card/offer-card-rectangle/OfferCardRectangle'
```

</blockquote></details>
<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx (1)</summary><blockquote>

`21-23`: **Fix repetitive placeholder text.**

The placeholder description contains repetitive text "corrupti corrupti corrupti" which appears to be a copy-paste error.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between c2ab3e952597ea014eb7d36f6356830e74a96b49 and 515eb8b54efb6aefbbf0816b5dce04c4c6ddf63e.

</details>

<details>
<summary>📒 Files selected for processing (7)</summary>

* `src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx` (1 hunks)
* `src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js` (1 hunks)
* `src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx` (1 hunks)
* `src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx` (1 hunks)
* `src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx` (1 hunks)
* `src/components/send-message-modal/SendMessageModal.jsx` (1 hunks)
* `src/pages/find-offers/FindOffers.tsx` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (5)</summary>

<details>
<summary>src/pages/find-offers/FindOffers.tsx (1)</summary><blockquote>

<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx (1)</summary>

* `OfferCardRectangle` (9-43)

</details>

</blockquote></details>
<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx (1)</summary><blockquote>

<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js (2)</summary>

* `styles` (3-96)
* `styles` (3-96)

</details>

</blockquote></details>
<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx (5)</summary><blockquote>

<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js (2)</summary>

* `styles` (3-96)
* `styles` (3-96)

</details>
<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx (1)</summary>

* `UserProfile` (4-23)

</details>
<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx (1)</summary>

* `CourseDetails` (5-31)

</details>
<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx (1)</summary>

* `PriceSection` (5-33)

</details>
<details>
<summary>src/components/send-message-modal/SendMessageModal.jsx (1)</summary>

* `SendMessageModal` (11-40)

</details>

</blockquote></details>
<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx (1)</summary><blockquote>

<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js (2)</summary>

* `styles` (3-96)
* `styles` (3-96)

</details>

</blockquote></details>
<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx (1)</summary><blockquote>

<details>
<summary>src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js (2)</summary>

* `styles` (3-96)
* `styles` (3-96)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: Run Tests

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>src/pages/find-offers/FindOffers.tsx (1)</summary>

`4-10`: <details>
<summary>❓ Verification inconclusive</summary>

**OfferCardRectangle is used statically without any props.**

The component is currently rendered without any props, which suggests it might be using hardcoded data. For a production-ready implementation, consider passing offer data as props.

```diff
const FindOffers = () => {
+  const mockOffers = [
+    { id: 1, user: { name: 'Jennifer W.', rating: 5, reviews: 10 }, /* other offer data */ },
+    // More mock offers...
+  ];

  return (
    <>
      <PageWrapper>Find offers</PageWrapper>
-      <OfferCardRectangle />
+      {mockOffers.map(offer => (
+        <OfferCardRectangle key={offer.id} offer={offer} />
+      ))}
    </>
  )
}
```

Can you verify if there's an API or data source for offers that should be integrated with this component?

---

🏁 Script executed:

```shell
#!/bin/bash
set -e
echo "Searching for API or data fetching related to offers..."

# Look for service or API files referencing offers
rg -n -i "offer" -A2 src/api
rg -n -i "offer" -A2 src/services

# Look for hooks or functions fetching offers
rg -n -i "use.*offer" -A2 src
rg -n -i "getOffer" -A2 src

# Look for direct network calls related to offers
rg -n -i "axios" -A2 src | rg -i "offer"
rg -n -i "fetch.*offer" -A2 src
```

Length of output: 206

---

🏁 Script executed:

```shell
#!/bin/bash
set -e
echo "=== Searching for any data fetching related to offers ==="
rg -n -i "fetch(" .
rg -n -i "axios" .
rg -n -i "gql" .

echo
echo "=== Locating OfferCardRectangle component definition ==="
rg -n "OfferCardRectangle" -n src | grep -v "FindOffers.tsx" | while read -r line; do
  file=$(echo "$line" | cut -d:':' -f1)
  echo "-> File: $file"
  echo "  -- Props interfaces/types:"
  rg -n "interface .*Props" -A2 -n "$file" || true
  rg -n "type .*Props" -A2 -n "$file" || true
  echo "  -- Component signature:"
  rg -n "OfferCardRectangle" -A3 -n "$file"
  echo
done
```

Length of output: 218

---

🏁 Script executed:

```shell
#!/bin/bash
set -e
echo "=== Searching for data fetching related to offers ==="
# Use fixed-string search for fetch( and check common fetch/axios/GraphQL patterns
rg -nF "fetch(" .
rg -n "axios\.get" .
rg -n "axios\.post" .
rg -n "useQuery" .
rg -n "useOffers" .
rg -n "getOffers" .

echo
echo "=== Locating OfferCardRectangle component definition ==="
# Find where OfferCardRectangle is defined and inspect its props signature
rg -n "export (const|function) OfferCardRectangle" -A5 -n src
```

Length of output: 145

---



</details>

**OfferCardRectangle requires props and data integration**

I didn’t find any API endpoints, hooks, or services fetching offers in the codebase. Please confirm whether an offers data source or hook exists; otherwise, pass the offer data into `OfferCardRectangle` (e.g. via props or a custom hook).  

Locations to update:
- `src/pages/find-offers/FindOffers.tsx` (lines 4–10)

Suggested refactor:
```diff
 const FindOffers = () => {
+  // TODO: replace mockOffers with real data from API or hook
+  const mockOffers = [
+    { id: 1, user: { name: 'Jennifer W.', rating: 5, reviews: 10 }, /* … */ },
+    // More mock offers…
+  ];

   return (
     <>
       <PageWrapper>Find offers</PageWrapper>
-      <OfferCardRectangle />
+      {mockOffers.map(offer => (
+        <OfferCardRectangle key={offer.id} offer={offer} />
+      ))}
     </>
   )
 }
```

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-08T14:01:12Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T14:12:08Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-08T14:14:41Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T14:14:43Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-08T14:15:58Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T14:24:58Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-08T14:25:30Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T14:25:44Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-08T14:26:12Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>♻️ Duplicate comments (1)</summary><blockquote>

<details>
<summary>src/components/send-message-modal/SendMessageModal.jsx (1)</summary><blockquote>

`12-56`: **Great implementation of the message modal!**

The component correctly manages state, properly handles the message input, and disables the Send button when the message is empty. The handlers for sending and closing are well-implemented, ensuring the message state resets appropriately.

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/components/send-message-modal/SendMessageModal.jsx (2)</summary><blockquote>

`1-10`: **Consider consolidating React imports.**

You're importing React and useState separately. Since you're already importing React, you could use `React.useState` instead of importing useState separately, or if you prefer separate imports, you could remove the full React import and use named imports.

```diff
- import React from 'react'
+ import React, { useState } from 'react'
  import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    TextField,
    Button
  } from '@mui/material'
- import { useState } from 'react'
```

---

`12-12`: **Consider adding prop validation.**

Adding PropTypes or TypeScript typing would improve the component's reliability and documentation by explicitly defining the expected prop types.

```diff
+ import PropTypes from 'prop-types';

  const SendMessageModal = ({ open, onClose, onSend }) => {
    // Component implementation
  }

+ SendMessageModal.propTypes = {
+   open: PropTypes.bool.isRequired,
+   onClose: PropTypes.func.isRequired,
+   onSend: PropTypes.func.isRequired
+ };
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 515eb8b54efb6aefbbf0816b5dce04c4c6ddf63e and 734a17dc99327342fbc94ec7bd804ec3cc57e34f.

</details>

<details>
<summary>📒 Files selected for processing (6)</summary>

* `src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx` (1 hunks)
* `src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx` (1 hunks)
* `src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles.js` (1 hunks)
* `src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx` (1 hunks)
* `src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx` (1 hunks)
* `src/components/send-message-modal/SendMessageModal.jsx` (1 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (1)</summary>

* src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles.js

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (4)</summary>

* src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx
* src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx
* src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
* src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: Run Tests

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>src/components/send-message-modal/SendMessageModal.jsx (1)</summary>

`50-52`: **Nice user experience touch.**

Disabling the Send button when there's no message content is a good practice that prevents users from sending empty messages.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-08T15:17:29Z
user: login: Don-de-padlo
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T15:49:05Z
user: login: Kryzhanivsky
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T15:59:21Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T18:39:38Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T18:39:57Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T18:41:30Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T22:17:57Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T22:18:20Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T22:18:47Z
user: login: olena-kuziaieva
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T22:19:11Z
user: login: ruslansymonenko
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T07:07:51Z

Review comments:
diff_hunk: @@ -0,0 +1,96 @@
+import { lightGreen } from '@mui/material/colors'
+
+export const styles = {
+  card: {
+    padding: '2px',
+    borderRadius: 3,
+    boxShadow: 3,
+    maxWidth: '900px',
+    margin: 'auto',
+    marginBottom: '50px'
+  },
+  leftColumn: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 1
+  },
+  avatar: {
+    width: 94,
+    height: 94,
+    border: '2px solid',
+    color: 'primary.600',
+    borderRadius: '50%'
+  },
+  ratingCaption: {
+    color: 'primary.400',
+    fontWeight: '400',
+    textAlign: 'left'
+  },
+  rating: {
+    backgroundColor: 'primary.50',
+    borderRadius: '3px',
+    padding: '2px 3px',
+    color: 'primary.600'
+  },
+  headings: {
+    fontWeight: '500',
+    color: 'primary.500'
+  },
+  subheadings: {
+    display: 'flex',
+    gap: 1,
+    marginBottom: 1,
+    color: 'primary.700'
+  },
+  subheadingsLanguage: {
+    backgroundColor: lightGreen[300],
+    borderRadius: '10px',
+    textTransform: 'uppercase',
+    padding: '5px 15px',
+    fontSize: '12px',
+    letterSpacing: '1px',
+    fontWeight: '600',
+    color: 'primary.600'
+  },
+  subheadingsLevel: {
+    backgroundColor: lightGreen[100],
+    borderRadius: '10px',
+    textTransform: 'uppercase',
+    padding: '5px 15px',
+    fontSize: '12px',
+    letterSpacing: '1px',
+    fontWeight: '500',
+    color: 'primary.500'
+  },
+  description: {
+    color: 'primary.500',
+    fontWeight: '400'
+  },
+  languages: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 1,
+    marginTop: 1,
+    color: 'primary.300'
+  },
+  topRight: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start'
+  },
+  buttons: {
+    marginTop: 3,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1
+  },
+  buttonSendMessage: {
+    backgroundColor: 'primary.50',
+    color: 'primary.800',
+    fontWeight: '600',
+    '&:hover': {
+      backgroundColor: 'primary.100'
+    }
+  }
+}
path: src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**File contains a typo in its name which could cause confusion.**

The filename contains a typo: "OfferCardRect**a**gle" is missing the 'n' (should be "Rectangle"). This could lead to confusion and maintenance issues.

Rename the file to "OfferCardRectangle.styles.js" and update all imports accordingly.

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-08T14:01:09Z
author_association: NONE
diff_hunk: @@ -0,0 +1,42 @@
+import React from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Button
+} from '@mui/material'
+
+const SendMessageModal = ({ open, onClose, onSend }) => {
+  return (
+    <Dialog fullWidth maxWidth='sm' onClose={onClose} open={open}>
+      <DialogTitle>Write a message</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          fullWidth
+          label='Your message'
+          margin='dense'
+          multiline
+          rows={4}
+          type='text'
+          variant='outlined'
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button
+          onClick={() => {
+            onSend()
+            onClose()
+          }}
+        >
+          Send
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
path: src/components/send-message-modal/SendMessageModal.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Critical issue: TextField value is not being captured or passed to onSend.**

The component doesn't capture the text input value or pass it to the `onSend` function, so no message content would be sent when clicking the Send button.

```diff
const SendMessageModal = ({ open, onClose, onSend }) => {
+  const [message, setMessage] = React.useState('');
+
+  const handleSend = () => {
+    onSend(message);
+    onClose();
+    setMessage('');
+  };
+
+  const handleClose = () => {
+    onClose();
+    setMessage('');
+  };

  return (
    <Dialog fullWidth maxWidth='sm' onClose={onClose} open={open}>
      <DialogTitle>Write a message</DialogTitle>
      <DialogContent>
        <TextField
          autoFocus
          fullWidth
          label='Your message'
          margin='dense'
          multiline
          rows={4}
          type='text'
          variant='outlined'
+         value={message}
+         onChange={(e) => setMessage(e.target.value)}
        />
      </DialogContent>
      <DialogActions>
-        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={handleClose}>Cancel</Button>
        <Button
-          onClick={() => {
-            onSend()
-            onClose()
-          }}
+          onClick={handleSend}
+          disabled={!message.trim()}
        >
          Send
        </Button>
      </DialogActions>
    </Dialog>
  )
}
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const SendMessageModal = ({ open, onClose, onSend }) => {
  const [message, setMessage] = React.useState('');

  const handleSend = () => {
    onSend(message);
    onClose();
    setMessage('');
  };

  const handleClose = () => {
    onClose();
    setMessage('');
  };

  return (
    <Dialog fullWidth maxWidth="sm" onClose={onClose} open={open}>
      <DialogTitle>Write a message</DialogTitle>
      <DialogContent>
        <TextField
          autoFocus
          fullWidth
          label="Your message"
          margin="dense"
          multiline
          rows={4}
          type="text"
          variant="outlined"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>Cancel</Button>
        <Button onClick={handleSend} disabled={!message.trim()}>
          Send
        </Button>
      </DialogActions>
    </Dialog>
  );
};
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-08T14:01:09Z
author_association: NONE
diff_hunk: @@ -0,0 +1,25 @@
+import { Box, Typography, Avatar, Rating } from '@mui/material'
+import { styles } from './OfferCardRectagle.styles'
+
+const UserProfile = () => {
+  return (
+    <Box sx={styles.leftColumn}>
+      <Avatar
+        src='/src/assets/img/tutor-profile-page/avatar.png'
path: src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Hardcoded image path may cause issues during production build.**

Using a direct path to an image in the src directory might not work as expected after the production build process. Consider using a proper asset import or public path approach.

```diff
-        src='/src/assets/img/tutor-profile-page/avatar.png'
+        src={`${process.env.PUBLIC_URL}/assets/img/tutor-profile-page/avatar.png`}
```

Alternatively, import the image at the top of the file:
```javascript
import avatarImage from '../../../assets/img/tutor-profile-page/avatar.png';

// Then in the component:
<Avatar src={avatarImage} sx={styles.avatar} />
```

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-08T14:01:10Z
author_association: NONE
diff_hunk: @@ -0,0 +1,25 @@
+import { Box, Typography, Avatar, Rating } from '@mui/material'
+import { styles } from './OfferCardRectagle.styles'
path: src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Import from file with typo in name.**

The import is from a file with a typo in its name (`OfferCardRectagle.styles`). This can lead to confusion and maintenance issues.

```diff
-import { styles } from './OfferCardRectagle.styles'
+import { styles } from './OfferCardRectangle.styles'
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import { styles } from './OfferCardRectangle.styles'
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-08T14:01:10Z
author_association: NONE
diff_hunk: @@ -0,0 +1,25 @@
+import { Box, Typography, Avatar, Rating } from '@mui/material'
+import { styles } from './OfferCardRectagle.styles'
+
+const UserProfile = () => {
+  return (
+    <Box sx={styles.leftColumn}>
+      <Avatar
+        src='/src/assets/img/tutor-profile-page/avatar.png'
+        sx={styles.avatar}
+      />
+      <Typography color='primary.500' fontWeight='500' variant='subtitle1'>
+        Jennifer W.
+      </Typography>
+      <Box alignItems='center' display='flex' gap={1} sx={styles.rating}>
+        <Rating name='read-only' readOnly size='small' value={5} />
+        <Typography variant='body2'>5</Typography>
+      </Box>
+      <Typography sx={styles.ratingCaption} variant='caption'>
+        10 reviews
+      </Typography>
+    </Box>
+  )
+}
path: src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Component uses hardcoded data instead of accepting props.**

The component currently uses hardcoded values for the user profile data. For better reusability, it should accept this data as props.

```diff
-const UserProfile = () => {
+const UserProfile = ({ 
+  name = 'Jennifer W.', 
+  avatarSrc = '/src/assets/img/tutor-profile-page/avatar.png',
+  rating = 5,
+  reviewCount = 10
+}) => {
  return (
    <Box sx={styles.leftColumn}>
      <Avatar
-        src='/src/assets/img/tutor-profile-page/avatar.png'
+        src={avatarSrc}
        sx={styles.avatar}
      />
      <Typography color='primary.500' fontWeight='500' variant='subtitle1'>
-        Jennifer W.
+        {name}
      </Typography>
      <Box alignItems='center' display='flex' gap={1} sx={styles.rating}>
-        <Rating name='read-only' readOnly size='small' value={5} />
-        <Typography variant='body2'>5</Typography>
+        <Rating name='read-only' readOnly size='small' value={rating} />
+        <Typography variant='body2'>{rating}</Typography>
      </Box>
      <Typography sx={styles.ratingCaption} variant='caption'>
-        10 reviews
+        {reviewCount} reviews
      </Typography>
    </Box>
  )
}

+UserProfile.propTypes = {
+  name: PropTypes.string,
+  avatarSrc: PropTypes.string,
+  rating: PropTypes.number,
+  reviewCount: PropTypes.number
+};
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const UserProfile = ({
  name = 'Jennifer W.',
  avatarSrc = '/src/assets/img/tutor-profile-page/avatar.png',
  rating = 5,
  reviewCount = 10
}) => {
  return (
    <Box sx={styles.leftColumn}>
      <Avatar
        src={avatarSrc}
        sx={styles.avatar}
      />
      <Typography color='primary.500' fontWeight='500' variant='subtitle1'>
        {name}
      </Typography>
      <Box alignItems='center' display='flex' gap={1} sx={styles.rating}>
        <Rating name='read-only' readOnly size='small' value={rating} />
        <Typography variant='body2'>{rating}</Typography>
      </Box>
      <Typography sx={styles.ratingCaption} variant='caption'>
        {reviewCount} reviews
      </Typography>
    </Box>
  )
}

UserProfile.propTypes = {
  name: PropTypes.string,
  avatarSrc: PropTypes.string,
  rating: PropTypes.number,
  reviewCount: PropTypes.number
};
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit cbbb604
created_at: 2025-05-08T14:01:10Z
author_association: NONE
diff_hunk: @@ -0,0 +1,33 @@
+import { Box, Typography } from '@mui/material'
+import LanguageIcon from '@mui/icons-material/Language'
+import { styles } from './OfferCardRectagle.styles'
path: src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix typo in style import path.**

There's a typo in the styles import - `OfferCardRectagle.styles` should be `OfferCardRectangle.styles`.

```diff
-import { styles } from './OfferCardRectagle.styles'
+import { styles } from './OfferCardRectangle.styles'
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import { Box, Typography } from '@mui/material'
import LanguageIcon from '@mui/icons-material/Language'
import { styles } from './OfferCardRectangle.styles'
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T14:01:10Z
author_association: NONE
diff_hunk: @@ -0,0 +1,33 @@
+import { Box, Typography } from '@mui/material'
+import LanguageIcon from '@mui/icons-material/Language'
+import { styles } from './OfferCardRectagle.styles'
+
+const CourseDetails = () => {
+  return (
+    <>
+      <Typography gutterBottom sx={styles.subheadings} variant='h6'>
+        Advanced Quantum Mechanics: Theoretical Concepts, Mathematical
+        Formulations in Modern Physics
+      </Typography>
+      <Box sx={styles.subheadings}>
+        <Typography sx={styles.subheadingsLanguage} variant='body2'>
+          German
+        </Typography>
+        <Typography sx={styles.subheadingsLevel} variant='body2'>
+          Beginner - Advanced
+        </Typography>
+      </Box>
+      <Typography mb={2} sx={styles.description} variant='body2'>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse,
+        consectetur ex totam libero cum odit et, ullam corrupti corrupti
+        corrupti doloribus optio esse reiciendis iusto fugit.
+      </Typography>
+      <Box sx={styles.languages}>
+        <LanguageIcon fontSize='small' />
+        <Typography variant='body2'>Ukrainian, English</Typography>
+      </Box>
+    </>
+  )
+}
path: src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Component should accept data via props instead of using hardcoded values.**

The current implementation uses hardcoded values for course title, language, level, description, and spoken languages. This limits reusability and makes the component impossible to test with different data scenarios.

```diff
-const CourseDetails = () => {
+const CourseDetails = ({ title, language, level, description, spokenLanguages }) => {
   return (
     <>
       <Typography gutterBottom sx={styles.subheadings} variant='h6'>
-        Advanced Quantum Mechanics: Theoretical Concepts, Mathematical
-        Formulations in Modern Physics
+        {title}
       </Typography>
       <Box sx={styles.subheadings}>
         <Typography sx={styles.subheadingsLanguage} variant='body2'>
-          German
+          {language}
         </Typography>
         <Typography sx={styles.subheadingsLevel} variant='body2'>
-          Beginner - Advanced
+          {level}
         </Typography>
       </Box>
       <Typography mb={2} sx={styles.description} variant='body2'>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse,
-        consectetur ex totam libero cum odit et, ullam corrupti corrupti
-        corrupti doloribus optio esse reiciendis iusto fugit.
+        {description}
       </Typography>
       <Box sx={styles.languages}>
         <LanguageIcon fontSize='small' />
-        <Typography variant='body2'>Ukrainian, English</Typography>
+        <Typography variant='body2'>{spokenLanguages}</Typography>
       </Box>
     </>
   )
 }
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const CourseDetails = ({ title, language, level, description, spokenLanguages }) => {
  return (
    <>
      <Typography gutterBottom sx={styles.subheadings} variant='h6'>
        {title}
      </Typography>
      <Box sx={styles.subheadings}>
        <Typography sx={styles.subheadingsLanguage} variant='body2'>
          {language}
        </Typography>
        <Typography sx={styles.subheadingsLevel} variant='body2'>
          {level}
        </Typography>
      </Box>
      <Typography mb={2} sx={styles.description} variant='body2'>
        {description}
      </Typography>
      <Box sx={styles.languages}>
        <LanguageIcon fontSize='small' />
        <Typography variant='body2'>
          {spokenLanguages}
        </Typography>
      </Box>
    </>
  )
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit cbbb604
created_at: 2025-05-08T14:01:10Z
author_association: NONE
diff_hunk: @@ -0,0 +1,33 @@
+import { Box, Typography } from '@mui/material'
+import LanguageIcon from '@mui/icons-material/Language'
+import { styles } from './OfferCardRectagle.styles'
+
+const CourseDetails = () => {
+  return (
+    <>
+      <Typography gutterBottom sx={styles.subheadings} variant='h6'>
+        Advanced Quantum Mechanics: Theoretical Concepts, Mathematical
+        Formulations in Modern Physics
+      </Typography>
+      <Box sx={styles.subheadings}>
+        <Typography sx={styles.subheadingsLanguage} variant='body2'>
+          German
+        </Typography>
+        <Typography sx={styles.subheadingsLevel} variant='body2'>
+          Beginner - Advanced
+        </Typography>
+      </Box>
+      <Typography mb={2} sx={styles.description} variant='body2'>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse,
+        consectetur ex totam libero cum odit et, ullam corrupti corrupti
+        corrupti doloribus optio esse reiciendis iusto fugit.
+      </Typography>
+      <Box sx={styles.languages}>
+        <LanguageIcon fontSize='small' />
+        <Typography variant='body2'>Ukrainian, English</Typography>
+      </Box>
+    </>
+  )
+}
+
+export default CourseDetails
path: src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add PropTypes validation for component props.**

To improve code quality and catch potential issues early, add PropTypes validation for the component's props.

```diff
 import { Box, Typography } from '@mui/material'
 import LanguageIcon from '@mui/icons-material/Language'
 import { styles } from './OfferCardRectagle.styles'
+import PropTypes from 'prop-types'

-const CourseDetails = () => {
+const CourseDetails = ({ title, language, level, description, spokenLanguages }) => {
   // Component body remains the same

 }

+CourseDetails.propTypes = {
+  title: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired,
+  level: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  spokenLanguages: PropTypes.string.isRequired
+}
+
+CourseDetails.defaultProps = {
+  title: 'Advanced Quantum Mechanics: Theoretical Concepts, Mathematical Formulations in Modern Physics',
+  language: 'German',
+  level: 'Beginner - Advanced',
+  description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, consectetur ex totam libero cum odit et, ullam doloribus optio esse reiciendis iusto fugit.',
+  spokenLanguages: 'Ukrainian, English'
+}

 export default CourseDetails
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import { Box, Typography } from '@mui/material'
import LanguageIcon from '@mui/icons-material/Language'
import { styles } from './OfferCardRectagle.styles'
import PropTypes from 'prop-types'

const CourseDetails = ({ title, language, level, description, spokenLanguages }) => {
  // Component body remains the same

  return (
    <>
      {/* existing JSX */}
    </>
  )
}

CourseDetails.propTypes = {
  title: PropTypes.string.isRequired,
  language: PropTypes.string.isRequired,
  level: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  spokenLanguages: PropTypes.string.isRequired
}

CourseDetails.defaultProps = {
  title: 'Advanced Quantum Mechanics: Theoretical Concepts, Mathematical Formulations in Modern Physics',
  language: 'German',
  level: 'Beginner - Advanced',
  description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, consectetur ex totam libero cum odit et, ullam doloribus optio esse reiciendis iusto fugit.',
  spokenLanguages: 'Ukrainian, English'
}

export default CourseDetails
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T14:01:10Z
author_association: NONE
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from './OfferCardRectagle.styles'
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix typo in style import path.**

There's a typo in the styles import - `OfferCardRectagle.styles` should be `OfferCardRectangle.styles`.

```diff
-import { styles } from './OfferCardRectagle.styles'
+import { styles } from './OfferCardRectangle.styles'
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import { Box, Typography, IconButton, Button } from '@mui/material'
import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
import { styles } from './OfferCardRectangle.styles'
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T14:01:10Z
author_association: NONE
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from './OfferCardRectagle.styles'
+
+const PriceSection = ({ onOpenMessage }) => {
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            75 UAH
+          </Typography>
+          <Typography color='primary.600' variant='caption'>
+            /HOUR
+          </Typography>
+        </Box>
+        <IconButton color='primary.800'>
+          <BookmarkBorderIcon />
+        </IconButton>
+      </Box>
+      <Box sx={styles.buttons}>
+        <Button variant='contained'>Show details</Button>
+        <Button
+          onClick={onOpenMessage}
+          sx={styles.buttonSendMessage}
+          variant='contained'
+        >
+          Send message
+        </Button>
+      </Box>
+    </>
+  )
+}
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Component should accept data via props instead of using hardcoded values.**

The current implementation uses hardcoded values for price and currency. Additionally, the "Show details" and bookmark buttons don't have handlers.

```diff
-const PriceSection = ({ onOpenMessage }) => {
+const PriceSection = ({ 
+  price, 
+  currency, 
+  onOpenMessage, 
+  onShowDetails, 
+  onBookmark 
+}) => {
   return (
     <>
       <Box sx={styles.topRight}>
         <Box>
           <Typography color='primary.800' fontWeight='400' variant='h6'>
-            75 UAH
+            {price} {currency}
           </Typography>
           <Typography color='primary.600' variant='caption'>
             /HOUR
           </Typography>
         </Box>
-        <IconButton color='primary.800'>
+        <IconButton color='primary.800' onClick={onBookmark}>
           <BookmarkBorderIcon />
         </IconButton>
       </Box>
       <Box sx={styles.buttons}>
-        <Button variant='contained'>Show details</Button>
+        <Button variant='contained' onClick={onShowDetails}>Show details</Button>
         <Button
           onClick={onOpenMessage}
           sx={styles.buttonSendMessage}
           variant='contained'
         >
           Send message
         </Button>
       </Box>
     </>
   )
 }
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const PriceSection = ({
  price,
  currency,
  onOpenMessage,
  onShowDetails,
  onBookmark
}) => {
  return (
    <>
      <Box sx={styles.topRight}>
        <Box>
          <Typography color='primary.800' fontWeight='400' variant='h6'>
            {price} {currency}
          </Typography>
          <Typography color='primary.600' variant='caption'>
            /HOUR
          </Typography>
        </Box>
        <IconButton color='primary.800' onClick={onBookmark}>
          <BookmarkBorderIcon />
        </IconButton>
      </Box>
      <Box sx={styles.buttons}>
        <Button variant='contained' onClick={onShowDetails}>
          Show details
        </Button>
        <Button
          onClick={onOpenMessage}
          sx={styles.buttonSendMessage}
          variant='contained'
        >
          Send message
        </Button>
      </Box>
    </>
  )
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T14:01:10Z
author_association: NONE
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from './OfferCardRectagle.styles'
+
+const PriceSection = ({ onOpenMessage }) => {
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            75 UAH
+          </Typography>
+          <Typography color='primary.600' variant='caption'>
+            /HOUR
+          </Typography>
+        </Box>
+        <IconButton color='primary.800'>
+          <BookmarkBorderIcon />
+        </IconButton>
+      </Box>
+      <Box sx={styles.buttons}>
+        <Button variant='contained'>Show details</Button>
+        <Button
+          onClick={onOpenMessage}
+          sx={styles.buttonSendMessage}
+          variant='contained'
+        >
+          Send message
+        </Button>
+      </Box>
+    </>
+  )
+}
+
+export default PriceSection
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add PropTypes validation for component props.**

To improve code quality and catch potential issues early, add PropTypes validation for the component's props.

```diff
 import { Box, Typography, IconButton, Button } from '@mui/material'
 import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
 import { styles } from './OfferCardRectagle.styles'
+import PropTypes from 'prop-types'

 // Component definition

+PriceSection.propTypes = {
+  price: PropTypes.number.isRequired,
+  currency: PropTypes.string.isRequired,
+  onOpenMessage: PropTypes.func.isRequired,
+  onShowDetails: PropTypes.func.isRequired,
+  onBookmark: PropTypes.func.isRequired
+}
+
+PriceSection.defaultProps = {
+  price: 75,
+  currency: 'UAH',
+  onShowDetails: () => console.log('Show details clicked'),
+  onBookmark: () => console.log('Bookmark clicked')
+}

 export default PriceSection
```

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T14:01:11Z
author_association: NONE
diff_hunk: @@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Card, CardContent, Grid } from '@mui/material'
+import UserProfile from '~/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile'
+import CourseDetails from '~/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails'
+import PriceSection from '~/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection'
+import SendMessageModal from '~/components/send-message-modal/SendMessageModal'
+import { styles } from './OfferCardRectagle.styles'
path: src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix typo in style import path.**

There's a typo in the styles import - `OfferCardRectagle.styles` should be `OfferCardRectangle.styles`.

```diff
-import { styles } from './OfferCardRectagle.styles'
+import { styles } from './OfferCardRectangle.styles'
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import { styles } from './OfferCardRectangle.styles'
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T14:01:11Z
author_association: NONE
diff_hunk: @@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Card, CardContent, Grid } from '@mui/material'
+import UserProfile from '~/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile'
+import CourseDetails from '~/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails'
+import PriceSection from '~/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection'
+import SendMessageModal from '~/components/send-message-modal/SendMessageModal'
+import { styles } from './OfferCardRectagle.styles'
+
+const OfferCardRectangle = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleOpenMessage = () => setIsModalOpen(true)
+  const handleCloseMessage = () => setIsModalOpen(false)
+  const handleSendMessage = () => {
+    console.log('Message sent!')
+  }
+
+  return (
+    <>
+      <Card sx={styles.card}>
+        <CardContent>
+          <Grid alignItems='flex-start' container spacing={2}>
+            <Grid item xs={2}>
+              <UserProfile />
+            </Grid>
+            <Grid item xs={7}>
+              <CourseDetails />
+            </Grid>
+            <Grid item xs={3}>
+              <PriceSection onOpenMessage={handleOpenMessage} />
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+
+      <SendMessageModal
+        onClose={handleCloseMessage}
+        onSend={handleSendMessage}
+        open={isModalOpen}
+      />
path: src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add message state management and update modal props.**

The message modal should be properly connected to state and provide a way to update the message content.

```diff
       <SendMessageModal
         onClose={handleCloseMessage}
-        onSend={handleSendMessage}
+        onSend={() => {
+          handleSendMessage();
+          setMessage('');
+        }}
         open={isModalOpen}
+        message={message}
+        onMessageChange={(e) => setMessage(e.target.value)}
+        recipientName={offerData.author.name}
       />
```


> Committable suggestion skipped: line range outside the PR's diff.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T14:01:11Z
author_association: NONE
diff_hunk: @@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Card, CardContent, Grid } from '@mui/material'
+import UserProfile from '~/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile'
+import CourseDetails from '~/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails'
+import PriceSection from '~/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection'
+import SendMessageModal from '~/components/send-message-modal/SendMessageModal'
+import { styles } from './OfferCardRectagle.styles'
+
+const OfferCardRectangle = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleOpenMessage = () => setIsModalOpen(true)
+  const handleCloseMessage = () => setIsModalOpen(false)
+  const handleSendMessage = () => {
+    console.log('Message sent!')
+  }
+
path: src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Implement proper data handling and placeholder event handlers.**

The component should receive offer data via props and pass it to child components. Also, the message sending functionality should be implemented properly.

```diff
-const OfferCardRectangle = () => {
+const OfferCardRectangle = ({ offerData }) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [message, setMessage] = useState('')

   const handleOpenMessage = () => setIsModalOpen(true)
   const handleCloseMessage = () => setIsModalOpen(false)
   const handleSendMessage = () => {
     console.log('Message sent!')
+    // TODO: Implement actual message sending functionality
+    // Example: sendMessageToApi(offerData.authorId, message)
   }
+  
+  const handleShowDetails = () => {
+    console.log('Show details clicked for:', offerData.id)
+    // TODO: Implement navigation to details page
+  }
+  
+  const handleBookmark = () => {
+    console.log('Bookmark clicked for:', offerData.id)
+    // TODO: Implement bookmarking functionality
+  }
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const OfferCardRectangle = ({ offerData }) => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [message, setMessage] = useState('')

  const handleOpenMessage = () => setIsModalOpen(true)
  const handleCloseMessage = () => setIsModalOpen(false)
  const handleSendMessage = () => {
    console.log('Message sent!')
    // TODO: Implement actual message sending functionality
    // Example: sendMessageToApi(offerData.authorId, message)
  }

  const handleShowDetails = () => {
    console.log('Show details clicked for:', offerData.id)
    // TODO: Implement navigation to details page
  }

  const handleBookmark = () => {
    console.log('Bookmark clicked for:', offerData.id)
    // TODO: Implement bookmarking functionality
  }
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T14:01:11Z
author_association: NONE
diff_hunk: @@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Card, CardContent, Grid } from '@mui/material'
+import UserProfile from '~/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile'
+import CourseDetails from '~/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails'
+import PriceSection from '~/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection'
+import SendMessageModal from '~/components/send-message-modal/SendMessageModal'
+import { styles } from './OfferCardRectagle.styles'
+
+const OfferCardRectangle = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleOpenMessage = () => setIsModalOpen(true)
+  const handleCloseMessage = () => setIsModalOpen(false)
+  const handleSendMessage = () => {
+    console.log('Message sent!')
+  }
+
+  return (
+    <>
+      <Card sx={styles.card}>
+        <CardContent>
+          <Grid alignItems='flex-start' container spacing={2}>
+            <Grid item xs={2}>
+              <UserProfile />
+            </Grid>
+            <Grid item xs={7}>
+              <CourseDetails />
+            </Grid>
+            <Grid item xs={3}>
+              <PriceSection onOpenMessage={handleOpenMessage} />
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+
+      <SendMessageModal
+        onClose={handleCloseMessage}
+        onSend={handleSendMessage}
+        open={isModalOpen}
+      />
+    </>
+  )
+}
+
+export default OfferCardRectangle
path: src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add PropTypes validation for component props.**

To improve code quality and catch potential issues early, add PropTypes validation for the component's props.

```diff
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { Card, CardContent, Grid } from '@mui/material'
 // Other imports...

 // Component definition

+OfferCardRectangle.propTypes = {
+  offerData: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    language: PropTypes.string.isRequired,
+    level: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    currency: PropTypes.string.isRequired,
+    author: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      avatar: PropTypes.string,
+      rating: PropTypes.number.isRequired,
+      reviewCount: PropTypes.number.isRequired,
+      spokenLanguages: PropTypes.string.isRequired
+    }).isRequired
+  }).isRequired
+}
+
+OfferCardRectangle.defaultProps = {
+  offerData: {
+    id: '1',
+    title: 'Advanced Quantum Mechanics: Theoretical Concepts, Mathematical Formulations in Modern Physics',
+    language: 'German',
+    level: 'Beginner - Advanced',
+    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit...',
+    price: 75,
+    currency: 'UAH',
+    author: {
+      id: '1',
+      name: 'Jennifer W.',
+      avatar: '/src/assets/img/tutor-profile-page/avatar.png',
+      rating: 5,
+      reviewCount: 10,
+      spokenLanguages: 'Ukrainian, English'
+    }
+  }
+}

 export default OfferCardRectangle
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import PropTypes from 'prop-types'
import React, { useState } from 'react'
import { Card, CardContent, Grid } from '@mui/material'
// Other imports...

// Component definition

OfferCardRectangle.propTypes = {
  offerData: PropTypes.shape({
    id: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    language: PropTypes.string.isRequired,
    level: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    currency: PropTypes.string.isRequired,
    author: PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      avatar: PropTypes.string,
      rating: PropTypes.number.isRequired,
      reviewCount: PropTypes.number.isRequired,
      spokenLanguages: PropTypes.string.isRequired
    }).isRequired
  }).isRequired
}

OfferCardRectangle.defaultProps = {
  offerData: {
    id: '1',
    title: 'Advanced Quantum Mechanics: Theoretical Concepts, Mathematical Formulations in Modern Physics',
    language: 'German',
    level: 'Beginner - Advanced',
    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit...',
    price: 75,
    currency: 'UAH',
    author: {
      id: '1',
      name: 'Jennifer W.',
      avatar: '/src/assets/img/tutor-profile-page/avatar.png',
      rating: 5,
      reviewCount: 10,
      spokenLanguages: 'Ukrainian, English'
    }
  }
}

export default OfferCardRectangle
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T14:01:11Z
author_association: NONE
diff_hunk: @@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Card, CardContent, Grid } from '@mui/material'
+import UserProfile from '~/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile'
+import CourseDetails from '~/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails'
+import PriceSection from '~/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection'
+import SendMessageModal from '~/components/send-message-modal/SendMessageModal'
+import { styles } from './OfferCardRectagle.styles'
+
+const OfferCardRectangle = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleOpenMessage = () => setIsModalOpen(true)
+  const handleCloseMessage = () => setIsModalOpen(false)
+  const handleSendMessage = () => {
+    console.log('Message sent!')
+  }
+
+  return (
+    <>
+      <Card sx={styles.card}>
+        <CardContent>
+          <Grid alignItems='flex-start' container spacing={2}>
+            <Grid item xs={2}>
+              <UserProfile />
+            </Grid>
+            <Grid item xs={7}>
+              <CourseDetails />
+            </Grid>
+            <Grid item xs={3}>
+              <PriceSection onOpenMessage={handleOpenMessage} />
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
path: src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Pass appropriate props to child components.**

Child components should receive data from props instead of using hardcoded values. This will make the components reusable and testable.

```diff
   return (
     <>
       <Card sx={styles.card}>
         <CardContent>
           <Grid alignItems='flex-start' container spacing={2}>
             <Grid item xs={2}>
-              <UserProfile />
+              <UserProfile 
+                name={offerData.author.name}
+                avatar={offerData.author.avatar}
+                rating={offerData.author.rating}
+                reviewCount={offerData.author.reviewCount} 
+              />
             </Grid>
             <Grid item xs={7}>
-              <CourseDetails />
+              <CourseDetails
+                title={offerData.title}
+                language={offerData.language}
+                level={offerData.level}
+                description={offerData.description}
+                spokenLanguages={offerData.author.spokenLanguages}
+              />
             </Grid>
             <Grid item xs={3}>
-              <PriceSection onOpenMessage={handleOpenMessage} />
+              <PriceSection
+                price={offerData.price}
+                currency={offerData.currency}
+                onOpenMessage={handleOpenMessage}
+                onShowDetails={handleShowDetails}
+                onBookmark={handleBookmark}
+              />
             </Grid>
           </Grid>
         </CardContent>
       </Card>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    <>
      <Card sx={styles.card}>
        <CardContent>
          <Grid alignItems='flex-start' container spacing={2}>
            <Grid item xs={2}>
              <UserProfile 
                name={offerData.author.name}
                avatar={offerData.author.avatar}
                rating={offerData.author.rating}
                reviewCount={offerData.author.reviewCount} 
              />
            </Grid>
            <Grid item xs={7}>
              <CourseDetails
                title={offerData.title}
                language={offerData.language}
                level={offerData.level}
                description={offerData.description}
                spokenLanguages={offerData.author.spokenLanguages}
              />
            </Grid>
            <Grid item xs={3}>
              <PriceSection
                price={offerData.price}
                currency={offerData.currency}
                onOpenMessage={handleOpenMessage}
                onShowDetails={handleShowDetails}
                onBookmark={handleBookmark}
              />
            </Grid>
          </Grid>
        </CardContent>
      </Card>
    </>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T14:01:11Z
author_association: NONE
diff_hunk: @@ -0,0 +1,96 @@
+import { lightGreen } from '@mui/material/colors'
+
+export const styles = {
+  card: {
+    padding: '2px',
+    borderRadius: 3,
+    boxShadow: 3,
+    maxWidth: '900px',
+    margin: 'auto',
+    marginBottom: '50px'
+  },
+  leftColumn: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 1
+  },
+  avatar: {
+    width: 94,
+    height: 94,
+    border: '2px solid',
+    color: 'primary.600',
+    borderRadius: '50%'
+  },
+  ratingCaption: {
+    color: 'primary.400',
+    fontWeight: '400',
+    textAlign: 'left'
+  },
+  rating: {
+    backgroundColor: 'primary.50',
+    borderRadius: '3px',
+    padding: '2px 3px',
+    color: 'primary.600'
+  },
+  headings: {
+    fontWeight: '500',
+    color: 'primary.500'
+  },
+  subheadings: {
+    display: 'flex',
+    gap: 1,
+    marginBottom: 1,
+    color: 'primary.700'
+  },
+  subheadingsLanguage: {
+    backgroundColor: lightGreen[300],
+    borderRadius: '10px',
+    textTransform: 'uppercase',
+    padding: '5px 15px',
+    fontSize: '12px',
+    letterSpacing: '1px',
+    fontWeight: '600',
+    color: 'primary.600'
+  },
+  subheadingsLevel: {
+    backgroundColor: lightGreen[100],
+    borderRadius: '10px',
+    textTransform: 'uppercase',
+    padding: '5px 15px',
+    fontSize: '12px',
+    letterSpacing: '1px',
+    fontWeight: '500',
+    color: 'primary.500'
+  },
+  description: {
+    color: 'primary.500',
+    fontWeight: '400'
+  },
+  languages: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 1,
+    marginTop: 1,
+    color: 'primary.300'
+  },
+  topRight: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start'
+  },
+  buttons: {
+    marginTop: 3,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1
+  },
+  buttonSendMessage: {
+    backgroundColor: 'primary.50',
+    color: 'primary.800',
+    fontWeight: '600',
+    '&:hover': {
+      backgroundColor: 'primary.100'
+    }
+  }
+}
path: src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js
user: login: olena-kuziaieva
body: Fixed the typo.
created_at: 2025-05-08T14:12:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,96 @@
+import { lightGreen } from '@mui/material/colors'
+
+export const styles = {
+  card: {
+    padding: '2px',
+    borderRadius: 3,
+    boxShadow: 3,
+    maxWidth: '900px',
+    margin: 'auto',
+    marginBottom: '50px'
+  },
+  leftColumn: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 1
+  },
+  avatar: {
+    width: 94,
+    height: 94,
+    border: '2px solid',
+    color: 'primary.600',
+    borderRadius: '50%'
+  },
+  ratingCaption: {
+    color: 'primary.400',
+    fontWeight: '400',
+    textAlign: 'left'
+  },
+  rating: {
+    backgroundColor: 'primary.50',
+    borderRadius: '3px',
+    padding: '2px 3px',
+    color: 'primary.600'
+  },
+  headings: {
+    fontWeight: '500',
+    color: 'primary.500'
+  },
+  subheadings: {
+    display: 'flex',
+    gap: 1,
+    marginBottom: 1,
+    color: 'primary.700'
+  },
+  subheadingsLanguage: {
+    backgroundColor: lightGreen[300],
+    borderRadius: '10px',
+    textTransform: 'uppercase',
+    padding: '5px 15px',
+    fontSize: '12px',
+    letterSpacing: '1px',
+    fontWeight: '600',
+    color: 'primary.600'
+  },
+  subheadingsLevel: {
+    backgroundColor: lightGreen[100],
+    borderRadius: '10px',
+    textTransform: 'uppercase',
+    padding: '5px 15px',
+    fontSize: '12px',
+    letterSpacing: '1px',
+    fontWeight: '500',
+    color: 'primary.500'
+  },
+  description: {
+    color: 'primary.500',
+    fontWeight: '400'
+  },
+  languages: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 1,
+    marginTop: 1,
+    color: 'primary.300'
+  },
+  topRight: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start'
+  },
+  buttons: {
+    marginTop: 3,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1
+  },
+  buttonSendMessage: {
+    backgroundColor: 'primary.50',
+    color: 'primary.800',
+    fontWeight: '600',
+    '&:hover': {
+      backgroundColor: 'primary.100'
+    }
+  }
+}
path: src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js
user: login: coderabbitai[bot]
body: @olena-kuziaieva Great! Thanks for fixing the typo so quickly. This will help maintain consistency in your codebase.



🐰✨

---

<!-- This is an auto-generated comment: tweet message by coderabbit.ai -->

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Catch%20typos%20early%20to%20avoid%20confusion%20and%20maintenance%20headaches!%20%F0%9F%90%87%20%40coderabbitai%20spotted%20a%20filename%20typo%20that%20could%20break%20imports%E2%80%94renaming%20keeps%20your%20code%20clean%20and%20reliable.%20Try%20it%20now!%20%F0%9F%94%A7&url=https%3A%2F%2Fgithub.com%2FSpace2Study-UA-1355-02%2FClient-02%2Fpull%2F42%23discussion_r2079784459)?

Thank you for using CodeRabbit!

<!-- end of auto-generated comment: tweet message by coderabbit.ai -->




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@olena-kuziaieva Great! Thanks for fixing the typo so quickly. This will help maintain consistency in your codebase.



🐰✨

---

&lt;!-- This is an auto-generated comment: tweet message by coderabbit.ai --&gt;

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Catch%20typos%20early%20to%20avoid%20confusion%20and%20maintenance%20headaches!%20%F0%9F%90%87%20%40coderabbitai%20spotted%20a%20filename%20typo%20that%20could%20break%20imports%E2%80%94renaming%20keeps%20your%20code%20clean%20and%20reliable.%20Try%20it%20now!%20%F0%9F%94%A7&url=https%3A%2F%2Fgithub.com%2FSpace2Study-UA-1355-02%2FClient-02%2Fpull%2F42%23discussion_r2079784459)?

Thank you for using CodeRabbit!

&lt;!-- end of auto-generated comment: tweet message by coderabbit.ai --&gt;

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-08T14:14:41Z
author_association: NONE
diff_hunk: @@ -0,0 +1,25 @@
+import { Box, Typography, Avatar, Rating } from '@mui/material'
+import { styles } from './OfferCardRectagle.styles'
+
+const UserProfile = () => {
+  return (
+    <Box sx={styles.leftColumn}>
+      <Avatar
+        src='/src/assets/img/tutor-profile-page/avatar.png'
path: src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
user: login: olena-kuziaieva
body: Fixed it.
created_at: 2025-05-08T14:14:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,25 @@
+import { Box, Typography, Avatar, Rating } from '@mui/material'
+import { styles } from './OfferCardRectagle.styles'
+
+const UserProfile = () => {
+  return (
+    <Box sx={styles.leftColumn}>
+      <Avatar
+        src='/src/assets/img/tutor-profile-page/avatar.png'
path: src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
user: login: coderabbitai[bot]
body: <details>
<summary>🧩 Analysis chain</summary>

The file content:
```jsx
import { Box, Typography, Avatar, Rating } from '@mui/material'
import { styles } from './OfferCardRectagle.styles'
import avatarImage from '../../../../assets/img/tutor-profile-page/avatar.png'

const UserProfile = () => {
  return (
    <Box sx={styles.leftColumn}>
      <Avatar
        src={avatarImage}
        sx={styles.avatar}
      />
      <Typography color='primary.500' fontWeight='500' variant='subtitle1'>
        Jennifer W.
      </Typography>
      <Box alignItems='center' display='flex' gap={1} sx={styles.rating}>
        <Rating name='read-only' readOnly size='small' value={5} />
        <Typography variant='body2'>5</Typography>
      </Box>
      <Typography sx={styles.ratingCaption} variant='caption'>
        10 reviews
      </Typography>
    </Box>
  )
}

export default UserProfile
```

@olena-kuziaieva Great! I can see you've implemented the fix by importing the avatar image at the top of the file and then using the imported variable in the Avatar component. This is the recommended approach for handling assets in React applications. Well done!



---

🏁 Script executed:
```
#!/bin/bash
# Let's check the current content of the UserProfile.jsx file to see how the fix was implemented
cat src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
```

Length of output: 854

---



</details>

@olena-kuziaieva I checked the current code, but it appears the fix hasn't been implemented yet. The image path still uses the hardcoded reference `/src/assets/img/tutor-profile-page/avatar.png` which may cause issues during production builds.

To fix this, you could:

1. Import the image at the top of the file:
```javascript
import avatarImage from '../../../../assets/img/tutor-profile-page/avatar.png';

// Then use it in the component:
<Avatar src={avatarImage} sx={styles.avatar} />
```

2. Or use the PUBLIC_URL approach:
```javascript
<Avatar src={`${process.env.PUBLIC_URL}/assets/img/tutor-profile-page/avatar.png`} sx={styles.avatar} />
```

Let me know if you need any clarification or assistance with implementing this fix!

---

<details>
<summary>🧬 Code Graph Analysis Results</summary>

### Relevant snippet from `src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js` (lines 3-96):

```js
export const styles = {
  card: {
    padding: '2px',
    borderRadius: 3,
    boxShadow: 3,
    maxWidth: '900px',
    margin: 'auto',
    marginBottom: '50px'
  },
  leftColumn: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: 1
  },
  avatar: {
    width: 94,
    height: 94,
    border: '2px solid',
    color: 'primary.600',
    borderRadius: '50%'
  },
  ratingCaption: {
    color: 'primary.400',
    fontWeight: '400',
    textAlign: 'left'
  },
  rating: {
    backgroundColor: 'primary.50',
    borderRadius: '3px',
    padding: '2px 3px',
    color: 'primary.600'
  },
  headings: {
    fontWeight: '500',
    color: 'primary.500'
  },
  subheadings: {
    display: 'flex',
    gap: 1,
    marginBottom: 1,
    color: 'primary.700'
  },
  subheadingsLanguage: {
    backgroundColor: lightGreen[300],
    borderRadius: '10px',
    textTransform: 'uppercase',
    padding: '5px 15px',
    fontSize: '12px',
    letterSpacing: '1px',
    fontWeight: '600',
    color: 'primary.600'
  },
  subheadingsLevel: {
    backgroundColor: lightGreen[100],
    borderRadius: '10px',
    textTransform: 'uppercase',
    padding: '5px 15px',
    fontSize: '12px',
    letterSpacing: '1px',
    fontWeight: '500',
    color: 'primary.500'
  },
  description: {
    color: 'primary.500',
    fontWeight: '400'
  },
  languages: {
    display: 'flex',
    alignItems: 'center',
    gap: 1,
    marginTop: 1,
    color: 'primary.300'
  },
  topRight: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  buttons: {
    marginTop: 3,
    display: 'flex',
    flexDirection: 'column',
    gap: 1
  },
  buttonSendMessage: {
    backgroundColor: 'primary.50',
    color: 'primary.800',
    fontWeight: '600',
    '&:hover': {
      backgroundColor: 'primary.100'
    }
  }
}
```

This snippet defines the `styles` object used in `UserProfile.jsx` for styling components such as `leftColumn`, `avatar`, `rating`, and `ratingCaption`. These styles are applied via the `sx` prop in the `UserProfile` component.

</details>

---

<!-- This is an auto-generated comment: tweet message by coderabbit.ai -->

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Avoid%20hardcoding%20image%20paths%20to%20prevent%20production%20build%20issues!%20Use%20asset%20imports%20or%20public%20URLs%20for%20reliable%20image%20loading.%20Boost%20your%20code%20quality%20with%20%40coderabbitai%20%F0%9F%90%87%F0%9F%9B%A0%EF%B8%8F%20Try%20it%20now!&url=https%3A%2F%2Fgithub.com%2FSpace2Study-UA-1355-02%2FClient-02%2Fpull%2F42%23discussion_r2079784468)?

Thank you for using CodeRabbit!

<!-- end of auto-generated comment: tweet message by coderabbit.ai -->




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer><details>
<summary>🧩 Analysis chain</summary>

The file content:
```jsx
import { Box, Typography, Avatar, Rating } from '@mui/material'
import { styles } from './OfferCardRectagle.styles'
import avatarImage from '../../../../assets/img/tutor-profile-page/avatar.png'

const UserProfile = () => {
  return (
    <Box sx={styles.leftColumn}>
      <Avatar
        src={avatarImage}
        sx={styles.avatar}
      />
      <Typography color='primary.500' fontWeight='500' variant='subtitle1'>
        Jennifer W.
      </Typography>
      <Box alignItems='center' display='flex' gap={1} sx={styles.rating}>
        <Rating name='read-only' readOnly size='small' value={5} />
        <Typography variant='body2'>5</Typography>
      </Box>
      <Typography sx={styles.ratingCaption} variant='caption'>
        10 reviews
      </Typography>
    </Box>
  )
}

export default UserProfile
```

@olena-kuziaieva Great! I can see you've implemented the fix by importing the avatar image at the top of the file and then using the imported variable in the Avatar component. This is the recommended approach for handling assets in React applications. Well done!



---

🏁 Script executed:
```
#!/bin/bash
# Let's check the current content of the UserProfile.jsx file to see how the fix was implemented
cat src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
```

Length of output: 854

---



</details>

@olena-kuziaieva I checked the current code, but it appears the fix hasn't been implemented yet. The image path still uses the hardcoded reference `/src/assets/img/tutor-profile-page/avatar.png` which may cause issues during production builds.

To fix this, you could:

1. Import the image at the top of the file:
```javascript
import avatarImage from '../../../../assets/img/tutor-profile-page/avatar.png';

// Then use it in the component:
<Avatar src={avatarImage} sx={styles.avatar} />
```

2. Or use the PUBLIC_URL approach:
```javascript
<Avatar src={`${process.env.PUBLIC_URL}/assets/img/tutor-profile-page/avatar.png`} sx={styles.avatar} />
```

Let me know if you need any clarification or assistance with implementing this fix!

---

<details>
<summary>🧬 Code Graph Analysis Results</summary>

### Relevant snippet from `src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectagle.styles.js` (lines 3-96):

```js
export const styles = {
  card: {
    padding: '2px',
    borderRadius: 3,
    boxShadow: 3,
    maxWidth: '900px',
    margin: 'auto',
    marginBottom: '50px'
  },
  leftColumn: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: 1
  },
  avatar: {
    width: 94,
    height: 94,
    border: '2px solid',
    color: 'primary.600',
    borderRadius: '50%'
  },
  ratingCaption: {
    color: 'primary.400',
    fontWeight: '400',
    textAlign: 'left'
  },
  rating: {
    backgroundColor: 'primary.50',
    borderRadius: '3px',
    padding: '2px 3px',
    color: 'primary.600'
  },
  headings: {
    fontWeight: '500',
    color: 'primary.500'
  },
  subheadings: {
    display: 'flex',
    gap: 1,
    marginBottom: 1,
    color: 'primary.700'
  },
  subheadingsLanguage: {
    backgroundColor: lightGreen[300],
    borderRadius: '10px',
    textTransform: 'uppercase',
    padding: '5px 15px',
    fontSize: '12px',
    letterSpacing: '1px',
    fontWeight: '600',
    color: 'primary.600'
  },
  subheadingsLevel: {
    backgroundColor: lightGreen[100],
    borderRadius: '10px',
    textTransform: 'uppercase',
    padding: '5px 15px',
    fontSize: '12px',
    letterSpacing: '1px',
    fontWeight: '500',
    color: 'primary.500'
  },
  description: {
    color: 'primary.500',
    fontWeight: '400'
  },
  languages: {
    display: 'flex',
    alignItems: 'center',
    gap: 1,
    marginTop: 1,
    color: 'primary.300'
  },
  topRight: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  buttons: {
    marginTop: 3,
    display: 'flex',
    flexDirection: 'column',
    gap: 1
  },
  buttonSendMessage: {
    backgroundColor: 'primary.50',
    color: 'primary.800',
    fontWeight: '600',
    '&:hover': {
      backgroundColor: 'primary.100'
    }
  }
}
```

This snippet defines the `styles` object used in `UserProfile.jsx` for styling components such as `leftColumn`, `avatar`, `rating`, and `ratingCaption`. These styles are applied via the `sx` prop in the `UserProfile` component.

</details>

---

&lt;!-- This is an auto-generated comment: tweet message by coderabbit.ai --&gt;

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Avoid%20hardcoding%20image%20paths%20to%20prevent%20production%20build%20issues!%20Use%20asset%20imports%20or%20public%20URLs%20for%20reliable%20image%20loading.%20Boost%20your%20code%20quality%20with%20%40coderabbitai%20%F0%9F%90%87%F0%9F%9B%A0%EF%B8%8F%20Try%20it%20now!&url=https%3A%2F%2Fgithub.com%2FSpace2Study-UA-1355-02%2FClient-02%2Fpull%2F42%23discussion_r2079784468)?

Thank you for using CodeRabbit!

&lt;!-- end of auto-generated comment: tweet message by coderabbit.ai --&gt;

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-08T14:15:58Z
author_association: NONE
diff_hunk: @@ -0,0 +1,42 @@
+import React from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Button
+} from '@mui/material'
+
+const SendMessageModal = ({ open, onClose, onSend }) => {
+  return (
+    <Dialog fullWidth maxWidth='sm' onClose={onClose} open={open}>
+      <DialogTitle>Write a message</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          fullWidth
+          label='Your message'
+          margin='dense'
+          multiline
+          rows={4}
+          type='text'
+          variant='outlined'
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button
+          onClick={() => {
+            onSend()
+            onClose()
+          }}
+        >
+          Send
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
path: src/components/send-message-modal/SendMessageModal.jsx
user: login: olena-kuziaieva
body: fixed it
created_at: 2025-05-08T14:24:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,42 @@
+import React from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Button
+} from '@mui/material'
+
+const SendMessageModal = ({ open, onClose, onSend }) => {
+  return (
+    <Dialog fullWidth maxWidth='sm' onClose={onClose} open={open}>
+      <DialogTitle>Write a message</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          fullWidth
+          label='Your message'
+          margin='dense'
+          multiline
+          rows={4}
+          type='text'
+          variant='outlined'
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button
+          onClick={() => {
+            onSend()
+            onClose()
+          }}
+        >
+          Send
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
path: src/components/send-message-modal/SendMessageModal.jsx
user: login: coderabbitai[bot]
body: @olena-kuziaieva Great! Thank you for fixing the issue with capturing and passing the message text. This improvement ensures your SendMessageModal component will work as expected when users try to send messages. Let me know if you need any help with anything else!

---

<!-- This is an auto-generated comment: tweet message by coderabbit.ai -->

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=%40coderabbitai%20spotted%20a%20critical%20bug%3A%20TextField%20input%20wasn't%20captured%20or%20sent!%20Adding%20state%20and%20handlers%20ensures%20messages%20are%20sent%20correctly%20and%20UI%20resets%20smoothly.%20Try%20%40coderabbitai%20for%20flawless%20code%20reviews!%20%F0%9F%90%87%E2%9C%A8&url=https%3A%2F%2Fgithub.com%2FSpace2Study-UA-1355-02%2FClient-02%2Fpull%2F42%23discussion_r2079784462)?

Thank you for using CodeRabbit!

<!-- end of auto-generated comment: tweet message by coderabbit.ai -->




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@olena-kuziaieva Great! Thank you for fixing the issue with capturing and passing the message text. This improvement ensures your SendMessageModal component will work as expected when users try to send messages. Let me know if you need any help with anything else!

---

&lt;!-- This is an auto-generated comment: tweet message by coderabbit.ai --&gt;

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=%40coderabbitai%20spotted%20a%20critical%20bug%3A%20TextField%20input%20wasn't%20captured%20or%20sent!%20Adding%20state%20and%20handlers%20ensures%20messages%20are%20sent%20correctly%20and%20UI%20resets%20smoothly.%20Try%20%40coderabbitai%20for%20flawless%20code%20reviews!%20%F0%9F%90%87%E2%9C%A8&url=https%3A%2F%2Fgithub.com%2FSpace2Study-UA-1355-02%2FClient-02%2Fpull%2F42%23discussion_r2079784462)?

Thank you for using CodeRabbit!

&lt;!-- end of auto-generated comment: tweet message by coderabbit.ai --&gt;

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-08T14:25:29Z
author_association: NONE
diff_hunk: @@ -0,0 +1,25 @@
+import { Box, Typography, Avatar, Rating } from '@mui/material'
+import { styles } from './OfferCardRectagle.styles'
path: src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
user: login: olena-kuziaieva
body: Fixed it!
created_at: 2025-05-08T14:25:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,25 @@
+import { Box, Typography, Avatar, Rating } from '@mui/material'
+import { styles } from './OfferCardRectagle.styles'
path: src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
user: login: coderabbitai[bot]
body: @olena-kuziaieva Great! Thanks for fixing the typo in the import statement. This helps maintain consistency in your codebase and prevents potential confusion or errors during future development.

---

<!-- This is an auto-generated comment: tweet message by coderabbit.ai -->

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Catch%20typos%20in%20file%20names%20early%20to%20avoid%20confusion%20and%20maintenance%20headaches!%20%F0%9F%9B%A0%EF%B8%8F%20Clean%20imports%20%3D%20cleaner%20code.%20Try%20%40coderabbitai%20for%20smart%2C%20precise%20code%20reviews!%20%F0%9F%9A%80&url=https%3A%2F%2Fgithub.com%2FSpace2Study-UA-1355-02%2FClient-02%2Fpull%2F42%23discussion_r2079784474)?

Thank you for using CodeRabbit!

<!-- end of auto-generated comment: tweet message by coderabbit.ai -->




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@olena-kuziaieva Great! Thanks for fixing the typo in the import statement. This helps maintain consistency in your codebase and prevents potential confusion or errors during future development.

---

&lt;!-- This is an auto-generated comment: tweet message by coderabbit.ai --&gt;

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Catch%20typos%20in%20file%20names%20early%20to%20avoid%20confusion%20and%20maintenance%20headaches!%20%F0%9F%9B%A0%EF%B8%8F%20Clean%20imports%20%3D%20cleaner%20code.%20Try%20%40coderabbitai%20for%20smart%2C%20precise%20code%20reviews!%20%F0%9F%9A%80&url=https%3A%2F%2Fgithub.com%2FSpace2Study-UA-1355-02%2FClient-02%2Fpull%2F42%23discussion_r2079784474)?

Thank you for using CodeRabbit!

&lt;!-- end of auto-generated comment: tweet message by coderabbit.ai --&gt;

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-08T14:26:12Z
author_association: NONE
diff_hunk: @@ -1,7 +1,13 @@
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
+import OfferCardRectangle from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle'
 
 const FindOffers = () => {
-  return <PageWrapper>Find offers</PageWrapper>
+  return (
+    <>
+      <PageWrapper>Find offers</PageWrapper>
+      <OfferCardRectangle />
path: src/pages/find-offers/FindOffers.tsx
user: login: Kryzhanivsky
body: This should be inside the "PageWrapper" tag
created_at: 2025-05-08T15:45:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const PriceSection = ({ onOpenMessage }) => {
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            75 UAH
+          </Typography>
+          <Typography color='primary.600' variant='caption'>
+            /HOUR
+          </Typography>
+        </Box>
+        <IconButton color='primary.800'>
+          <BookmarkBorderIcon />
+        </IconButton>
+      </Box>
+      <Box sx={styles.buttons}>
+        <Button variant='contained'>Show details</Button>
+        <Button
+          onClick={onOpenMessage}
+          sx={styles.buttonSendMessage}
+          variant='contained'
+        >
+          Send message
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: Kryzhanivsky
body: Here you need to use the "t" function
created_at: 2025-05-08T15:51:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const PriceSection = ({ onOpenMessage }) => {
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            75 UAH
+          </Typography>
+          <Typography color='primary.600' variant='caption'>
+            /HOUR
+          </Typography>
+        </Box>
+        <IconButton color='primary.800'>
+          <BookmarkBorderIcon />
+        </IconButton>
+      </Box>
+      <Box sx={styles.buttons}>
+        <Button variant='contained'>Show details</Button>
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: Kryzhanivsky
body: Here you need to use the "t" function
created_at: 2025-05-08T15:51:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const PriceSection = ({ onOpenMessage }) => {
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            75 UAH
+          </Typography>
+          <Typography color='primary.600' variant='caption'>
+            /HOUR
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: Kryzhanivsky
body: This data needs to be received via props
created_at: 2025-05-08T15:52:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const PriceSection = ({ onOpenMessage }) => {
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            75 UAH
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: Kryzhanivsky
body: This data needs to be received via props
created_at: 2025-05-08T15:52:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,23 @@
+import { Box, Typography, Avatar, Rating } from '@mui/material'
+import avatarImage from '~/assets/img/tutor-profile-page/avatar.png'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const UserProfile = () => {
path: src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
user: login: Kryzhanivsky
body: Personal data must be received in props
created_at: 2025-05-08T15:54:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,33 @@
+import { Box, Typography } from '@mui/material'
+import LanguageIcon from '@mui/icons-material/Language'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const CourseDetails = () => {
path: src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx
user: login: Kryzhanivsky
body: All data must be received in props
created_at: 2025-05-08T15:57:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import { Card, CardContent, Grid } from '@mui/material'
+
+import UserProfile from '~/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile'
+import CourseDetails from '~/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails'
+import PriceSection from '~/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection'
+
+import SendMessageModal from '~/components/send-message-modal/SendMessageModal'
+
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const OfferCardRectangle = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleOpenMessage = () => setIsModalOpen(true)
+  const handleCloseMessage = () => setIsModalOpen(false)
+  const handleSendMessage = () => {
+    console.log('Message sent!')
+  }
+
+  return (
+    <>
+      <Card sx={styles.card}>
+        <CardContent>
+          <Grid alignItems='flex-start' container spacing={2}>
+            <Grid item md={2} sm={4} sx={{ height: '100%' }} xs={12}>
+              <UserProfile />
+            </Grid>
+            <Grid item md={7} sm={8} sx={{ height: '100%' }} xs={12}>
+              <CourseDetails />
+            </Grid>
+            <Grid item md={3} sm={12} sx={{ height: '100%' }} xs={12}>
+              <PriceSection onOpenMessage={handleOpenMessage} />
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+
+      <SendMessageModal
path: src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx
user: login: Kryzhanivsky
body: There should be a slightly different logic here, but for now, let it be.
created_at: 2025-05-08T15:59:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const PriceSection = ({ onOpenMessage }) => {
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            75 UAH
+          </Typography>
+          <Typography color='primary.600' variant='caption'>
+            /HOUR
+          </Typography>
+        </Box>
+        <IconButton color='primary.800'>
+          <BookmarkBorderIcon />
+        </IconButton>
+      </Box>
+      <Box sx={styles.buttons}>
+        <Button variant='contained'>Show details</Button>
+        <Button
+          onClick={onOpenMessage}
+          sx={styles.buttonSendMessage}
+          variant='contained'
+        >
+          Send message
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: olena-kuziaieva
body: Fixed it.
created_at: 2025-05-08T18:39:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const PriceSection = ({ onOpenMessage }) => {
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            75 UAH
+          </Typography>
+          <Typography color='primary.600' variant='caption'>
+            /HOUR
+          </Typography>
+        </Box>
+        <IconButton color='primary.800'>
+          <BookmarkBorderIcon />
+        </IconButton>
+      </Box>
+      <Box sx={styles.buttons}>
+        <Button variant='contained'>Show details</Button>
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: olena-kuziaieva
body: Fixed it.
created_at: 2025-05-08T18:39:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,7 +1,13 @@
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
+import OfferCardRectangle from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle'
 
 const FindOffers = () => {
-  return <PageWrapper>Find offers</PageWrapper>
+  return (
+    <>
+      <PageWrapper>Find offers</PageWrapper>
+      <OfferCardRectangle />
path: src/pages/find-offers/FindOffers.tsx
user: login: olena-kuziaieva
body: I don't understand. Instead of Find offers?
created_at: 2025-05-08T18:41:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const PriceSection = ({ onOpenMessage }) => {
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            75 UAH
+          </Typography>
+          <Typography color='primary.600' variant='caption'>
+            /HOUR
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: olena-kuziaieva
body: Fixed it and used props.
created_at: 2025-05-08T22:17:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,23 @@
+import { Box, Typography, Avatar, Rating } from '@mui/material'
+import avatarImage from '~/assets/img/tutor-profile-page/avatar.png'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const UserProfile = () => {
path: src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
user: login: olena-kuziaieva
body: Fixed it and used props.
created_at: 2025-05-08T22:18:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,35 @@
+import { Box, Typography, IconButton, Button } from '@mui/material'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const PriceSection = ({ onOpenMessage }) => {
+  return (
+    <>
+      <Box sx={styles.topRight}>
+        <Box>
+          <Typography color='primary.800' fontWeight='400' variant='h6'>
+            75 UAH
path: src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx
user: login: olena-kuziaieva
body: Fixed it and used props.
created_at: 2025-05-08T22:18:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,33 @@
+import { Box, Typography } from '@mui/material'
+import LanguageIcon from '@mui/icons-material/Language'
+import { styles } from '~/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles'
+
+const CourseDetails = () => {
path: src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx
user: login: olena-kuziaieva
body: Fixed it and used props
created_at: 2025-05-08T22:19:11Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-05-08T13:53:59Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

"""
## Walkthrough

This update introduces a new `OfferCardRectangle` component and its supporting subcomponents for displaying detailed offer cards on the "Find offers" page. The changes include new UI components for user profiles, course details, pricing, a modal for sending messages, and associated styles. The `FindOffers` page is updated to render the new offer card.

## Changes

| Files / Paths                                                                                     | Change Summary                                                                                                   |
|---------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------|
| `src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.jsx`<br>`CourseDetails.jsx`<br>`PriceSection.jsx`<br>`UserProfile.jsx` | Added new React functional components for the offer card: main rectangle, course details, price section, and user profile. |
| `src/components/offer-card/offer-card-square/offer-card-rectangle/OfferCardRectangle.styles.js`   | Introduced a new styles object for the offer card and its subcomponents.                                         |
| `src/components/send-message-modal/SendMessageModal.jsx`                                          | Added a modal component for sending messages, with internal state and handlers.                                  |
| `src/pages/find-offers/FindOffers.tsx`                                                            | Updated to render the new `OfferCardRectangle` component alongside existing content.                             |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant FindOffersPage
    participant OfferCardRectangle
    participant UserProfile
    participant CourseDetails
    participant PriceSection
    participant SendMessageModal

    User->>FindOffersPage: Visit "Find offers"
    FindOffersPage->>OfferCardRectangle: Render offer card
    OfferCardRectangle->>UserProfile: Render user profile section
    OfferCardRectangle->>CourseDetails: Render course details section
    OfferCardRectangle->>PriceSection: Render price and actions
    User->>PriceSection: Click "Send message"
    PriceSection->>OfferCardRectangle: Trigger open modal callback
    OfferCardRectangle->>SendMessageModal: Open modal
    User->>SendMessageModal: Type and send message
    SendMessageModal->>OfferCardRectangle: onSend callback
    SendMessageModal->>OfferCardRectangle: onClose callback
```

## Possibly related issues

- Space2Study-UA-1355-02/Issues#111: Implements the `OfferCardRectangle` and its subcomponents as described for the "Find offers" page.

## Suggested reviewers

- ruslansymonenko  
- Don-de-padlo  
- Sergij95  

## Poem

> In a rectangle card, new stories unfold,  
> With profiles and prices, and details retold.  
> A message can send with a click and a cheer—  
> The offers are clearer, the purpose sincere.  
> 🐇✨  
> Hopping through code, with styles so neat,  
> This rabbit declares: the update’s complete!
"""

<!-- walkthrough_end -->

<!-- announcements_start -->

> [!TIP]
> <details>
> <summary>⚡️ Faster reviews with caching</summary>
> 
> - CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure `Review - Disable Cache` at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the `Data Retention` setting under your Organization Settings.
> 
> Enjoy the performance boost—your workflow just got faster.
> 
> </details>

<!-- announcements_end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 734a17dc99327342fbc94ec7bd804ec3cc57e34f and cbbb6046bcbe34a87e1d1b0b763e5e5f9b5f3dfc.

</details>

<details>
<summary>📒 Files selected for processing (4)</summary>

* `src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx` (1 hunks)
* `src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx` (1 hunks)
* `src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx` (1 hunks)
* `src/containers/tutor-home-page/general-info-step/GeneralInfoStep.jsx` (2 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (1)</summary>

* src/containers/tutor-home-page/general-info-step/GeneralInfoStep.jsx

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (3)</summary>

* src/components/offer-card/offer-card-square/offer-card-rectangle/UserProfile.jsx
* src/components/offer-card/offer-card-square/offer-card-rectangle/CourseDetails.jsx
* src/components/offer-card/offer-card-square/offer-card-rectangle/PriceSection.jsx

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (2)</summary>

* GitHub Check: Run Tests
* GitHub Check: Run Tests

</details>

</details>
<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=Space2Study-UA-1355-02/Client-02&utm_content=42):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-05-08T15:24:04Z
body: ## [![Quality Gate Failed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-failed-20px.png 'Quality Gate Failed')](https://sonarcloud.io/dashboard?id=Space2Study-UA-1355-02_Client-02&pullRequest=42) **Quality Gate failed**  
Failed conditions  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/failed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=Space2Study-UA-1355-02_Client-02&pullRequest=42&metric=new_coverage&view=list) (required ≥ 80%)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=Space2Study-UA-1355-02_Client-02&pullRequest=42)


author_association: NONE