hds-web 1.33.2 → 1.33.3

package/src/HDS/components/Hero/h1.js

@@ -0,0 +1,188 @@
+import { useState, useEffect } from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSButton } from "../Buttons";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { Icon } from "../common-components";
+
+export default function Hero({ heroData, logo, scrollArrow, fontSize }) {
+  const [valumeMuteIcon, setValumeMuteIcon] = useState("volumex");
+  const videoMute = () => {
+    if (heroData.video_url) {
+      const videoEle = document.getElementById("hero_vid");
+      if (videoEle?.muted) {
+        videoEle.muted = false;
+        setValumeMuteIcon("volumemax")
+      } else {
+        videoEle.muted = true;
+        setValumeMuteIcon("volumex")
+      }
+    }
+  }
+
+  const videoGradientBg = HDSColor(heroData.video_gradient_bg);
+  return (
+    <div className="db:pt-32 mb-10 db:mb-5 tb:mb-16 tb-l:mb-0">
+      <div className="tb:px-4">
+        <div className={"max-w-7xl mx-auto rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
+          <div className="w-full">
+            <div className={"db:flex db:w-full tb-l:flex block" + ((heroData.video_url) ? " tb:block" : " tb:flex")}>
+              <div className={"db:px-28 db:py-20 db:pr-0 tb-l:self-center tb-l:min-w-[400px] mx-auto db:ml-0 db:max-w-[625px] db:min-w-[625px] p-5 pt-10 z-[1] tb:p-16 tb-l:py-12" + ((heroData.video_url) ? " tb:max-w-[530px]" : " tb:ml-0 tb:max-w-[290px] tb:min-w-[310px] tb:pr-0")}
+              >
+                {
+                  heroData.tag_line && (
+                    <div
+                    >
+                      <Typography textStyle="h6" as="h6" className={"pb-6 uppercase text-center db:text-left font-normal tb-l:text-left " + ((heroData.tag_line_color) ? heroData.tag_line_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}
+                      >
+                        {heroData.tag_line}
+                      </Typography>
+                    </div>
+                  )
+                }
+                {
+                  heroData.title && (
+                    <div
+
+                    >
+                      {
+                        logo ? (
+                          <div className={"pb-4 db:text-left text-center tb-l:text-left" + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>
+                            <img className="w-[290px] inline-block" src={logo} alt="Brand" />
+                          </div>
+                        ) : (
+                          <Typography textStyle={fontSize ? fontSize : "h1"} as="h1" className={"pb-2 text-center break-words db:text-left tb-l:text-left  " + ((heroData.title_color) ? heroData.title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.title}</Typography>
+                        )
+                      }
+                    </div>
+                  )
+                }
+                {
+                  heroData.sub_title && (
+                    <div
+
+                    >
+                      <Typography textStyle="sub1" className={"text-center db:text-left tb-l:text-left " + ((heroData.sub_title_color) ? heroData.sub_title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.sub_title}</Typography>
+                    </div>
+                  )
+                }
+                {
+                  heroData.description && (
+                    <div
+
+                    >
+                      <Typography textStyle="sub2" className="text-center tb:text-left db:text-left tb-l:text-left text-blue-700 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                    </div>
+                  )
+                }
+                {
+                  heroData.buttons && (
+                    <div className={" gap-2 flex items-center justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
+                      {
+                        heroData.buttons.map((btn, index) => (
+                          <HDSButton
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            label={btn.cta_text}
+                            state='default'
+                            size='lg'
+                            rightAnimatedArrow='true'
+                            rightAnimatedArrowColor='#ffffff'
+                          />
+                        ))
+                      }
+                    </div>
+                  )
+                }
+              </div>
+              {
+                heroData.video_url ? (
+                  <div className={"relative" + ((heroData.video_gradient_bg) ? "" : " p-4")}>
+                    <div className="w-12 h-12 bg-neutral-0 rounded-full absolute right-8 bottom-8 shadow-md cursor-pointer z-[2] flex items-center justify-center" onClick={() => videoMute()}>
+                      <Icon height={'w-6 h-6 stroke-neutral-800 stroke-[1.5px]'} variant={valumeMuteIcon} strokeColor="#1F2A37" />
+                    </div>
+                    <video
+                      id="hero_vid"
+                      controls={false}
+                      // autoPlay
+                      loop
+                      muted
+                      poster="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg"
+                      width="500"
+                      height="500"
+                      className={"tb:w-full w-full db:max-w-[500px]" + ((heroData.video_gradient_bg) ? "" : " rounded-xl shadow-md")}
+                    >
+                      <source
+                        src={heroData.video_url}
+                        type="video/mp4"
+                      />
+                    </video>
+                    {
+                      heroData.video_gradient_bg && (<div className={`tb-l:w-1/2 w-full h-1/2 tb:h-full absolute left-0 top-0 tb-l:ml-[-4px] tb-l:bg-gradient-to-r ${videoGradientBg} to-transparent bg-gradient-to-b tb:mt-[-4px] tb-l:mt-0`}></div>)
+                    }
+                  </div>
+                ) : (
+                  <div className="w-full"
+                     variants={{
+                      hidden: {
+                        opacity: 0,
+                      },
+                      visible: {
+                        opacity: 1,
+                        transition: {
+                          delay: .2,
+                          duration: 1,
+                        }
+                      },
+                    }}
+                  >
+                    {heroData.img_url && (
+                      <div className="text-right pt-0 flex items-end justify-end h-full">
+                        <img
+                          src={heroData.img_url}
+                          alt="Hero"
+                          className="db:inline tb:w-[90%] tb-l:w-[70%] db:w-[75%] w-full rounded-b-3xl"
+                        />
+                      </div>
+                    )}
+                  </div>
+                )
+              }
+            </div>
+          </div>
+        </div>
+        {
+          scrollArrow && (
+            <div className=" hidden tb-l:block translate-y-[-20px]">
+              <div className="px-6 flex justify-center pb-16 animate-bounce h-6 grid-cols-3">
+                <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g filter="url(#filter0_dd_1052_3729)">
+                    <circle cx="30" cy="26" r="24" fill="white" />
+                    <path d="M25 27L30 32L35 27M25 20L30 25L35 20" stroke="#1F2A37" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                  </g>
+                  <defs>
+                    <filter id="filter0_dd_1052_3729" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                      <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                      <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1052_3729" />
+                      <feOffset dy="2" />
+                      <feGaussianBlur stdDeviation="2" />
+                      <feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.14902 0 0 0 0 0.247059 0 0 0 0.06 0" />
+                      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1052_3729" />
+                      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                      <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1052_3729" />
+                      <feOffset dy="4" />
+                      <feGaussianBlur stdDeviation="4" />
+                      <feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.14902 0 0 0 0 0.247059 0 0 0 0.1 0" />
+                      <feBlend mode="normal" in2="effect1_dropShadow_1052_3729" result="effect2_dropShadow_1052_3729" />
+                      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1052_3729" result="shape" />
+                    </filter>
+                  </defs>
+                </svg>
+              </div>
+            </div>
+          )
+        }
+      </div>
+    </div>
+  );
+}

package/src/HDS/components/Hero/h2.js

@@ -0,0 +1,235 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSButton } from "../Buttons";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { Icon } from "../common-components";
+import { LinkCard } from '../Cards/Link';
+
+export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize }) {
+  const [valumeMuteIcon, setValumeMuteIcon] = useState("volumex");
+
+  const scrollToNextDiv = (element) => {
+    const nextDiv = element.nextElementSibling;
+    if (nextDiv) {
+      nextDiv.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+  
+  const handleClick = (event) => {
+    const arrowIcon = event.target;
+    const arrowContainer = arrowIcon.parentNode;
+    scrollToNextDiv(arrowContainer);
+  };
+  const videoMute = () => {
+    if (heroData.video_url) {
+      const videoEle = document.getElementById("hero_vid");
+      if (videoEle?.muted) {
+        videoEle.muted = false;
+        setValumeMuteIcon("volumemax")
+      } else {
+        videoEle.muted = true;
+        setValumeMuteIcon("volumex")
+      }
+    }
+  }
+
+  const videoComponent = (heroData) => (
+    heroData.video_url ? (
+      <div className={"relative" + ((heroData.video_gradient_bg) ? "" : " p-4")}>
+        <div className="w-12 h-12 bg-neutral-0 rounded-full absolute right-8 bottom-8 shadow-md cursor-pointer z-[2] flex items-center justify-center" onClick={() => videoMute()}>
+          <Icon height={'w-6 h-6 stroke-neutral-800 stroke-[1.5px]'} variant={valumeMuteIcon} strokeColor="#1F2A37" />
+        </div>
+        <video
+          id="hero_vid"
+          controls={false}
+          // autoPlay
+          loop
+          muted
+          poster="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
+          className={"tb:w-full w-full " + ((heroData.video_gradient_bg) ? "" : " rounded-xl shadow-md")}
+        >
+          <source
+            src={heroData.video_url}
+            type="video/mp4"
+          />
+        </video>
+        {
+          heroData.video_gradient_bg && (<div className={`tb-l:w-1/2 w-full h-1/2 tb:h-full absolute left-0 top-0 tb-l:ml-[-4px] tb-l:bg-gradient-to-r ${videoGradientBg} to-transparent bg-gradient-to-b tb:mt-[-4px] tb-l:mt-0`}></div>)
+        }
+      </div>
+    ) : (
+      <div className="w-full"
+        variants={{
+          hidden: {
+            opacity: 0,
+          },
+          visible: {
+            opacity: 1,
+            transition: {
+              delay: .2,
+              duration: 1,
+            }
+          },
+        }}
+      >
+        {heroData.img_url && (
+          <div className="text-right pt-0 flex items-end justify-end h-full">
+            <img
+              src={heroData.img_url}
+              alt="Hero"
+              className="db:inline tb:w-[90%] tb-l:w-[70%] db:w-[75%] w-full rounded-b-3xl"
+            />
+          </div>
+        )}
+      </div>
+    )
+  )
+
+  const title = () => (
+    heroData.title && (
+      <div
+
+      >
+        {
+          logo ? (
+            <div className={"pb-4 db:text-left tb:text-center tb-l:text-left" + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>
+              <img className="w-[290px] inline-block" src={logo} alt="Brand" />
+            </div>
+          ) : (
+            <Typography textStyle='h2' as="h2" className={"pb-2 tb:text-center break-words db:text-left tb-l:text-left  " + ((heroData.title_color) ? heroData.title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.title}</Typography>
+          )
+        }
+      </div>
+    )
+  )
+
+  const heroButton = () => (
+    heroData.buttons && (
+      <div className={" gap-6 flex items-center tb:justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
+
+
+        {heroData.buttons[0] &&
+          <HDSButton
+            type={heroData.buttons[0].cta_type || "secondary"}
+            btnTextColorClass={HDSColor('text-neutral-0')}
+            leftIconVariant='none'
+            rightIconVariant='none'
+            label={heroData.buttons[0].cta_text}
+            state='default'
+            size='lg'
+            rightAnimatedArrow='true'
+            rightAnimatedArrowColor='#ffffff'
+          />
+        }
+        {heroData.buttons[1] && <HDSButton
+          type={heroData.buttons[0].cta_type || "primaryLink"}
+          btnTextColorClass={HDSColor('text-neutral-0')}
+          leftIconVariant='none'
+          rightIconVariant='none'
+          label={heroData.buttons[1].cta_text}
+          state='default'
+          size='lg'
+          rightAnimatedArrow='true'
+          rightAnimatedArrowColor='#ffffff'
+        />}
+
+
+      </div>
+    )
+  )
+
+  const LinkCardsFn = (heroData) => {
+    return (
+      heroData.linkCards && (
+        <div className="flex mt-16 px-20 pb-20 gap-6 justify-center">
+          {heroData.linkCards.map((card, index) => (
+            <div key={index} className="w-full">
+              <LinkCard
+                linkUrl={card.linkUrl}
+                cardBgColor={card.cardBgColor}
+                cardHoverBg={card.cardHoverBg}
+                iconVariant={card.iconVariant}
+                iconStrokeColor={card.iconStrokeColor}
+                iconArrowVariant={card.iconArrowVariant}
+                iconArrowStrokeColor={card.iconArrowStrokeColor}
+                title={card.title}
+                description={card.description}
+              />
+            </div>
+          ))}
+        </div>
+      )
+    );
+  };
+
+  const imageCard = (heroData) => (
+    heroData.imageUrl && (
+      <div className="">
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='tb-l:w-full w-1/2' />
+      </div>
+    )
+  )
+
+  const videoGradientBg = HDSColor(heroData.video_gradient_bg);
+  return (
+    <div className="">
+      <div className="">
+        <div className={"max-w-7xl mx-auto px-20 py-20 rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
+          <div className="w-full">
+            <div className={"tb-l:flex tb-l:justify-between tb-l:items-center tb-l:flex-row db:w-full flex flex-col-reverse tb:gap-x-16 db:gap-x-10 min-[1880px]:gap-x-72" + ((heroData.video_url) ? " " : " tb:flex")}>
+              <div className='max-w-[29.18rem] w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
+              >
+                {
+                  heroData.tag_line && (
+                    <div
+                    >
+                      <Typography textStyle="h6" as="h6" className={"pb-2 uppercase text-center db:text-left font-normal tb-l:text-left " + ((heroData.tag_line_color) ? heroData.tag_line_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}
+                      >
+                        {heroData.tag_line}
+                      </Typography>
+                    </div>
+                  )
+                }
+                {title(heroData)}
+                {
+                  heroData.sub_title && (
+                    <Typography textStyle="sub1" className={"tb-l:text-center db:text-left flex" + ((heroData.sub_title_color) ? heroData.sub_title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.sub_title}</Typography>
+                  )
+                }
+
+                {
+                  heroData.description && (
+                    <Typography textStyle="sub1" className="db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                  )
+                }
+                {heroButton(heroData)}
+
+
+              </div>
+              <div className="">
+
+              
+              {imageCard(heroData)}
+              </div>
+            </div>
+
+            {LinkCardsFn(heroData)}
+
+          </div>
+        </div>
+        {
+          heroData.scrollArrow && (
+            <a className="flex justify-center flex-row z-10" onClick={(e) => scrollToNextDiv(e.currentTarget)}>
+              <div className="flex bg-neutral-0 shadow-md -mt-5 animate-bounce justify-center rounded-full items-center w-12 h-12" onClick={handleClick} >
+                <Icon 
+                variant='chevrondowndouble' 
+                strokeClass='stroke-neutral-800' height='h-6 w-6'  />
+              </div> 
+            </a>
+          )
+        }
+      </div>
+    </div>
+  );
+}