From 8a5b934a08e76924e1f00e3639b71d9cf2018733 Mon Sep 17 00:00:00 2001
From: iitzIrFan <irfanulhawk@gmail.com>
Date: Wed, 15 Jan 2025 11:59:20 +0530
Subject: [PATCH] Join Us Section is UI / UX Update

---
 public/css/style.css | 59 ++++++++++++++++++++++++++++++++++++++
 public/index.html    | 68 +++++++++++++++++++++++++-------------------
 2 files changed, 98 insertions(+), 29 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index fc113cf..0a9d4dc 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -2567,4 +2567,63 @@ body {
 
   background-color: #0056b3; /* Darker shade for hover */
 
+}
+
+#why-join-us {
+  padding: 60px 20px;
+  background-color: #f9f9f9;
+  text-align: center;
+}
+
+.section-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin-bottom: 40px;
+  color: #333;
+}
+
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+.card {
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  width: 100%;
+  max-width: 300px;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.icon {
+  font-size: 40px;
+  margin-bottom: 15px;
+  color: #007BFF;
+}
+
+.card h3 {
+  font-size: 24px;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.card p {
+  font-size: 16px;
+  color: #666;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .cards {
+    flex-direction: column;
+  }
 }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 064260b..f32520c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" type="text/css" href="css/faq_style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
-    
+
     <link rel="apple-touch-icon" sizes="180x180" href="images/Research_Nexas_favicon_io/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="images/Research_Nexas_favicon_io/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="images/Research_Nexas_favicon_io/favicon-16x16.png">
@@ -377,34 +377,44 @@ <h3>Career Opportunities</h3>
 
     <main>
         <!-- join us section  -->
-        <section class="join">
-            <h2>Why Join Us</h2>
-            <div class="join_box">
-                <div class="join_boxes animated-box1 join_animation1">
-                    <img src="https://img.freepik.com/free-vector/flat-design-join-us-message_23-2148954904.jpg" alt="">
-                    <p>"At Research Nexas", we believe in the power of collaboration to drive innovation. We're
-                        looking for bold thinkers and creators to join us in transforming ideas into real-world
-                        solutions.
-                        When you join us, you become part of a dynamic community that fosters creativity, growth, and
-                        impact. Together, we’ll push boundaries, explore new possibilities, and shape the future. Ready
-                        to make a difference? Let's innovate together.</p>
-                </div>
-                <div class="join_boxes" style="z-index: 1;">
-                    <img src="https://t3.ftcdn.net/jpg/04/87/16/34/360_F_487163480_u4q13pQTIIbcVbolPiHKZFFlkfVrnVP3.jpg"
-                        alt="">
-                    <p> we bring together innovators, creators, and visionaries to turn bold ideas into real-world
-                        solutions.By joining us, you’ll be part of a collaborative environment where your ideas can
-                        flourish and make a tangible impact. We offer the resources, network, and support to help you
-                        push boundaries and achieve your full potential. Together, we’ll drive innovation and shape the
-                        future of progress.</p>
-                </div>
-                <div class="join_boxes animated-box2 join_animation2">
-                    <img src="https://img.freepik.com/free-vector/flat-design-join-us-message_23-2148954904.jpg" alt="">
-                    <p>Join and become part of a dynamic community that believes in the power of
-                        collaboration to foster innovation. Here, your creativity and ideas are valued, and you’ll work
-                        alongside talented professionals to transform concepts into impactful solutions. If you're ready
-                        to explore new possibilities, grow your skills, and make a difference, this is the place for
-                        you. Together, let’s innovate and build a better tomorrow.</p>
+        <section id="why-join-us" class="why-join-us">
+            <div class="container">
+                <h2 class="section-title">Why Join Us?</h2>
+                <div class="cards">
+                    <div class="card">
+                        <div class="icon">💼</div>
+                        <h3>Professional Growth</h3>
+                        <p>"At Research Nexas", we believe in the power of collaboration to drive innovation. We're
+                            looking for bold thinkers and creators to join us in transforming ideas into real-world
+                            solutions.
+                            When you join us, you become part of a dynamic community that fosters creativity, growth,
+                            and
+                            impact. Together, we’ll push boundaries, explore new possibilities, and shape the future.
+                            Ready
+                            to make a difference? Let's innovate together</p>
+                    </div>
+                    <div class="card">
+                        <div class="icon">🌐</div>
+                        <h3>Global Networking</h3>
+                        <p>we bring together innovators, creators, and visionaries to turn bold ideas into real-world
+                            solutions.By joining us, you’ll be part of a collaborative environment where your ideas can
+                            flourish and make a tangible impact. We offer the resources, network, and support to help
+                            you
+                            push boundaries and achieve your full potential. Together, we’ll drive innovation and shape
+                            the
+                            future of progress.</p>
+                    </div>
+                    <div class="card">
+                        <div class="icon">🚀</div>
+                        <h3>Innovative Projects</h3>
+                        <p>Join and become part of a dynamic community that believes in the power of
+                            collaboration to foster innovation. Here, your creativity and ideas are valued, and you’ll
+                            work
+                            alongside talented professionals to transform concepts into impactful solutions. If you're
+                            ready
+                            to explore new possibilities, grow your skills, and make a difference, this is the place for
+                            you. Together, let’s innovate and build a better tomorrow.</p>
+                    </div>
                 </div>
             </div>
         </section>