Completed Resources page and changes in responsiveness

14 files changed, 500 insertions, 26 deletions

diff --git a/package-lock.json b/package-lock.json
index 25538b7..abcf7a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,10 @@
         "@astrojs/check": "^0.5.10",
         "@astrojs/tailwind": "^5.1.0",
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@popperjs/core": "^2.11.8",
         "@types/bootstrap": "^5.2.10",
+        "@xexiu/astro-accordion": "^0.0.10",
         "astro": "^4.6.2",
         "astro-bootstrap": "^0.6.2",
         "bootstrap": "^5.3.3",
@@ -914,6 +916,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1484,6 +1498,11 @@
       "resolved": "https://registry.npmjs.org/@vscode/l10n/-/l10n-0.0.16.tgz",
       "integrity": "sha512-JT5CvrIYYCrmB+dCana8sUqJEcGB1ZDXNLMQ2+42bW995WmNoenijWMUdZfwmuQUTQcEVVIa2OecZzTYWUW9Cg=="
     },
+    "node_modules/@xexiu/astro-accordion": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/@xexiu/astro-accordion/-/astro-accordion-0.0.10.tgz",
+      "integrity": "sha512-fuA4z7LUuYJf24s4jtqi3VXPDgTG0wcTWZaa15jd54rXYfqsLKjsT1P9Q+W4+IAHSP9vdLmA5xVlujCYmMjcjw=="
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
diff --git a/package.json b/package.json
index bf3baca..58bf389 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
     "@astrojs/check": "^0.5.10",
     "@astrojs/tailwind": "^5.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@popperjs/core": "^2.11.8",
     "@types/bootstrap": "^5.2.10",
+    "@xexiu/astro-accordion": "^0.0.10",
     "astro": "^4.6.2",
     "astro-bootstrap": "^0.6.2",
     "bootstrap": "^5.3.3",
