hds-web 1.41.2 → 1.41.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.41.2",
+  "version": "1.41.3",
   "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 min-w-[420px]">
               <FlyoutB {...props.primaryCard} />
             </div>
           </div>

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

@@ -26,41 +26,80 @@ export default function FlyoutB(props) {
         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="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
+            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>
+            {
+              props.cardDetailsArray ? (
+                <div className="flex items-start gap-6">
+                  {
+                    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}
+                          </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"
+                          >
+                            {card.title}
+                          </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>
+                    ))
+                  }
+                </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">
+                    <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>
         </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/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;
 
@@ -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: "/products",
+            strokeClass: "stroke-blue-500",
+          },
+        ],
         primaryBtnLabel: "What is Hasura?",
         primaryBtnCTA: "/products",
         strokeClass: "stroke-blue-500",
+
         secondaryBtn: [
           {
             cta_leftVariantIcon: "checksquarebroken",

package/src/styles/tailwind.css

@@ -1527,6 +1527,10 @@ select{
   margin-top: 70px;
 }
 
+.ml-\[6px\]{
+  margin-left: 6px;
+}
+
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -2122,6 +2126,22 @@ select{
   min-width: 100%;
 }
 
+.min-w-\[450px\]{
+  min-width: 450px;
+}
+
+.min-w-\[50\%\]{
+  min-width: 50%;
+}
+
+.min-w-\[calc\(50\%-20px\)\]{
+  min-width: calc(50% - 20px);
+}
+
+.min-w-\[420px\]{
+  min-width: 420px;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -6824,6 +6844,10 @@ select{
   padding-top: 81px;
 }
 
+.pt-1{
+  padding-top: 0.25rem;
+}
+
 .text-left{
   text-align: left;
 }