Add Newsletter Section to Footer (#534)

Please review these changes and approve #512 This PR adds a newsletter subscription section to the footer of the website, allowing users to easily subscribe to our newsletter and stay informed about updates, events, and new content. **Use Case** Allows users to easily subscribe to our newsletter, ensuring they stay informed about updates, events, and new content. Subscribers will receive timely notifications about new features and important announcements directly in their inboxes. **Before** ![Screenshot (337)](https://github.com/user-attachments/assets/c4f8e1b3-af80-4fd0-a346-43bce71a0dfd) **After** ![Screenshot (338)](https://github.com/user-attachments/assets/cb626aa5-8a68-4841-8716-77aef5232c22) If there are any further suggestions or adjustments needed, please let me know.
HimanshuNarware · Aug 9, 2024 · 5ac21b5 · 5ac21b5
2 parents cea9de3 + 4e6584d
commit 5ac21b5
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 15 deletions.
diff --git a/src/Component/Footer.css b/src/Component/Footer.css
@@ -1,11 +1,22 @@
 .footer {
+
+    background-color: #000000;
+    color: #ffffff;
+    padding: 0px 12px;
+    margin-top: 22px;
+
     background-color: #000;
     color: #fff;
     padding: 20px 0;
+
 }
 
 .footer-wrapper {
     display: grid;
+
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 10px;
+
     grid-template-columns: 1fr 2fr;
     gap: 0;
     max-width: 1200px;
@@ -23,6 +34,7 @@
     font-size: 1.8em;
     color: #8a2be2;
     margin-bottom: 10px;
+    margin-left: -52px;
 }
 
 .footer-favicon {
@@ -99,8 +111,8 @@
 
 .footer-social-icons {
     display: flex;
-    gap: 15px;
-    margin: 10px 0;
+    gap: 14px;
+    margin: 14px 22px;
 }
 
 .footer-social-icons a {
@@ -115,9 +127,18 @@
 }
 
 .footer-qr {
+
+    width: 110px;
+    margin: 14 auto 1.5px;
+    margin-left: 1.6rem;
+    display: block;
+    margin-top: 2.8rem;
+
     width: 90px;
     margin: 0 auto;
-    margin-left: 49px;
+    display: block;
+
+
 }
 
 .footer-rate-us {
@@ -141,6 +162,9 @@
 
 .rate-us {
     margin-top: 0.2rem;
+
+    font-size: 20px;
+
     font-size: 1.2em;
     position: relative;
 }
@@ -165,16 +189,12 @@
     padding: 20px 0;
     border-top: 1px solid #333;
     font-size: 0.9em;
+
+    background: linear-gradient(to right, rgba(204, 204, 204, 0), #8a2be2, rgba(204, 204, 204, 0)); /* Gradient effect */
+
     font-style: italic;
-}
+    max-height: 10px;
 
-.footer-link-icon {
-    font-size: 16px;
-    color: #8a2be2;
-    background: none;
-    border: none;
-    padding: 0;
-    margin-right: 8px;
 }
 
 @media screen and (max-width: 768px) {
@@ -208,14 +228,36 @@
         margin: 0 auto 10px;
     }
 
+
+.icons:nth-child(5) a::after {
+    background: linear-gradient(
+         40deg,
+         rgb(0, 255, 255),
+         rgb(0, 191, 255),
+         rgb(0, 128, 255),
+         rgb(0, 64, 255)
+    );
+}
+
+.icons:nth-child(3) a::after {
+    background: linear-gradient(
+         40deg,
+         rgb(95, 0, 140),
+         rgb(95, 0, 140),
+         rgb(27, 1, 39),
+         rgb(27, 1, 39)
+    );
+}
     .footer-rate-us {
         margin: 0 auto;
     }
-
-    .rate-us {
-        margin-top: 5px;
-        margin-left: 0;
+    .footer-star-icon {
+        display: inline-flex;
+        align-items: center;
     }
+
+
+
 }
 
 @media screen and (max-width: 600px) {
@@ -248,3 +290,42 @@
         font-size: 0.9em;
     }
 }
+
+/* Newsletter section */
+.footer-newsletter {
+    display: flex;
+    flex-direction: column;
+}
+
+body .footer-newsletter input[type="email"] {
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    width: 170px;
+    height: 40px;
+    background-color: white; /* Background color set to white */
+    color: black; /* Font color set to black */
+    border: 2px solid white; /* Optional: border color for better visibility */
+}
+body .footer-newsletter input[type="email"]::placeholder {
+    color: grey; /* Placeholder font color set to black */
+}
+.footer-newsletter button {
+    width: 170px; /* Width same as input */
+    height: 40px; /* Height same as input */
+    font-size: 16px; /* Font size set */
+    color: #ffffff; /* Font color set to white */
+    background-color: #8a2be2; /* Background color set */
+    border: 2px solid white; /* Border color set */
+    border-radius: 4px; /* Border radius set */
+    cursor: pointer; /* Pointer cursor for hover effect */
+    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+    display: inline-block; /* Ensures the button fits its content */
+    line-height: normal; /* Ensures proper line height */
+    padding: 0; /* Removes additional padding */
+}
+
+.footer-newsletter button:hover {
+    background-color: #5d1783; /* Background color change on hover */
+}
diff --git a/src/Component/Footer.jsx b/src/Component/Footer.jsx
@@ -8,6 +8,7 @@ import { FaXTwitter } from "react-icons/fa6";
 
 function Footer() {
   const currentYear = new Date().getFullYear();
+
   return (
     <footer className="footer">
       <div className="footer-wrapper">
@@ -20,6 +21,41 @@ function Footer() {
             CareerZunction is a dynamic platform connecting eager students with valuable internship opportunities.
           </p>
         </div>
+
+        <div className="footer-section">
+          <h4 className="footer-heading">Documentation</h4>
+          <ul className="footer-links">
+            <li onClick={() => window.open('https://opensource.com/resources/what-open-source')}>
+              <span>What is Open-Source</span>
+            </li>
+            <li onClick={() => window.open('https://opensource.guide/how-to-contribute/')}>
+              <span>What is Git and GitHub</span>
+            </li>
+            <li onClick={() => window.open('https://docs.github.com/en/get-started/using-git/about-git')}>
+              <span>How to start contributing to Open-Source</span>
+            </li>
+          </ul>
+        </div>
+        <div className="footer-section">
+          <h4 className="footer-heading">Legal</h4>
+          <ul className="footer-links">
+            <li><span><a href="/privacypolicy">Privacy Policy</a></span></li>
+            <li><span><a href="/terms">Terms and Conditions</a></span></li>
+            <li><span><a href="/licensing">MIT License</a></span></li>
+            <li><span><a href="/codeofconduct">Code of Conduct</a></span></li>
+          </ul>
+          <h4 className="footer-heading">Get in touch</h4>
+          <div className="footer-social-icons">
+            <a href="https://github.com/HimanshuNarware" target="_blank" rel="noopener noreferrer">
+              <FaGithub/>
+            </a>
+            <a href="https://www.linkedin.com/in/HimanshuNarware/" target="_blank" rel="noopener noreferrer">
+              <FaLinkedin/>
+            </a>
+            <a href="https://twitter.com/N_Himanshu_" target="_blank" rel="noopener noreferrer">
+              <FaXTwitter/>
+            </a>
+=======
         <div className="footer-section footer-section-links">
           <div className="footer-subsection">
             <h4 className="footer-heading">
@@ -71,6 +107,14 @@ function Footer() {
             </div>
           </div>
         </div>
+        <div className="footer-section footer-newsletter">
+          <h4 className="footer-heading">Newsletter</h4>
+          <input
+            type="email"
+            placeholder="Enter your email"
+          />
+          <button>Subscribe</button>
+        </div>
       </div>
       <div className="copy">
         &copy; {currentYear} All rights reserved. Made with 💜 by CareerZunction.