Repository: neiist-dev/neiist-website
Pull request #467: Remove phone number from contacts page
Author: login: migpovrap
Created: 2025-04-22T14:39:19Z | Merged: 2025-04-23T00:24:42Z

![image](https://github.com/user-attachments/assets/88193f82-4b5f-4ba7-a0b6-a65c7b711798)

Refactors the `ContactsPage` to use components and a dedicated CSS module. This makes it easier to maintain the code in the future, also solves the issue #438

### Component:
* `ContactCard` component for contact information. 
* `MapCard` component to encapsulate the map iframe.
*  Updated `ContactsPage` to use the new `ContactCard` and `MapCard` components, replacing hardcoded and repetitive code.

### Styling Improvements:
* Replaced inline styles in `ContactsPage` with a dedicated CSS module (`ContactsPage.module.css`).

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

- **New Features**
  - Introduced ContactCard and LocationCard components for displaying contact and location information.
  - Contacts page now features a modular, grid-based layout with improved styling and embedded maps.
- **Refactor**
  - Replaced previous layout and inline styles on the Contacts page with custom CSS modules and dedicated components for better organization and maintainability.
- **Style**
  - Added new CSS module for enhanced, responsive styling of the Contacts page and its components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/client/src/components/contactsPage/ContactCard.jsx b/client/src/components/contactsPage/ContactCard.jsx
new file mode 100644
index 00000000..ed9735c6
--- /dev/null
+++ b/client/src/components/contactsPage/ContactCard.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import styles from '../../pages/css/ContactsPage.module.css';
+
+const ContactCard = ({ title, content, className }) => (
+  <div className={`${styles.contactCard} ${className || ''}`}>
+    <h4>{title}</h4>
+    <p>{content}</p>
+  </div>
+);
+
+export default ContactCard;
diff --git a/client/src/components/contactsPage/LocationCard.jsx b/client/src/components/contactsPage/LocationCard.jsx
new file mode 100644
index 00000000..f3da047a
--- /dev/null
+++ b/client/src/components/contactsPage/LocationCard.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import styles from '../../pages/css/ContactsPage.module.css';
+
+const LocationCard = ({ roomNumber, addressLines, mapSrc }) => (
+  <div className={styles.locationCard}>
+    <h2>{roomNumber}</h2>
+    <p>
+      {addressLines.map((line, idx) => (
+        <React.Fragment key={idx}>
+          {line}<br />
+        </React.Fragment>
+      ))}
+    </p>
+    <iframe
+      className={styles.mapFrame}
+      title={roomNumber}
+      src={mapSrc}
+      allowFullScreen
+      loading="lazy"
+    />
+  </div>
+);
+
+export default LocationCard;
diff --git a/client/src/pages/ContactsPage.jsx b/client/src/pages/ContactsPage.jsx
index 466bfe19..3c3b2a9e 100644
--- a/client/src/pages/ContactsPage.jsx
+++ b/client/src/pages/ContactsPage.jsx
@@ -1,87 +1,43 @@
 import React from "react";
-import { Row, Col } from "react-bootstrap";
+import LocationCard from "../components/contactsPage/LocationCard";
+import ContactCard from "../components/contactsPage/ContactCard";
+import styles from './css/ContactsPage.module.css';
 
 const ContactsPage = () => (
-	<>
-		<div style={{ margin: "2rem 6rem 1rem 6rem" }}>
-			<h1 style={{ textAlign: "center" }}>CONTACTOS</h1>
-		</div>
-
-		<Row
-			style={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "flex-end",
-			}}
-		>
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>EMAIL</h2>
-				<p>neiist@tecnico.ulisboa.pt</p>
-			</Col>
-
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>TELEFONE</h2>
-				<p>218417000 (extensão: 2572)</p>
-			</Col>
-		</Row>
-
-		<div style={{ margin: "1rem", textAlign: "center" }}>
-			<h2>SALAS</h2>
-			<Row
-				style={{
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "flex-end",
-				}}
-			>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 3.03
-						<br />
-						Pavilhão de Informática I
-						<br />
-						Campus Alameda
-						<br />
-						Av. António José de Almeida
-					</p>
-					<iframe
-						title="NEIIST Alameda"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 1.18
-						<br />
-						Campus Taguspark
-						<br />
-						Av. Prof. Doutor Aníbal Cavaco Silva
-					</p>
-					<iframe
-						title="NEIIST Taguspark"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-			</Row>
-		</div>
-
-		<div style={{ margin: "2rem 6rem 2rem 6rem", textAlign: "center" }}>
-			<h2 style={{ textAlign: "center" }}>CORREIO</h2>
-			<p>
-				NEIIST (Núcleo Estudantil de Informática do IST)
-				<br />
-				Departamento de Engenharia Informática
-				<br />
-				Instituto Superior Técnico
-				<br />
-				Av. Rovisco Pais 1, 1049-001 LISBOA
-			</p>
-		</div>
-	</>
+  <>
+    <h1 className={styles.header}>CONTACTOS</h1>
+    <div className={styles.grid}>
+      <ContactCard title="Email" content="neiist@tecnico.ulisboa.pt" />
+      <ContactCard title="Correio" content={
+        <>
+          NEIIST (Núcleo Estudantil de Informática do IST)
+          <br />
+          Departamento de Engenharia Informática
+          <br />
+          Instituto Superior Técnico
+          <br />
+          Av. Rovisco Pais 1, 1049-001 LISBOA
+        </>
+      } />
+    </div>
+    <div className={styles.grid}>
+      <LocationCard roomNumber="Sala 3.03"
+        addressLines={[
+          "Pavilhão de Informática I",
+          "Campus Alameda",
+          "Av. António José de Almeida"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
+      />
+      <LocationCard roomNumber="Sala 1.18"
+        addressLines={[
+          "Campus Taguspark",
+          "Av. Prof. Doutor Aníbal Cavaco Silva"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
+      />
+    </div>
+  </>
 );
 
 export default ContactsPage;
diff --git a/client/src/pages/css/ContactsPage.module.css b/client/src/pages/css/ContactsPage.module.css
new file mode 100644
index 00000000..93a5c0b7
--- /dev/null
+++ b/client/src/pages/css/ContactsPage.module.css
@@ -0,0 +1,52 @@
+.header {
+  font-size: 2.5rem;
+  font-weight: 600;
+  margin: 3rem 0 2rem 0;
+  text-align: center;
+}
+
+.grid {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(auto-fit, minmax(385px, 1fr));
+  padding: 0 0 2.5rem 0;
+  gap: 2.5rem;
+  max-width: 95%;
+  margin: 0 auto;
+}
+
+.contactCard {
+  background: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: center;
+  min-height: 100%;
+}
+
+.locationCard {
+  background: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  min-height: 100%;
+}
+
+.mapFrame {
+  border-radius: 0.75rem;
+  border: 0;
+  width: 100%;
+  height: 16rem;
+  max-width: 80%;
+}
+
+.contactCard p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  margin: 0;
+}


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

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

<details>
<summary>client/src/pages/css/ContactsPage.module.css (1)</summary><blockquote>

`41-46`: **Iframe styling could be more specific**

The iframe styling is applied globally to all iframes on the page. Consider using a more specific selector to avoid unintended styling of other iframes that might be added in the future.


```diff
-iframe {
+.cardMap iframe {
   border-radius: 0.75rem;
   width: 100%;
   height: 16rem;
   max-width: 80%;
 }
```

</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 75438781280cba900414392d36c4bbfad9088d8e and 25a4ebe04b765650174fef2237f744f5a377fea9.

</details>

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

* `client/src/components/contactsPage/ContactCard.jsx` (1 hunks)
* `client/src/components/contactsPage/MapCard.jsx` (1 hunks)
* `client/src/pages/ContactsPage.jsx` (1 hunks)
* `client/src/pages/css/ContactsPage.module.css` (1 hunks)

</details>

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

<details>
<summary>client/src/pages/css/ContactsPage.module.css (3)</summary>

`1-4`: **Well-structured container class with good spacing**

The container class is well-defined with appropriate text alignment and margin spacing, providing a clean layout for the page header.

---

`12-17`: **Excellent use of responsive grid layout**

The grid implementation with `repeat(auto-fit, minmax(18rem, 1fr))` creates a responsive layout that adapts well to different screen sizes without the need for media queries.

---

`19-28`: **Good component-specific styling with reusable patterns**

The `.cardMap` and `.card` classes share similar styling patterns while maintaining specific differences in alignment and spacing. This creates visual consistency while allowing for functional differences between map and contact components.



Also applies to: 30-39

</details>
<details>
<summary>client/src/components/contactsPage/ContactCard.jsx (1)</summary>

`4-9`: **Clean, reusable component with proper props handling**

This component is well-designed with appropriate props and follows React best practices. The conditional className handling is a nice touch for component flexibility.

</details>
<details>
<summary>client/src/components/contactsPage/MapCard.jsx (2)</summary>

`8-12`: **Good handling of address lines array**

The use of React.Fragment with proper keys for mapping over address lines is a clean approach that follows React best practices.

---

`14-19`: **Well-configured iframe with performance and accessibility attributes**

The iframe implementation includes important attributes for accessibility (`title`) and performance (`loading="lazy"`), which are excellent practices.

</details>
<details>
<summary>client/src/pages/ContactsPage.jsx (4)</summary>

`2-4`: **Good modular component imports and CSS module adoption**

The refactoring to use dedicated components and CSS modules follows modern React best practices and improves code organization.

---

`12-30`: **Clean implementation of map locations with the MapCard component**

The use of the MapCard component with clear props for title, address lines, and map source creates a more maintainable and readable solution compared to hardcoded HTML.

---

`34-52`: **Well-structured contact information with reusable components**

The use of ContactCard components for different types of contact information improves code maintainability and consistency. The approach to handling multiline content for the postal address is well-implemented.

---

`7-54`: **Phone number successfully removed as per PR objective**

The refactored component successfully removes the phone number contact information while maintaining the email and postal address contacts, which aligns with the PR objective.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T14:42:45Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 3**

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

<details>
<summary>client/src/components/contactsPage/MapCard.jsx (1)</summary><blockquote>

`7-13`: **References to undefined CSS class.**

The component references `styles.content`, but this class isn't defined in the imported CSS module. This will result in the paragraph having no specific styling.


This class needs to be added to the CSS module:

```diff
// In ContactsPage.module.css
+.content {
+  margin-bottom: 1rem;
+}
```

</blockquote></details>

</blockquote></details>

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

<details>
<summary>client/src/components/contactsPage/MapCard.jsx (1)</summary><blockquote>

`14-19`: **Consider adding dimensions and styling for the iframe.**

The iframe element is missing width, height, and border attributes, which are important for proper rendering and consistency.


```diff
<iframe
  title={title}
  src={mapSrc}
  allowFullScreen
  loading="lazy"
+ className={styles.mapFrame}
/>
```

Then add the corresponding style in the CSS module:

```css
.mapFrame {
  width: 100%;
  height: 300px;
  border: 0;
}
```

</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 25a4ebe04b765650174fef2237f744f5a377fea9 and 4986bf769fdcb013e39b24b977bebdf170a2cb72.

</details>

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

* `client/src/components/contactsPage/MapCard.jsx` (1 hunks)
* `client/src/pages/ContactsPage.jsx` (1 hunks)
* `client/src/pages/css/ContactsPage.module.css` (1 hunks)

</details>

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

* client/src/pages/css/ContactsPage.module.css

</details>

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

<details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>client/src/components/contactsPage/MapCard.jsx</summary>

[error] 25-25: Illegal duplicate default export declarations

multiple default exports are erroneous

the module's default export is first defined here


(parse)

</details>
<details>
<summary>client/src/pages/ContactsPage.jsx</summary>

[error] 34-34: expected `}` but instead found `:`

Remove :

(parse)

---

[error] 7-7: JSX fragment has no corresponding closing tag.

Opening fragment

Closing tag


(parse)

---

[error] 36-36: Unexpected token. Did you mean `{'}'}` or `&rbrace;`?



(parse)

---

[error] 56-56: expected `)` but instead found `<`

Remove <

(parse)

---

[error] 32-33: Wrap comments inside children within braces.

Unsafe fix: Wrap the comments with braces


(lint/suspicious/noCommentText)

</details>

</details>
<details>
<summary>🪛 GitHub Actions: main</summary>

<details>
<summary>client/src/pages/ContactsPage.jsx</summary>

[error] 34-34: ESLint: Syntax error: Unexpected token, expected "}" at line 34, column 8.

</details>

</details>

</details>

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

<details>
<summary>client/src/pages/ContactsPage.jsx (2)</summary>

`36-54`: **Note successful implementation of contact information removal.**

The phone number has been successfully removed from the contacts page, aligning with the PR objective of "Remove phone number from contacts page."

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 36-36: Unexpected token. Did you mean `{'}'}` or `&rbrace;`?



(parse)

</details>

</details>

---

`12-30`: <details>
<summary>✅ Verification successful</summary>

**Confirm the contacts grid layout in CSS.**

While the component references `styles.pageGrid` for the map cards, ensure that the corresponding CSS class properly establishes a grid layout for these components.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if the pageGrid class exists and its implementation in the CSS module
cat client/src/pages/css/ContactsPage.module.css | grep -A 5 "\.pageGrid"
```

Length of output: 225

---



</details>

**CSS Grid Layout Confirmed**

The `.pageGrid` class in `client/src/pages/css/ContactsPage.module.css` already defines:
- `display: grid`
- `grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr))`
- appropriate `gap` and `padding`

No changes are needed—your MapCard components will render in a responsive grid as intended.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T15:34:41Z
user: login: Francisca105
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-04-22T16:17:44Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T16:18:30Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T16:18:34Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

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

<details>
<summary>client/src/pages/css/ContactsPage.module.css (1)</summary><blockquote>

`1-53`: **Missing CSS classes referenced in components.**

I notice that classes such as `cardTitle` and `cardContent` that might be referenced in components are not defined in this CSS module.


Consider adding these missing classes:

```diff
 .contactCard p {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   margin: 0;
 }
+
+.cardTitle {
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+
+.cardContent {
+  margin-bottom: 1rem;
+}
```

</blockquote></details>
<details>
<summary>client/src/components/contactsPage/ContactCard.jsx (1)</summary><blockquote>

`6-7`: **Missing styling classes for title and content.**

The component doesn't apply the specific styles like `cardTitle` for the h4 element and `cardContent` for the paragraph, which might be expected based on past comments.


Consider adding these style classes:

```diff
 const ContactCard = ({ title, content, className }) => (
   <div className={`${styles.contactCard} ${className || ''}`}>
-    <h4>{title}</h4>
-    <p>{content}</p>
+    <h4 className={styles.cardTitle}>{title}</h4>
+    <p className={styles.cardContent}>{content}</p>
   </div>
 );
```

</blockquote></details>

</blockquote></details>

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

<details>
<summary>client/src/components/contactsPage/ContactCard.jsx (1)</summary><blockquote>

`5-8`: **Consider adding proper PropTypes or TypeScript types.**

While the component works as is, adding PropTypes or TypeScript typing would improve code quality and maintainability by documenting the expected props and their types.


```diff
 import React from "react";
 import styles from '../../pages/css/ContactsPage.module.css';
+import PropTypes from 'prop-types';

 const ContactCard = ({ title, content, className }) => (
   <div className={`${styles.contactCard} ${className || ''}`}>
     <h4>{title}</h4>
     <p>{content}</p>
   </div>
 );

+ContactCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.node.isRequired,
+  className: PropTypes.string
+};
+
 export default ContactCard;
```

</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 1f9c56af3d048c742e4be765add41bfe2c63f250 and 873fda3041e42631e64142678ee89b62de45e9e9.

</details>

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

* `client/src/components/contactsPage/ContactCard.jsx` (1 hunks)
* `client/src/components/contactsPage/LocationCard.jsx` (1 hunks)
* `client/src/pages/ContactsPage.jsx` (1 hunks)
* `client/src/pages/css/ContactsPage.module.css` (1 hunks)

</details>

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

* client/src/components/contactsPage/LocationCard.jsx

</details>

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

* client/src/pages/ContactsPage.jsx

</details>

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

<details>
<summary>client/src/pages/css/ContactsPage.module.css (5)</summary>

`1-6`: **Good header styling with appropriate spacing.**

The header styling is well-defined with appropriate font size, weight, and spacing that ensures good visual hierarchy on the page.

---

`8-16`: **Well-implemented responsive grid layout.**

The grid implementation is excellent, using modern CSS Grid features like `repeat(auto-fit, minmax())` for responsiveness. This ensures the layout adapts well to different screen sizes without requiring media queries.

---

`18-26`: **Good separation of card types with clear styling differences.**

The separation between `.contactCard` and `.locationCard` with different `justify-content` values is a good design decision. This allows for distinct visual presentation while maintaining consistency in the overall card structure.



Also applies to: 28-36

---

`38-44`: **Map frame styling is appropriate.**

The styling for the map iframe is well-defined with good use of border-radius for consistent styling with other elements and appropriate sizing constraints.

---

`46-52`: **Good vertical centering of paragraph content.**

Using flexbox to center the paragraph content vertically is a good approach, ensuring consistent alignment regardless of content length.

</details>
<details>
<summary>client/src/components/contactsPage/ContactCard.jsx (1)</summary>

`1-11`: **Clean and concise component implementation.**

The ContactCard component is well-structured, properly imports styles, and follows best practices for a functional React component. The use of props destructuring and template literals for class composition is excellent.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T17:05:53Z
user: login: Francisca105
body: LGTM!
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-23T00:22:06Z

Review comments:
diff_hunk: @@ -0,0 +1,46 @@
+.container {
+  text-align: center;
+  margin: 3rem 0 2rem 0;
+}
+
+.header {
+  font-size: 2.5rem;
+  font-weight: 600;
+  margin: 0 auto 2rem auto;
+}
+
+.pageGrid, .contactsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+  gap: 2rem;
+  padding: 0 2.5rem 2.5rem;
+}
+
+.cardMap {
+  background: none;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  min-height: 100%;
+}
+
+.card {
+  background: none;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: center;
+  min-height: 100%;
+}
+
+iframe {
+  border-radius: 0.75rem;
+  width: 100%;
+  height: 16rem;
+  max-width: 80%;
+}
path: client/src/pages/css/ContactsPage.module.css
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Missing classes referenced in components**

I notice that `styles.cardTitle` and `styles.cardContent` are referenced in the ContactCard component, and `styles.content` is referenced in the MapCard component, but these classes aren't defined in this CSS module.


Consider adding these missing classes:

```diff
 iframe {
   border-radius: 0.75rem;
   width: 100%;
   height: 16rem;
   max-width: 80%;
 }
+
+.cardTitle {
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+
+.cardContent, .content {
+  margin-bottom: 1rem;
+}
```


<!-- 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
iframe {
  border-radius: 0.75rem;
  width: 100%;
  height: 16rem;
  max-width: 80%;
}

.cardTitle {
  margin-bottom: 1rem;
  font-weight: 500;
}

.cardContent, .content {
  margin-bottom: 1rem;
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T14:42:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,11 @@
+import React from "react";
+import styles from '../../pages/css/ContactsPage.module.css';
+
+const ContactCard = ({ title, content, className }) => (
+  <div className={`${styles.card} ${className || ''}`}>
+    <h4 className={styles.cardTitle}>{title}</h4>
+    <div className={styles.cardContent}>{content}</div>
path: client/src/components/contactsPage/ContactCard.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**References to undefined CSS classes**

The component references `styles.cardTitle` and `styles.cardContent`, but these classes aren't defined in the imported CSS module. This will result in these elements having no specific styling.


These classes need to be added to the CSS module as suggested in the review of the CSS file.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T14:42:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,23 @@
+import React from "react";
+import styles from '../../pages/css/ContactsPage.module.css';
+
+const LocationCard = ({ title, addressLines, mapSrc }) => (
+  <div className={styles.cardMap}>
+    <h2>{title}</h2>
+    <p className={styles.content}>
+      {addressLines.map((line, idx) => (
+        <React.Fragment key={idx}>
+          {line}<br />
+        </React.Fragment>
+      ))}
+    </p>
path: client/src/components/contactsPage/MapCard.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**References to undefined CSS class**

The component references `styles.content`, but this class isn't defined in the imported CSS module. This will result in the paragraph having no specific styling.


This class needs to be added to the CSS module as suggested in the review of the CSS file.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T14:42:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,23 @@
+import React from "react";
+import styles from '../../pages/css/ContactsPage.module.css';
+
+const LocationCard = ({ title, addressLines, mapSrc }) => (
+  <div className={styles.cardMap}>
+    <h2>{title}</h2>
+    <p className={styles.content}>
+      {addressLines.map((line, idx) => (
+        <React.Fragment key={idx}>
+          {line}<br />
+        </React.Fragment>
+      ))}
+    </p>
+    <iframe
+      title={title}
+      src={mapSrc}
+      allowFullScreen
+      loading="lazy"
+    />
+  </div>
+);
path: client/src/components/contactsPage/MapCard.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Component name inconsistency**

The component is defined as `LocationCard` but imported as `MapCard` in ContactsPage.jsx. This creates confusion about the component's identity.


Make the component name consistent by choosing one name and using it throughout the codebase:

```diff
-const LocationCard = ({ title, addressLines, mapSrc }) => (
+const MapCard = ({ title, addressLines, mapSrc }) => (
   <div className={styles.cardMap}>
     <h2>{title}</h2>
     <p className={styles.content}>
       {addressLines.map((line, idx) => (
         <React.Fragment key={idx}>
           {line}<br />
         </React.Fragment>
       ))}
     </p>
     <iframe
       title={title}
       src={mapSrc}
       allowFullScreen
       loading="lazy"
     />
   </div>
 );

-export default LocationCard;
+export default MapCard;
```


<!-- 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 MapCard = ({ title, addressLines, mapSrc }) => (
  <div className={styles.cardMap}>
    <h2>{title}</h2>
    <p className={styles.content}>
      {addressLines.map((line, idx) => (
        <React.Fragment key={idx}>
          {line}<br />
        </React.Fragment>
      ))}
    </p>
    <iframe
      title={title}
      src={mapSrc}
      allowFullScreen
      loading="lazy"
    />
  </div>
);

export default MapCard;
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T14:42:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,87 +1,57 @@
 import React from "react";
-import { Row, Col } from "react-bootstrap";
+import MapCard from "../components/contactsPage/MapCard";
+import ContactCard from "../components/contactsPage/ContactCard";
+import styles from './css/ContactsPage.module.css';
 
 const ContactsPage = () => (
-	<>
-		<div style={{ margin: "2rem 6rem 1rem 6rem" }}>
-			<h1 style={{ textAlign: "center" }}>CONTACTOS</h1>
-		</div>
+  <>
+    <div className={styles.container}>
+      <h1 className={styles.header}>CONTACTOS</h1>
+    </div>
 
-		<Row
-			style={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "flex-end",
-			}}
-		>
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>EMAIL</h2>
-				<p>neiist@tecnico.ulisboa.pt</p>
-			</Col>
+    <div className={styles.pageGrid}>
+      <MapCard
+        title="Sala 3.03"
+        addressLines={[
+          "Pavilhão de Informática I",
+          "Campus Alameda",
+          "Av. António José de Almeida"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
+      />
+      <MapCard
+        title="Sala 1.18"
+        addressLines={[
+          "Campus Taguspark",
+          "Av. Prof. Doutor Aníbal Cavaco Silva"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
+      />
+    </div>
 
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>TELEFONE</h2>
-				<p>218417000 (extensão: 2572)</p>
-			</Col>
-		</Row>
-
-		<div style={{ margin: "1rem", textAlign: "center" }}>
-			<h2>SALAS</h2>
-			<Row
-				style={{
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "flex-end",
-				}}
-			>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 3.03
-						<br />
-						Pavilhão de Informática I
-						<br />
-						Campus Alameda
-						<br />
-						Av. António José de Almeida
-					</p>
-					<iframe
-						title="NEIIST Alameda"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 1.18
-						<br />
-						Campus Taguspark
-						<br />
-						Av. Prof. Doutor Aníbal Cavaco Silva
-					</p>
-					<iframe
-						title="NEIIST Taguspark"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-			</Row>
-		</div>
-
-		<div style={{ margin: "2rem 6rem 2rem 6rem", textAlign: "center" }}>
-			<h2 style={{ textAlign: "center" }}>CORREIO</h2>
-			<p>
-				NEIIST (Núcleo Estudantil de Informática do IST)
-				<br />
-				Departamento de Engenharia Informática
-				<br />
-				Instituto Superior Técnico
-				<br />
-				Av. Rovisco Pais 1, 1049-001 LISBOA
-			</p>
-		</div>
-	</>
+    <div className={styles.contactsContainer}>
+      <div className={styles.contactsGrid}>
path: client/src/pages/ContactsPage.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**References to undefined CSS class**

The component references `styles.contactsContainer`, but this class isn't defined in the imported CSS module.


Add this class to the CSS module:

```diff
// In ContactsPage.module.css
+.contactsContainer {
+  margin: 2rem 0;
+}
```


<!-- 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
/* In client/src/pages/ContactsPage.module.css */
.contactsContainer {
  margin: 2rem 0;
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T14:42:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,25 @@
+import React from "react";
+import styles from '../../pages/css/ContactsPage.module.css';
+
+const MapCard = ({ title, addressLines, mapSrc }) => (
+  <div className={styles.cardMap}>
+    <h2>{title}</h2>
+    <p className={styles.content}>
+      {addressLines.map((line, idx) => (
+        <React.Fragment key={idx}>
+          {line}<br />
+        </React.Fragment>
+      ))}
+    </p>
+    <iframe
+      title={title}
+      src={mapSrc}
+      allowFullScreen
+      loading="lazy"
+    />
+  </div>
+);
+
+export default MapCard;
+
+export default LocationCard;
path: client/src/components/contactsPage/MapCard.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Remove duplicate default export statement.**

There's an erroneous second `export default` statement for a component named `LocationCard` that doesn't exist in this file. This will cause a syntax error.

```diff
-export default LocationCard;
```


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

`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 25-25: Illegal duplicate default export declarations

multiple default exports are erroneous

the module's default export is first defined here


(parse)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T15:34:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,87 +1,59 @@
 import React from "react";
-import { Row, Col } from "react-bootstrap";
+import MapCard from "../components/contactsPage/MapCard";
+import ContactCard from "../components/contactsPage/ContactCard";
+import styles from './css/ContactsPage.module.css';
 
 const ContactsPage = () => (
-	<>
-		<div style={{ margin: "2rem 6rem 1rem 6rem" }}>
-			<h1 style={{ textAlign: "center" }}>CONTACTOS</h1>
-		</div>
+  <>
+    <div className={styles.container}>
+      <h1 className={styles.header}>CONTACTOS</h1>
+    </div>
 
-		<Row
-			style={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "flex-end",
-			}}
-		>
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>EMAIL</h2>
-				<p>neiist@tecnico.ulisboa.pt</p>
-			</Col>
+    <div className={styles.pageGrid}>
+      <MapCard
+        title="Sala 3.03"
+        addressLines={[
+          "Pavilhão de Informática I",
+          "Campus Alameda",
+          "Av. António José de Almeida"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
+      />
+      <MapCard
+        title="Sala 1.18"
+        addressLines={[
+          "Campus Taguspark",
+          "Av. Prof. Doutor Aníbal Cavaco Silva"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
+      />
+    </div>
 
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>TELEFONE</h2>
-				<p>218417000 (extensão: 2572)</p>
-			</Col>
-		</Row>
-
-		<div style={{ margin: "1rem", textAlign: "center" }}>
-			<h2>SALAS</h2>
-			<Row
-				style={{
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "flex-end",
-				}}
-			>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 3.03
-						<br />
-						Pavilhão de Informática I
-						<br />
-						Campus Alameda
-						<br />
-						Av. António José de Almeida
-					</p>
-					<iframe
-						title="NEIIST Alameda"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 1.18
-						<br />
-						Campus Taguspark
-						<br />
-						Av. Prof. Doutor Aníbal Cavaco Silva
-					</p>
-					<iframe
-						title="NEIIST Taguspark"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-			</Row>
-		</div>
-
-		<div style={{ margin: "2rem 6rem 2rem 6rem", textAlign: "center" }}>
-			<h2 style={{ textAlign: "center" }}>CORREIO</h2>
-			<p>
-				NEIIST (Núcleo Estudantil de Informática do IST)
-				<br />
-				Departamento de Engenharia Informática
-				<br />
-				Instituto Superior Técnico
-				<br />
-				Av. Rovisco Pais 1, 1049-001 LISBOA
-			</p>
-		</div>
-	</>
+/* In client/src/pages/ContactsPage.module.css */
+.contactsContainer {
+  margin: 2rem 0;
+}
+        <ContactCard
+          title="Email"
+          content="neiist@tecnico.ulisboa.pt"
+        />
+        <ContactCard
+          title="Correio"
+					content={
+						<>
+							NEIIST (Núcleo Estudantil de Informática do IST)
+							<br />
+							Departamento de Engenharia Informática
+							<br />
+							Instituto Superior Técnico
+							<br />
+							Av. Rovisco Pais 1, 1049-001 LISBOA
+						</>
+					}
+        />
+      </div>
+    </div>
+  </>
path: client/src/pages/ContactsPage.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix JSX structure and nesting.**

The component structure has several syntax errors including mismatched tags and brackets. The component structure needs to be corrected.


The corrected structure should look like this:

```jsx
<>
  <div className={styles.container}>
    <h1 className={styles.header}>CONTACTOS</h1>
  </div>

  <div className={styles.pageGrid}>
    <MapCard
      title="Sala 3.03"
      addressLines={[
        "Pavilhão de Informática I",
        "Campus Alameda",
        "Av. António José de Almeida"
      ]}
      mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
    />
    <MapCard
      title="Sala 1.18"
      addressLines={[
        "Campus Taguspark",
        "Av. Prof. Doutor Aníbal Cavaco Silva"
      ]}
      mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
    />
  </div>

  <div className={styles.contactsContainer}>
    <ContactCard
      title="Email"
      content="neiist@tecnico.ulisboa.pt"
    />
    <ContactCard
      title="Correio"
      content={
        <>
          NEIIST (Núcleo Estudantil de Informática do IST)
          <br />
          Departamento de Engenharia Informática
          <br />
          Instituto Superior Técnico
          <br />
          Av. Rovisco Pais 1, 1049-001 LISBOA
        </>
      }
    />
  </div>
</>
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 34-34: expected `}` but instead found `:`

Remove :

(parse)

---

[error] 7-7: JSX fragment has no corresponding closing tag.

Opening fragment

Closing tag


(parse)

---

[error] 36-36: Unexpected token. Did you mean `{'}'}` or `&rbrace;`?



(parse)

---

[error] 56-56: expected `)` but instead found `<`

Remove <

(parse)

---

[error] 32-33: Wrap comments inside children within braces.

Unsafe fix: Wrap the comments with braces


(lint/suspicious/noCommentText)

</details>
<details>
<summary>🪛 GitHub Actions: main</summary>

[error] 34-34: ESLint: Syntax error: Unexpected token, expected "}" at line 34, column 8.

</details>

</details>

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

✅ Addressed in commit 873fda3

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T15:34:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,87 +1,59 @@
 import React from "react";
-import { Row, Col } from "react-bootstrap";
+import MapCard from "../components/contactsPage/MapCard";
+import ContactCard from "../components/contactsPage/ContactCard";
+import styles from './css/ContactsPage.module.css';
 
 const ContactsPage = () => (
-	<>
-		<div style={{ margin: "2rem 6rem 1rem 6rem" }}>
-			<h1 style={{ textAlign: "center" }}>CONTACTOS</h1>
-		</div>
+  <>
+    <div className={styles.container}>
+      <h1 className={styles.header}>CONTACTOS</h1>
+    </div>
 
-		<Row
-			style={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "flex-end",
-			}}
-		>
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>EMAIL</h2>
-				<p>neiist@tecnico.ulisboa.pt</p>
-			</Col>
+    <div className={styles.pageGrid}>
+      <MapCard
+        title="Sala 3.03"
+        addressLines={[
+          "Pavilhão de Informática I",
+          "Campus Alameda",
+          "Av. António José de Almeida"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
+      />
+      <MapCard
+        title="Sala 1.18"
+        addressLines={[
+          "Campus Taguspark",
+          "Av. Prof. Doutor Aníbal Cavaco Silva"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
+      />
+    </div>
 
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>TELEFONE</h2>
-				<p>218417000 (extensão: 2572)</p>
-			</Col>
-		</Row>
-
-		<div style={{ margin: "1rem", textAlign: "center" }}>
-			<h2>SALAS</h2>
-			<Row
-				style={{
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "flex-end",
-				}}
-			>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 3.03
-						<br />
-						Pavilhão de Informática I
-						<br />
-						Campus Alameda
-						<br />
-						Av. António José de Almeida
-					</p>
-					<iframe
-						title="NEIIST Alameda"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 1.18
-						<br />
-						Campus Taguspark
-						<br />
-						Av. Prof. Doutor Aníbal Cavaco Silva
-					</p>
-					<iframe
-						title="NEIIST Taguspark"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-			</Row>
-		</div>
-
-		<div style={{ margin: "2rem 6rem 2rem 6rem", textAlign: "center" }}>
-			<h2 style={{ textAlign: "center" }}>CORREIO</h2>
-			<p>
-				NEIIST (Núcleo Estudantil de Informática do IST)
-				<br />
-				Departamento de Engenharia Informática
-				<br />
-				Instituto Superior Técnico
-				<br />
-				Av. Rovisco Pais 1, 1049-001 LISBOA
-			</p>
-		</div>
-	</>
+/* In client/src/pages/ContactsPage.module.css */
+.contactsContainer {
+  margin: 2rem 0;
+}
path: client/src/pages/ContactsPage.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Remove misplaced CSS comment and class definition from JSX.**

There's a CSS comment and class definition incorrectly placed directly in the JSX code. These should be moved to the CSS module file.


Remove these lines from the JSX file and add them to the CSS module instead:

```diff
-/* In client/src/pages/ContactsPage.module.css */
-.contactsContainer {
-  margin: 2rem 0;
-}
```


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

`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 34-34: expected `}` but instead found `:`

Remove :

(parse)

---

[error] 32-33: Wrap comments inside children within braces.

Unsafe fix: Wrap the comments with braces


(lint/suspicious/noCommentText)

</details>
<details>
<summary>🪛 GitHub Actions: main</summary>

[error] 34-34: ESLint: Syntax error: Unexpected token, expected "}" at line 34, column 8.

</details>

</details>

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

✅ Addressed in commit 873fda3

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T15:34:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,87 +1,59 @@
 import React from "react";
-import { Row, Col } from "react-bootstrap";
+import MapCard from "../components/contactsPage/MapCard";
+import ContactCard from "../components/contactsPage/ContactCard";
+import styles from './css/ContactsPage.module.css';
 
 const ContactsPage = () => (
-	<>
-		<div style={{ margin: "2rem 6rem 1rem 6rem" }}>
-			<h1 style={{ textAlign: "center" }}>CONTACTOS</h1>
-		</div>
+  <>
+    <div className={styles.container}>
+      <h1 className={styles.header}>CONTACTOS</h1>
+    </div>
 
-		<Row
-			style={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "flex-end",
-			}}
-		>
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>EMAIL</h2>
-				<p>neiist@tecnico.ulisboa.pt</p>
-			</Col>
+    <div className={styles.pageGrid}>
+      <MapCard
+        title="Sala 3.03"
+        addressLines={[
+          "Pavilhão de Informática I",
+          "Campus Alameda",
+          "Av. António José de Almeida"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
+      />
+      <MapCard
+        title="Sala 1.18"
+        addressLines={[
+          "Campus Taguspark",
+          "Av. Prof. Doutor Aníbal Cavaco Silva"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
+      />
+    </div>
 
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>TELEFONE</h2>
-				<p>218417000 (extensão: 2572)</p>
-			</Col>
-		</Row>
-
-		<div style={{ margin: "1rem", textAlign: "center" }}>
-			<h2>SALAS</h2>
-			<Row
-				style={{
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "flex-end",
-				}}
-			>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 3.03
-						<br />
-						Pavilhão de Informática I
-						<br />
-						Campus Alameda
-						<br />
-						Av. António José de Almeida
-					</p>
-					<iframe
-						title="NEIIST Alameda"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 1.18
-						<br />
-						Campus Taguspark
-						<br />
-						Av. Prof. Doutor Aníbal Cavaco Silva
-					</p>
-					<iframe
-						title="NEIIST Taguspark"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-			</Row>
-		</div>
-
-		<div style={{ margin: "2rem 6rem 2rem 6rem", textAlign: "center" }}>
-			<h2 style={{ textAlign: "center" }}>CORREIO</h2>
-			<p>
-				NEIIST (Núcleo Estudantil de Informática do IST)
-				<br />
-				Departamento de Engenharia Informática
-				<br />
-				Instituto Superior Técnico
-				<br />
-				Av. Rovisco Pais 1, 1049-001 LISBOA
-			</p>
-		</div>
-	</>
+/* In client/src/pages/ContactsPage.module.css */
+.contactsContainer {
+  margin: 2rem 0;
+}
+        <ContactCard
+          title="Email"
+          content="neiist@tecnico.ulisboa.pt"
+        />
+        <ContactCard
+          title="Correio"
+					content={
+						<>
+							NEIIST (Núcleo Estudantil de Informática do IST)
+							<br />
+							Departamento de Engenharia Informática
+							<br />
+							Instituto Superior Técnico
+							<br />
+							Av. Rovisco Pais 1, 1049-001 LISBOA
+						</>
+					}
+        />
+      </div>
+    </div>
+  </>
path: client/src/pages/ContactsPage.jsx
user: login: Francisca105
body: The [build is failing](https://github.com/migpovrap/neiist-website/actions/runs/14598706705/job/40951138724) due to a syntax error, please fix it 
```
[eslint] 
src/pages/ContactsPage.jsx
Syntax error: Unexpected token, expected "}" (34:8) (34:8)
```
created_at: 2025-04-22T16:09:45Z
author_association: MEMBER
diff_hunk: @@ -1,87 +1,59 @@
 import React from "react";
-import { Row, Col } from "react-bootstrap";
+import MapCard from "../components/contactsPage/MapCard";
+import ContactCard from "../components/contactsPage/ContactCard";
+import styles from './css/ContactsPage.module.css';
 
 const ContactsPage = () => (
-	<>
-		<div style={{ margin: "2rem 6rem 1rem 6rem" }}>
-			<h1 style={{ textAlign: "center" }}>CONTACTOS</h1>
-		</div>
+  <>
+    <div className={styles.container}>
+      <h1 className={styles.header}>CONTACTOS</h1>
+    </div>
 
-		<Row
-			style={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "flex-end",
-			}}
-		>
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>EMAIL</h2>
-				<p>neiist@tecnico.ulisboa.pt</p>
-			</Col>
+    <div className={styles.pageGrid}>
+      <MapCard
+        title="Sala 3.03"
+        addressLines={[
+          "Pavilhão de Informática I",
+          "Campus Alameda",
+          "Av. António José de Almeida"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
+      />
+      <MapCard
+        title="Sala 1.18"
+        addressLines={[
+          "Campus Taguspark",
+          "Av. Prof. Doutor Aníbal Cavaco Silva"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
+      />
+    </div>
 
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>TELEFONE</h2>
-				<p>218417000 (extensão: 2572)</p>
-			</Col>
-		</Row>
-
-		<div style={{ margin: "1rem", textAlign: "center" }}>
-			<h2>SALAS</h2>
-			<Row
-				style={{
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "flex-end",
-				}}
-			>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 3.03
-						<br />
-						Pavilhão de Informática I
-						<br />
-						Campus Alameda
-						<br />
-						Av. António José de Almeida
-					</p>
-					<iframe
-						title="NEIIST Alameda"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 1.18
-						<br />
-						Campus Taguspark
-						<br />
-						Av. Prof. Doutor Aníbal Cavaco Silva
-					</p>
-					<iframe
-						title="NEIIST Taguspark"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-			</Row>
-		</div>
-
-		<div style={{ margin: "2rem 6rem 2rem 6rem", textAlign: "center" }}>
-			<h2 style={{ textAlign: "center" }}>CORREIO</h2>
-			<p>
-				NEIIST (Núcleo Estudantil de Informática do IST)
-				<br />
-				Departamento de Engenharia Informática
-				<br />
-				Instituto Superior Técnico
-				<br />
-				Av. Rovisco Pais 1, 1049-001 LISBOA
-			</p>
-		</div>
-	</>
+/* In client/src/pages/ContactsPage.module.css */
+.contactsContainer {
+  margin: 2rem 0;
+}
path: client/src/pages/ContactsPage.jsx
user: login: Francisca105
body: Can you take a look at this?
created_at: 2025-04-22T16:10:23Z
author_association: MEMBER
diff_hunk: @@ -1,87 +1,59 @@
 import React from "react";
-import { Row, Col } from "react-bootstrap";
+import MapCard from "../components/contactsPage/MapCard";
+import ContactCard from "../components/contactsPage/ContactCard";
+import styles from './css/ContactsPage.module.css';
 
 const ContactsPage = () => (
-	<>
-		<div style={{ margin: "2rem 6rem 1rem 6rem" }}>
-			<h1 style={{ textAlign: "center" }}>CONTACTOS</h1>
-		</div>
+  <>
+    <div className={styles.container}>
+      <h1 className={styles.header}>CONTACTOS</h1>
+    </div>
 
-		<Row
-			style={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "flex-end",
-			}}
-		>
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>EMAIL</h2>
-				<p>neiist@tecnico.ulisboa.pt</p>
-			</Col>
+    <div className={styles.pageGrid}>
path: client/src/pages/ContactsPage.jsx
user: login: Francisca105
body: Looks good! Just one suggestion: could you consider reordering the contact information to display email and postal address first, rather than the rooms? This could improve the user experience and make it easier for users to find the most important contact details.
created_at: 2025-04-22T16:17:32Z
author_association: MEMBER
diff_hunk: @@ -1,87 +1,59 @@
 import React from "react";
-import { Row, Col } from "react-bootstrap";
+import MapCard from "../components/contactsPage/MapCard";
+import ContactCard from "../components/contactsPage/ContactCard";
+import styles from './css/ContactsPage.module.css';
 
 const ContactsPage = () => (
-	<>
-		<div style={{ margin: "2rem 6rem 1rem 6rem" }}>
-			<h1 style={{ textAlign: "center" }}>CONTACTOS</h1>
-		</div>
+  <>
+    <div className={styles.container}>
+      <h1 className={styles.header}>CONTACTOS</h1>
+    </div>
 
-		<Row
-			style={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "flex-end",
-			}}
-		>
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>EMAIL</h2>
-				<p>neiist@tecnico.ulisboa.pt</p>
-			</Col>
+    <div className={styles.pageGrid}>
+      <MapCard
+        title="Sala 3.03"
+        addressLines={[
+          "Pavilhão de Informática I",
+          "Campus Alameda",
+          "Av. António José de Almeida"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
+      />
+      <MapCard
+        title="Sala 1.18"
+        addressLines={[
+          "Campus Taguspark",
+          "Av. Prof. Doutor Aníbal Cavaco Silva"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
+      />
+    </div>
 
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>TELEFONE</h2>
-				<p>218417000 (extensão: 2572)</p>
-			</Col>
-		</Row>
-
-		<div style={{ margin: "1rem", textAlign: "center" }}>
-			<h2>SALAS</h2>
-			<Row
-				style={{
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "flex-end",
-				}}
-			>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 3.03
-						<br />
-						Pavilhão de Informática I
-						<br />
-						Campus Alameda
-						<br />
-						Av. António José de Almeida
-					</p>
-					<iframe
-						title="NEIIST Alameda"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 1.18
-						<br />
-						Campus Taguspark
-						<br />
-						Av. Prof. Doutor Aníbal Cavaco Silva
-					</p>
-					<iframe
-						title="NEIIST Taguspark"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-			</Row>
-		</div>
-
-		<div style={{ margin: "2rem 6rem 2rem 6rem", textAlign: "center" }}>
-			<h2 style={{ textAlign: "center" }}>CORREIO</h2>
-			<p>
-				NEIIST (Núcleo Estudantil de Informática do IST)
-				<br />
-				Departamento de Engenharia Informática
-				<br />
-				Instituto Superior Técnico
-				<br />
-				Av. Rovisco Pais 1, 1049-001 LISBOA
-			</p>
-		</div>
-	</>
+/* In client/src/pages/ContactsPage.module.css */
+.contactsContainer {
+  margin: 2rem 0;
+}
path: client/src/pages/ContactsPage.jsx
user: login: coderabbitai[bot]
body: @Francisca105 I've examined the issue and confirm it's serious. There are two problems in the ContactsPage.jsx file:

1. The CSS comment and class definition shouldn't be in the JSX file - this is breaking the syntax:
   ```jsx
   /* In client/src/pages/ContactsPage.module.css */
   .contactsContainer {
     margin: 2rem 0;
   }
   ```

2. There's a structural issue with the JSX - the ContactCard components appear to be inside closing div tags without proper opening tags, creating mismatched JSX.

To fix this:
1. Remove the CSS comment and class definition from the JSX file
2. Move the `.contactsContainer` class to the actual CSS module file
3. Fix the JSX structure by properly wrapping the ContactCard components

The corrected JSX structure should look something like this:

```jsx
<>
  <div className={styles.container}>
    <h1 className={styles.header}>CONTACTOS</h1>
  </div>

  <div className={styles.pageGrid}>
    <MapCard ... />
    <MapCard ... />
  </div>

  <div className={styles.contactsGrid}>
    <ContactCard ... />
    <ContactCard ... />
  </div>
</>
```

The current code won't compile and will break the application if deployed.

(｡•ˇ‸ˇ•｡)


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

<!-- <rawResChunk><answer>@Francisca105 I've examined the issue and confirm it's serious. There are two problems in the ContactsPage.jsx file:

1. The CSS comment and class definition shouldn't be in the JSX file - this is breaking the syntax:
   ```jsx
   /* In client/src/pages/ContactsPage.module.css */
   .contactsContainer {
     margin: 2rem 0;
   }
   ```

2. There's a structural issue with the JSX - the ContactCard components appear to be inside closing div tags without proper opening tags, creating mismatched JSX.

To fix this:
1. Remove the CSS comment and class definition from the JSX file
2. Move the `.contactsContainer` class to the actual CSS module file
3. Fix the JSX structure by properly wrapping the ContactCard components

The corrected JSX structure should look something like this:

```jsx
<>
  <div className={styles.container}>
    <h1 className={styles.header}>CONTACTOS</h1>
  </div>

  <div className={styles.pageGrid}>
    <MapCard ... />
    <MapCard ... />
  </div>

  <div className={styles.contactsGrid}>
    <ContactCard ... />
    <ContactCard ... />
  </div>
</>
```

The current code won't compile and will break the application if deployed.

(｡•ˇ‸ˇ•｡)</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-22T16:18:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,87 +1,59 @@
 import React from "react";
-import { Row, Col } from "react-bootstrap";
+import MapCard from "../components/contactsPage/MapCard";
+import ContactCard from "../components/contactsPage/ContactCard";
+import styles from './css/ContactsPage.module.css';
 
 const ContactsPage = () => (
-	<>
-		<div style={{ margin: "2rem 6rem 1rem 6rem" }}>
-			<h1 style={{ textAlign: "center" }}>CONTACTOS</h1>
-		</div>
+  <>
+    <div className={styles.container}>
+      <h1 className={styles.header}>CONTACTOS</h1>
+    </div>
 
-		<Row
-			style={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "flex-end",
-			}}
-		>
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>EMAIL</h2>
-				<p>neiist@tecnico.ulisboa.pt</p>
-			</Col>
+    <div className={styles.pageGrid}>
+      <MapCard
+        title="Sala 3.03"
+        addressLines={[
+          "Pavilhão de Informática I",
+          "Campus Alameda",
+          "Av. António José de Almeida"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
+      />
+      <MapCard
+        title="Sala 1.18"
+        addressLines={[
+          "Campus Taguspark",
+          "Av. Prof. Doutor Aníbal Cavaco Silva"
+        ]}
+        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
+      />
+    </div>
 
-			<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem", textAlign: "center" }}>
-				<h2>TELEFONE</h2>
-				<p>218417000 (extensão: 2572)</p>
-			</Col>
-		</Row>
-
-		<div style={{ margin: "1rem", textAlign: "center" }}>
-			<h2>SALAS</h2>
-			<Row
-				style={{
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "flex-end",
-				}}
-			>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 3.03
-						<br />
-						Pavilhão de Informática I
-						<br />
-						Campus Alameda
-						<br />
-						Av. António José de Almeida
-					</p>
-					<iframe
-						title="NEIIST Alameda"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-				<Col md={5} lg={4} xl={3} style={{ margin: "0.5rem" }}>
-					<p>
-						Sala 1.18
-						<br />
-						Campus Taguspark
-						<br />
-						Av. Prof. Doutor Aníbal Cavaco Silva
-					</p>
-					<iframe
-						title="NEIIST Taguspark"
-						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
-						width="auto"
-						height="300"
-					/>
-				</Col>
-			</Row>
-		</div>
-
-		<div style={{ margin: "2rem 6rem 2rem 6rem", textAlign: "center" }}>
-			<h2 style={{ textAlign: "center" }}>CORREIO</h2>
-			<p>
-				NEIIST (Núcleo Estudantil de Informática do IST)
-				<br />
-				Departamento de Engenharia Informática
-				<br />
-				Instituto Superior Técnico
-				<br />
-				Av. Rovisco Pais 1, 1049-001 LISBOA
-			</p>
-		</div>
-	</>
+/* In client/src/pages/ContactsPage.module.css */
+.contactsContainer {
+  margin: 2rem 0;
+}
+        <ContactCard
+          title="Email"
+          content="neiist@tecnico.ulisboa.pt"
+        />
+        <ContactCard
+          title="Correio"
+					content={
+						<>
+							NEIIST (Núcleo Estudantil de Informática do IST)
+							<br />
+							Departamento de Engenharia Informática
+							<br />
+							Instituto Superior Técnico
+							<br />
+							Av. Rovisco Pais 1, 1049-001 LISBOA
+						</>
+					}
+        />
+      </div>
+    </div>
+  </>
path: client/src/pages/ContactsPage.jsx
user: login: coderabbitai[bot]
body: 

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

<!-- <rawResChunk><answer>@Francisca105 The build is failing because there's CSS code directly inside the JSX file. On line 34, there's a CSS comment `/* In client/src/pages/ContactsPage.module.css */` followed by a CSS class definition, which isn't valid in JSX context.

Here's the fixed version of the component:

```jsx
import React from "react";
import MapCard from "../components/contactsPage/MapCard";
import ContactCard from "../components/contactsPage/ContactCard";
import styles from './css/ContactsPage.module.css';

const ContactsPage = () => (
  <>
    <div className={styles.container}>
      <h1 className={styles.header}>CONTACTOS</h1>
    </div>

    <div className={styles.pageGrid}>
      <MapCard
        title="Sala 3.03"
        addressLines={[
          "Pavilhão de Informática I",
          "Campus Alameda",
          "Av. António José de Almeida"
        ]}
        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2617.0053052397884!2d-9.138373757283224!3d38.737059977104856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933a3aaf6fbeb%3A0x3cf91d3b80a0520b!2sAv.+Rovisco+Pais+1%2C+1049-001+Lisboa!5e0!3m2!1spt-PT!2spt!4v1473459139674"
      />
      <MapCard
        title="Sala 1.18"
        addressLines={[
          "Campus Taguspark",
          "Av. Prof. Doutor Aníbal Cavaco Silva"
        ]}
        mapSrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.1489108761316!2d-9.30531258433926!3d38.737344963967004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1ecef46471ad41%3A0x928a2fedee483006!2sInstituto+Superior+T%C3%A9cnico+-+Taguspark!5e0!3m2!1spt-PT!2spt!4v1473458606512"
      />
    </div>

    <div className={styles.contactsContainer}>
      <ContactCard
        title="Email"
        content="neiist@tecnico.ulisboa.pt"
      />
      <ContactCard
        title="Correio"
        content={
          <>
            NEIIST (Núcleo Estudantil de Informática do IST)
            <br />
            Departamento de Engenharia Informática
            <br />
            Instituto Superior Técnico
            <br />
            Av. Rovisco Pais 1, 1049-001 LISBOA
          </>
        }
      />
    </div>
  </>
);

export default ContactsPage;
```

Make sure the `.contactsContainer` class is defined in your CSS module file (`client/src/pages/css/ContactsPage.module.css`) instead of directly in the JSX.

---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: Francisca105
PR: neiist-dev/neiist-website#467
File: client/src/pages/ContactsPage.jsx:7-56
Timestamp: 2025-04-22T16:18:33.564Z
Learning: CSS code should not be placed directly inside JSX files; it should be placed in separate CSS files (like CSS modules) and imported at the top of the component file.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-22T16:18:34Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-04-22T14:39:25Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

A new modular structure was introduced for the contacts page. Two new React components, `ContactCard` and `LocationCard`, were created to encapsulate contact information and location/map details, respectively. The `ContactsPage` component was refactored to use these components and to replace previous layout elements and inline styles with a CSS module, `ContactsPage.module.css`, which defines grid-based and card-specific styles. The telephone contact was removed, and the contact information is now displayed using the new card components with improved layout and styling.

## Changes

| File(s)                                                                                  | Change Summary                                                                                                    |
|-----------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------|
| `client/src/components/contactsPage/ContactCard.jsx`                                    | Added new `ContactCard` React component for displaying contact information with title and content props.          |
| `client/src/components/contactsPage/LocationCard.jsx`                                   | Added new `LocationCard` React component for displaying room, address, and an embedded map.                      |
| `client/src/pages/ContactsPage.jsx`                                                     | Refactored to use `ContactCard` and `LocationCard` components; removed react-bootstrap, inline styles, and phone.|
| `client/src/pages/css/ContactsPage.module.css`                                          | Added new CSS module with grid and card styles for the contacts page layout.                                      |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant ContactsPage
    participant ContactCard
    participant LocationCard

    User->>ContactsPage: Render page
    ContactsPage->>ContactCard: Render Email contact
    ContactsPage->>ContactCard: Render Postal address
    ContactsPage->>LocationCard: Render location/map info
```

## Poem

> In grids and cards, our contacts now reside,  
> With maps and mail, all details side by side.  
> No more old layouts, no more inline fuss—  
> Just modular style, neat and robust.  
> Hopping forward, the page feels brand new,  
> A rabbit’s delight—sleek, simple, and true!  
> 🐇✨

<!-- walkthrough_end -->
<!-- internal state start -->


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

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

<details>
<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=neiist-dev/neiist-website&utm_content=467):

- 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.`

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 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: CONTRIBUTOR
user: login: inesiscosta
created_at: 2025-04-22T17:07:38Z
body: **How it looks after reordering.**
Not sure how to best account the size difference between email and correio. Currently centered but could be top aligned easily if preferred.
![CleanShot 2025-04-22 at 18 05 52](https://github.com/user-attachments/assets/45d2065b-2611-4646-96d9-6a2083179ec2)

author_association: MEMBER