[TM-1375] Dashboard: 'About Us' Web Design Shell (#632)

* [TM-1375] add layout in homepage dashboard * [TM-1375] edit name and add sec * TM-1375 add video and highlight section * [TM-1375] add About the platform information * [TM-1375] add link in [email protected] * TM-1375 change font size * TM-1375 change padding * TM-1375 add fade in * [TM-1375] edit image in usign platform * [TM-1375] edit rounded in video * TM-1375 add fede in * TM-1375 update about us page design * [TM-1375] add carousel in About-us * [TM-1375] edit style carousel in About us * [TM-1375] add button OpenDashboard * [TM-1375] change option in sidebar * [TM-1375]edit style in header about us and add gap in text * [TM-1375] change text color * TM-1375 add animation on scroll * TM-1375 update test --------- Co-authored-by: diego-morales-flores-1996 <[email protected]>
wri · Nov 7, 2024 · 3243116 · 3243116
1 parent be58b35
commit 3243116
Show file tree

Hide file tree

Showing 25 changed files with 558 additions and 25 deletions.
diff --git a/public/images/about-us-1.png b/public/images/about-us-1.png
diff --git a/public/images/about-us-2.png b/public/images/about-us-2.png
diff --git a/public/images/about-us-3.png b/public/images/about-us-3.png
diff --git a/public/images/about-us-4.png b/public/images/about-us-4.png
diff --git a/public/images/about-us-header.png b/public/images/about-us-header.png
diff --git a/public/images/tree.png b/public/images/tree.png
diff --git a/public/images/usign-platform.png b/public/images/usign-platform.png
diff --git a/src/assets/icons/orange-dots.svg b/src/assets/icons/orange-dots.svg
diff --git a/src/assets/icons/pre-filtered-page.svg b/src/assets/icons/pre-filtered-page.svg
diff --git a/src/assets/icons/request-account.svg b/src/assets/icons/request-account.svg
diff --git a/src/assets/icons/visit-dashboard.svg b/src/assets/icons/visit-dashboard.svg
diff --git a/src/components/elements/Button/Button.tsx b/src/components/elements/Button/Button.tsx
@@ -29,6 +29,7 @@ export interface IButtonProps extends Omit<HTMLProps<HTMLElement>, "as"> {
     | "white-toggle"
     | "white-border"
     | "orange"
+    | "about-us"
     | "transparent-toggle"
     | "white-button-map";
   fullWidth?: boolean;
@@ -158,6 +159,11 @@ const Button: FC<IButtonProps> = props => {
           container: "h-fit rounded-lg bg-white px-4 py-2 shadow hover:bg-neutral-200",
           span: "flex items-center gap-2"
         };
+      case "about-us":
+        return {
+          container: "h-fit rounded-lg bg-green-200 px-5 py-[18px] hover:bg-green-60 text-white",
+          span: "flex items-center text-16-bold"
+        };
       default:
         return { container: "", span: "" };
     }

diff --git a/src/components/elements/Tabs/Secondary/SecondaryTabs.tsx b/src/components/elements/Tabs/Secondary/SecondaryTabs.tsx
@@ -1,15 +1,20 @@
 import { Tab as HTab } from "@headlessui/react";
 import classNames from "classnames";
 import { useRouter } from "next/router";
-import { DetailedHTMLProps, Fragment, HTMLAttributes, ReactElement } from "react";
+import { DetailedHTMLProps, Fragment, HTMLAttributes, ReactElement, useEffect } from "react";
 
 import Text from "@/components/elements/Text/Text";
 import List from "@/components/extensive/List/List";
 import { Framework, useFrameworkContext } from "@/context/framework.provider";
 
+import { SecundaryTabsVariants, VARIANT_TABS_PRIMARY } from "./SecuandaryTabsVariants";
+
 export interface SecondaryTabsProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   tabItems: TabItem[];
   containerClassName?: string;
+  setSelectedIndex?: (index: number) => void;
+  variant?: SecundaryTabsVariants;
+  selectedIndex?: number;
 }
 
 export interface TabItem {
@@ -25,7 +30,15 @@ export interface TabItem {
   hide?: Framework[];
 }
 
-const SecondaryTabs = ({ tabItems: _tabItems, className, containerClassName, ...divProps }: SecondaryTabsProps) => {
+const SecondaryTabs = ({
+  tabItems: _tabItems,
+  className,
+  containerClassName,
+  setSelectedIndex,
+  selectedIndex,
+  variant = VARIANT_TABS_PRIMARY,
+  ...divProps
+}: SecondaryTabsProps) => {
   const router = useRouter();
   const { framework } = useFrameworkContext();
   const tabItems = _tabItems.filter(item => {
@@ -50,33 +63,41 @@ const SecondaryTabs = ({ tabItems: _tabItems, className, containerClassName, ...
       router.query.tab = key;
       router.push(router, undefined, { shallow: true });
     }
+    setSelectedIndex && setSelectedIndex(index);
   };
 
+  useEffect(() => {
+    if (selectedIndex !== undefined) {
+      onTabChange(selectedIndex);
+    }
+  }, [selectedIndex]);
+
   return (
     <HTab.Group selectedIndex={_defaultIndex} onChange={onTabChange}>
-      <HTab.List {...divProps} className={classNames(className, "h-max w-full border-b-2 border-neutral-200 bg-white")}>
+      <HTab.List {...divProps} className={classNames(className, "h-max w-full", variant.classNameContentList)}>
         <List
           as="div"
           className={classNames(
             containerClassName,
             tabItems.length <= 5 ? "justify-between lg:justify-start lg:gap-30" : "justify-between",
-            "m-auto flex h-full items-center"
+            "flex h-full items-center",
+            variant.listClassName
           )}
           itemAs={Fragment}
           items={tabItems}
           render={item => (
             <HTab as={Fragment}>
               {({ selected }) => (
                 <button
-                  className={classNames("mb-[-2px] h-full border-b-[3px] px-4 py-4  outline-none", {
-                    "border-primary": selected,
+                  className={classNames("mb-[-2px] h-full outline-none", variant.itemTabClassName, {
+                    [variant.selectedTabClassName || "border-primary"]: selected,
                     "border-transparent": !selected
                   })}
                   disabled={item.disabled}
                 >
                   <Text
-                    variant={selected ? "text-16-bold" : "text-16-light"}
-                    className={classNames("whitespace-nowrap", "text-black")}
+                    variant={selected ? variant.textVariantSelected : variant.textVariantNotSelected}
+                    className={classNames("whitespace-nowrap")}
                   >
                     {item.title}
                   </Text>

diff --git a/src/components/elements/Tabs/Secondary/SecuandaryTabsVariants.ts b/src/components/elements/Tabs/Secondary/SecuandaryTabsVariants.ts
@@ -0,0 +1,28 @@
+import { TextVariants } from "@/types/common";
+
+export interface SecundaryTabsVariants {
+  classNameContentList?: string;
+  listClassName?: string;
+  itemTabClassName?: string;
+  selectedTabClassName?: string;
+  textVariantSelected: TextVariants;
+  textVariantNotSelected: TextVariants;
+}
+
+export const VARIANT_TABS_PRIMARY: SecundaryTabsVariants = {
+  classNameContentList: "border-b-2 border-neutral-200 bg-white",
+  listClassName: "m-auto",
+  itemTabClassName: " px-4 py-4 border-b-[3px] text-black",
+  selectedTabClassName: "border-primary",
+  textVariantSelected: "text-16-bold",
+  textVariantNotSelected: "text-16-light"
+};
+
+export const VARIANT_TABS_ABOUT_US: SecundaryTabsVariants = {
+  classNameContentList: "border-b-2 border-neutral-200 bg-white",
+  listClassName: "grid grid-cols-5 gap-4",
+  itemTabClassName: " px-2 py-5 text-center border-b-4 text-neutral-700",
+  selectedTabClassName: "border-black  !text-black",
+  textVariantSelected: "text-18",
+  textVariantNotSelected: "text-18"
+};
diff --git a/src/components/elements/Tabs/Secondary/__snapshots__/SecondaryTabs.stories.storyshot b/src/components/elements/Tabs/Secondary/__snapshots__/SecondaryTabs.stories.storyshot
@@ -10,11 +10,11 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
     role="tablist"
   >
     <div
-      className="justify-between lg:justify-start lg:gap-30 m-auto flex h-full items-center"
+      className="justify-between lg:justify-start lg:gap-30 flex h-full items-center m-auto"
     >
       <button
         aria-selected={true}
-        className="mb-[-2px] h-full border-b-[3px] px-4 py-4  outline-none border-primary"
+        className="mb-[-2px] h-full outline-none  px-4 py-4 border-b-[3px] text-black border-primary"
         data-headlessui-state="selected"
         id="headlessui-tabs-tab-:r35:"
         onClick={[Function]}
@@ -24,15 +24,15 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
         tabIndex={0}
       >
         <p
-          className="whitespace-nowrap text-black text-16-bold"
+          className="whitespace-nowrap text-16-bold"
           data-testid="txt"
         >
           Overview
         </p>
       </button>
       <button
         aria-selected={false}
-        className="mb-[-2px] h-full border-b-[3px] px-4 py-4  outline-none border-transparent"
+        className="mb-[-2px] h-full outline-none  px-4 py-4 border-b-[3px] text-black border-transparent"
         data-headlessui-state=""
         id="headlessui-tabs-tab-:r36:"
         onClick={[Function]}
@@ -42,15 +42,15 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
         tabIndex={-1}
       >
         <p
-          className="whitespace-nowrap text-black text-16-light"
+          className="whitespace-nowrap text-16-light"
           data-testid="txt"
         >
           Environmental Impact
         </p>
       </button>
       <button
         aria-selected={false}
-        className="mb-[-2px] h-full border-b-[3px] px-4 py-4  outline-none border-transparent"
+        className="mb-[-2px] h-full outline-none  px-4 py-4 border-b-[3px] text-black border-transparent"
         data-headlessui-state=""
         id="headlessui-tabs-tab-:r37:"
         onClick={[Function]}
@@ -60,7 +60,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
         tabIndex={-1}
       >
         <p
-          className="whitespace-nowrap text-black text-16-light"
+          className="whitespace-nowrap text-16-light"
           data-testid="txt"
         >
           Social Impact

diff --git a/src/components/extensive/Carousel/Carousel.tsx b/src/components/extensive/Carousel/Carousel.tsx
@@ -24,6 +24,7 @@ export interface CarouselProps<T> extends SwiperProps {
   setSelectedImage?: (index: number) => void;
   buttonsOutside?: boolean;
   smallSwiperButtons?: boolean;
+  numberSlidesPerView?: number | "auto";
 }
 
 export type CarouselBreakPoints = {
@@ -43,6 +44,7 @@ const Carousel = <T extends Record<any, any>>({
   selectedImage,
   setSelectedImage,
   buttonsOutside = false,
+  numberSlidesPerView,
   smallSwiperButtons,
   ...swiperProps
 }: CarouselProps<T>) => {
@@ -87,7 +89,7 @@ const Carousel = <T extends Record<any, any>>({
           className={classNames(swiperClassName, "flex-1")}
           modules={[Navigation, Pagination]}
           spaceBetween={smallSwiperButtons ? 8 : 25}
-          slidesPerView={3}
+          slidesPerView={numberSlidesPerView || 3}
           navigation={{ nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }}
           pagination={{
             clickable: true,

diff --git a/src/components/extensive/Icon/Icon.tsx b/src/components/extensive/Icon/Icon.tsx
@@ -188,7 +188,11 @@ export enum IconNames {
   EDIT_PA = "edit-pa",
   PIN = "pin",
   LINK_AIRTABLE = "link-aritable",
-  IC_USER = "ic-user"
+  IC_USER = "ic-user",
+  REQUEST_ACCOUNT = "request-account",
+  PRE_FILTERED_PAGE = "pre-filtered-page",
+  VISIT_DASHBOARD = "visit-dashboard",
+  ORANGE_DOTS = "orange-dots"
 }
 
 export interface IconProps {

diff --git a/src/components/generic/Layout/DashboardLayout.tsx b/src/components/generic/Layout/DashboardLayout.tsx
@@ -54,6 +54,7 @@ const DashboardLayout = (props: PropsWithChildren<DashboardLayoutProps>) => {
   const isProjectInsightsPage = router.pathname.includes("dashboard/project-insights");
   const isProjectListPage = router.pathname === "/dashboard/project-list";
   const isProjectPage = router.pathname === "dashboard/project";
+  const isHomepage = router.pathname === "/dashboard/about-us";
   const childrenWithProps = props.children ? cloneElement(props.children as ReactElement, { selectedCountry }) : null;
 
   return (
@@ -72,6 +73,7 @@ const DashboardLayout = (props: PropsWithChildren<DashboardLayoutProps>) => {
                 isProjectInsightsPage={isProjectInsightsPage}
                 isProjectListPage={isProjectListPage}
                 isProjectPage={isProjectPage}
+                isHomepage={isHomepage}
                 dashboardCountries={dashboardCountries.data}
                 defaultSelectedCountry={selectedCountry}
                 setSelectedCountry={setSelectedCountry}

diff --git a/src/components/generic/Sidebar/Sidebar.tsx b/src/components/generic/Sidebar/Sidebar.tsx
@@ -25,7 +25,8 @@ const Sidebar = () => {
               "text-white":
                 router.asPath.includes("/dashboard") &&
                 !router.asPath.includes("/dashboard/project-list") &&
-                !router.asPath.includes("/dashboard/project-insights")
+                !router.asPath.includes("/dashboard/project-insights") &&
+                !router.asPath.includes("/dashboard/about-us")
             })}
             href="/dashboard"
           >