Skip to content

Commit 6fc0f5c

Browse files
bhavabhuthibhavabhuthi
authored
Merge pull request #241 from CivicDataLab/home-page-enhancements
- Updated hero text and vertically centre hero text
2 parents 83467ed + 4d2133b commit 6fc0f5c

File tree

8 files changed

+123
-67
lines changed

8 files changed

+123
-67
lines changed

‎app/[locale]/components/about.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export function About() {
4141
width={250}
4242
height={297}
4343
objectFit="contain"
44-
className="pt-10"
44+
className=" mx-auto pt-10"
4545
alt="An image representing global climate action"
4646
/>
4747
</MediaRendering>

‎app/[locale]/components/analytics-quick-links.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,9 @@ export const QuickLinks = () => {
6464
</Text>
6565
</div>
6666
<div>
67-
<Carousel className="flex w-full items-center justify-center">
68-
<div className="block xl:hidden">
67+
{/* <Carousel className="flex w-full items-center justify-center"> */}
68+
<Carousel className="flex w-full items-center justify-center gap-2 px-2">
69+
<div className="mr-2 rounded-1 bg-surfaceDefault">
6970
<CarouselPrevious />
7071
</div>
7172
<CarouselContent className="container flex w-full gap-0 px-4 md:gap-6 lg:gap-2">
@@ -81,7 +82,7 @@ export const QuickLinks = () => {
8182
className={`cursor-pointer ${styles.stateCard}`}
8283
>
8384
{/* Ensure items take up flexible width */}
84-
<div className="flex h-48 w-56 flex-col items-center justify-between rounded-4 bg-surfaceDefault p-4 text-center shadow-elementCard">
85+
<div className="flex h-48 w-56 flex-col items-center justify-between rounded-2 bg-surfaceDefault p-4 text-center shadow-elementCard">
8586
<Image
8687
width={200}
8788
height={160}
@@ -124,7 +125,7 @@ export const QuickLinks = () => {
124125
</CarouselItem>
125126
))}
126127
</CarouselContent>
127-
<div className="block xl:hidden">
128+
<div className="ml-2 rounded-1 bg-surfaceDefault">
128129
<CarouselNext />
129130
</div>
130131
</Carousel>

‎app/[locale]/components/data-stories.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,12 @@ const DataStories = () => {
6363
return (
6464
<section
6565
className=" flex h-full w-full flex-col gap-10 px-5 py-6 lg:w-fit lg:px-6 lg:py-14"
66+
// className="flex w-full flex-col gap-9 px-5 py-6 lg:px-6 lg:py-20"
6667
style={{ backgroundColor: '#222136' }}
6768
aria-label="Data stories carousel showcasing important publications and articles"
6869
>
69-
<div className=" flex flex-col gap-4 lg:pl-12">
70+
{/* <div className=" flex flex-col gap-4 lg:pl-12"> */}
71+
<div className="container flex flex-col gap-4 ">
7072
<Text
7173
variant="heading3xl"
7274
fontWeight="bold"
@@ -81,16 +83,18 @@ const DataStories = () => {
8183
</Text>
8284
</div>
8385
<div className="">
84-
<Carousel className="flex w-full items-center justify-between">
86+
{/* <Carousel className="flex w-full items-center justify-between"> */}
87+
<Carousel className="flex w-full items-center justify-between gap-2 px-2">
8588
<div className="mr-2 rounded-1 bg-surfaceDefault">
8689
<CarouselPrevious />
8790
</div>
88-
<CarouselContent className="flex w-full gap-4 px-4 lg:container lg:gap-6 ">
91+
{/* <CarouselContent className="flex w-full gap-4 px-4 lg:container lg:gap-6 "> */}
92+
<CarouselContent className="flex w-full justify-between gap-4 pl-4 pr-1 lg:container lg:gap-6">
8993
{/* Adjust padding */}
9094
{Stories.map((item, index) => (
9195
<CarouselItem
9296
key={index}
93-
className="ml-2 overflow-hidden rounded-2 bg-surfaceDefault p-3 md:basis-1/2 lg:ml-0 lg:basis-1/3 lg:p-6 "
97+
className="ml-2 overflow-hidden rounded-2 bg-surfaceDefault p-6 md:basis-1/2 lg:ml-0 lg:basis-1/3 lg:p-6 "
9498
>
9599
<Link href={item.link} className=" w-full" target="_blank">
96100
<div className="flex flex-col gap-4 ">

‎app/[locale]/components/dataset-catalog.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@ export const DatasetCatalog = () => {
5656
{Catalog.map((item, index) => (
5757
<div
5858
key={index}
59-
className="flex rounded-1 bg-surfaceDefault p-6 shadow-elementCard"
59+
// className="flex rounded-2 bg-surfaceDefault p-6 shadow-elementCard"
60+
className="flex h-full min-h-[150px] rounded-2 bg-surfaceDefault p-6 shadow-elementCard"
6061
>
6162
<Link href={item.link} className=" flex items-center gap-4">
6263
<Image src={item.icon} alt={item.alt} width={66} height={66} />

‎app/[locale]/components/hero-section.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const HeroSection = () => {
2323
className=" hidden lg:block"
2424
/>
2525
<Image
26-
src="/logo/IDS-yellow.png"
26+
src="/logo/IDS-yellow-new.png"
2727
width={360}
2828
height={56}
2929
alt="IDS-DRR expanded logo"

‎app/[locale]/components/partners.tsx‎

Lines changed: 91 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -5,66 +5,109 @@ const Partners = () => {
55
return (
66
<>
77
<section
8-
className="flex h-full w-full bg-surfaceDefault px-5 py-6 lg:px-6 lg:py-20"
8+
className="flex h-full w-full bg-baseGreenSolid5 px-5 py-6 lg:px-6 lg:py-20"
99
aria-labelledby="partners section"
1010
>
11-
<div className="container flex w-full flex-wrap gap-8 lg:gap-24">
11+
<div className="container flex w-full flex-wrap gap-8 lg:gap-24">
1212
<div className="flex flex-col gap-9">
1313
<Text className=" text-basePureBlack" variant="headingXl">
1414
Supported by
1515
</Text>
16-
<div className="flex flex-wrap items-center gap-12">
17-
<Image
18-
src="/logo/Rockefeller.png"
19-
width={193}
20-
height={66}
21-
alt="Rockefeller Logo"
22-
className="object-contain"
23-
style={{
24-
width: '193',
25-
height: '66',
26-
}}
27-
/>
28-
<Image
29-
src="/logo/PJMc.png"
30-
width={194}
31-
height={72}
32-
alt="OCP Logo"
33-
className="object-contain"
34-
style={{
35-
width: '194',
36-
height: '72',
37-
}}
38-
/>
16+
<div className="flex flex-row items-center gap-12">
17+
<div className="flex flex-col gap-4 text-center">
18+
<div className="flex h-40 flex-col items-start justify-center self-stretch rounded-2 bg-surfaceDefault p-4">
19+
<Image
20+
src="/logo/Rockefeller.png"
21+
width={193}
22+
height={66}
23+
alt="Rockefeller Logo"
24+
className="h-auto w-full object-contain"
25+
style={{
26+
width: '193',
27+
height: '66',
28+
}}
29+
/>
30+
</div>
31+
32+
<div className="mx-auto w-full max-w-[183px]">
33+
<Text variant="bodyMd" fontWeight="bold" as="h3">
34+
The Rockefeller Foundation
35+
</Text>
36+
</div>
37+
</div>
38+
<div className=" flex flex-col gap-4 text-center">
39+
<div className="flex h-40 flex-col items-start justify-center self-stretch rounded-2 bg-surfaceDefault p-4">
40+
<Image
41+
src="/logo/PJMc.png"
42+
width={194}
43+
height={72}
44+
alt="OCP Logo"
45+
className="h-auto w-full object-contain"
46+
style={{
47+
width: '194',
48+
height: '72',
49+
}}
50+
/>
51+
</div>
52+
<div className="mx-auto w-full max-w-[183px]">
53+
<Text variant="bodyMd" fontWeight="bold" as="h3">
54+
Patrick J McGovern Foundation
55+
</Text>
56+
</div>
57+
</div>
3958
</div>
4059
</div>
4160
<div className="flex flex-col gap-9">
4261
<Text className=" text-basePureBlack" variant="headingXl">
4362
In Collaboration with{' '}
4463
</Text>
45-
<div className="flex flex-wrap items-center gap-12 ">
46-
<Image
47-
src="/logo/ASDMA3.svg"
48-
width={92}
49-
height={72}
50-
alt="ASDMA Logo"
51-
className="object-contain"
52-
style={{
53-
width: '92',
54-
height: '72',
55-
}}
56-
/>
57-
<Image
58-
src="/logo/hp.png"
59-
width={92}
60-
height={72}
61-
alt="HPSDMA Logo"
62-
className="object-contain"
63-
style={{
64-
width: '92',
65-
height: '72',
66-
}}
67-
/>
64+
<div className="flex flex-row items-center gap-12 ">
65+
<div className="flex flex-col gap-4 text-center">
66+
<div className="flex h-40 flex-col items-center justify-center self-stretch rounded-2 bg-surfaceDefault p-4">
67+
<Image
68+
src="/logo/ASDMA3.svg"
69+
width={192}
70+
height={72}
71+
alt="ASDMA Logo"
72+
className="h-auto w-full object-contain"
73+
style={{
74+
width: '192',
75+
height: '72',
76+
}}
77+
/>
78+
</div>
79+
80+
<div className="mx-auto w-full max-w-[183px]">
81+
<Text variant="bodyMd" fontWeight="bold" as="h3">
82+
Assam State Disaster Management Authority
83+
</Text>
84+
</div>
85+
</div>
86+
87+
<div className=" flex flex-col gap-4 text-center">
88+
<div className="flex h-40 flex-col items-center justify-center self-stretch rounded-2 bg-surfaceDefault p-4">
89+
<Image
90+
src="/logo/hp.png"
91+
width={192}
92+
height={72}
93+
alt="HPSDMA Logo"
94+
className="h-auto w-full object-contain"
95+
style={{
96+
width: '80%',
97+
height: 'auto',
98+
}}
99+
// style={{
100+
// width: '192',
101+
// height: '72',
102+
// }}
103+
/>
104+
</div>
105+
<div className="mx-auto w-full max-w-[221px]">
106+
<Text variant="bodyMd" fontWeight="bold" as="h3">
107+
Himachal Pradesh State Disaster Management Authority
108+
</Text>
109+
</div>
110+
</div>
68111
</div>
69112
</div>
70113
</div>

‎app/[locale]/components/resources.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,11 @@ const Resources = () => {
6363

6464
return (
6565
<section
66-
className="flex h-full w-full flex-col gap-10 px-5 py-6 lg:px-6 lg:py-14"
66+
className="flex h-full w-full flex-col gap-10 px-5 py-6 lg:px-6 lg:py-14"
6767
style={{ backgroundColor: '#222136' }}
6868
aria-label="Various resources for data exploration"
6969
>
70-
<div className=" container flex flex-col gap-4 ">
70+
<div className="container flex flex-col gap-4 ">
7171
<Text
7272
variant="heading3xl"
7373
fontWeight="bold"
@@ -81,18 +81,20 @@ const Resources = () => {
8181
</Text>
8282
</div>
8383
<div>
84-
<Carousel className="flex w-full items-center justify-center">
84+
{/* <Carousel className="flex w-full items-center justify-center"> */}
85+
<Carousel className="flex w-full items-center justify-center gap-2 px-2">
8586
<div className="mr-2 rounded-1 bg-surfaceDefault">
8687
<CarouselPrevious />
8788
</div>
8889
{data.length > 0 ? (
89-
<CarouselContent className="container flex w-full gap-4 px-4 lg:gap-4 ">
90-
<CarouselItem className="ml-2 overflow-hidden rounded-2 bg-surfaceDefault p-3 md:basis-1/2 lg:ml-0 lg:basis-1/3 lg:p-6 ">
90+
// <CarouselContent className="container flex w-full gap-4 px-4 lg:gap-4 ">
91+
<CarouselContent className="flex w-full justify-between gap-4 pl-4 pr-1 lg:container lg:gap-6">
92+
<CarouselItem className="ml-2 overflow-hidden rounded-2 bg-surfaceDefault p-6 md:basis-1/2 lg:ml-0 lg:basis-1/3 lg:p-6 ">
9193
<Link
9294
href={`https://supersetv2.civicdatalab.in/superset/dashboard/p/Od0XQzvMNmr/`}
9395
className="w-full"
9496
>
95-
<div className="flex w-full flex-col items-baseline justify-between gap-3">
97+
<div className="flex w-full flex-col items-baseline justify-between gap-4">
9698
<div className=" flex flex-col gap-1 ">
9799
<Text variant="bodyLg">
98100
<b> Assam Tenders Dashboard</b>
@@ -150,7 +152,7 @@ const Resources = () => {
150152
className="ml-2 overflow-hidden rounded-2 bg-surfaceDefault p-3 md:basis-1/2 lg:ml-0 lg:basis-1/3 lg:p-6 "
151153
>
152154
<Link href={`/datasets/${item.id}`} className="w-full">
153-
<div className="flex w-full flex-col items-baseline justify-between gap-3">
155+
<div className="flex w-full flex-col items-baseline justify-between gap-5">
154156
<div className=" flex flex-col gap-1 ">
155157
<Text variant="bodyLg">
156158
<b>{item.title}</b>

‎app/[locale]/components/styles.module.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,13 @@
1010
justify-content: center;
1111
display: flex;
1212
}
13+
@media only screen and (max-width: 1023px) {
14+
.HeroSection {
15+
height: 320px;
16+
}
17+
}
1318

14-
@media (max-width: 768px) {
19+
@media (max-width: 1023px) {
1520
.about__img {
1621
width: 400px;
1722
height: 400px;

0 commit comments

Comments
 (0)