Skip to content

Commit e9a35c2

Browse files
kerv14kerv14
committed
ideal postcodes cta
1 parent 3403552 commit e9a35c2

4 files changed

Lines changed: 121 additions & 2 deletions

File tree

‎src/components/CallToAction/index.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import clsx from "clsx";
2+
//@ts-ignore
3+
import Heading from "@theme/Heading";
4+
//@ts-ignore
5+
import styles from "./styles.module.css";
6+
import React from "react";
7+
8+
export default function CallToAction(): JSX.Element {
9+
return (
10+
<section className={styles.section}>
11+
<div className="container">
12+
<div className="row margin-bottom--xl">
13+
<div className="col col--12 d-flex align-items-center justify-content-center">
14+
<div className="text--center">
15+
<Heading as="h2" className="margin-bottom--md">
16+
When You Need More Than Open Data
17+
</Heading>
18+
<p>
19+
Some projects outgrow what free data alone can offer. While our
20+
free service is robust, your project might benefit <br />
21+
from a more comprehensive solution. Ideal Postcodes offers
22+
several key advantages.
23+
</p>
24+
</div>
25+
</div>
26+
</div>
27+
<div className="row margin-bottom--xl">
28+
<div className={clsx("col col--6 margin-bottom--xl")}>
29+
<div className="text--center padding-horiz--md">
30+
<Heading as="h3">Broader Coverage</Heading>
31+
<p>
32+
Includes mainland UK plus additional territories such as the
33+
Channel Islands and Isle of Man
34+
</p>
35+
</div>
36+
</div>
37+
<div className={clsx("col col--6 margin-bottom--xl")}>
38+
<div className="text--center padding-horiz--md">
39+
<Heading as="h3">Daily Data Updates</Heading>
40+
<p>
41+
Licensed partner of Royal mail and other authoritative data
42+
sources with daily updates
43+
</p>
44+
</div>
45+
</div>
46+
<div className={clsx("col col--6 margin-bottom--xl")}>
47+
<div className="text--center padding-horiz--md">
48+
<Heading as="h3">Enhanced Address Data</Heading>
49+
<p>
50+
Access UK rooftop geocodes, UPRNs and more unique property
51+
datasets
52+
</p>
53+
</div>
54+
</div>
55+
<div className={clsx("col col--6 margin-bottom--xl")}>
56+
<div className="text--center padding-horiz--md">
57+
<Heading as="h3">Dedicated Support</Heading>
58+
<p>
59+
Includes account access, technical support, and optional SLAs
60+
</p>
61+
</div>
62+
</div>
63+
</div>
64+
<div className="row">
65+
<div className="col col--12 text--center">
66+
<button>Explore Ideal Postcodes</button>
67+
</div>
68+
</div>
69+
</div>
70+
</section>
71+
);
72+
}

‎src/components/CallToAction/styles.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.section {
2+
display: flex;
3+
align-items: center;
4+
padding: 2rem 0;
5+
width: 100%;
6+
margin-top: 100px;
7+
padding: 180px 0;
8+
background-color: #dde6f3;
9+
}

‎src/pages/index.module.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,42 @@
33
* and scoped locally.
44
*/
55

6+
button {
7+
margin-left: auto;
8+
font-size: 1em;
9+
background-color: var(--ifm-color-primary);
10+
color: white;
11+
padding: 10px 20px;
12+
border-radius: var(--border-radius-md);
13+
border: none;
14+
font-weight: var(--font-weight-medium);
15+
transition:
16+
background-color var(--transition-fast),
17+
transform var(--transition-fast);
18+
box-shadow: var(--shadow-sm);
19+
}
20+
21+
button:hover {
22+
cursor: pointer;
23+
background-color: var(--ifm-color-primary-lighter);
24+
transform: translateY(-1px);
25+
box-shadow: var(--shadow-md);
26+
}
27+
28+
button:active {
29+
background-color: var(--ifm-color-primary-darker);
30+
transform: translateY(1px);
31+
box-shadow: var(--shadow-sm);
32+
}
33+
34+
[data-theme="dark"] button {
35+
background-color: var(--ifm-color-primary);
36+
}
37+
38+
[data-theme="dark"] button:hover {
39+
background-color: var(--ifm-color-primary-lighter);
40+
}
41+
642
.heroBanner {
743
text-align: center;
844
position: relative;

‎src/pages/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import HomepageFeatures from "@site/src/components/HomepageFeatures";
55
import Heading from "@theme/Heading";
66
import React from "react";
77
import styles from "./index.module.css";
8-
import HomepageDemos from "../components/Demos";
8+
import HomepageProducts from "../components/HomepageProducts";
9+
import CallToAction from "../components/CallToAction";
910

1011
function HomepageHeader() {
1112
const { siteConfig } = useDocusaurusContext();
@@ -62,7 +63,8 @@ export default function Home(): JSX.Element {
6263
<HomepageHeader />
6364
<main>
6465
<HomepageFeatures />
65-
<HomepageDemos />
66+
<HomepageProducts />
67+
<CallToAction />
6668
</main>
6769
</Layout>
6870
);

0 commit comments

Comments
 (0)