PatilHarshh · Blacksujit · Aug 1, 2024 · Aug 1, 2024 · Aug 11, 2024
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+/Video.mp4 filter=lfs diff=lfs merge=lfs -text
diff --git a/client/index.html b/client/index.html
@@ -1,16 +1,36 @@
 <!DOCTYPE html>
 <html lang="en" class="dark">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Job Finder | Find Dream Job</title>
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Job Finder | Find Dream Job</title>
+    <script>
+      window.addEventListener('mouseover', initLandbot, { once: true });
+      window.addEventListener('touchstart', initLandbot, { once: true });
+      var myLandbot;
+      function initLandbot() {
+        if (!myLandbot) {
+          var s = document.createElement('script');s.type = 'text/javascript';s.async = true;
+          s.addEventListener('load', function() {
+            var myLandbot = new Landbot.Livechat({
+              configUrl: 'https://storage.googleapis.com/landbot.online/v3/H-2570410-5IMLQN9C79BYAUD4/index.json',
+            });
+          });
+          s.src = 'https://cdn.landbot.io/landbot-3/landbot-3.0.0.js';
+          var x = document.getElementsByTagName('script')[0];
+          x.parentNode.insertBefore(s, x);
+        }
+      }
+      </script>
 </head>
 
 <body >
   <div id="root"></div>
   <script type="module" src="./src/main.jsx"></script>
 </body>
 
-</html>
+</html>
+
+
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -21,6 +21,7 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
+    "framer-motion": "^11.3.24",
     "html2canvas": "^1.4.1",
     "html2pdf": "^0.0.11",
     "html2pdf.js": "^0.10.1",

diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -127,12 +127,13 @@ function App() {
         <Route path="/" element={<Navigate to="/find-jobs" replace={true} />} />
       </Routes>
       <BiArrowToTop
-        className="fixed bottom-4 right-4 border rounded-full p-1"
-        size={50}
-        onClick={() => {
-          window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
-        }}
-      />
+  className="fixed bottom-24 right-4 border   rounded-full p-3 bg-white shadow-lg z-50 cursor-pointer"
+  size={50}
+  onClick={() => {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }}
+/>
+
       {user && <Footer />}
     </main>
   );

diff --git a/client/src/pages/blogs.jsx b/client/src/pages/blogs.jsx
@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from 'react';
+// added one dependancy for framer motion and animations 
+import { motion } from 'framer-motion';
 
 const BlogGrid = () => {
   const [posts, setPosts] = useState([]);
@@ -11,7 +13,6 @@ const BlogGrid = () => {
     fetch(`https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/tag/jobs&api_key=${apiKey}`, {
       headers: {
         'Content-Type': 'application/json',
-        // Add other headers if required by the API
       },
     })
       .then((response) => {
@@ -30,29 +31,66 @@ const BlogGrid = () => {
       });
   }, []);
 
-  if (loading) return <div>Loading...</div>;
-  if (error) return <div>Error fetching data: {error.message}</div>;
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 p-5">
-      {posts.map((post) => (
-        <div key={post.guid} className="p-4 pt-2 text-center w-full box-border border border-gray-300 rounded bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:text-white">
-          {post.thumbnail && <img src={post.thumbnail} alt={post.title} className="max-w-full h-auto mb-2" />}
-          <h2 className="text-lg pt-2 mb-2">{post.title}</h2>
-          <p className="text-sm pt-2 mb-2">{new Date(post.pubDate).toLocaleDateString()}</p>
-          <p className="text-sm mb-2 pt-2 overflow-hidden  text-ellipsis line-clamp-3" dangerouslySetInnerHTML={{ __html: post.description }}></p>
-          <a
-            href={post.link}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-block mt-2 pt-2 px-4 py-2 bg-blue-600 text-white no-underline rounded hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
-          >
-            Read More
-          </a>
+  if (loading) return <div className="text-center text-xl py-10 animate-pulse">Loading...</div>;
+  if (error) return <div className="text-center text-xl py-10 text-red-600">Error fetching data: {error.message}</div>;
+//------------------------- added some colors for distinct animations and graphics and hover effects--------------------------------------
+return (
+  <div className="min-h-screen bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 p-8">
+      <div className="max-w-screen-xl mx-auto">
+        <motion.h1 
+          className="text-5xl font-extrabold text-center mb-16 text-gray-900 dark:text-white"
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          Latest Job Articles
+        </motion.h1>
+        <div className="grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {posts.map((post, index) => (
+            <motion.div 
+            key={post.guid} 
+            className="relative bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
+            initial={{ opacity: 0, x: index % 2 === 0 ? -100 : 100 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: index * 0.1, duration: 0.8 }}
+              whileHover={{ scale: 1.05, rotate: 0.5 }}
+              whileTap={{ scale: 0.95 }}
+              >
+              {post.thumbnail && (
+                <motion.img 
+                src={post.thumbnail} 
+                alt={post.title} 
+                className="w-full h-64 object-cover transition-transform duration-700 hover:scale-110"
+                />
+              )}
+              <div className="p-6 flex flex-col h-full">
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                  {post.title}
+                </h2>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                  {new Date(post.pubDate).toLocaleDateString()}
+                </p>
+                <p
+                  className="text-sm text-gray-700 dark:text-gray-300 mb-6 overflow-hidden text-ellipsis line-clamp-3"
+                  dangerouslySetInnerHTML={{ __html: post.description }}
+                ></p>
+                <motion.a
+                  href={post.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mt-auto block text-center py-2 px-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold rounded-lg hover:bg-gradient-to-r hover:from-pink-500 hover:to-purple-500 transition-all duration-300 transform hover:scale-105"
+                  whileHover={{ scale: 1.1 }}
+                >
+                  Read More
+                </motion.a>
+              </div>
+            </motion.div>
+          ))}
         </div>
-      ))}
+      </div>
     </div>
   );
 };
 
-export default BlogGrid;
+//------------------------- added some colors for distinct animations and graphics and hover effects--------------------------------------
+export default BlogGrid;