Skip to content

Commit 6a0d2ea

Browse files
Payal13Payal13
committed
Fix all homepage banner styling and images
1 parent 4e12eee commit 6a0d2ea

File tree

6 files changed

+72
-48
lines changed

6 files changed

+72
-48
lines changed

‎public/index.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,8 @@
3434
Limited
3535
</title>
3636
<!-- <link rel="stylesheet" href="styles/main.min.css" /> -->
37-
<link
38-
href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700"
39-
rel="stylesheet"
40-
/>
37+
<link rel="preconnect" href="https://fonts.gstatic.com">
38+
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
4139
<script
4240
type="text/javascript"
4341
async=""

‎src/assets/images/home/contact_us_btn.png‎

7.99 KB
Loading

‎src/assets/images/home/contact_us_btn_mb.png‎

6.15 KB
Loading

‎src/assets/images/home/contact_us_mb.png‎

6.15 KB
Loading

‎src/assets/stylesheets/pages/_home.scss‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -504,7 +504,7 @@
504504
}
505505

506506
.disruption-margin {
507-
margin: 3.5rem 3.5rem !important;
507+
margin: 1rem 1rem !important;
508508
}
509509

510510
.slider {
@@ -678,15 +678,6 @@
678678
}
679679
}
680680

681-
#page-wrap {
682-
@include media-breakpoint-down(sm) {
683-
padding-top: 54px;
684-
}
685-
@include media-breakpoint-up(sm) {
686-
padding-top: 76px;
687-
}
688-
}
689-
690681
.bg-light-gray {
691682
background-color: $gray-96;
692683
}
@@ -696,7 +687,7 @@
696687
display: flex;
697688
align-items: center;
698689
justify-content: flex-end;
699-
background: transparent url('../images/home/banner_mb.png') no-repeat top center;
690+
background: transparent url('../images/home/banner_mb.png') no-repeat bottom center;
700691
background-size: cover;
701692
flex-direction: column;
702693
padding-bottom: 48px;
@@ -707,12 +698,46 @@
707698
display: flex;
708699
align-items: center;
709700
justify-content: flex-end;
710-
background: transparent url('../images/home/banner.png') no-repeat top center;
701+
background: transparent url('../images/home/banner.png') no-repeat bottom center;
711702
background-size: cover;
712703
flex-direction: column;
713704
padding-bottom: 48px;
714705
}
715706

707+
.banner-normal-text {
708+
margin-top: -10px;
709+
font-size: 16px;
710+
line-height: 20px;
711+
@include media-breakpoint-down(sm) {
712+
margin-top: -4px;
713+
}
714+
}
715+
716716
.btn-banner-contact-us {
717+
margin-bottom: 8px;
718+
}
719+
720+
.banner-heading-font-weight-bold {
721+
font-weight: 900;
722+
font-size: 52px;
723+
line-height: 62px;
724+
margin-bottom: 24px;
725+
@include media-breakpoint-down(sm) {
726+
font-size: 30px;
727+
line-height: 36px;
728+
margin-bottom: 18px;
729+
}
730+
}
731+
732+
.banner-secondary-heading-font-weight-bold {
733+
font-weight: 700;
734+
line-height: 0px;
735+
font-size: 24px;
736+
margin-bottom: 24px;
737+
@include media-breakpoint-down(sm) {
738+
line-height: 16px;
739+
font-size: 18px;
740+
margin-bottom: 16px;
741+
}
717742

718743
}

‎src/components/home/HomePageBanner.js‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,70 @@
11
import React from 'react';
22
import { Row, Col } from 'reactstrap';
33
import Santa from '../../assets/images/home/santa.png';
4+
import SantaMob from '../../assets/images/home/santa_mb.png';
5+
import ContactUsBtn from '../../assets/images/home/contact_us_btn.png';
6+
import ContactUsBtnMob from '../../assets/images/home/contact_us_btn_mb.png';
47
import Media from 'react-media';
58

