jobs update

Author: codeaashu

src/Page/OpportunitiesHub/JobsList.jsx

@@ -484,6 +484,105 @@ const Jobs4 = () => {
   );
 };
 
+const Jobs5 = () => {
+  const cardUrl = 'https://www.devdisplay.org/Jobs#Google-SDE-III';
+  return (
+    <div id="Google-SDE-III" className="group relative mx-auto w-full max-w-[30rem]">
+      <div className="relative overflow-hidden rounded-2xl bg-slate-950 shadow-2xl transition-all duration-300 hover:-translate-y-2 hover:shadow-emerald-500/10">
+        <div className="absolute -left-16 -top-16 h-32 w-32 rounded-full bg-gradient-to-br from-emerald-500/20 to-teal-500/0 blur-2xl transition-all duration-500 group-hover:scale-150 group-hover:opacity-70" />
+        <div className="absolute -bottom-16 -right-16 h-32 w-32 rounded-full bg-gradient-to-br from-blue-500/20 to-indigo-500/0 blur-2xl transition-all duration-500 group-hover:scale-150 group-hover:opacity-70" />
+        <div className="relative p-6">
+          <div className="flex items-start justify-between">
+            <div className="flex gap-4">
+              <div className="relative flex h-16 w-16 items-center justify-center rounded-2xl bg-white/20 p-2 backdrop-blur-md">
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
+                <img src="/assets/Company/Google.png" alt="Custom Icon" className="h-15 w-15" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-white">SDE III, Google Cloud</h3>
+                <div className="mt-1 flex items-center gap-2">
+                  <span className="text-sm text-slate-400">Google</span>
+                  <span className="inline-block h-1 w-1 rounded-full bg-slate-400" />
+                </div>
+              </div>
+            </div>
+            <button className="group/save flex h-10 w-10 items-center justify-center rounded-xl bg-slate-900 transition-colors hover:bg-slate-800">
+              <svg
+                className="h-5 w-5 text-slate-400 transition-colors group-hover/save:text-emerald-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M3 17l6-6 4 4 8-8" />
+              </svg>
+            </button>
+          </div>
+          <div className="mt-6 flex flex-wrap gap-2">
+            {/* <span className="inline-flex items-center gap-1 rounded-lg bg-emerald-500/10 px-3 py-1 text-sm text-emerald-500">
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
+                />
+              </svg>
+              $200K – $300K
+            </span> */}
+            <span className="inline-flex items-center gap-1 rounded-lg bg-blue-500/10 px-3 py-1 text-sm text-blue-500">
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 2C8.686 2 6 4.686 6 8c0 5.25 6 12 6 12s6-6.75 6-12c0-3.314-2.686-6-6-6zM12 10a2 2 0 110-4 2 2 0 010 4z"
+                />
+              </svg>
+              Bengaluru, Hyderabad, India • On-site
+            </span>
+          </div>
+          <div className="mt-8 flex gap-3">
+            <a
+              href="https://www.google.com/about/careers/applications/jobs/results/74939955737961158-software-engineer-iii-google-cloud"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group/btn relative flex-1 overflow-hidden rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 p-px font-semibold text-white"
+            >
+              <div className="relative rounded-xl bg-slate-950 px-4 py-3 transition-all duration-300 group-hover/btn:bg-opacity-0">
+                <span className="relative flex items-center justify-center gap-2">
+                  Apply Now
+                  <svg
+                    className="h-4 w-4 transition-transform duration-300 group-hover/btn:translate-x-1"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                  </svg>
+                </span>
+              </div>
+            </a>
+            <button
+              onClick={() => shareContent(cardUrl)}
+              className="flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-4 py-3 font-semibold text-white transition-colors hover:bg-slate-800"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.5"
+                  d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+                />
+              </svg>
+              Share
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const JobsList = () => {
   return (
     <>
@@ -492,6 +591,7 @@ const JobsList = () => {
         <Jobs2 />
         <Jobs3 />
         <Jobs4 />
+        <Jobs5 />
       </div>
     </>
   );