Update pages as per new designs

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

@@ -1,44 +1,58 @@
-'use client';
+'use client'
 
-import { IconBrandTabler } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
-import { Button, ButtonGroup, Icon, Text } from 'opub-ui';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { SearchInput, Text } from 'opub-ui';
 
-import { Icons } from '@/components/icons';
-
-export function Content() {
-  const t = useTranslations('home');
+import { cn } from '@/lib/utils';
+import Styles from '../page.module.scss';
 
+export const Content = () => {
+  const router = useRouter();
+  const handleSearch = (value: string) => {
+    if (value) {
+      router.push(`/datasets?query=${encodeURIComponent(value)}`);
+    }
+  };
   return (
-    <>
-      <IconBrandTabler size={64} color="black" />
-      <Text variant="heading4xl" as="h1" alignment="center">
-        {t('title')}
-      </Text>
-      <Text
-        color="subdued"
-        variant="bodyLg"
-        as="p"
-        alignment="center"
-        className="mb-4"
-      >
-        {t('subtitle')}
-      </Text>
-      <ButtonGroup>
-        <Button variant="interactive" kind="secondary" url="/chart">
-          <Text variant="headingMd">Go to Charts</Text>
-        </Button>
-        <Button
-          variant="interactive"
-          kind="primary"
-          url="/dashboard/user/datasets"
-          icon={<Icon source={Icons.share} color="onBgDefault" />}
-        >
-          <Text color="onBgDefault" variant="headingMd">
-            {t('cta')}
-          </Text>
-        </Button>
-      </ButtonGroup>
-    </>
+    <main>
+      <div className="flex items-center justify-center gap-20 bg-primaryBlue p-8 lg:p-16">
+        <div className="flex flex-col gap-11">
+          <div className="flex flex-col">
+            <Text variant="heading3xl" color="onBgDefault">
+              Collaborate to advance
+            </Text>
+            <Text
+              variant="heading3xl"
+              color="onBgDefault"
+              className=" text-tertiaryAccent"
+            >
+              Data-driven Impact and Action
+            </Text>
+            <Text variant="heading3xl" color="onBgDefault">
+              with CivicDataLab{' '}
+            </Text>
+          </div>
+          <div className="w-full">
+            <SearchInput
+              className={cn(Styles.Search)}
+              onSubmit={handleSearch}
+              label={''}
+              placeholder="Search for any data"
+              name={''}
+              withButton
+            />
+          </div>
+        </div>
+        <div className=" hidden lg:block">
+          <Image
+            src={'/homepage_illustartion.png'}
+            width={500}
+            height={400}
+            alt="illustartion"
+          />
+        </div>
+      </div>
+    </main>
   );
-}
+};

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

@@ -0,0 +1,137 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { fetchDatasets } from '@/fetch';
+import {
+  Button,
+  Card,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  Spinner,
+  Text,
+} from 'opub-ui';
+
+import { cn } from '@/lib/utils';
+import { Icons } from '@/components/icons';
+import Styles from './datasets.module.scss';
+
+interface Bucket {
+  key: string;
+  doc_count: number;
+}
+interface Aggregation {
+  buckets: Bucket[];
+}
+
+interface Aggregations {
+  [key: string]: Aggregation;
+}
+
+const Datasets = () => {
+  const [facets, setFacets] = useState<{
+    results: any[];
+    total: number;
+    aggregations: Aggregations;
+  } | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    fetchDatasets('?sort=recent&size=5&page=1&sort=recent')
+      .then((res) => {
+        setFacets(res);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }, []);
+
+  const router = useRouter();
+
+  return (
+    <div className="p-4 my-5 lg:p-16">
+      <div className="flex flex-col gap-2  px-2">
+        <Text variant="heading3xl">Recent Datasets</Text>
+        <div className="flex justify-between flex-wrap gap-2">
+          <Text variant="headingLg" fontWeight="medium">
+            Recently updated and trending Datasets on CivicDataSpace
+          </Text>
+          <Button
+            kind="primary"
+            className=" bg-secondaryOrange text-basePureBlack"
+            onClick={() => {
+              router.push('/datasets');
+            }}
+          >
+            Explore all Datasets
+          </Button>
+        </div>
+      </div>
+      <div className="mt-10 ">
+        <Carousel className="flex  w-full justify-between">
+          <CarouselPrevious />
+
+          <CarouselContent className="p-4 ">
+            {isLoading ? (
+              <div className='p-8'>
+                <Spinner />
+              </div>
+            ) : (
+              facets &&
+              facets.results.map((item: any) => (
+                <CarouselItem
+                  key={item.id}
+                  className={cn(
+                    'h-2/4 basis-full pl-4 sm:basis-1/2  lg:basis-1/3',
+                    Styles.List
+                  )}
+                >
+                  {' '}
+                  <Card
+                    title={item.title}
+                    description={item.description}
+                    metadataContent={[
+                      {
+                        icon: Icons.calendar,
+                        label: 'Date',
+                        value: '19 July 2024',
+                      },
+                      {
+                        icon: Icons.download,
+                        label: 'Download',
+                        value: item.download_count.toString(),
+                      },
+                      {
+                        icon: Icons.globe,
+                        label: 'Geography',
+                        value: 'India',
+                      },
+                    ]}
+                    tag={item.tags}
+                    formats={item.formats}
+                    footerContent={[
+                      {
+                        icon: `/Sectors/${item.sectors[0]}.svg`,
+                        label: 'Sectors',
+                      },
+                      { icon: '/fallback.svg', label: 'Published by' },
+                    ]}
+                    variation={'collapsed'}
+                    iconColor="warning"
+                    href={`/datasets/${item.id}`}
+                  />
+                </CarouselItem>
+              ))
+            )}
+          </CarouselContent>
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  );
+};
+
+export default Datasets;

