hds-web 1.41.3 → 1.41.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.41.3",
+  "version": "1.41.4",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Cards/Dropdown/v3Dropdown.js

@@ -10,7 +10,7 @@ export default function DropdownA(props) {
       <div className="tb-l:flex mb-2 tb-l:mb-0 flex w-full tb-l:bg-neutral-150 flex-col tb-l:flex-row max-w-7xl tb-l:gap-2 rounded-2xl ">
         {props.primaryCard && (
           <div className="">
-            <div className=" bg-neutral-0 rounded-2xl h-full w-full min-w-[420px]">
+            <div className={`bg-neutral-0 rounded-2xl h-full w-full ${props.primaryCard.cardDetailsArray ? 'min-w-[500px]' : ' min-w-[250px]'}`}>
               <FlyoutB {...props.primaryCard} />
             </div>
           </div>

package/src/HDS/components/Cards/Menu/flyoutB.js

@@ -22,55 +22,58 @@ export default function FlyoutB(props) {
 
   return (
     <div className="flex flex-col justify-between w-full h-full shadow rounded-2xl">
-      <a
-        href={primaryBtnCTA}
-        className="group/card cursor-pointer w-full h-full relative transition-all duration-300 ease-out "
-      >
-        <div className="group-hover/card:bg-neutral-100 ml-2 z-[1] mt-2 w-[calc(100%-16px)] h-[calc(100%-16px)] rounded-xl absolute "></div>
-        <div className="px-6 pt-6 pb-4 w-full h-full ">
-          <Typography
-            textStyle="h6"
-            className="uppercase relative z-[2] group-hover/card:text-neutral-1000 text-neutral-500 mb-4"
-          >
-            PLATFORM 
-          </Typography>
-          <div className="flex items-start lg:pt-2">
+      
+      
+        <div className=" ml-2 mt-2 w-[calc(100%-16px)] h-[calc(100%-16px)] rounded-xl absolute "></div>
+          <div className="px-6 pt-6 pb-4 w-full h-full ">
+            <Typography
+              textStyle="h6"
+              className="uppercase relative z-[2] group-hover/card:text-neutral-1000 text-neutral-500 mb-4"
+            >
+              PLATFORM 
+            </Typography>
+            <div className="flex items-start lg:pt-2">
             {
               props.cardDetailsArray ? (
-                <div className="flex items-start gap-6">
+                <div className="flex items-start gap-3">
                   {
                     props.cardDetailsArray.map((card, index) => (
-                      <div key={index} className="w-full min-w-[calc(50%-20px)] items-center relative  group/card  cursor-pointer z-[2]">
-                        <div className="flex items-center">
-                          <div className="w-5">
-                            {card.iconVariant}
+                      <a href={card.btnCTA}>
+                        <div key={index} className="hover:bg-neutral-100 rounded-lg p-3 w-full min-w-[calc(50%-20px)] items-center relative  group/card  cursor-pointer z-[2]">
+                          <div className="flex items-center">
+                            <div className="w-5">
+                              {card.iconVariant}
+                            </div>
+                            <Typography
+                              textStyle="body3c-medium"
+                              className="text-neutral-1000 ml-[6px] hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
+                            >
+                              {card.title}
+                            </Typography>
+                            <Icon
+                              height="h-5 w-5 stroke-[1.5] invisible group-hover/card:visible transition-all ease-in-out group-hover/card:translate-x-1"
+                              variant='chevronright'
+                              strokeColor="stroke-neutral-1000"
+                              strokeClass="stroke-neutral-1000"
+                            />
                           </div>
                           <Typography
-                            textStyle="body3c-medium"
-                            className="text-neutral-1000 ml-[6px] group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
+                            className="mt-1 text-neutral-600 relative z-[2]"
+                            textStyle="body3"
                           >
-                            {card.title}
+                            {card.description}
                           </Typography>
-                          <Icon
-                            height="h-5 w-5 stroke-[1.5] group-hover/card:stroke-blue-500"
-                            variant='chevronright'
-                            strokeColor="stroke-neutral-1000"
-                            strokeClass="stroke-neutral-1000"
-                          />
                         </div>
-                        <Typography
-                          className="mt-1 text-neutral-600 relative z-[2]"
-                          textStyle="body3"
-                        >
-                          {card.description}
-                        </Typography>
-                      </div>
+                      </a>
                     ))
                   }
                 </div>
               ) : (
-                <>
-                  <div className=" flex items-center relative justify-center p-2.5 h-14 w-14 z-[2] group-hover/card:bg-blue-200 bg-blue-200 rounded-2xl min-w-[56px] mr-6">
+                <a
+                  href={primaryBtnCTA}
+                  className="group/card flex items-start hover:bg-neutral-100 p-3 rounded-lg cursor-pointer w-full h-full relative transition-all duration-300 ease-out "
+                >
+                  <div className="flex items-center relative justify-center p-2.5 h-14 w-14 z-[2] group-hover/card:bg-blue-200 bg-blue-200 rounded-2xl min-w-[56px] mr-6">
                     <Icon
                       height="h-6 w-6 stroke-2 group-hover/card:stroke-blue-500"
                       variant={iconVariant}
@@ -92,13 +95,13 @@ export default function FlyoutB(props) {
                       {mainDescription}
                     </Typography>
                   </div>    
-                </>
+                </a>
               )
             }
             
           </div>
         </div>
-      </a>
+      
       <div className="border-t border-neutral-200 pt-3 mx-6" />
       <div className="flex pb-3 gap-2">
         {secondaryBtn.map((btn, index) => (

package/src/HDS/components/Cards/Menu/flyoutD.js

@@ -2,7 +2,7 @@ import React from "react";
 
 export default function FlyoutD(props) {
   return (
-    <div className="flex justify-center">
+    <div className="flex justify-center z-[2]">
       <a href={props?.link}>
         <img
           src={props?.cardImg}

package/src/HDS/components/Headers/v3Header.js

@@ -161,7 +161,7 @@ export default function V3Header(props) {
                     animate={{ opacity: 1 }}
                     transition={{ ease: "easeInOut", duration: 0.1 }}
                     className={
-                      "absolute -left-[137px] z-[2] transform " +
+                      "absolute top-[21px] -left-[137px] z-[2] transform " +
                       (dropdownVisibility[0] ? "-left-[137px] " : "") +
                       (dropdownVisibility[1] ? "-left-[218px]" : "") +
                       (dropdownVisibility[3] ? "-left-[50px] " : "")
@@ -760,7 +760,7 @@ V3Header.defaultProps = {
             iconVariant: <PromptQLLogo />,
             description: `A data access agent with out-of-the-box connectors and agentic query planning.`,
             title: "PromptQL by Hasura",
-            btnCTA: "/products",
+            btnCTA: "/book-demo/promptql",
             strokeClass: "stroke-blue-500",
           },
         ],

package/src/styles/tailwind.css

@@ -1058,6 +1058,10 @@ select{
   top: 100%;
 }
 
+.top-\[21px\]{
+  top: 21px;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -1415,6 +1419,10 @@ select{
   margin-left: 30px;
 }
 
+.ml-\[6px\]{
+  margin-left: 6px;
+}
+
 .mr-0{
   margin-right: 0px;
 }
@@ -1527,10 +1535,6 @@ select{
   margin-top: 70px;
 }
 
-.ml-\[6px\]{
-  margin-left: 6px;
-}
-
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -2088,10 +2092,6 @@ select{
   min-width: 24px;
 }
 
-.min-w-\[250px\]{
-  min-width: 250px;
-}
-
 .min-w-\[300px\]{
   min-width: 300px;
 }
@@ -2100,6 +2100,10 @@ select{
   min-width: 312px;
 }
 
+.min-w-\[420px\]{
+  min-width: 420px;
+}
+
 .min-w-\[48px\]{
   min-width: 48px;
 }
@@ -2116,6 +2120,10 @@ select{
   min-width: 72px;
 }
 
+.min-w-\[calc\(50\%-20px\)\]{
+  min-width: calc(50% - 20px);
+}
+
 .min-w-fit{
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
@@ -2126,20 +2134,20 @@ select{
   min-width: 100%;
 }
 
-.min-w-\[450px\]{
-  min-width: 450px;
+.min-w-\[440px\]{
+  min-width: 440px;
 }
 
-.min-w-\[50\%\]{
-  min-width: 50%;
+.min-w-\[450px\]{
+  min-width: 450px;
 }
 
-.min-w-\[calc\(50\%-20px\)\]{
-  min-width: calc(50% - 20px);
+.min-w-\[500px\]{
+  min-width: 500px;
 }
 
-.min-w-\[420px\]{
-  min-width: 420px;
+.min-w-\[250px\]{
+  min-width: 250px;
 }
 
 .max-w-2xl{
@@ -6844,10 +6852,6 @@ select{
   padding-top: 81px;
 }
 
-.pt-1{
-  padding-top: 0.25rem;
-}
-
 .text-left{
   text-align: left;
 }
@@ -10584,6 +10588,10 @@ select{
   visibility: visible;
 }
 
+.group\/card:hover .group-hover\/card\:visible{
+  visibility: visible;
+}
+
 .group\/sc:hover .group-hover\/sc\:block{
   display: block;
 }
@@ -10640,6 +10648,12 @@ select{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.group\/card:hover .group-hover\/card\:translate-x-1{
+  --tw-translate-x: 0.25rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .group\/badge:hover .group-hover\/badge\:border-opacity-0{
   --tw-border-opacity: 0;
 }