Skip to content

Commit bf2fb18

Browse files
feat: Added CTA's on Tutorials site (#57)
* feat: Added CTA's on Tutorials site * added side CTA * fix; build error * build error fix
1 parent ae56989 commit bf2fb18

8 files changed

Lines changed: 160 additions & 119 deletions

File tree

src/components/Footer.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@ const Footer = ()=> {
1010
return (
1111
<>
1212
<FeedbackButtons />
13-
<SubscribeButton />
13+
{/* <SubscribeButton /> */}
14+
<div className='footer-cta rounded'>
15+
<div className='flex items-center justify-between'>
16+
<h3 className='cta-heading m-0'>Learn how to execute low code tests across 3000+ device / browser environments.</h3>
17+
<a href='/request-demo' target={'_blank'} className='cta-link border border-green-600 px-4 py-1.5 bg-green-600 text-white rounded h-10'>Schedule a free demo</a>
18+
</div>
19+
</div>
1420
<div className="footer_greyBox">
1521
<svg width="109" height="26" viewBox="0 0 109 26" fill="none" xmlns="http://www.w3.org/2000/svg">
1622
<path

src/components/Footer.scss

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
.footer_docs{
2-
margin-top: 0px;
3-
position: relative;
4-
top: 40px;
2+
margin: 2rem 0;
53
@media (max-width: 576px) {
64
overflow: hidden;
75
top: 20px;
@@ -202,6 +200,7 @@
202200
border-radius: 3px;
203201
background-color: #FFF;
204202
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03);
203+
width: 100%;
205204
@media only screen and (max-width: 767px) {
206205
max-width: 100%;
207206
width: 100%;
@@ -222,7 +221,7 @@
222221
background: #03A973 !important;
223222
border: 1px solid #03A973 !important;
224223
max-width: 100%;
225-
width: 92%;
224+
width: 97%;
226225
height: 40px;
227226
border-radius: 4px;
228227
-webkit-border-radius: 2px;
@@ -321,4 +320,18 @@
321320
.text_end{
322321
text-align: end!important;
323322
}
323+
}
324+
.footer-cta{
325+
background-color: #EFEFEF;
326+
padding: 2rem 6rem;
327+
.cta-heading{
328+
flex: 0 0 70%;
329+
font-size: 24px !important;
330+
line-height: 38px !important;
331+
margin: 0 !important;
332+
}
333+
.cta-link{
334+
font-weight: 600;
335+
font-size: 18px;
336+
}
324337
}

src/components/LeftNav.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
//height: 100%;
1010
position: sticky;
1111
height: 100vh;
12-
top: 0px;
12+
top: 4.5rem;
1313
font-size: 14px;
1414
overflow: scroll;
1515
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica, Arial, sans-serif;

src/components/header.jsx

Lines changed: 62 additions & 0 deletions
Large diffs are not rendered by default.

src/components/navcards.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const data = [
5050

5151
const Card = ({ title, description, path }) => {
5252
return (
53-
<a href={path} className="card md:w-5/12 p-7 cursor-pointer justify-between flex mr-2 mb-2 w-full ">
53+
<a href={path} className="card md:w-5/12 p-7 cursor-pointer justify-between flex w-full ">
5454
<div className="w-fit">
5555
<span className="card_heading">{title}</span><br/>
5656
<span className="card_desc">{description}</span>
@@ -68,7 +68,7 @@ const Card = ({ title, description, path }) => {
6868

6969
const CardList = () => {
7070
return (
71-
<div className="w-full flex flex-wrap">
71+
<div className="w-full flex flex-wrap gap-2">
7272
{data.map((item) => (
7373
<Card key={item.id} title={item.title} description={item.description} path={item.path}/>
7474
))}

src/pages/tutorials/index.jsx

Lines changed: 8 additions & 40 deletions
Large diffs are not rendered by default.

src/templates/page.jsx

Lines changed: 35 additions & 69 deletions
Large diffs are not rendered by default.

src/templates/page.scss

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,12 @@ body{
2020
height: 100%;
2121
}
2222

23-
#root_header > div {
23+
#root_header{
24+
position: sticky;
25+
top: 0;
26+
z-index: 99;
27+
background-color: #fff;
28+
> div {
2429
@media (max-width: 576px) {
2530
// position: relative;
2631
// z-index: 10;
@@ -68,6 +73,7 @@ body{
6873
}
6974
}
7075
}
76+
}
7177

7278
.doc-page {
7379

@@ -561,7 +567,7 @@ code[class*="language-"] {
561567
.homepage_footer{
562568
flex-basis: 100%;
563569
justify-content: space-between;
564-
margin-bottom: 4rem;
570+
margin: 2rem 0 4rem;
565571
.pagination_buttons{
566572
@media (min-width: $screen_768) {
567573
margin: 0;
@@ -586,4 +592,24 @@ code[class*="language-"] {
586592
background-size: cover;
587593
background-position: center;
588594
}
595+
}
596+
.float-cta{
597+
@apply px-4 py-8 flex justify-center flex-col;
598+
background-color: #EFEFEF;
599+
width: 95%;
600+
margin: 3rem 0 0;
601+
.cta-title{
602+
margin: 0 !important;
603+
font-size: 24px !important;
604+
line-height: 36px !important;
605+
text-align: center;
606+
}
607+
.signup-btn{
608+
margin: 1rem 0 0;
609+
@apply flex justify-center;
610+
}
611+
}
612+
613+
.fixed{
614+
display: none;
589615
}

0 commit comments

Comments
 (0)