tedxvnrvjiet · U-Harshitha · Oct 14, 2024 · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+/>
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

diff --git a/src/assets/ButterfliesDark.png b/src/assets/ButterfliesDark.png
diff --git a/src/assets/faculty/Padmasai.jpeg b/src/assets/faculty/Padmasai.jpeg
diff --git a/src/assets/faculty/Padmasai.png b/src/assets/faculty/Padmasai.png
diff --git a/src/components/faculty/Faculty.js b/src/components/faculty/Faculty.js
@@ -2,7 +2,7 @@ import React from 'react'
 import FacultyMems from './FacultyMems.js'
 
 import Principal from '../../assets/faculty/Principal.png'
-import Padmasai from '../../assets/faculty/Padmasai.png'
+import Padmasai from '../../assets/faculty/Padmasai.jpeg'
 import Director from '../../assets/faculty/Director.png'
 import Priyanka from '../../assets/faculty/Priyanka.png'
 import Amjad from '../../assets/faculty/Amjad.png'

diff --git a/src/components/home/Home.js b/src/components/home/Home.js
@@ -12,45 +12,66 @@ import bgImage from '../../assets/ButterfliesDark.png'
 function Home() {
   return (
     <div>
-      <div 
-        style={{ 
-          backgroundImage: `url(${bgImage})`, 
-          backgroundSize: 'cover', 
-          backgroundPosition: 'center', 
-          height: '100vh', 
-          display: 'flex', 
-          justifyContent: 'center', 
-          alignItems: 'center', 
-          position: 'relative',
-        }}
-      >
-        <div 
-          style={{ 
-            position: 'absolute', 
-            top: '30%', 
-            backgroundColor: 'rgba(0, 0, 0, 0.6)', 
-            color: 'white', 
-            padding: '20px', 
-            borderRadius: '10px',
-            textAlign: 'center',
-          }}
-        >
-          <h1 style={{ fontSize: '3rem', fontWeight: 'bold' }}>
-            <span style={{ color: 'red' }}>TED<sup>x</sup></span>VNRVJIET
-          </h1>
-          <h2 style={{ fontSize: '2rem', margin: '10px 0' }}><b> 28th October, 2024</b></h2>
-          <Timer /> 
-          <div style={{ marginTop: '20px', fontSize: '1rem' }}>
-            <p>VNR Vignana Jyothi Institute of Engineering and Technology</p>
-          </div>
-        </div>
-      </div>
+  <style>
+    {`
+      @media (max-width: 350px) {
+        .home-title {
+          font-size: 1.8rem !important; /* Adjusted font size for smaller screens */
+        }
+        .home-subtitle {
+          font-size: 1.2rem !important; /* Adjusted font size for smaller screens */
+        }
+      }
+    `}
+  </style>
 
-      {/* Speakers Section Below the Background Image */}
-      <div style={{ marginTop: '5px' }}>
-        <Speakers />
+  <div 
+    style={{ 
+      backgroundImage: `url(${bgImage})`, 
+      backgroundSize: 'cover', 
+      backgroundPosition: 'center', 
+      minHeight: '75vh', 
+      display: 'flex', 
+      justifyContent: 'center', 
+      alignItems: 'center', 
+      position: 'relative',
+      padding: '0 20px',
+      overflow: 'hidden',
+    }}
+  >
+    <div 
+      style={{ 
+        position: 'absolute', 
+        top: '20%', 
+        backgroundColor: 'rgba(0, 0, 0, 0.6)', 
+        color: 'white', 
+        padding: '15px', 
+        borderRadius: '10px',
+        textAlign: 'center',
+        maxWidth: '90%',
+      }}
+    >
+      <h2 className="home-title" style={{ fontSize: '2.5rem', fontWeight: 'bold' }}>
+        <span style={{ color: 'red' }}>TED<sup>x</sup></span>VNRVJIET
+      </h2>
+      <h2 className="home-subtitle" style={{ fontSize: '1.5rem', margin: '10px 0' }}><b>28th October, 2024</b></h2>
+      <Timer /> 
+      <div style={{ marginTop: '20px', fontSize: '1rem', display: 'flex', alignItems: 'center' }}>
+        <i 
+          className="fas fa-map-marker-alt" 
+          style={{ color: 'red', marginRight: '8px', fontSize: '1.2rem' }} 
+          aria-hidden="true"
+        ></i>
+        <p>VNR Vignana Jyothi Institute of Engineering and Technology</p>
       </div>
     </div>
+  </div>
+
+  <div style={{ marginTop: '0px', padding: '0px' }}> 
+    <Speakers />
+  </div>
+</div>
+
   );
 }
 

