Skip to content

Commit e2853a3

Browse files
cblanccblanc
committed
chore(ui): Redesign API endpoints section with split layout and improved aesthetics
- Add custom API network hub icon (api.png) above section heading - Replace three-column grid with split layout featuring prominent validation card - Implement responsive design with proper mobile/tablet breakpoints - Add dark mode support with appropriate card backgrounds and text contrast - Update gradient background to be more subtle and appropriate for subsection - Include enhanced typography with larger featured headings and better spacing
1 parent ffb5916 commit e2853a3

3 files changed

Lines changed: 223 additions & 30 deletions

File tree

‎src/components/HomepageProducts/index.tsx‎

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,40 @@ export default function HomepageProducts(): React.JSX.Element {
99
<div className="container">
1010
<div className="row">
1111
<div className="col col--12 text--center">
12-
<h2 className={styles.header}>API Endpoints and methods</h2>
12+
<div className="text--center">
13+
<img src="img/api.png" className={styles.featureSvg} />
14+
</div>
15+
<h2 className={styles.header}>API Endpoints</h2>
1316
</div>
1417
</div>
15-
<div className="row margin-bottom--xl">
16-
<div className={clsx("col col--4")}>
17-
<div className="text--center padding-horiz--md">
18-
<h3 className={styles.pointLabel}>Postcode Validation</h3>
19-
<p>
20-
Quickly confirm if a UK postcode is valid, find nearest
21-
postcodes or lookup outward codes
22-
</p>
18+
<div className={styles.splitContainer}>
19+
<div className={clsx(styles.featureCard, styles.featuredCard)}>
20+
<div className={styles.featuredContent}>
21+
<div className={styles.featuredText}>
22+
<h3 className={styles.featuredLabel}>Postcode Validation</h3>
23+
<p className={styles.featuredDescription}>
24+
Quickly confirm if a UK postcode is valid, find nearest
25+
postcodes or lookup outward codes. Our validation API handles
26+
all UK postcode formats and provides detailed responses with
27+
comprehensive geographic data.
28+
</p>
29+
<div className={styles.featuredCta}>
30+
<a href="/docs/postcode/lookup" className={styles.learnMore}>
31+
Learn more →
32+
</a>
33+
</div>
34+
</div>
2335
</div>
2436
</div>
25-
<div className={clsx("col col--4")}>
26-
<div className="text--center padding-horiz--md">
37+
<div className={styles.smallCardsContainer}>
38+
<div className={clsx(styles.featureCard, styles.smallCard)}>
2739
<h3 className={styles.pointLabel}>Bulk Reverse Geocoding</h3>
2840
<p>
2941
Convert large sets of lat/long coordinates into their nearest
3042
postcode areas
3143
</p>
3244
</div>
33-
</div>
34-
<div className={clsx("col col--4")}>
35-
<div className="text--center padding-horiz--md">
45+
<div className={clsx(styles.featureCard, styles.smallCard)}>
3646
<h3 className={styles.pointLabel}>
3747
Geographical & Demographic Data
3848
</h3>
@@ -44,19 +54,21 @@ export default function HomepageProducts(): React.JSX.Element {
4454
</div>
4555
</div>
4656
<div className="row margin-top--xl">
47-
<div className="col col--12 text--center gap-4">
48-
<a
49-
href="/products"
50-
className="button button--primary button--lg margin-right--md"
51-
>
52-
Try it now
53-
</a>
54-
<a
55-
href="/docs/overview"
56-
className="button button--secondary button--lg"
57-
>
58-
Documentation
59-
</a>
57+
<div className="col col--12 text--center">
58+
<div className={styles.buttonContainer}>
59+
<a
60+
href="/products"
61+
className="button button--primary button--lg"
62+
>
63+
Try it now
64+
</a>
65+
<a
66+
href="/docs/overview"
67+
className="button button--secondary button--lg"
68+
>
69+
Documentation
70+
</a>
71+
</div>
6072
</div>
6173
</div>
6274
</div>

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

Lines changed: 184 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,198 @@
11
.header {
22
font-size: 2rem;
33
margin-bottom: 4rem;
4+
font-weight: 600;
5+
color: var(--ifm-heading-color);
46
}
57

68
.pointLabel {
79
font-size: 1.5rem;
10+
font-weight: 600;
11+
margin-bottom: 1rem;
12+
color: inherit;
813
}
914

1015
.features {
1116
display: flex;
1217
align-items: center;
13-
padding: 2rem 0;
18+
padding: 100px 0;
1419
width: 100%;
15-
margin-top: 100px;
16-
padding: 100px 0
20+
background: linear-gradient(135deg, rgba(43, 75, 90, 0.15) 0%, rgba(67, 94, 103, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
21+
}
22+
23+
/* Dark mode background adjustments */
24+
[data-theme="dark"] .features {
25+
background: linear-gradient(135deg, rgba(76, 142, 160, 0.1) 0%, rgba(92, 158, 175, 0.08) 50%, rgba(107, 182, 201, 0.05) 100%);
26+
}
27+
28+
.splitContainer {
29+
display: flex;
30+
gap: 2rem;
31+
max-width: 1200px;
32+
margin: 0 auto;
33+
padding: 0 1rem;
34+
align-items: stretch;
35+
}
36+
37+
.featureCard {
38+
background: rgba(255, 255, 255, 0.95);
39+
backdrop-filter: blur(10px);
40+
border-radius: 16px;
41+
box-shadow: var(--shadow-lg);
42+
transition: var(--transition-medium);
43+
border: 1px solid rgba(255, 255, 255, 0.2);
44+
display: flex;
45+
flex-direction: column;
46+
color: var(--ifm-color-emphasis-800);
47+
}
48+
49+
.featureCard:hover {
50+
transform: translateY(-8px);
51+
box-shadow: var(--shadow-xl);
52+
background: rgba(255, 255, 255, 1);
53+
}
54+
55+
/* Dark mode card adjustments */
56+
[data-theme="dark"] .featureCard {
57+
background: rgba(30, 30, 30, 0.9);
58+
border: 1px solid rgba(255, 255, 255, 0.1);
59+
color: var(--ifm-font-color-base);
60+
}
61+
62+
[data-theme="dark"] .featureCard:hover {
63+
background: rgba(40, 40, 40, 0.95);
64+
}
65+
66+
.featuredCard {
67+
flex: 2;
68+
padding: 3rem;
69+
min-height: 300px;
70+
}
71+
72+
.smallCardsContainer {
73+
flex: 1;
74+
display: flex;
75+
flex-direction: column;
76+
gap: 1.5rem;
77+
}
78+
79+
.smallCard {
80+
flex: 1;
81+
padding: 2rem;
82+
text-align: center;
83+
}
84+
85+
.featuredContent {
86+
display: flex;
87+
align-items: center;
88+
height: 100%;
89+
}
90+
91+
.featuredIcon {
92+
flex-shrink: 0;
93+
}
94+
95+
.cardIcon {
96+
width: 80px;
97+
height: 80px;
98+
}
99+
100+
.featuredText {
101+
flex: 1;
102+
}
103+
104+
.featuredLabel {
105+
font-size: 2rem;
106+
font-weight: 700;
107+
margin-bottom: 1rem;
108+
color: inherit;
109+
}
110+
111+
.featuredDescription {
112+
font-size: 1.1rem;
113+
line-height: 1.6;
114+
margin-bottom: 1.5rem;
115+
color: inherit;
116+
}
117+
118+
.featuredCta {
119+
margin-top: auto;
120+
}
121+
122+
.learnMore {
123+
color: var(--ifm-color-primary);
124+
text-decoration: none;
125+
font-weight: 600;
126+
font-size: 1rem;
127+
transition: var(--transition-fast);
128+
}
129+
130+
.learnMore:hover {
131+
color: var(--ifm-color-primary-dark);
132+
text-decoration: none;
133+
}
134+
135+
.featureSvg {
136+
height: 100px;
137+
width: 100px;
138+
margin-bottom: 2rem;
139+
}
140+
141+
.buttonContainer {
142+
display: flex;
143+
gap: 1rem;
144+
justify-content: center;
145+
flex-wrap: wrap;
146+
}
147+
148+
/* Responsive breakpoints */
149+
@media (max-width: 996px) {
150+
.splitContainer {
151+
flex-direction: column;
152+
gap: 2rem;
153+
}
154+
155+
.featuredContent {
156+
flex-direction: column;
157+
text-align: center;
158+
gap: 1.5rem;
159+
}
160+
161+
.smallCardsContainer {
162+
flex-direction: row;
163+
}
164+
165+
.smallCard {
166+
flex: 1;
167+
}
168+
}
169+
170+
@media (max-width: 768px) {
171+
.splitContainer {
172+
padding: 0 0.5rem;
173+
gap: 1.5rem;
174+
}
175+
176+
.featuredCard {
177+
padding: 2rem;
178+
min-height: auto;
179+
}
180+
181+
.smallCardsContainer {
182+
flex-direction: column;
183+
gap: 1rem;
184+
}
185+
186+
.smallCard {
187+
padding: 1.5rem;
188+
}
189+
190+
.cardIcon {
191+
width: 60px;
192+
height: 60px;
193+
}
194+
195+
.featuredLabel {
196+
font-size: 1.75rem;
197+
}
17198
}

‎static/img/api.png‎

1.97 MB
Loading

0 commit comments

Comments
 (0)