add powered by namecheap (Xtremilicious#74)

* add sponsor

* add sponsor

Author: Xtremilicious

src/components/Dashboard/Content/Project.js

@@ -28,7 +28,7 @@ const ProjectWrapper = styled.div`
       rgba(255, 255, 255, 0.05) 10.93%,
       rgba(255, 255, 255, 0) 90%
     );
-    backdrop-filter: blur(55px);
+    backdrop-filter: blur(100px);
     :hover {
       box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1);
       background-color: var(--themeDark);

src/components/Dashboard/Sidebar/index.js

@@ -1,31 +1,41 @@
 import React, { Component } from "react";
 import styled from "styled-components";
 
+import nameCheapLogo from "../../../img/powered-by-namecheap-black.png"
+
 import CategoryInfo from "./CategoryInfo";
 import Categories from "./Categories";
 
 const SidebarWrapper = styled.div`
   display: grid;
   position: fixed;
   left: 0;
-  grid-template-rows: 30vh 63vh 7vh;
+  grid-template-rows: 30vh 60vh 10vh;
   width: 20vw;
   .footer {
     display: flex;
     padding-left: 3vh;
     font-size: 1.1vw;
     color: var(--theme-grey);
     align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 16px;
+    a{width: 50%}
   }
 `;
 
 export default class Sidebar extends Component {
   render() {
     return (
       <SidebarWrapper>
-        <CategoryInfo  slug={this.props.slug} color={this.props.color}/>
-        <Categories slug={this.props.slug} url={this.props.url} color={this.props.color}/>
-        <div className="footer">© 2023 ProjectLearn</div>
+        <CategoryInfo slug={this.props.slug} color={this.props.color} />
+        <Categories slug={this.props.slug} url={this.props.url} color={this.props.color} />
+        <div className="footer">© 2023 ProjectLearn<a
+          href="https://www.namecheap.com"
+          className="img-link"
+          target="_blank"
+        ><img src={nameCheapLogo} width={'100%'} alt="Powered by Namecheap" /></a></div>
       </SidebarWrapper>
     );
   }

src/components/Landing/Footer.js

@@ -9,6 +9,10 @@ const FooterWrapper = styled.div`
   padding: 3vh;
   font-size: 1.3vw;
   color: var(--themeTextSecondaryDark);
+  a{
+    display: flex;
+    align-items: center;
+    }
 
   .footer-sponsor{
     display: flex;
@@ -19,7 +23,7 @@ const FooterWrapper = styled.div`
     margin-left: auto;
     display: flex;
     a{
-      display: flex;
+    display: flex;
     align-items: center;
     }
   }
@@ -28,6 +32,9 @@ const FooterWrapper = styled.div`
     color: var(--themeTextSecondaryDark);
     
   }
+  .img-link{
+    width: 11.5%;
+  }
   @media only screen and (min-width: 320px) and (max-width: 480px) {
     margin: 0vh 1vw;
     font-size: 4vw;
@@ -39,13 +46,18 @@ const FooterWrapper = styled.div`
       display: none;
     }
 
-    img{
+    .img-link{
       width: 50%;
     }
     .mobile {
       display: none;
     }
+    .img-link{
+      display: flex;
+      justify-content: center;
+    }
     .footer-content {
+      dis
       margin-right: 0rem;
       margin-left: 3.5vw;
     }
@@ -79,8 +91,13 @@ export default function Footer() {
         >
           Donate
         </a> */}
+
       </div>
-      <img src={nameCheapLogo} width={'14%'} alt="Powered by Namecheap" />
+      <a
+        href="https://www.namecheap.com"
+        className="img-link"
+        target="_blank"
+      ><img src={nameCheapLogo} width={'100%'} alt="Powered by Namecheap" /></a>
     </FooterWrapper>
   );
 }