9+
const TagLines = () => {
10+
return (
11+
<Row className="justify-content-center">
12+
<Col>
13+
<p className="text-center disruption-margin">
14+
Disruption is not the future, it is the present. In an ever evolving technological landscape, it is
15+
<br/>
16+
imperative for innovation to win over the mundane, and that's exactly what we aim to achieve.
17+
</p>
18+
</Col>
19+
</Row>
20+
)
21+
};
22+
623
const HomePageBanner = () => {
724
return (
825
<Media query="(max-width: 500px)">
926
{matches =>
1027
matches ? (
1128
<section className="bg-light-gray justify-content-center">
1229
<div className="banner-wrapper-mb">
13-
<h2 className="font-weight-bold text-white">
30+
<h2 className="banner-heading-font-weight-bold text-white text-center">
1431
INNOVATION & DISRUPTION
1532
</h2>
16-
<h5 className="font-weight-bold text-white">
33+
<h5 className="banner-secondary-heading-font-weight-bold text-white">
1734
is the way We change the Game
1835
</h5>
19-
<a href="/contact_us" className="btn btn-xs btn-danger rounded-pill mb-1 btn-banner-contact-us">
20-
Contact us
36+
<a href="/contact_us">
37+
<img src={ContactUsBtnMob} alt="contact-us" />
2138
</a>
22-
<h6 className="text-white">
39+
<h6 className="text-white banner-normal-text">
2340
to change yours
2441
</h6>
2542
</div>
26-
<div className="text-center banner-text" style={{ marginTop: '-4px' }}>
27-
<img src={Santa} alt="santa-mobile" />
43+
<div className="text-center banner-text">
44+
<img src={SantaMob} alt="santa-mobile" style={{ transform: `rotate(-10deg)` }}/>
2845
</div>
29-
<Row className="justify-content-center m-auto p-md-3">
30-
<Col>
31-
<p className="text-center disruption-margin">
32-
Disruption is not the future, it is the present. In an ever evolving technological landscape, it is
33-
<br/>
34-
imperative for innovation to win over the mundane, and that's exactly what we aim to achieve.
35-
</p>
36-
</Col>
37-
</Row>
46+
<TagLines />
3847
</section>
3948
) : (
4049
<section className="bg-light-gray justify-content-center">
4150
<div className="banner-wrapper">
42-
<h2 className="font-weight-bold text-white">
51+
<h2 className="banner-heading-font-weight-bold text-white">
4352
INNOVATION & DISRUPTION
4453
</h2>
45-
<h5 className="font-weight-bold text-white">
54+
<h5 className="banner-secondary-heading-font-weight-bold text-white">
4655
is the way We change the Game
4756
</h5>
48-
<a href="/contact_us" className="btn btn-danger rounded-pill mb-1 btn-banner-contact-us">
49-
Contact us
57+
<a href="/contact_us">
58+
<img src={ContactUsBtn} alt="contact-us" />
5059
</a>
51-
<h6 className="text-white">
60+
<h6 className="text-white banner-normal-text">
5261
to change yours
5362
</h6>
5463
</div>
55-
<div className="text-center" style={{ marginTop: '-4px' }}>
56-
<img src={Santa} alt="santa" />
64+
<div className="text-center">
65+
<img src={Santa} alt="santa" style={{ transform: `rotate(-10deg)` }}/>
5766
</div>
58-
<Row className="justify-content-center m-auto p-md-3">
59-
<Col>
60-
<p className="text-center disruption-margin">
61-
Disruption is not the future, it is the present. In an ever evolving technological landscape, it is
62-
<br/>
63-
imperative for innovation to win over the mundane, and that's exactly what we aim to achieve.
64-
</p>
65-
</Col>
66-
</Row>
67+
<TagLines />
6768
</section>
6869
)
6970
}

0 commit comments

Comments
 (0)