hds-web 1.41.2 → 1.41.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.41.2",
+  "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-[250px]">
+            <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,45 +22,87 @@ 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=" 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}
-                strokeColor={strokeColor}
-                strokeClass={strokeClass}
-              />
-            </div>
-            <div className="relative group/card  cursor-pointer items-center z-[2]">
-              <Typography
-                textStyle="body3c-medium"
-                className="text-neutral-1000  group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
-              >
-                {props.primaryBtnLabel}
-              </Typography>
-              <Typography
-                className="mt-1 text-neutral-600 relative z-[2]"
-                textStyle="body3"
-              >
-                {mainDescription}
-              </Typography>
-            </div>
+      
+      
+        <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-3">
+                  {
+                    props.cardDetailsArray.map((card, index) => (
+                      <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
+                            className="mt-1 text-neutral-600 relative z-[2]"
+                            textStyle="body3"
+                          >
+                            {card.description}
+                          </Typography>
+                        </div>
+                      </a>
+                    ))
+                  }
+                </div>
+              ) : (
+                <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}
+                      strokeColor={strokeColor}
+                      strokeClass={strokeClass}
+                    />
+                  </div>
+                  <div className="relative group/card  cursor-pointer items-center z-[2]">
+                    <Typography
+                      textStyle="body3c-medium"
+                      className="text-neutral-1000  group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
+                    >
+                      {props.primaryBtnLabel}
+                    </Typography>
+                    <Typography
+                      className="mt-1 text-neutral-600 relative z-[2]"
+                      textStyle="body3"
+                    >
+                      {mainDescription}
+                    </Typography>
+                  </div>    
+                </a>
+              )
+            }
+            
           </div>
         </div>
-      </a>
-      <div className="border-t border-neutral-200 pt-6 mx-6" />
+      
+      <div className="border-t border-neutral-200 pt-3 mx-6" />
       <div className="flex pb-3 gap-2">
         {secondaryBtn.map((btn, index) => (
           <a

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

@@ -20,6 +20,19 @@ const updatePGParam = (originalLink, websiteKey) => {
   } else return originalLink;
 };
 
+const HasuraLogo = () => (
+  <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0402 2.08323C17.9627 3.18615 18.2492 6.17362 17.773 7.67111C17.6149 8.16902 17.5703 8.69511 17.6614 9.20617C17.7544 9.71348 17.8474 10.326 17.8474 10.7525C17.8474 15.1304 14.3338 18.6815 9.99814 18.6815C5.6643 18.6815 2.14887 15.1323 2.14887 10.7525C2.14887 10.326 2.24187 9.71348 2.33487 9.20617C2.42787 8.69511 2.38509 8.16902 2.22699 7.67111C1.75083 6.1755 2.03727 3.18803 2.95984 2.08323C3.08074 1.94043 3.3058 1.95922 3.40624 2.11893L4.54271 3.9208C4.82543 4.27968 5.33136 4.36423 5.7108 4.11245C6.94399 3.29701 8.41713 2.82352 10 2.82352C11.5829 2.82352 13.056 3.29701 14.2892 4.11245C14.6705 4.36423 15.1764 4.28156 15.4573 3.9208L16.5938 2.11893C16.6942 1.95922 16.9193 1.93856 17.0402 2.08323ZM11.0787 10.4144L12.6318 13.1351C12.6634 13.1896 12.6634 13.2572 12.6318 13.3098C12.602 13.3643 12.5444 13.3981 12.4811 13.3981H11.2182C11.1568 13.3981 11.0991 13.3643 11.0675 13.3098L10.2379 11.8574L9.31351 13.3154C9.28189 13.3662 9.22609 13.3962 9.16657 13.3962H7.88502C7.81992 13.3962 7.7604 13.3605 7.73064 13.3042C7.70088 13.2478 7.70274 13.1783 7.73808 13.1238L9.44743 10.4896L8.17332 8.32694C8.1417 8.27245 8.13984 8.20481 8.17146 8.15032C8.20308 8.09395 8.26074 8.06013 8.32398 8.06013H9.59624C9.65762 8.06013 9.71528 8.09207 9.7469 8.14656L11.0787 10.4144Z" fill="#000615"/>
+  </svg>
+)
+
+const PromptQLLogo = () => (
+  <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.21406 3.77103H4.87892C2.64361 3.77103 0 4.97315 0 8.46755C0 10.7694 1.68562 13.1283 5.25767 13.1283H6.81628L9.72026 16.3549H11.9789V8.61099C11.9789 5.22198 9.61022 3.77103 7.21961 3.77103H7.21406ZM9.72026 8.61099V13.2203L7.87072 10.9691H5.20277C3.84939 10.9691 2.26859 10.3146 2.26859 8.46755C2.26859 6.23779 4.15445 5.99928 4.96981 5.99928H7.07199C8.36437 5.99928 9.72026 6.70294 9.72026 8.61099Z" fill="#000615"/>
+    <path d="M16.7398 14.0011C16.3127 14.0011 15.9688 13.6517 15.9688 13.2135V3.97275H13.6392V13.4021C13.6392 15.0217 14.9371 16.3418 16.5345 16.3418H19.9994V14.0011H16.7398Z" fill="#000615"/>
+  </svg>
+)
+
 export default function V3Header(props) {
   // const listSize = props.HEADER_LIST.length;
 
@@ -148,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] " : "")
@@ -735,9 +748,26 @@ V3Header.defaultProps = {
       primaryCard: {
         iconVariant: "layersthree01",
         mainDescription: `Enable your backend team to deliver an incredible unified API on all your data effortlessly.`,
+        cardDetailsArray: [
+          {
+            iconVariant: <HasuraLogo />,
+            description: `Enable your backend team to deliver an incredible unified API on all your data effortlessly.`,
+            title: "What is Hasura?",
+            btnCTA: "/products",
+            strokeClass: "stroke-blue-500",
+          },
+          {
+            iconVariant: <PromptQLLogo />,
+            description: `A data access agent with out-of-the-box connectors and agentic query planning.`,
+            title: "PromptQL by Hasura",
+            btnCTA: "/book-demo/promptql",
+            strokeClass: "stroke-blue-500",
+          },
+        ],
         primaryBtnLabel: "What is Hasura?",
         primaryBtnCTA: "/products",
         strokeClass: "stroke-blue-500",
+
         secondaryBtn: [
           {
             cta_leftVariantIcon: "checksquarebroken",

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;
 }
@@ -2084,10 +2092,6 @@ select{
   min-width: 24px;
 }
 
-.min-w-\[250px\]{
-  min-width: 250px;
-}
-
 .min-w-\[300px\]{
   min-width: 300px;
 }
@@ -2096,6 +2100,10 @@ select{
   min-width: 312px;
 }
 
+.min-w-\[420px\]{
+  min-width: 420px;
+}
+
 .min-w-\[48px\]{
   min-width: 48px;
 }
@@ -2112,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;
@@ -2122,6 +2134,22 @@ select{
   min-width: 100%;
 }
 
+.min-w-\[440px\]{
+  min-width: 440px;
+}
+
+.min-w-\[450px\]{
+  min-width: 450px;
+}
+
+.min-w-\[500px\]{
+  min-width: 500px;
+}
+
+.min-w-\[250px\]{
+  min-width: 250px;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -10560,6 +10588,10 @@ select{
   visibility: visible;
 }
 
+.group\/card:hover .group-hover\/card\:visible{
+  visibility: visible;
+}
+
 .group\/sc:hover .group-hover\/sc\:block{
   display: block;
 }
@@ -10616,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;
 }