diff --git a/src/home/Home.jsx b/src/home/Home.jsx index 6ce4d9a3..05451fad 100644 --- a/src/home/Home.jsx +++ b/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.

- + + diff --git a/src/home/WhyBIT.css b/src/home/WhyBIT.css new file mode 100644 index 00000000..f0f029e4 --- /dev/null +++ b/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; + } +} + diff --git a/src/home/WhyBIT.jsx b/src/home/WhyBIT.jsx new file mode 100644 index 00000000..b4a8894d --- /dev/null +++ b/src/home/WhyBIT.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import './WhyBIT.css'; +import WhyBITItem from './WhyBITItem' + +export default function WhyBIT(){ + return( +
+
Why Bridge-in-Tech
+
+ Unlimited target} number="01"> + Everyone is welcomed to sign up as mentees regardless of gender,age, religion, sexuality and/or believes. There’s room for everyone! + + Hands-on learning} 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! + + Organisation relief} number="03"> + Organisations are assured of employing individuals they could trust because they’ve had a hand in training them.Win win situation! + +
+
+ ) +} \ No newline at end of file diff --git a/src/home/WhyBITItem.jsx b/src/home/WhyBITItem.jsx new file mode 100644 index 00000000..34d65067 --- /dev/null +++ b/src/home/WhyBITItem.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import './WhyBIT.css'; + +export default function WhyBITItem(props){ + return( +
+ {props.number}

+ {props.heading}

+ {props.children} +
+ ) +} \ No newline at end of file