UI:Implemented Why BIT section

src/home/Home.jsx

@@ -5,6 +5,8 @@ import ReadAboutUs from './ReadAboutUs'
 import GetInTouch from './GetInTouch'
 import FAQ from "./FAQ";
 import VideoSection from "./VideoSection";
+import WhyBIT from "./WhyBIT";
+
 export default function Home() {
 
     return (
@@ -20,7 +22,8 @@ export default function Home() {
                     environment for these mentor/mentee to work in.
                     </p>
                 </div>
-            </section>
+            </section>          
+            <WhyBIT/>
             <VideoSection />
             <ReadAboutUs />
             <FAQ />

src/home/WhyBIT.css

@@ -0,0 +1,64 @@
+.YBITHead{
+    font-family: MetaProRegular;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 40px;
+    line-height: 52px;    
+    align-items: center;
+    text-align: center;
+    padding-bottom: 3rem;
+    padding-top: 3rem;
+}
+
+.WhyBITflex{
+    display:flex;
+    flex-direction: row;
+    justify-content: space-around;
+    padding:2rem;
+    align-items: center;    
+}
+
+.WhyBITNumber{
+    font-family: Meta Pro;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 64px;
+    line-height: 97.8%;
+    color: #255DAD;
+}
+
+.WhyBITHeading{
+    font-family: Meta Pro;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 42px;
+}
+
+.WhyBITContent{
+    font-family: Meta Pro;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 24px;
+    line-height: 31px;
+}
+
+.YBITitem{
+    padding: 3rem;
+}
+
+.YBITitem:not(:last-child){    
+    border-right:0.25px solid #1F2430;
+}
+
+@media screen and (max-width: 1033px) {
+    .WhyBITflex{
+        display:flex;
+        flex-direction: column;  
+    }
+    .YBITitem:not(:last-child){
+        border-right:0px solid #1F2430;
+        border-bottom:0.25px solid #1F2430;
+    }
+}
+

src/home/WhyBIT.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './WhyBIT.css';
+import WhyBITItem from './WhyBITItem'
+
+export default function WhyBIT(){
+    return(
+        <div align="center" style={{padding:'2rem 0rem 4rem 0rem',backgroundColor:"#E5E5E5"}}>
+            <div className="YBITHead"><span style={{color:"#EF9425"}}>Why</span> Bridge-in-Tech</div>
+            <div class="WhyBITflex">            
+                <WhyBITItem heading={<span><span style={{color:"#EF9425"}}>Unlimited </span>target</span>} number="01">
+                Everyone is welcomed to sign up as mentees regardless of gender,age, religion, sexuality and/or believes. There’s room for everyone!
+                </WhyBITItem>                
+                <WhyBITItem heading={<span><span style={{color:"#EF9425"}}>Hands-on </span>learning</span>} number="02">
+                With the help of our mentors, our mentees learn by working on actual projects provided by our partner organisations. We learn by doing!
+                </WhyBITItem>                
+                <WhyBITItem heading={<span><span style={{color:"#EF9425"}}>Organisation </span>relief</span>} number="03">
+                Organisations are assured of employing individuals they could trust because they’ve had a hand in training them.Win win situation!
+                </WhyBITItem>
+            </div>
+        </div>
+    )
+}

src/home/WhyBITItem.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import './WhyBIT.css';
+
+export default function WhyBITItem(props){
+    return(
+        <div class="YBITitem" align="center">
+            <span className="WhyBITNumber">{props.number}</span><br/><br/>
+            <span className="WhyBITHeading">{props.heading}</span><br/><br/>
+            <span className="WhyBITContent">{props.children}</span>
+        </div>
+    )
+}