Feature/sanniva/ficsection

src/pages/Team/Team.jsx

@@ -275,6 +275,40 @@ const Team = () => {
           Creative group, the Technical group, and the Operations group.
         </p>
       </div>
+    <div className={styles.FICwrapper}>
+
+  <div className={styles.FICsection}>
+    <div className={styles.image}>
+      <img 
+        src="https://cdn.prod.website-files.com/663d1907e337de23e83c30b2/692c37f9ff87b3d30a302905_IMG-20251129-WA0016.jpg" 
+        alt="picture of FIC"
+      />
+    </div>
+    <div className={styles.textBlock}>
+      <p className={styles.name}>DR. VISHAL PRADHAN</p>
+      <p className={styles.role}>FACULTY IN CHARGE</p>
+
+      {/* <div className={styles.intro}>
+        <p>
+          Dr. Vishal Pradhan is an exceptional academician and researcher at KIIT,
+          known for his clarity of thought, deep subject expertise, and commitment
+          to student success. His ability to connect advanced concepts with real-world
+          applications makes him a truly inspiring educator.
+        </p>
+      </div> */}
+
+      <div className={styles.vision}>
+        <p>
+          "As FIC of FED, my vision is to ignite curiosity, nurture confidence,
+          and inspire students to rise beyond limits—so they walk into KIIT as
+          learners and grow into innovators who shape the world." --- Dr. Vishal Pradhan
+        </p>
+      </div>
+
+    </div>
+  </div>
+</div>
+
       <div className={styles.circle}></div>
       {/* <div className={styles.circle2}></div> */}
 

src/pages/Team/styles/Team.module.scss

@@ -145,6 +145,139 @@ strong {
   left: 0; 
 }
 
+//* Outer dark box */
+.FICwrapper {
+  background: #0d0d0d; /* same as TEAM page background */
+  padding: 50px;
+  border-radius: 20px;
+  max-width: 1150px;
+  min-height: 220px;
+  margin: 30px auto;
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
+
+}
+
+/* Grid layout */
+.FICsection {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 50px;
+  align-items: center;
+}
+
+/* Left Image */
+ .image img {
+  display: flex;
+  justify-content: center; /* centers horizontally */
+  align-items: center; 
+  width: 180px;
+  height: 180px;
+  border-radius: 0%;
+  object-fit: cover;
+  box-shadow: 0 10px 40px rgba(255, 138, 0, 0.2);
+  border: 3px solid rgba(255, 138, 0, 0.4);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.FICsection .image img:hover {
+  transform: scale(1.05);
+  box-shadow: 0 15px 60px rgba(255, 138, 0, 0.4);
+}
+
+/* Text Block */
+.textBlock {
+  text-align: left; /* ensures all text aligns left */
+}
+
+/* Name */
+.name {
+  font-size: 32px;
+  font-weight: 800;
+  color: #FF8A00;
+  margin: 0;
+}
+
+/* Role title */
+.role {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  color: #FF8A00;
+  margin-top: 8px;
+  text-transform: uppercase;
+}
+
+/* Intro & Vision */
+.intro,
+.vision {
+  margin-top: 25px;
+  font-style: italic
+}
+
+.intro p,
+.vision p {
+  font-size: 16px;
+  line-height: 1.8;
+  color: #e0e0e0;
+  margin: 0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .FICsection {
+    grid-template-columns: 1fr;
+    text-align: left;
+  }
+
+  .FICsection .image {
+    margin-bottom: 20px;
+  }
+
+  .FICsection .image img {
+    width: 220px;
+    height: 220px;
+  }
+
+  .name {
+    font-size: 26px;
+  }
+}
+
+@media (max-width: 480px) {
+  .FICwrapper {
+    max-width: 350px;
+  }
+
+  .FICsection {
+    grid-template-columns: 1fr;
+  }
+
+  .FICsection .image {
+    margin-bottom: 20px;
+    margin:0 auto;
+  }
+
+  .FICsection .image img {
+    width: 150px;
+    height: 150px;
+    text-align: center;
+  }
+
+  .vision {
+    font-size: 18px;
+    text-align: center;
+  }
+
+  .name {
+    font-size: 22px;
+    text-align: center;
+  }
+
+  .role{
+    text-align: center;
+    align-items: center;
+  }
+}
 
 /* Responsive styles */