Merge branch 'HimanshuNarware:main' into red-ant

HimanshuNarware · Jul 1, 2024 · de69e49 · de69e49
2 parents e9f759f + 1895240
commit de69e49
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 58 deletions.
diff --git a/frontend/src/Component/Contact.jsx b/frontend/src/Component/Contact.jsx
@@ -1,63 +1,71 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLinkedin, faGithub } from "@fortawesome/free-brands-svg-icons";
+import Lottie from "lottie-react";
+import animationData from "../lottie/contact.json"; 
 import "../style/Contact.css";
+
 const Contact = () => {
   return (
     <div className="contact-container">
-      <h1 className="contact-heading">Contact Us</h1>
-      <p className="contact-description">
-        Please fill out the form below to get in touch with us.
-      </p>
-      <form className="contact-form">
-        <div className="form-group">
-          <label htmlFor="name" className="form-label">
-            Name:
-          </label>
-          <input type="text" id="name" name="name" className="form-input" />
-        </div>
+      <div className="lottie-container">
+        <Lottie animationData={animationData} loop={true} style={{height:'500px'}}/>
+      </div>
+      <div className="contact-content">
+        <h1 className="contact-heading">Contact Us</h1>
+        <p className="contact-description">
+          Please fill out the form below to get in touch with us.
+        </p>
+        <form className="contact-form">
+          <div className="form-group">
+            <label htmlFor="name" className="form-label">
+              Name:
+            </label>
+            <input type="text" id="name" name="name" className="form-input" />
+          </div>
 
-        <div className="form-group">
-          <label htmlFor="email" className="form-label">
-            Email:
-          </label>
-          <input type="email" id="email" name="email" className="form-input" />
-        </div>
+          <div className="form-group">
+            <label htmlFor="email" className="form-label">
+              Email:
+            </label>
+            <input type="email" id="email" name="email" className="form-input" />
+          </div>
 
-        <div className="form-group">
-          <label htmlFor="message" className="form-label">
-            Message:
-          </label>
-          <textarea
-            id="message"
-            name="message"
-            rows="4"
-            className="form-textarea"
-          />
-        </div>
+          <div className="form-group">
+            <label htmlFor="message" className="form-label">
+              Message:
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              rows="4"
+              className="form-textarea"
+            />
+          </div>
 
-        <button type="submit" className="submit-button">
-          Submit
-        </button>
-      </form>
+          <button type="submit" className="submit-button">
+            Submit
+          </button>
+        </form>
 
-      <div className="social-links">
-        <a
-          href="https://www.linkedin.com/in/himanshunarware/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="social-link"
-        >
-          <FontAwesomeIcon icon={faLinkedin} className="social-icon" />
-        </a>
-        <a
-          href="https://github.com/HimanshuNarware/Devlabs"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="social-link"
-        >
-          <FontAwesomeIcon icon={faGithub} className="social-icon" />
-        </a>
+        <div className="social-links">
+          <a
+            href="https://www.linkedin.com/in/himanshunarware/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="social-link"
+          >
+            <FontAwesomeIcon icon={faLinkedin} className="social-icon" />
+          </a>
+          <a
+            href="https://github.com/HimanshuNarware/Devlabs"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="social-link"
+          >
+            <FontAwesomeIcon icon={faGithub} className="social-icon" />
+          </a>
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js
@@ -99,6 +99,17 @@ function Footer() {
               <div className="text-center fs-6 my-3 ">
                 COPYRIGHT © Devlaps 2024 | <br /> MAINTAINED BY HIMANSHU NARWARE
               </div>
+
+              <div className="text-center mb-2">
+                <a href="https://github.com/sponsors/HimanshuNarware" target="_blank">
+                  <img
+                    src="https://badgen.net/badge/icon/github?icon=github&label=Sponsor&color=orange"
+                    alt="Sponsor Me on GitHub"
+                    style={{ height: '30px', width: 'auto' }}
+                  />
+                </a>
+              </div>
+
               <div className="footer-icon mb-2">
                 <a
                   href="https://www.linkedin.com/in/himanshunarware/"

diff --git a/frontend/src/DB/product.json b/frontend/src/DB/product.json
@@ -90,6 +90,13 @@
     "link":"https://shorturl.at/jofAl",
     "description":"FreeConvert's video compressor is a user-friendly tool that helps you reduce the file size of your videos without compromising on quality."
   },
+  {
+    "productName":"Essay Flow",
+    "category":"tools",
+    "image":"https://shorturl.at/RDfpQ",
+    "link":"https://essayflow.ai/",
+    "description":"Create Human-like Essays with Our Undetectable AI Essay Writer"
+  },
   {
     "productName":"Interview warmup Google",
     "category":"tools",
@@ -3426,7 +3433,10 @@
    "category": "extension",
    "image": "https://cdn.prod.website-files.com/635c591378332f38be25d45f/63a1152ff687d737b6b93250_Careerflow%20logo%20240x240.png",
    "link": "https://www.careerflow.ai/",
-   "description": "AI Career Copilot. Automated Job Tracking, Optimize your LinkedIn Profile, AI Resume Builder and more. Keep track of all your jobs opportunities, applications, notes, contacts, in one single dashboard."=======
+   "description": "AI Career Copilot. Automated Job Tracking, Optimize your LinkedIn Profile, AI Resume Builder and more. Keep track of all your jobs opportunities, applications, notes, contacts, in one single dashboard."
+    },
+    {
+
     "productName": "AdobeXD",
     "category": "UI",
     "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80OChMU7lMUMwU7CVu4ZJl1irvee4jmFfjw&s",

diff --git a/frontend/src/lottie/contact.json b/frontend/src/lottie/contact.json
diff --git a/frontend/src/style/Contact.css b/frontend/src/style/Contact.css
@@ -1,19 +1,33 @@
 /* Contact.css */
 
 .contact-container {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 2rem;
-    text-align: center;
-  }
-
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  padding: 20px;
+  align-items: center;
+}
+
+.lottie-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.contact-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top:100px;
+  width:500px;
+}
+
   .contact-heading {
     font-size: 2.5rem;
     margin-bottom: 1rem;
   }
 
   .contact-description {
-    margin-top: 10%;
+    /* margin-top: 10%; */
     font-size: 1.2rem;
     margin-bottom: 2rem;
   }
@@ -78,4 +92,4 @@
 
   .social-link:hover {
     color: #5e4b4b;
-  }
+  }