Skip to content

Commit d6bc146

Browse files
zuhdilzuhdil
authored
Merge pull request #59 from akvo/social-accountibility-updates
update design
2 parents 23984ec + 7150d6d commit d6bc146

File tree

14 files changed

+2143
-2093
lines changed

14 files changed

+2143
-2093
lines changed

‎frontend/components/FilterSection.js‎

Lines changed: 361 additions & 146 deletions
Large diffs are not rendered by default.

‎frontend/components/Header.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const menuItems = [
1515
label: 'Invest',
1616
dropdown: [
1717
{ label: 'Social Accountability', path: '/social-accountability' },
18-
{ label: 'Investment Opportunities', path: '/investment-opportunities' },
18+
{ label: 'Investment Opportunities', path: '/investment-profiles' },
1919
],
2020
},
2121
{ label: 'Connect', path: '/stakeholder-directory' },

‎frontend/components/Hero.js‎

Lines changed: 101 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,103 @@
11
import React, { useState } from 'react';
22
import Button from './Button';
33

4-
export default function HeroSection({ searchTerm, setSearchTerm }) {
4+
export default function HeroSection({
5+
searchTerm,
6+
setSearchTerm,
7+
pageTitle = 'Knowledge library',
8+
pageDescription,
9+
showSearch = true,
10+
searchText,
11+
}) {
512
const [searchValue, setSearchValue] = useState('');
613

714
return (
8-
<div
9-
className="relative bg-gray-10 overflow-hidden"
10-
style={{
11-
backgroundImage: "url('/images/graphic.svg'), url('/images/cubes.svg')",
12-
backgroundPosition: 'right center, left center',
13-
backgroundRepeat: 'no-repeat, no-repeat',
14-
backgroundSize: 'auto, cover',
15-
}}
16-
>
17-
<div className="relative z-10 container mx-auto py-16">
15+
<div className="relative bg-gray-10 overflow-hidden">
16+
<div
17+
className="hidden md:block absolute inset-0"
18+
style={{
19+
backgroundImage:
20+
"url('/images/graphic.svg'), url('/images/cubes.svg')",
21+
backgroundPosition: 'right center, left center',
22+
backgroundRepeat: 'no-repeat, no-repeat',
23+
backgroundSize: 'auto, cover',
24+
}}
25+
/>
26+
27+
<div
28+
className="hidden sm:block md:hidden absolute inset-0"
29+
style={{
30+
backgroundImage:
31+
"url('/images/graphic.svg'), url('/images/cubes.svg')",
32+
backgroundPosition: 'right top, left bottom',
33+
backgroundRepeat: 'no-repeat, no-repeat',
34+
backgroundSize: '40%, 80%',
35+
}}
36+
/>
37+
38+
<div
39+
className="sm:hidden absolute inset-0"
40+
style={{
41+
backgroundImage: "url('/images/graphic.svg')",
42+
backgroundPosition: 'top right',
43+
backgroundRepeat: 'no-repeat',
44+
backgroundSize: '20%',
45+
}}
46+
/>
47+
<div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 md:py-16">
1848
<div className="max-w-2xl">
19-
<div className="mb-12">
20-
<h1 className="text-[48px] font-extrabold text-black mb-4 leading-tight">
21-
Knowledge library
49+
<div className="mb-8 sm:mb-12">
50+
<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-[48px] font-extrabold text-black mb-3 sm:mb-4 leading-tight">
51+
{pageTitle}
2252
</h1>
23-
<p className="text-xl text-gray-800">
24-
The latest industry news, interviews, technologies, and resources.
53+
<p className="text-base sm:text-lg md:text-xl text-gray-800">
54+
{pageDescription}
2555
</p>
2656
</div>
27-
28-
<div className="mb-8">
29-
<p className="text-gray-500 mb-[10px]">
30-
Search all knowledge library
31-
</p>
32-
<div className="flex gap-3">
33-
<div className="relative flex-1 flex items-center bg-white border border-gray-200 rounded-full">
34-
<svg
35-
className="absolute left-4 text-gray-400 w-5 h-5"
36-
fill="none"
37-
stroke="currentColor"
38-
viewBox="0 0 24 24"
39-
>
40-
<path
41-
strokeLinecap="round"
42-
strokeLinejoin="round"
43-
strokeWidth={2}
44-
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
57+
{showSearch && (
58+
<div className="mb-6 sm:mb-8">
59+
<p className="text-sm sm:text-base text-gray-500 mb-2 sm:mb-[10px]">
60+
{searchText ? searchText : 'Search all knowledge library'}
61+
</p>
62+
<div className="flex flex-col sm:flex-row gap-3">
63+
<div className="relative flex-1 flex items-center bg-white border border-gray-200 rounded-full">
64+
<svg
65+
className="absolute left-3 sm:left-4 text-gray-400 w-4 sm:w-5 h-4 sm:h-5"
66+
fill="none"
67+
stroke="currentColor"
68+
viewBox="0 0 24 24"
69+
>
70+
<path
71+
strokeLinecap="round"
72+
strokeLinejoin="round"
73+
strokeWidth={2}
74+
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
75+
/>
76+
</svg>
77+
<input
78+
type="text"
79+
placeholder="Kenya's arid land"
80+
value={searchValue}
81+
onChange={(e) => {
82+
setSearchValue(e.target.value);
83+
}}
84+
className="flex-1 pl-10 sm:pl-12 pr-3 sm:pr-4 h-10 sm:h-12 text-sm sm:text-base lg:text-lg bg-transparent border-none focus:outline-none text-black"
4585
/>
46-
</svg>
47-
<input
48-
type="text"
49-
placeholder="Kenya's arid land"
50-
value={searchValue}
51-
onChange={(e) => {
52-
setSearchValue(e.target.value);
53-
}}
54-
className="flex-1 pl-12 pr-4 h-12 text-lg bg-transparent border-none focus:outline-none text-black"
55-
/>
86+
<Button
87+
variant="primary"
88+
size="md"
89+
className="hidden lg:block px-4 sm:px-6 md:px-8 mx-1 text-sm sm:text-base bg-primary-500"
90+
onClick={() => {
91+
setSearchTerm(searchValue);
92+
}}
93+
>
94+
Search
95+
</Button>
96+
</div>
5697
<Button
5798
variant="primary"
5899
size="md"
59-
className="px-8 mx-1"
100+
className="sm:hidden w-full py-3 text-sm bg-primary-500"
60101
onClick={() => {
61102
setSearchTerm(searchValue);
62103
}}
@@ -65,9 +106,23 @@ export default function HeroSection({ searchTerm, setSearchTerm }) {
65106
</Button>
66107
</div>
67108
</div>
68-
</div>
109+
)}
69110
</div>
70111
</div>
112+
113+
<style jsx>{`
114+
@media (max-width: 640px) {
115+
.relative.bg-gray-10 {
116+
background-size: 50%, 100% !important;
117+
background-position: right top, left center !important;
118+
}
119+
}
120+
@media (max-width: 768px) {
121+
.relative.bg-gray-10 {
122+
background-size: 60%, 100% !important;
123+
}
124+
}
125+
`}</style>
71126
</div>
72127
);
73128
}

‎frontend/components/Icons.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,3 +138,22 @@ export const UserIcon = ({ ...props }) => (
138138
/>
139139
</svg>
140140
);
141+
142+
export const ValueChainIcon = ({ ...props }) => (
143+
<svg
144+
width="16"
145+
height="24"
146+
viewBox="0 0 16 24"
147+
fill="none"
148+
xmlns="http://www.w3.org/2000/svg"
149+
{...props}
150+
>
151+
<path
152+
d="M4.21879 14.0072L3.00879 23.1172L8.00879 20.1172L13.0088 23.1172L11.7988 13.9972M15.0088 8.11719C15.0088 11.9832 11.8748 15.1172 8.00879 15.1172C4.1428 15.1172 1.00879 11.9832 1.00879 8.11719C1.00879 4.25119 4.1428 1.11719 8.00879 1.11719C11.8748 1.11719 15.0088 4.25119 15.0088 8.11719Z"
153+
stroke="#21252B"
154+
strokeWidth="1.5"
155+
strokeLinecap="round"
156+
strokeLinejoin="round"
157+
/>
158+
</svg>
159+
);

0 commit comments

Comments
 (0)