added Rectangle component

src/App.js

@@ -3,6 +3,7 @@ import axios from "axios";
 import Header from "./Header";
 import TextInput from "./TextInput";
 import Button from "./Button";
+import Rectangle1 from "./Rectangle1";
 import "./App.css";
 
 function App() {
@@ -60,6 +61,11 @@ function App() {
   return (
     <div className="App">
       <Header />
+      <Rectangle1
+        title="Mood Melody"
+        description="Discover music that fits your mood. + add description"
+      />
+
       <TextInput
         value={description}
         onChange={handleInputChange}

src/Rectangle1.css

@@ -0,0 +1,23 @@
+.rectangle {
+    position: relative;
+    width: 1055px;  /* Set the width according to your design */
+    height: 396px;  /* Set the height according to your design */
+    background-color: #d9d9d9;  /* Example background color */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);  /* Optional: adds shadow for depth */
+}
+
+    .rectangle-title {
+    font-size: 32px; /* Larger font size for the title */
+    color: #333;  /* Dark color for text */
+    margin-bottom: 10px;  /* Space between title and description */
+}
+
+  .rectangle-description {
+    font-size: 16px; /* Smaller font size for the description */
+    color: #666;  /* Lighter color for text */
+  }

src/Rectangle1.js

@@ -0,0 +1,16 @@
+import React, { memo } from "react";
+import "./Rectangle1.css"; // Make sure the path to the CSS file is correct
+
+const Rectangle1 = ({
+  title = "Default Title",
+  description = "Default description here.",
+}) => {
+  return (
+    <div className="rectangle">
+      <h1 className="rectangle-title">{title}</h1>
+      <p className="rectangle-description">{description}</p>
+    </div>
+  );
+};
+
+export default memo(Rectangle1);