Skip to content

Commit 622a7e4

Browse files
sanjaypinnasanjaypinna
authored
Merge pull request #260 from CivicDataLab/259-update-landing-page-ui
259 update landing page UI
2 parents 9bbc1a1 + 0207065 commit 622a7e4

File tree

6 files changed

+254
-16
lines changed

6 files changed

+254
-16
lines changed

‎app/[locale]/(user)/components/Content.tsx‎

Lines changed: 66 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
'use client';
22

33
import Image from 'next/image';
4+
import Link from 'next/link';
45
import { useRouter } from 'next/navigation';
5-
import { SearchInput, Text } from 'opub-ui';
6+
import { SearchInput, Tag, Text } from 'opub-ui';
7+
68
import { cn } from '@/lib/utils';
79
import Styles from '../page.module.scss';
810

@@ -13,10 +15,38 @@ export const Content = () => {
1315
router.push(`/datasets?query=${encodeURIComponent(value)}`);
1416
}
1517
};
18+
const Metrics = [
19+
{
20+
label: 'Datasets',
21+
count: '2k',
22+
},
23+
{
24+
label: 'Use Cases',
25+
count: '15',
26+
},
27+
28+
{
29+
label: 'Consumers',
30+
count: '24k',
31+
},
32+
{
33+
label: 'Publishers',
34+
count: '56',
35+
},
36+
];
37+
38+
const Sectors = [
39+
'Budgets',
40+
'Child Rights',
41+
'Disaster Risk Reduction',
42+
'Climate Finance',
43+
'Law And Justice',
44+
'Urban Development',
45+
];
1646
return (
17-
<main className='bg-primaryBlue py-10 lg:py-20 md:px-8'>
18-
<div className="flex items-center container justify-center gap-20 ">
19-
<div className="flex flex-col lg:w-2/5 gap-11">
47+
<main className="bg-primaryBlue py-6 md:py-10 md:px-8 lg:py-20">
48+
<div className="container md:px-12 px-10 lg:px-8 flex items-center justify-around gap-20 ">
49+
<div className="flex flex-col gap-11 lg:w-[49%]">
2050
<div className="flex flex-col">
2151
<Text variant="heading3xl" color="onBgDefault">
2252
Collaborate to advance
@@ -32,6 +62,21 @@ export const Content = () => {
3262
with CivicDataLab{' '}
3363
</Text>
3464
</div>
65+
<div className="flex flex-wrap items-center gap-4 md:gap-0 lg:gap-0 ">
66+
{Metrics.map((item, index) => (
67+
<div
68+
key={index}
69+
className="flex flex-col border-x-[1px] border-solid border-tertiaryAccent px-4"
70+
>
71+
<Text variant="heading3xl" className=" text-secondaryOrange">
72+
{item.count}
73+
</Text>
74+
<Text color="onBgDefault" className=" w-20">
75+
{item.label}
76+
</Text>
77+
</div>
78+
))}
79+
</div>
3580
<div className="w-full">
3681
<SearchInput
3782
className={cn(Styles.Search)}
@@ -42,6 +87,23 @@ export const Content = () => {
4287
withButton
4388
/>
4489
</div>
90+
<div className="flex flex-wrap gap-4">
91+
{Sectors.map((item, index) => (
92+
<div key={index}>
93+
<Tag
94+
variation="outlined"
95+
textColor="var(--surface-default)"
96+
borderColor="var(--orange-secondary-color)"
97+
>
98+
<Link href={`/datasets?sectors=${item}`} target="_blank">
99+
<Text fontWeight="semibold" color="onBgDefault">
100+
{item}
101+
</Text>
102+
</Link>
103+
</Tag>
104+
</div>
105+
))}
106+
</div>
45107
</div>
46108
<div className=" hidden lg:block">
47109
<Image

‎app/[locale]/(user)/components/Datasets.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@ const Datasets = () => {
5252
const router = useRouter();
5353

5454
return (
55-
<div className=" container pt-10 md:px-8 lg:pt-20">
56-
<div className="flex flex-col gap-2 p-3 md:p-0 lg:p-0 ">
57-
<Text variant="heading3xl">Recent Datasets</Text>
55+
<div className=" container py-10 md:px-8 lg:py-20">
56+
<div className="flex flex-col gap-2 px-4 md:px-12 lg:px-12">
57+
<Text variant="heading3xl">Popular Datasets</Text>
5858
<div className="flex flex-wrap justify-between gap-2 ">
5959
<Text variant="headingLg" fontWeight="medium">
60-
Recently updated and trending Datasets on CivicDataSpace
60+
The most popular Datasets on CivicDataSpace{' '}
6161
</Text>
6262
<Button
6363
kind="primary"
@@ -70,11 +70,11 @@ const Datasets = () => {
7070
</Button>
7171
</div>
7272
</div>
73-
<div className="mt-10 ">
73+
<div className="mt-12">
7474
<Carousel className="flex w-full justify-between">
7575
<CarouselPrevious />
7676

77-
<CarouselContent className="p-4 ">
77+
<CarouselContent className="p-4">
7878
{isLoading ? (
7979
<div className="p-8">
8080
<Spinner />

‎app/[locale]/(user)/components/Sectors.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ const Sectors = () => {
3636
.join('+'); // Join with '+'
3737
}
3838
return (
39-
<div className="container py-10 lg:py-20 md:px-8">
40-
<div className="flex flex-col gap-2 px-2 lg:px-0 md:px-0">
39+
<div className="container pt-10 md:px-8 lg:pt-20">
40+
<div className="flex flex-col gap-2 px-4 md:px-12 lg:px-12 ">
4141
<Text variant="heading3xl">Explore Sectors</Text>
4242
<div className="flex flex-wrap justify-between gap-2">
4343
<Text variant="headingLg" fontWeight="medium">
@@ -60,7 +60,7 @@ const Sectors = () => {
6060
<Spinner />
6161
</div>
6262
) : (
63-
<div className="mt-10 grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
63+
<div className="mt-12 grid w-full grid-cols-1 gap-6 px-4 md:grid-cols-2 md:px-12 lg:grid-cols-3 lg:px-12">
6464
{data?.sectors.map((sectors: any) => (
6565
<Link
6666
href={`/sectors/${sectors.slug}?sectors=${capitalizeWords(sectors.slug)}`}

‎app/[locale]/(user)/components/UseCases.tsx‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
'use client';
2+
3+
import { useRouter } from 'next/navigation';
4+
import { graphql } from '@/gql';
5+
import { useQuery } from '@tanstack/react-query';
6+
import {
7+
Button,
8+
Card,
9+
Carousel,
10+
CarouselContent,
11+
CarouselItem,
12+
CarouselNext,
13+
CarouselPrevious,
14+
Spinner,
15+
Text,
16+
} from 'opub-ui';
17+
18+
import { GraphQL } from '@/lib/api';
19+
import { cn, formatDate } from '@/lib/utils';
20+
import { Icons } from '@/components/icons';
21+
import Styles from './datasets.module.scss';
22+
23+
const useCasesListDoc: any = graphql(`
24+
query TopUseCases(
25+
$filters: UseCaseFilter
26+
$pagination: OffsetPaginationInput
27+
) {
28+
useCases(filters: $filters, pagination: $pagination) {
29+
id
30+
title
31+
summary
32+
slug
33+
datasetCount
34+
logo {
35+
path
36+
}
37+
metadata {
38+
metadataItem {
39+
id
40+
label
41+
dataType
42+
}
43+
id
44+
value
45+
}
46+
publishers {
47+
logo {
48+
path
49+
}
50+
name
51+
}
52+
sectors {
53+
id
54+
name
55+
}
56+
created
57+
modified
58+
website
59+
contactEmail
60+
}
61+
}
62+
`);
63+
64+
const UseCasesListingPage = () => {
65+
const getUseCasesList: {
66+
data: any;
67+
isLoading: boolean;
68+
error: any;
69+
isError: boolean;
70+
} = useQuery([`useCases_list`], () =>
71+
GraphQL(
72+
useCasesListDoc,
73+
{},
74+
{
75+
filters: { status: 'PUBLISHED' },
76+
pagination: { limit: 6 },
77+
}
78+
)
79+
);
80+
const router = useRouter();
81+
82+
return (
83+
<div className=" container pt-10 md:px-8 lg:pt-20">
84+
<div className="flex flex-col gap-2 md:px-12 px-4 lg:px-12 ">
85+
<Text variant="heading3xl">Recent UseCases</Text>
86+
<div className="flex flex-wrap justify-between gap-2 ">
87+
<Text variant="headingLg" fontWeight="medium">
88+
Recently updated and trending Use Cases on Asia-Pacific Climate Data
89+
Collaborative{' '}
90+
</Text>
91+
<Button
92+
kind="primary"
93+
className=" bg-secondaryOrange text-basePureBlack"
94+
onClick={() => {
95+
router.push('/usecases');
96+
}}
97+
>
98+
Explore all Use Cases
99+
</Button>
100+
</div>
101+
</div>
102+
<div className='mt-12'>
103+
<Carousel className="flex w-full justify-between">
104+
<CarouselPrevious />
105+
106+
{getUseCasesList.isLoading ? (
107+
<div className="p-8">
108+
<Spinner />
109+
</div>
110+
) : (
111+
<CarouselContent className="p-4 ">
112+
{getUseCasesList &&
113+
getUseCasesList?.data?.useCases.length > 0 &&
114+
getUseCasesList?.data?.useCases.map((item: any, index: any) => (
115+
<CarouselItem
116+
key={item.id}
117+
className={cn(
118+
'h-2/4 basis-full pl-4 sm:basis-1/2 lg:basis-1/3',
119+
Styles.UseCaseList
120+
)}
121+
>
122+
<Card
123+
title={item.title}
124+
key={index}
125+
href={`/usecases/${item.id}`}
126+
metadataContent={[
127+
{
128+
icon: Icons.calendar,
129+
label: 'Date',
130+
value: formatDate(item.modified),
131+
},
132+
{
133+
icon: Icons.globe,
134+
label: 'Geography',
135+
value: item.metadata?.find(
136+
(meta: any) =>
137+
meta.metadataItem?.label === 'Geography'
138+
)?.value,
139+
},
140+
]}
141+
footerContent={[
142+
{
143+
icon: `/Sectors/${item?.sectors[0]?.name}.svg`,
144+
label: 'Sectors',
145+
},
146+
{ icon: '/fallback.svg', label: 'Published by' },
147+
]}
148+
imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.logo?.path.replace('/code/files/', '')}`}
149+
description={item.summary}
150+
iconColor="warning"
151+
variation={'collapsed'}
152+
/>
153+
</CarouselItem>
154+
))}
155+
</CarouselContent>
156+
)}
157+
<CarouselNext />
158+
</Carousel>
159+
</div>
160+
</div>
161+
);
162+
};
163+
164+
export default UseCasesListingPage;

‎app/[locale]/(user)/components/datasets.module.scss‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,18 @@
33
min-height: 280px;
44
max-height: 280px;
55
@media screen and (max-width: 1120px) {
6-
min-height: 360px;
7-
max-height: 360px;
6+
min-height: 390px;
7+
max-height: 390px;
8+
}
9+
}
10+
}
11+
.UseCaseList {
12+
a {
13+
min-height: 460px;
14+
max-height: 460px;
15+
@media screen and (max-width: 1120px) {
16+
min-height: 530px;
17+
max-height: 530px;
818
}
919
}
1020
}

‎app/[locale]/(user)/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { Content } from './components/Content';
22
import Datasets from './components/Datasets';
33
import Sectors from './components/Sectors';
4+
import UseCases from './components/UseCases';
45

56
export default async function Home() {
67
return (
78
<div className="bg-surfaceDefault">
89
<Content />
10+
<UseCases />
11+
<Sectors />
912
<Datasets />
10-
<Sectors/>
1113
</div>
1214
);
1315
}

0 commit comments

Comments
 (0)