app/[locale]/(user)/components/ListingComponent.tsx

@@ -282,7 +282,7 @@ const ListingComponent: React.FC<ListingProps> = ({
           {categoryImage && (
             <div className="flex flex-col items-center justify-center rounded-2 bg-baseGraySlateSolid2 p-2">
               <Image
-                src={categoryImage}
+                src={`/Sectors/${categoryName}.svg`}
                 width={164}
                 height={164}
                 alt={`${categoryName} Logo`}
@@ -416,7 +416,7 @@ const ListingComponent: React.FC<ListingProps> = ({
 
           <div className="flex w-full flex-col gap-4 px-2">
             {Object.values(queryParams.filters).filter(
-              (value) => Array.isArray(value) && value.length !== 0
+              (value) => Array.isArray(value) 
             ).length > 1 && (
               <div className="flex gap-2">
                 {Object.entries(queryParams.filters).map(([category, values]) =>
@@ -467,8 +467,8 @@ const ListingComponent: React.FC<ListingProps> = ({
                     tag: item.tags,
                     formats: item.formats,
                     footerContent: [
-                      { icon: '', label: 'Sectors' },
-                      { icon: '', label: 'Published by' },
+                      { icon: `/Sectors/${item.sectors[0]}.svg`, label: 'Sectors' },
+                      { icon: '/fallback.svg', label: 'Published by' },
                     ],
                   };
 

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

@@ -0,0 +1,105 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { graphql } from '@/gql';
+import { useQuery } from '@tanstack/react-query'; // ✅ Ensure this is correct
+
+import { Button, Divider, Spinner, Text } from 'opub-ui';
+
+import { GraphQL } from '@/lib/api';
+
+const sectorDetails = graphql(`
+  query SectorsList {
+    sectors {
+      id
+      name
+      description
+      slug
+      datasetCount
+    }
+  }
+`);
+
+const Sectors = () => {
+  const { data, isLoading, error, isError } = useQuery({
+    queryKey: ['sectors_list'], // ✅ Fix queryKey syntax
+    queryFn: () => GraphQL(sectorDetails, {}),
+  });
+  const router = useRouter();
+  function capitalizeWords(name: any) {
+    return name
+      .split('-') // Split by '-'
+      .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
+      .join('+'); // Join with '+'
+  }
+  return (
+    <div className="my-5 p-4 lg:p-16">
+      <div className="flex flex-col gap-2 px-2 ">
+        <Text variant="heading3xl">Explore Sectors</Text>
+        <div className="flex flex-wrap justify-between gap-2">
+          <Text variant="headingLg" fontWeight="medium">
+            Classification of all Use Cases and Datasets on the Asia-Pacific
+            Climate Data Collaborative{' '}
+          </Text>
+          <Button
+            kind="primary"
+            className=" bg-secondaryOrange text-basePureBlack"
+            onClick={() => {
+              router.push('/sectors');
+            }}
+          >
+            Explore all Sectors
+          </Button>
+        </div>
+      </div>
+      {isLoading ? (
+        <div className="m-4 flex justify-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="mt-10 grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {data?.sectors.map((sectors: any) => (
+            <Link
+              href={`/sectors/${sectors.slug}?sectors=${capitalizeWords(sectors.slug)}`}
+              key={sectors.id}
+            >
+              <div className="flex w-full items-center gap-5 rounded-4 bg-surfaceDefault p-7 shadow-card">
+                <div className="flex gap-4">
+                  <Image
+                    src={`/Sectors/${sectors.name}.svg`}
+                    width={80}
+                    height={80}
+                    alt={'Sectors Logo'}
+                  />
+                </div>
+                <div className="flex w-full flex-col gap-3">
+                  <div className="flex flex-col gap-2">
+                    <Text variant="headingLg" fontWeight="semibold">
+                      {sectors.name}
+                    </Text>
+                    <Divider />
+                  </div>
+                  <div className="flex gap-1">
+                    <Text
+                      variant="bodyMd"
+                      fontWeight="bold"
+                      className=" text-primaryBlue"
+                    >
+                      {sectors.datasetCount}
+                    </Text>
+                    <Text variant="bodyMd">Datasets</Text>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Sectors;

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

@@ -0,0 +1,10 @@
+.List {
+  a {
+    min-height: 280px;
+    max-height: 280px;
+    @media screen and (max-width: 1120px) {
+      min-height: 360px;
+      max-height: 360px;
+    }
+  }
+}

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

@@ -1,9 +1,13 @@
 import { Content } from './components/Content';
+import Datasets from './components/Datasets';
+import Sectors from './components/Sectors';
 
 export default async function Home() {
   return (
-    <div className="flex h-screen w-full flex-col items-center justify-center gap-2">
+    <div className="bg-surfaceDefault">
       <Content />
+      <Datasets />
+      <Sectors/>
     </div>
   );
 }