diff --git a/src/components/home/Speakers/Speakers.js b/src/components/home/Speakers/Speakers.js
@@ -13,11 +13,11 @@ const SpeakersInfo = [
         facebook: ``
     },
     {
-        name: 'Vanita',
-        designation: '',
+        name: 'Ms Vanitha Datla',
+        designation: 'Vice Chairperson and Managing Director of Elico Ltd',
         image: Vanita,
-        description: 'Aditi Sharma is the winner of the Mrs. Universe India and Mrs. Universe Photogenic titles in 2022. She is a mother, homemaker, educator, and strong woman who inspires others through her social media platform. Aditi promotes the message that anything is possible if you work towards your dreams.',
-        instagram: 'https://www.instagram.com/aditi.mrsuniverseindia/?igshid=YmMyMTA2M2Y%3D'
+        description: 'Ms Vanitha Datla, Vice Chairperson and Managing Director of Elico Ltd as well as Elico Healthcare Services Ltd, will be speaking at TEDˣ VNRVJIET 2024. With nearly three decades of experience across industries like Financial Services, Instrumentation, and Healthcare, Vanitha brings a wealth of knowledge and insight. Her work focusing on women in business and finance, including her past experience at Confederation of Indian Industry (CII) as its Chairperson, has led her to found Divershefy, a startup focused to create gender diversity in the Boards and Leadership teams. As a champion of diversity and women empowerment, Vanitha has led initiatives to enhance corporate inclusion and supports education for underprivileged children.',
+        instagram: ''
     }
 
 ]

diff --git a/src/components/home/Timer/Timer.css b/src/components/home/Timer/Timer.css
@@ -1,45 +1,78 @@
-/* Timer.css */
+.timer-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.6); /* Translucent background */
+  border-radius: 10px;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
+  margin-top: 20px;
+  width: 100%; /* Full width for larger screens */
+  max-width: 800px; /* Constrain width */
+  backdrop-filter: blur(10px); /* Adds blur to the background */
+  overflow: hidden; /* Ensures that the content does not go out of the box */
+}
+
+.time-box {
+  text-align: center;
+  margin: 0 10px;
+  padding: 10px 20px;
+  background-color: rgba(255, 255, 255, 0.1); /* Slight translucent box */
+  border-radius: 10px;
+  color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  flex: 1; /* Flex allows the boxes to shrink/expand */
+  min-width: 60px;
+}
+
+.time-value {
+  font-size: 2.5rem;
+  font-weight: bold;
+  white-space: nowrap; /* Prevents wrapping */
+}
 
+.time-label {
+  font-size: 1rem;
+  margin-top: 5px;
+}
+
+/* Media query for smaller screens */
+@media (max-width: 768px) {
 .timer-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-    background-color: rgba(0, 0, 0, 0.6); /* Translucent background */
-    border-radius: 10px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
-    margin-top: 20px;
-    width: fit-content;
-    backdrop-filter: blur(10px); /* Adds blur to the background */
-  }
-
-  .time-box {
-    text-align: center;
-    margin: 0 10px;
-    padding: 10px 20px;
-    background-color: rgba(255, 255, 255, 0.1); /* Slight translucent box */
-    border-radius: 10px;
-    color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  }
-
-  .time-value {
-    font-size: 2.5rem;
-    font-weight: bold;
-  }
-
-  .time-label {
-    font-size: 1rem;
-    margin-top: 5px;
-  }
-
-  @media screen and (max-width: 768px) {
-    .timer-container {
-      flex-direction: column;
-    }
-
-    .time-box {
-      margin: 10px 0;
-    }
-  }
-
+  flex-direction: row;  /* Stack the timer elements vertically on small screens */
+  padding: 10px;
+  max-width: 100%;
+}
+
+.time-box {
+  margin-bottom: 10px; /* Add spacing between stacked time boxes */
+  padding: 10px;
+}
+
+.time-label {
+  font-size: 0.7rem; /* Smaller label for visibility */
+}
+}
+
+@media (max-width: 400px) {
+.timer-container {
+  /* flex-wrap: wrap; Allow wrapping for small screens */
+  flex-direction: row;
+  padding: 5px;
+}
+
+.time-box {
+  min-width: 45px; /* Reduce minimum width for smaller screens */
+  padding: 8px;
+  margin: 0 5px;
+  flex-basis: 40%;
+}
+
+.time-value {
+  font-size: 1.2rem; /* Reduce font size for smaller screens */
+}
+
+.time-label {
+  font-size: 0.6rem; /* Smaller label for visibility */
+}
+}
diff --git a/src/components/home/Timer/Timer.js b/src/components/home/Timer/Timer.js
@@ -34,13 +34,9 @@ function Timer() {
   const timerComponents = [];
 
   Object.keys(timeLeft).forEach((interval) => {
-    if (!timeLeft[interval]) {
-      return;
-    }
-
     timerComponents.push(
       <div className="time-box" key={interval}>
-        <div className="time-value">{timeLeft[interval]}</div>
+        <div className="time-value">{timeLeft[interval] < 10 ? `0${timeLeft[interval]}` : timeLeft[interval]}</div>
         <div className="time-label">{interval}</div>
       </div>
     );