From 3fabdd64dfa4299e18960f28cebbf0c7767c3689 Mon Sep 17 00:00:00 2001
From: muhammadharoun <hro19502001@gmail.com>
Date: Tue, 2 Nov 2021 16:42:12 +0200
Subject: [PATCH 1/2] create home images

---
 .../components/ImageSection/ImageSection.js   | 28 +++++++++++++++++++
 .../components/ImageSection/imageSection.css  | 25 +++++++++++++++++
 client/src/index.js                           |  3 +-
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/ImageSection/ImageSection.js
 create mode 100644 client/src/components/ImageSection/imageSection.css

diff --git a/client/src/components/ImageSection/ImageSection.js b/client/src/components/ImageSection/ImageSection.js
new file mode 100644
index 0000000..933d6a8
--- /dev/null
+++ b/client/src/components/ImageSection/ImageSection.js
@@ -0,0 +1,28 @@
+import './imageSection.css';
+
+function imageSection({ arr }) {
+  const mainImage = arr[0];
+  const images = arr.slice(1);
+  return (
+    <section className="main">
+      <section className="bigImage">
+        <img
+          src={mainImage}
+          alt="home"
+          loading="lazy"
+        />
+      </section>
+      <section className="anotherImage">
+        {images.map((item) => (
+          <img
+            src={item}
+            alt="home"
+            loading="lazy"
+          />
+        ))}
+      </section>
+    </section>
+  );
+}
+
+export default imageSection;
diff --git a/client/src/components/ImageSection/imageSection.css b/client/src/components/ImageSection/imageSection.css
new file mode 100644
index 0000000..68c6dbf
--- /dev/null
+++ b/client/src/components/ImageSection/imageSection.css
@@ -0,0 +1,25 @@
+.main{
+    display: flex;
+    width: 80%;
+    height: 60vh;
+}
+.bigImage{
+    width: 70%;
+}
+.bigImage img{
+    min-width: 100%;
+    max-height: 100%
+}
+.anotherImage{
+    display: flex;
+    flex-direction:column;
+    width: 30%;
+    justify-content: space-between
+
+}
+.anotherImage img{
+    min-width: 100%;
+    min-height: 30%;
+    margin-left:10px;
+    /* margin-top: 10px; */
+}
\ No newline at end of file
diff --git a/client/src/index.js b/client/src/index.js
index 62adcf3..f452ad2 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -7,6 +7,5 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
-

From 3344af241f2091a0fc432eb14612e65ada23e141 Mon Sep 17 00:00:00 2001
From: muhammadharoun <hro19502001@gmail.com>
Date: Thu, 4 Nov 2021 12:47:35 +0200
Subject: [PATCH 2/2] change func name add margin

---
 client/src/components/ImageSection/ImageSection.js  | 4 ++--
 client/src/components/ImageSection/imageSection.css | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/ImageSection/ImageSection.js b/client/src/components/ImageSection/ImageSection.js
index 933d6a8..774b7a5 100644
--- a/client/src/components/ImageSection/ImageSection.js
+++ b/client/src/components/ImageSection/ImageSection.js
@@ -1,6 +1,6 @@
 import './imageSection.css';
 
-function imageSection({ arr }) {
+function ImageSection({ arr }) {
   const mainImage = arr[0];
   const images = arr.slice(1);
   return (
@@ -25,4 +25,4 @@ function imageSection({ arr }) {
   );
 }
 
-export default imageSection;
+export default ImageSection;
diff --git a/client/src/components/ImageSection/imageSection.css b/client/src/components/ImageSection/imageSection.css
index 68c6dbf..0a81431 100644
--- a/client/src/components/ImageSection/imageSection.css
+++ b/client/src/components/ImageSection/imageSection.css
@@ -21,5 +21,6 @@
     min-width: 100%;
     min-height: 30%;
     margin-left:10px;
-    /* margin-top: 10px; */
+    margin-bottom: 6px;
+
 }
\ No newline at end of file