feat(): updated footer for CNCF (#179)

Co-authored-by: fireant <fireant@society>

src/theme/Footer/footer.css

@@ -1,15 +1,170 @@
-.text-center {
-    text-align: center !important;
-}
 .av-copyright-footer {
-    border-top: 1px solid hsla(0,0%,100%,.2);
-    margin-top: 4rem;
-    color: #d4d4d5;
-    display: flex;
+  font-size: 14px;
+  background: #12153e;
+  display: inline-block !important;
+  text-align: center;
+ margin:4rem 0 0 0 !important 
+}
+
+.main-wrapper {
+  padding: 80px 24px !important;
+  display: flex;
+  flex-direction: column;
+  gap: 80px;
+}
+
+.title-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  align-items: center;
+  justify-content: center;
+}
+
+.title-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  font-size: 32px;
+  font-weight: 600;
+  line-height: normal;
+  color: #fff;
+}
+
+.image-wrapper {
+  display: flex;
+  gap: 15px;
+}
+
+.description {
+  color: #d3dbf9;
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+  max-width: 850px;
+  text-align: center;
+}
+
+.footer-bottom {
+  display: flex;
+  gap: 224px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.terms-and-privacy-text-wrapper {
+  display: flex;
+  gap: 56px;
+}
+
+.footer-text {
+  color: #d3dbf9;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.footer-text a {
+  color: #d3dbf9;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.social-icons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.social-icons a {
+  text-decoration: none;
+}
+
+/* @media (max-width: 1440px) {
+    .av-copyright-footer{
+        max-width: 1440px;
+       
+    }
+  } */
+
+@media (max-width: 1230px) {
+  .footer-bottom {
+    gap: 80px;
+  }
+  .terms-and-privacy-text-wrapper {
+    gap: 20px;
+  }
+}
+
+@media (max-width: 1024px) {
+    .av-copyright-footer {
+      width:102% !important 
+     }
+   .description{
+    max-width:700px
+   }
+  }
+
+@media (max-width: 903px) {
+  .main-wrapper {
+    padding: 40px 24px !important;
+    gap: 60px;
+  }
+  .title {
+    font-size: 24px;
+  }
+  .title-container {
+    gap: 16px;
+  }
+  .title-container img {
+    width: 310px;
+  }
+  .footer-bottom {
+    flex-direction: column-reverse;
+    gap: 16px;
+    align-items: center;
     justify-content: center;
-    font-size: 14px;
-    background: #12153e;
-    display: inline-block !important;
-    width: 100%;
-    padding: 1rem 1rem 10px;
+  }
+  .terms-and-privacy-text-wrapper {
+    gap: 16px;
+  }
+  .description {
+    font-size: 16px;
+  }
 }
+
+@media (max-width: 800px ) {
+    .description{
+     max-width:500px
+    }
+   }
+
+   @media (max-width: 610px ) {
+    .av-copyright-footer {
+      width:103% !important 
+     }
+    .title {
+       padding:0 24px;
+      }
+    .description{
+     max-width:400px;
+     padding:0 24px;
+    }
+    .title-container img {
+        width: 250px;
+      }
+   }
+
+   @media (max-width: 500px ) {
+    .av-copyright-footer {
+      width:104% !important 
+     }
+
+   }

src/theme/Footer/index.js

@@ -1,10 +1,79 @@
-import React from 'react';
-import './footer.css'
+import React from "react";
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import "./footer.css";
+
 function Footer() {
-  return (
-      <div className="row av-copyright-footer text-center">Copyright © Avesha {new Date().getFullYear()}. All rights reserved.&nbsp; <a
-          href="https://avesha.io/terms-and-condition/">Terms and Conditions</a>&nbsp;&nbsp;and&nbsp; <a
-          href="https://avesha.io/privacy-policy/">Privacy Policy</a></div>
-  );
+    return (
+        <div className="row av-copyright-footer">
+            <div className="main-wrapper">
+                <div className="title-wrapper">
+                    <div className="title-container">
+                        <span className="title">KubeSlice is a CNCF Sandbox Project</span>
+                        <img
+                            src={useBaseUrl('/img/cncf.svg')}
+                            alt="cloud native logo"
+                            width={400}
+                        />
+                    </div>
+                    <div className="description">
+                        The Linux Foundation® (TLF) has registered trademarks and uses
+                        trademarks. For a list of TLF trademarks, see{" "}
+                        <a href="https://www.linuxfoundation.org/legal/trademark-usage" target="_blank">
+                            Trademark Usage.
+                        </a>
+                    </div>
+                </div>
+                <div className="footer-bottom">
+                    <div className="footer-text">
+                        @{new Date().getFullYear()} KubeSlice Authors All rights reserved.
+                    </div>
+                    <div className="terms-and-privacy-text-wrapper">
+                        <div className="footer-text">
+                            {" "}
+                            <a href="https://avesha.io/terms-and-condition/">
+                                Terms and Conditions
+                            </a>
+                        </div>
+                        <div className="footer-text">
+                            <a href="https://avesha.io/privacy-policy/">Privacy Policy</a>
+                        </div>
+                    </div>
+                    <div className="social-icons">
+                        <a href="https://twitter.com/AveshaSystems" target="_blank">
+                            <div>
+                                <img
+                                    alt="twitter logo"
+                                    src={useBaseUrl('/img/x.svg')}
+                                    height={16}
+                                    width={20}
+                                />
+                            </div>
+                        </a>
+                        <a href="https://www.linkedin.com/company/avesha" target="_blank">
+                            <div>
+                                <img src={useBaseUrl('/img/linked-in.svg')} alt="linkedin logo" />
+                            </div>
+                        </a>
+                        <a
+                            href="https://aveshaio.slack.com/join/shared_invite/zt-14xe5bixi-GwaCGVLE5VRs0o0ATGW4hQ#/shared-invite/email"
+                            target="_blank"
+                        >
+                            <div>
+                                <img src={useBaseUrl('/img/slack.svg')} alt="slack logo" />
+                            </div>
+                        </a>
+                        <a
+                            href="https://www.youtube.com/channel/UCtMSqfUzbv33CasQ8mzlSPw"
+                            target="_blank"
+                        >
+                            <div>
+                                <img src={useBaseUrl('/img/youtube.svg')} alt="youtube logo" />
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
 }
 export default React.memo(Footer);