diff --git a/src/components/Accordion.astro b/src/components/Accordion.astro
new file mode 100644
index 0000000..5f1f061
--- /dev/null
+++ b/src/components/Accordion.astro
@@ -0,0 +1,204 @@
+---
+interface BodyLine {
+  text: string;
+  link?: string
+}
+interface AccordionItem{
+  heading : string;
+  body : BodyLine[];
+}
+
+const accordionItems: AccordionItem[] = [
+    {
+      heading: "FOSSEE and Spoken Tutorial",
+      body: [
+        {text:"1. Arduino Tutorial Series by Spoken Tutorial", link:'https://spoken-tutorial.org/tutorial-search/?search_foss=Arduino&search_language=English'},
+        {text:"2. FLOSS-Arduino books teach Arduino control via open-source software", link : 'https://floss-arduino.fossee.in/'},
+      ],
+    },
+    {
+      heading: "Soil Nutrients Monitoring and Precision Agriculture",
+      body: [
+        {text:"1. Water Your Garden with IoT - Soil Moisture Sensors", link:'https://www.youtube.com/watch?v=pgGpuws7f9o'},
+        {text:"2. New Blynk IOT Smart Plant Monitoring System", link : 'https://www.youtube.com/watch?v=PTJ9sAk2c2I'},
+      ],
+    },
+    {
+      heading: "Weather Station",
+      body: [
+        {text:"1. DIY Smart Home Weather Station - Wind, Rain, Temperature, Pressure, Humidity, Ligh", link:'https://www.youtube.com/watch?v=snCp0TqrER4'},
+        {text:"2. Arduino Wireless Weather Station Project", link : 'https://www.youtube.com/watch?v=l3-y371RlI4'},
+        {text:"3. LoRa Based Wireless Weather Station using Arduino and ESP32", link : 'https://www.youtube.com/watch?v=Nw392q1Sg4M'}
+      ],
+    },
+    {
+      heading: "Air Quality and Noise Pollution Level",
+      body: [
+        {text:"1. Air Quality Monitoring and Alert System using Arduino with MQ135", link:'https://www.youtube.com/watch?v=SCXteaUVICw'},
+        {text:"2. IoT based Noise & Air quality Monitoring using blynk IoT | New Automation Tab update in Blynk", link : 'https://www.youtube.com/watch?v=p3-0mWkOFBk'},
+      ],
+    },
+    {
+      heading: "Asset Tracking",
+      body: [
+        {text:"1. IOT Asset Tracking System", link:'https://www.youtube.com/watch?v=zFn487G2pY8'},
+        {text:"2. Arduino Gps And Gsm Based location Tracking System | Women Safety Device Small Version", link : 'https://www.youtube.com/watch?v=rdvZpwV9A18'},
+      ],
+    },
+    {
+      heading: "Global Warming",
+      body: [
+        {text:"1. Smart Grid: How IoT fights climate change (Kelsey Breseman)", link : 'https://www.youtube.com/watch?v=0SulU4QM334'},
+      ],
+    },
+    {
+      heading: "Disaster Management",
+      body: [
+        {text:"1. Geospatial data for disaster management at ITC", link : 'https://www.youtube.com/watch?v=dYG7GsqcCMM'},
+      ],
+    },
+    {
+      heading: "Vehicle Detection and Intelligent Transportation",
+      body: [
+        {text:"1. Intelligent Transport Systems made in KOREA English Version 22\'", link:'https://www.youtube.com/watch?v=H_JhcBTgwPo'},
+        {text:"2. Connected Vehicle: The Future of Transportation", link : 'https://www.youtube.com/watch?v=Q8Cn47L8FRQ'},
+      ],
+    },
+  ];
+---
+<section>
+{
+  accordionItems.map((accordion)=>(
+      <div class="faq">
+        <div class="question">
+          <h3>{accordion.heading}</h3>
+          <svg width = '15' height = '10' viewBox = '0 0 42 25'>
+             <path d = 'M3 3L21 21L39 3' stroke = 'white' stroke-width="7" stroke-linecape="round" /> 
+           </svg> 
+        </div>
+        <div class="answer">
+          {
+            accordion.body.map((bodyLine) => (
+              <p>
+                <a href={bodyLine.link}>{bodyLine.text}</a>
+              </p>
+            ))
+          }
+        </div>
+      </div>
+    ))
+  }
+</section>
+
+
+<style>
+
+  section{
+    display: flex;
+    flex-direction: column;
+    margin : 0 auto;
+    width: 60%;
+  }
+
+  .faq{
+    max-width: 100vw;
+    cursor: pointer;
+    border: 1px solid #f6f4f4;
+  }
+
+  .question{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #1c70cf;
+    background-color: rgba(0, 0, 0, .02); 
+    padding: 1rem 2rem;
+  }
+
+  .question h3{
+    font-size: 1.1rem;
+  }
+
+  .question h3:hover{
+    text-decoration: underline;
+    color: #1662b8;
+  }
+
+  .answer{
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.8s ease;
+  }
+
+  .answer p{
+    padding: 1vh 3vh;
+    font-size: 1rem;
+    margin: 0;
+    line-height: 1.6;
+    color: black;
+    font-weight: 500;
+    background-color: white;
+  }
+
+  .answer p a{
+    color: #17a2b8;
+    text-decoration: none;
+  }
+
+  .answer p a:hover{
+    text-decoration: underline;
+    color: #0e8fa3;
+  }
+
+  .faq.active .answer{
+    max-height: 300px;
+    animation: fade 1s ease-in-out;
+  }
+
+  .faq.active svg{
+    transform: rotate(180deg);
+  }
+
+  svg{
+    display: none;  /* If you want the icon besides the accordion, remove this line */
+    transition: transform 0.5s ease-in;
+  }
+
+  @keyframes fade {
+    from{
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    .to{
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media screen and (max-width: 768px){
+    section{
+      width: 90%;
+    }
+    .answer p{
+      padding: 0.4vh 3vh;
+      font-size: 1rem;
+      line-height: 1.6;
+      margin: 0;
+    }
+  }
+</style>
+
+
+<script>
+
+  const faqs = document.querySelectorAll('.faq');
+
+  faqs.forEach(faq => {
+    faq.addEventListener('click', () => {
+      faq.classList.toggle('active');
+    })
+  })
+
+</script>
+
+
diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
new file mode 100644
index 0000000..c0be475
--- /dev/null
+++ b/src/components/Carousel.astro
@@ -0,0 +1,68 @@
+---
+import { Carousel } from 'astro-bootstrap';
+import type { CarouselSlideType } from 'astro-bootstrap';
+
+const slides: CarouselSlideType[] = [
+  { 
+    img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/rudra-logo.png',
+    alt: 'Rudra',
+    active:true, 
+    link : 'http://www.rudra.iitb.ac.in/',
+  },
+  { img: 'https://iot-gis-hackathon.fossee.in/static/cms/uploads/images/icfoss-logo.png', alt: 'icfoss', active: true },
+  { img: 'https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/NM-ICPS-logo1.png', alt: 'NMICPS' ,active:true, link:'https://nmicps.in/'},
+  { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/navavishkaar.png', alt: 'IITTNiF' ,active:true, link:'https://iittnif.com/'},
+  { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/iit-tirupati.png', alt: 'IIT Tirupati' ,active:true, link:'https://www.iittp.ac.in/'},
+  { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/iitb-logo.png', alt: 'IITB' ,active:true, link:'http://iitb.ac.in/'},
+  { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/fossee-logo.png', alt: 'FOSSEE' ,active:true, link:'https://fossee.in/'},
+  { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/st-logo.png', alt: 'Spoken Tutorial' ,active:true, link:'https://spoken-tutorial.org/'}, 
+];
+
+
+const id = 'carouselExampleBasic';
+---
+
+<Carousel {id} fade>
+  <Carousel.Indicators {id} {slides} />
+  <!-- <div class="carousel-container"> -->
+  <Carousel.Inner>
+    {
+      slides.map((slide) => (
+        <Carousel.Item active={slide.active}>
+            <a href={slide.link}>
+              <img
+              src={slide.img}
+              alt={slide.alt}
+              class="carousel-images"
+              />
+            </a>
+          </Carousel.Item>
+        ))
+      }
+      <!-- </div> -->
+  </Carousel.Inner>
+  <Carousel.Controls id={id} />
+</Carousel>
+
+<style>
+    .carousel-control-prev-icon{
+        color: black;
+    }
+    .carousel-inner{
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+    }
+    .carousel-images{
+        width: 10%;
+        margin: auto;
+        height: 10%;
+    }
+
+    .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end {
+    z-index: 1;
+    opacity: 1;
+    width: 20%;
+    margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 04deac5..600f61f 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,26 +1,28 @@
 ---
-import 'bootstrap/dist/css/bootstrap.css'
+// import 'bootstrap/dist/css/bootstrap.css'
 ---
 
 <div class="footer">
     <div class="footer-content">
         <ul class="about-list">
             <h2>About</h2>
-            <li>IIT Bombay</li>
-            <li>FOSSEE</li>
-            <li>IITTNiF</li>
-            <li>Spoken Tutorial</li>
+            <li><a class="footer-links" href="https://www.iitb.ac.in/">IIT Bombay</a></li>
+            <li><a class="footer-links" href="https://fossee.in/">FOSSEE</a></li>
+            <li><a class="footer-links" href="https://www.iittnif.org/">IITTNiF</a></li>
+            <li><a class="footer-links" href="https://spoken-tutorial.org/">Spoken Tutorial</a></li>
         </ul>
     </div>
     <div class="footer-content">
         <ul>
             <h2>Resources</h2>
-            <li>QGIS</li>
-            <li>Spoken Tutorials - FOSSEE - QGIS</li>
+            <li><a class="footer-links" href="https://qgis.org/en/site/forusers/download.html">QGIS</a></li>
+            <li><a class="footer-links" href="https://spoken-tutorial.org/tutorial-search/?search_foss=QGIS&search_language=English">Spoken Tutorials - FOSSEE - QGIS</a></li>
         </ul>
     </div>
     <div class="license-container">
-        <img class ="license-img" alt="Creative Commons License" style="border-width:0" src="https://iitb-isro-aicte-mapathon.fossee.in/static/cms/uploads/images/88x31.png">
+        <a href="http://creativecommons.org/licenses/by-sa/4.0/">
+            <img class ="license-img" alt="Creative Commons License" style="border-width:0" src="https://iitb-isro-aicte-mapathon.fossee.in/static/cms/uploads/images/88x31.png">
+        </a>
         <p class="license">This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License .</p>    
     </divmcl>
 </div>
@@ -47,6 +49,10 @@ import 'bootstrap/dist/css/bootstrap.css'
     li{
         font-size: 2.3vh;
     }
+    .footer-links{
+        text-decoration: none;
+        color: aliceblue
+    }
 
     .license-container{
         padding: 3vw;
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 445feac..a21a969 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -9,7 +9,7 @@ import 'bootstrap/dist/css/bootstrap.css'
     <div class="registration">
         <h2 class="hack-heading" style="color: #000080ff;">IIT Bombay-FOSSEE-GIS/OSHW, IITTNiF &amp; <br> ICFOSS presents</h2>
         <div class="hack-img"><img src="https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/right-img.png" id="right-img"></div>
-        <div class="hack-button"> <a href="home#register"><button class="btn-register slide-right">Register</button></a></div>
+        <div class="hack-button"> <a href="#register"><button class="btn-register slide-right">Register</button></a></div>
     </div>
 </div>
 
@@ -23,8 +23,10 @@ import 'bootstrap/dist/css/bootstrap.css'
         height: 80vh;
         padding: 1vh;
         background-color: rgb(252, 230, 188);
+        animation: zoomIn 1.5s; 
+        z-index: 10;
     }
-    .map img{
+    .map img {
         height: 60vh;
         width: 90%;
         margin-top: 20px;
@@ -73,6 +75,14 @@ import 'bootstrap/dist/css/bootstrap.css'
         border-radius: 12px;
         font-family: "Lucida Console", Monaco, 
     }
+    @keyframes zoomIn {
+        from {
+            transform: scale(1.3);
+        }
+        to {
+            transform: scale(1);    
+        }
+    }
 
     @media screen and (max-width: 613px) {
         .head{
diff --git a/src/components/HomeContent.astro b/src/components/HomeBody.astro
index d4575d4..71698cd 100644
--- a/src/components/HomeContent.astro
+++ b/src/components/HomeBody.astro
@@ -1,6 +1,8 @@
 ---
 import 'bootstrap/dist/css/bootstrap.css'
+import Carousel from './Carousel.astro'
 const props = Astro.props
+
 ---
 
 
@@ -24,7 +26,7 @@ const props = Astro.props
     <p class="significance-end"> This hackathon is more than just a competition; it's a platform for innovators, creators, and visionaries to come together and pioneer solutions for a brighter future. Our purpose is to harness the power of open source hardware, the Internet of Things (IoT), and Geographic Information Systems (GIS) to address some of the world's most pressing challenges..</p>
     <p class="significance-end"> The FOSSEE project, IIT Bombay promotes the use of Free/ Libre Open Source Software in academia and Industry. The FOSSEE project  is funded through the National Mission on Education through ICT (NMEICT), Ministry of Education, Government of India. The FOSSEE-GIS team manages the overall coordination of the "IIT Bombay FOSSEE GIS Internship in Geospatial Dashboard Design and Implementation". </p>
 </div>
-<div class="registration-container" id = "register">
+<div class="registration-container" id ="register">
     <h1 class="intro">Registration</h1>
     <p>Please click on the following button to register yourself for the Hackathon</p>
     <div class="hack-button"> <a href="https://forms.gle/aVopwiwmRM35FXQT8"><button class="btn-register slide-right">Register</button></a></div>
@@ -36,7 +38,7 @@ const props = Astro.props
         The Rural Data Research and Analysis (RuDRA) Lab, IIT Bombay is India's first HPC-powered data center dedicated to Rural Development.
     </p>
     <div class="tech-imgs">
-        
+        <Carousel/>
 
     </div>
     <p>
@@ -94,10 +96,11 @@ const props = Astro.props
         display: flex;
         flex-direction: column;
         justify-content: center;
+        padding: 0 10vh;
     }
     .intro{
         color: rgb(2, 2, 110);
-        font-size: 7.2vh;
+        font-size: 6vh;
         font-family: 'Roboto', sans-serif;
         padding: 3vh 5vw;
         font-weight: 700;
@@ -107,7 +110,7 @@ const props = Astro.props
     }
 
     .welcome-heading{
-        font-size: 5vh;
+        font-size: 4.7vh;
         text-align: center;
     }
 
@@ -142,7 +145,13 @@ const props = Astro.props
         display: flex;
         flex-direction: column;
         justify-content: center;
+        padding: 0 10vh;
+    }
+
+    .registration-container{
+        padding: 0 10vh;
     }
+
     .registration-container p{
         text-align: center;
         font-size: 2.5vh;
@@ -153,6 +162,11 @@ const props = Astro.props
         display: block;
         padding: 1vh 2vw;
     }
+
+    .pno-container{
+        padding: 0 10vh;
+    }
+
     .pno-container p{
         text-align: left;
         padding: 0 4vw;
@@ -179,6 +193,10 @@ const props = Astro.props
         padding: 1vh 5vh;
     }
 
+    .coreteam-container{
+        padding: 0 10vh;
+    }
+
     .coreteam-container h1{
         color: rgb(2, 2, 110);
         font-size: 7.2vh;
@@ -221,18 +239,19 @@ const props = Astro.props
     .teach{
         display: flex;
         flex-direction: column;
-        justify-content: center;
+        justify-content: flex-start;
         align-items: center;
         border: 1px solid black;
         padding: 2vh 4vw;
         border-radius: 21px;
         margin: 2vh;
-        width: 40%;
+        width: 45%;
     }
     .teach h4{
         margin-bottom: 3vh;
         font-family: 'Roboto', sans-serif;
         font-weight: 600;
+        font-size: 2.7vh;
     }
     .teach p{
         font-size: 2.4vh;
@@ -251,6 +270,9 @@ const props = Astro.props
         .teach{
             width: 90%;
         }
+        .teach h4{
+            text-align: center;
+        }
         .btn-register{
             width: 70%;
         }
diff --git a/src/components/IconBar.astro b/src/components/IconBar.astro
new file mode 100644
index 0000000..ac2c917
--- /dev/null
+++ b/src/components/IconBar.astro
@@ -0,0 +1,88 @@
+---
+const props = Astro.props
+---
+
+
+<div class="icon-bar">
+    <a href="https://www.facebook.com/FOSSEENMEICT/" class="facebook text-white" target="_blank">
+        
+        <svg xmlns="http://www.w3.org/2000/svg" width="36.75" height="42" viewBox="0 0 448 512" {...props}>
+            <path fill="white" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48c27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48" />
+        </svg>
+
+    </a>
+    <a href="https://www.instagram.com/fossee_nmeict/" class="instagram" target="_blank">
+        
+        <svg xmlns="http://www.w3.org/2000/svg" width="36.75" height="42" viewBox="0 0 448 512" {...props}>
+            <path fill="white" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9S287.7 141 224.1 141m0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7s74.7 33.5 74.7 74.7s-33.6 74.7-74.7 74.7m146.4-194.3c0 14.9-12 26.8-26.8 26.8c-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8s26.8 12 26.8 26.8m76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9c-26.2-26.2-58-34.4-93.9-36.2c-37-2.1-147.9-2.1-184.9 0c-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9c1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0c35.9-1.7 67.7-9.9 93.9-36.2c26.2-26.2 34.4-58 36.2-93.9c2.1-37 2.1-147.8 0-184.8M398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6c-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6c-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6c29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6c11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1" />
+        </svg>
+
+    </a>
+    <a href="https://twitter.com/FOSSEE/" class="twitter" target="_blank">
+        
+        <svg xmlns="http://www.w3.org/2000/svg" width="36.75" height="42" viewBox="0 0 448 512" {...props}>
+            <path fill="white" d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm287.3 167.3c0 86.7-66 186.6-186.6 186.6c-37.2 0-71.7-10.8-100.7-29.4c5.3.6 10.4.8 15.8.8c30.7 0 58.9-10.4 81.4-28c-28.8-.6-53-19.5-61.3-45.5c10.1 1.5 19.2 1.5 29.6-1.2c-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3c-9-6-16.4-14.1-21.5-23.6s-7.8-20.2-7.7-31c0-12.2 3.2-23.4 8.9-33.1c32.3 39.8 80.8 65.8 135.2 68.6c-9.3-44.5 24-80.6 64-80.6c18.9 0 35.9 7.9 47.9 20.7c14.8-2.8 29-8.3 41.6-15.8c-4.9 15.2-15.2 28-28.8 36.1c13.2-1.4 26-5.1 37.8-10.2c-8.9 13.1-20.1 24.7-32.9 34c.2 2.8.2 5.7.2 8.5" />
+        </svg>
+        
+    </a>
+    <a href="https://www.linkedin.com/company/fossee-iitb/" class="linkedin" target="_blank">
+
+        <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 256 256" {...props}>
+            <g fill="none">
+                <rect width="256" height="256" fill="#fff" rx="60" />
+                <rect width="256" height="256" fill="#0a66c2" rx="60" />
+                <path fill="#fff" d="M184.715 217.685h29.27a4 4 0 0 0 4-3.999l.015-61.842c0-32.323-6.965-57.168-44.738-57.168c-14.359-.534-27.9 6.868-35.207 19.228a.32.32 0 0 1-.595-.161V101.66a4 4 0 0 0-4-4h-27.777a4 4 0 0 0-4 4v112.02a4 4 0 0 0 4 4h29.268a4 4 0 0 0 4-4v-55.373c0-15.657 2.97-30.82 22.381-30.82c19.135 0 19.383 17.916 19.383 31.834v54.364a4 4 0 0 0 4 4M38 59.628c0 11.864 9.767 21.626 21.632 21.626c11.862-.001 21.623-9.769 21.623-21.631C81.253 47.761 71.491 38 59.628 38C47.762 38 38 47.763 38 59.627m6.959 158.058h29.307a4 4 0 0 0 4-4V101.66a4 4 0 0 0-4-4H44.959a4 4 0 0 0-4 4v112.025a4 4 0 0 0 4 4" />
+            </g>
+        </svg>
+        
+    </a>
+   </div>
+
+<style>
+
+    .icon-bar {
+        position: fixed;
+        top: 47.4%;
+        -webkit-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+    }
+
+    .icon-bar a {
+        display: block;
+        text-align: center;
+        padding: 1vh;
+        transition: all 0.3s ease;
+        font-size: 20px;
+    }
+
+    .facebook {
+        background: #3B5998;
+    }
+
+    .instagram {
+        background: #bb0000;
+    }
+
+    .twitter {
+        background: #8ec8f5;
+    }
+
+    .linkedin {
+        background: #0a66c2;
+    }
+
+    svg{
+        height: 3.5vh;
+        width: 1.3vw;
+    }
+
+  @media screen and (max-width: 768px){
+    svg{
+        height: 2.5vh;
+        width: 4vw;
+    }
+  }
+</style>
+
+
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 26891e8..4b6c639 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -23,7 +23,7 @@ import 'bootstrap/dist/css/bootstrap.css'
       z-index: 1000;
     }
     .navbar a {
-      font-size: 2.2vh;
+      font-size: 2.4vh;
       font-weight:600;
       text-decoration: none;
       padding: 18px;
diff --git a/src/components/ResourcesBody.astro b/src/components/ResourcesBody.astro
new file mode 100644
index 0000000..b1204c3
--- /dev/null
+++ b/src/components/ResourcesBody.astro
@@ -0,0 +1,34 @@
+---
+import Accordion from './Accordion.astro'
+---
+
+<div class="resources-main">
+    <div class="resources-heading">
+        <h1>Resources</h1>
+    </div>
+    <Accordion/>
+</div>
+  <style>
+
+    .resources-main{
+        /* any background color we can add */
+        margin: 3vh;
+    }
+    .resources-heading h1{
+        color: rgb(2, 2, 110);
+        font-size: 7.5vh;
+        font-family: 'Roboto', sans-serif;
+        padding: 3vh 21%;
+        font-weight: 700;
+    }
+    .resources-heading:hover{
+        color: blue;
+    }
+    @media screen and (max-width: 915px) {
+        .resources-heading h1{
+            font-size: 4.5vh;
+            padding: 3vh 10%;
+        }
+    }
+  </style>
+
diff --git a/src/components/TopBar.astro b/src/components/TopBar.astro
index 52478c6..ad29a4e 100644
--- a/src/components/TopBar.astro
+++ b/src/components/TopBar.astro
@@ -7,7 +7,7 @@ import 'bootstrap/dist/css/bootstrap.css'
       <div class="d-flex justify-content-center">
         <div class="p-2 pb-1">
           <a href="http://iitb.ac.in/" target="_blank">
-            <img src="https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/iitb-logo.png" class="img-fluid logos" alt="IITB">
+            <img src="https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/iitb-logo.png" class="img-fluid logos" alt="IITB" id = "iitb">
           </a>
         </div>
         <div class="p-2 pb-1">
@@ -47,10 +47,21 @@ import 'bootstrap/dist/css/bootstrap.css'
   
   <style>
     .banner-content div div{
-        align-items: center;
+      align-items: center;
+    }
+
+    img{
+      /* height: 70% */
+      width: 14vh;
+    
     }
     .banner-content .big-img {
-      width: 45vh;
+      width: 18vh;
+    }
+
+    .banner-content #iitb{
+      height: 30%;
+      width: 23vh;
     }
   </style>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 61c826e..95d8b7b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,16 +4,20 @@ import TopBar from '../components/TopBar.astro';
 import Navbar from '../components/Navbar.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
-import HomeContent from '../components/HomeContent.astro';
+import HomeBody from '../components/HomeBody.astro';
+import IconBar from '../components/IconBar.astro';
 ---
 
 <Layout title="Welcome to FOSSEE.">
 	<main>
-		<TopBar />
-		<Navbar />
-		<Header />
-		<HomeContent />
-		<Footer/>
+		<div class="main">
+			<TopBar />
+			<Navbar />
+			<Header />
+			<IconBar />
+			<HomeBody />
+			<Footer/>
+		</div>
 	</main>
 </Layout>
 
diff --git a/src/pages/resources.astro b/src/pages/resources.astro
index 064519b..e511d63 100644
--- a/src/pages/resources.astro
+++ b/src/pages/resources.astro
@@ -3,12 +3,16 @@ import Layout from '../layouts/Layout.astro';
 import TopBar from '../components/TopBar.astro';
 import Navbar from '../components/Navbar.astro';
 import Footer from '../components/Footer.astro';
+import ResourcesBody from '../components/ResourcesBody.astro';
+import IconBar from '../components/IconBar.astro';
 ---
 
 <Layout title="Welcome to FOSSEE.">
 	<main>
 		<TopBar />
 		<Navbar />
+		<IconBar />
+		<ResourcesBody/>
 		<Footer/>
 	</main>
 </Layout>
diff --git a/src/pages/schedule.astro b/src/pages/schedule.astro
index ab2f5a4..9320471 100644
--- a/src/pages/schedule.astro
+++ b/src/pages/schedule.astro
@@ -4,12 +4,14 @@ import TopBar from '../components/TopBar.astro';
 import Navbar from '../components/Navbar.astro';
 import Footer from '../components/Footer.astro';
 import ScheduleBody from '../components/ScheduleBody.astro';
+import IconBar from '../components/IconBar.astro';
 ---
 
 <Layout title="Welcome to FOSSEE.">
 	<main>
 		<TopBar />
 		<Navbar />
+		<IconBar/>
 		<ScheduleBody/>
 		<Footer/>
 	</main>