added header image and fix the position of footer elements

Signed-off-by: AbhijeetDev102 <mns102720@gmail.com>

Author: AbhijeetDev102

README.md

@@ -1,3 +1,12 @@
+<p style="text-align:center;" align="center">
+      <picture align="center">
+         <source media="(prefers-color-scheme: dark)" srcset=".github/readme/images/layer5-light-no-trim.svg">
+         <source media="(prefers-color-scheme: light)" srcset=".github/readme/images/layer5-no-trim.svg">
+         <img align="center" src=".github/readme/images/layer5-no-trim.svg" alt="Shows a dark layer5 logo in light mode and a white logo in dark mode" width="45%"/>
+      </picture>
+</p>
+
+
 <p align="center">
 <a href="https://github.com/layer5io/docs/graphs/contributors" alt="GitHub contributors">
 <img src="https://img.shields.io/github/contributors/layer5io/layer5.svg" /></a>
@@ -545,13 +554,11 @@ The files included in this repository are licensed under the MIT license.
 
 ## Join the Community!
 
-
-
 <a name="contributing"></a><a name="community"></a>
 Our projects are community-driven and open to collaboration. 👍 Be sure to see the <a href="https://layer5.io/community/newcomers">Layer5 Community Welcome Guide</a> for a tour of resources available to you. You can also join our <a href="http://slack.layer5.io">Slack</a> to get involved.
 
 <p style="clear:both;">
-<a href ="https://layer5.io/community/meshmates"><img alt="MeshMates" src=".github/readme/images/layer5-community-sign.png" style="margin-right:10px; margin-bottom:15px;" width="28%" align="left"/></a>
+<a href ="https://layer5.io/community/meshmates"><img alt="MeshMates" src="https://raw.githubusercontent.com/layer5io/mui-datatables/refs/heads/master/.github/readme/images/layer5-community-sign.png" style="margin-right:10px; margin-bottom:15px;" width="28%" align="left"/></a>
 <h3>Find your MeshMate</h3>
 
 <p>
@@ -560,28 +567,40 @@ Our projects are community-driven and open to collaboration. 👍 Be sure to see
 </p>
 
 Find out more on the <a href="https://layer5.io/community">Layer5 community</a>. <br />
-<br /><br /><br /><br />
+
 </p>
+<br /><br />
+<!-- <div>&nbsp;</div> -->
 
-<div>&nbsp;</div>
 
-<a href="https://slack.layer5.io">
 
-<picture align="right">
-  <source media="(prefers-color-scheme: dark)" srcset=".github/readme/images/slack-dark-128.png"  width="110px" align="right" style="margin-left:10px;margin-top:10px;">
-  <source media="(prefers-color-scheme: light)" srcset=".github/readme/images/slack-128.png" width="110px" align="right" style="margin-left:10px;padding-top:5px;">
-  <img alt="Slack logo" src=".github/readme/images//slack-128.png" width="110px" align="right" style="margin-left:10px;padding-top:13px;">
-</picture>
-</a>
+
+<div style="display: flex; justify-content: center; align-items:center;">
 <div>
-<a href="https://layer5.io/community"><img alt="Layer5 Community" src=".github/readme/images//community.svg" style="margin-right:8px;padding-top:9px;" width="140px" align="left" /></a>
+<a href="https://layer5.io/community"><img alt="Layer5 Community" src="https://raw.githubusercontent.com/layer5io/mui-datatables/refs/heads/master/.github/readme/images//community.svg" width="140px" style="margin-right:36px; margin-bottom:7px;" width="140px" align="left" /></a>
+</div>
+
+<div style="width:60%; padding-left: 16px; padding-right: 16px">
 <p>
 ✔️ <em><strong>Join</strong></em> any or all of the weekly meetings on <a href="https://calendar.google.com/calendar/b/1?cid=bGF5ZXI1LmlvX2VoMmFhOWRwZjFnNDBlbHZvYzc2MmpucGhzQGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20">Community calendar</a>.<br />
 ✔️ <em><strong>Watch</strong></em> community <a href="https://www.youtube.com/playlist?list=PL3A-A6hPO2IMPPqVjuzgqNU5xwnFFn3n0">meeting recordings</a>.<br />
 ✔️ <em><strong>Access</strong></em> the <a href="https://drive.google.com/drive/u/4/folders/0ABH8aabN4WAKUk9PVA">Community Drive</a> by completing a community <a href="https://layer5.io/newcomer">Member Form</a>.<br />
 ✔️ <em><strong>Discuss</strong></em> in the <a href="https://discuss.layer5.io">Community Forum</a>.<br />
 ✔️ <em><strong>Explore more</strong></em> in the <a href="https://layer5.io/community/handbook">Community Handbook</a>.<br />
 </p>
+</div><br /><br />
+
+<div>
+<a href="https://slack.layer5.io">
+
+<picture align="right">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/layer5io/mui-datatables/refs/heads/master/.github/readme/images/slack-dark-128.png"  width="110px" align="right" style="margin-left:10px;margin-top:10px;">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/layer5io/mui-datatables/refs/heads/master/.github/readme/images/slack-128.png" width="110px" align="right" style="margin-left:10px;padding-top:5px;">
+  <img alt="Slack logo" src="https://raw.githubusercontent.com/layer5io/mui-datatables/refs/heads/master/.github/readme/images//slack-128.png" width="110px" align="right" style="margin-left:10px;padding-top:13px;">
+</picture>
+</a>
 </div>
-<p align="center">
-<i>Not sure where to start?</i> Grab an open issue with the <a href="https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+(org%3Alayer5io+OR+org%3Ameshery+OR+org%3Alayer5labs+OR+org%3Aservice-mesh-performance+OR+org%3Aservice-mesh-patterns+OR+org%3Ameshery-extensions)+label%3A%22help+wanted%22">help-wanted label</a>.</p>
+</div>
+<br /><br />
+<p align="left">
+&nbsp;&nbsp;&nbsp;&nbsp; <i>Not sure where to start?</i> Grab an open issue with the <a href="https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+(org%3Alayer5io+OR+org%3Ameshery+OR+org%3Alayer5labs+OR+org%3Aservice-mesh-performance+OR+org%3Aservice-mesh-patterns+OR+org%3Ameshery-extensions)+label%3A%22help+wanted%22">help-wanted label</a>.</p>