hds-web 1.36.8 → 1.37.0

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

@@ -20,8 +20,6 @@ const updatePGParam = (originalLink, websiteKey) => {
   } else return originalLink;
 };
 
-const isBrowser = typeof window !== "undefined";
-
 export default function V3Header(props) {
   const listSize = props.HEADER_LIST.length;
   const [mobileNavOpen, setmobileNavOpen] = useState(false);
@@ -53,11 +51,12 @@ export default function V3Header(props) {
   };
 
   const handleDropdownLeave = (index) => {
-    setDropdownVisibility((prevVisibility) => {
-      const updatedVisibility = [...prevVisibility];
-      updatedVisibility[index] = false;
-      return updatedVisibility;
-    });
+    return null;
+    // setDropdownVisibility((prevVisibility) => {
+    //   const updatedVisibility = [...prevVisibility];
+    //   updatedVisibility[index] = false;
+    //   return updatedVisibility;
+    // });
   };
 
   const renderDropdown = (
@@ -564,11 +563,11 @@ V3Header.defaultProps = {
       title: "Product",
       primaryCard: {
         iconVariant: "layersthree01",
-        mainDescription: `Discover Hasura's core capabilities for automating the building, securing, optimizing, and deploying of APIs.`,
-        primaryBtnLabel: "Hasura Data API Platform",
+        mainDescription: `Enable your backend team to deliver an incredible unified API on all your data effortlessly.`,
+        primaryBtnLabel: "What is Hasura?",
         primaryBtnCTA: "/products",
         strokeClass: "stroke-neutral-800",
-        tertiaryBtn: [
+        secondaryBtn: [
           {
             cta_leftVariantIcon: "checksquarebroken",
             cta_leftVariantIconColor: "#6C737F",
@@ -576,98 +575,74 @@ V3Header.defaultProps = {
             cta_link: "/pricing",
           },
         ],
-        secondaryBtn: [
+        tertiaryBtn: [
           {
             cta_leftVariantIcon: "zap",
             cta_leftVariantIconColor: "#6C737F",
-            cta_text: "Deployment Options",
+            cta_text: "Get Started",
             cta_link: "/products/deployment",
           },
         ],
       },
       secondaryCardArr: [
         {
+          label: "CONNECTORS",
           childArray: [
             {
               description: "",
-              href: "/products/instant-api",
-              icon: "lightning01",
-              name: "Instant API",
+              href: "/graphql/database/postgresql",
+              icon: "database01",
+              name: "PostgreSQL",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/products/authorization",
-              icon: "eye",
-              name: "Authorization",
+              href: "/graphql/database/mongodb",
+              icon: "database01",
+              name: "MongoDB",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/products/performance",
-              icon: "speedometer03",
-              name: "Performance",
+              href: "/graphql/database/mysql",
+              icon: "database01",
+              name: "MySQL",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/products/federation",
-              icon: "data",
-              name: "Federation",
+              href: "/graphql/database/snowflake",
+              icon: "database01",
+              name: "Snowflake",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/products/api-security",
-              icon: "shieldtick",
-              name: "API Security",
+              href: "/graphql/database/oracle",
+              icon: "database01",
+              name: "Oracle",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/products/observability",
-              icon: "piechart01",
-              name: "Observability",
+              href: "/graphql/database/sql-server",
+              icon: "database01",
+              name: "SQL Server",
               strokeClass: "stroke-neutral-500",
             },
-          ],
-          label: "CAPABILITIES",
-        },
-        {
-          childArray: [
             {
               description: "",
               href: "/graphql/database",
               icon: "database01",
-              name: "All Databases",
-              strokeClass: "stroke-neutral-500",
-            },
-            {
-              description: "",
-              href: "/graphql/database?category=planned",
-              icon: "checksquare",
-              name: "Planned Databases",
+              name: "See all",
               strokeClass: "stroke-neutral-500",
             },
           ],
-          label: "Data sources",
         },
       ],
       flyoutD: {
         link: "https://hasura.io/ddn",
-        IconVariant: "aibot",
-        btnLabel: "The future of data delivery",
-        description:
-          "Introducing Hasura Data Delivery Network – a new way to ship amazing APIs on all data!",
-        childArray: [
-          {
-            description: "",
-            href: "/products/instant-api",
-            icon: "lightning01",
-            name: "Instant API",
-            strokeClass: "stroke-neutral-500",
-          },
-        ],
+        cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1716906625/Frame_12754_2_iaixzx.png`,
       },
     },
     {

package/src/styles/tailwind.css

@@ -1359,6 +1359,10 @@ select{
   margin-bottom: 1.5rem;
 }
 
+.mb-8{
+  margin-bottom: 2rem;
+}
+
 .mb-9{
   margin-bottom: 2.25rem;
 }
@@ -1435,6 +1439,10 @@ select{
   margin-right: 1.25rem;
 }
 
+.mr-6{
+  margin-right: 1.5rem;
+}
+
 .mr-8{
   margin-right: 2rem;
 }
@@ -1526,13 +1534,6 @@ select{
   -webkit-line-clamp: 3;
 }
 
-.line-clamp-5{
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5;
-}
-
 .block{
   display: block;
 }
@@ -2055,6 +2056,10 @@ select{
   min-width: 18rem;
 }
 
+.min-w-\[204px\]{
+  min-width: 204px;
+}
+
 .min-w-\[20px\]{
   min-width: 20px;
 }
@@ -2079,6 +2084,10 @@ select{
   min-width: 48px;
 }
 
+.min-w-\[56px\]{
+  min-width: 56px;
+}
+
 .min-w-\[64px\]{
   min-width: 64px;
 }
@@ -2129,6 +2138,10 @@ select{
   max-width: 18rem;
 }
 
+.max-w-\[204px\]{
+  max-width: 204px;
+}
+
 .max-w-\[20px\]{
   max-width: 20px;
 }
@@ -6727,10 +6740,6 @@ select{
   padding-right: 12rem;
 }
 
-.pr-6{
-  padding-right: 1.5rem;
-}
-
 .pr-7{
   padding-right: 1.75rem;
 }
@@ -10518,10 +10527,6 @@ select{
   visibility: visible;
 }
 
-.group\/card:hover .group-hover\/card\:visible{
-  visibility: visible;
-}
-
 .group\/eventListing:hover .group-hover\/eventListing\:visible{
   visibility: visible;
 }
@@ -10548,12 +10553,6 @@ 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\/eventListing:hover .group-hover\/eventListing\:translate-x-\[0\.15rem\]{
   --tw-translate-x: 0.15rem;
   -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));
@@ -10619,11 +10618,6 @@ select{
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.group\/icon:hover .group-hover\/icon\:bg-blue-200{
-  --tw-bg-opacity: 1;
-  background-color: rgb(223 232 255 / var(--tw-bg-opacity));
-}
-
 .group:hover .group-hover\:bg-amber-300{
   --tw-bg-opacity: 1;
   background-color: rgb(255 206 112 / var(--tw-bg-opacity));
@@ -10695,10 +10689,6 @@ select{
   stroke: #3970FD;
 }
 
-.group\/icon:hover .group-hover\/icon\:stroke-blue-600{
-  stroke: #1E56E3;
-}
-
 .group:hover .group-hover\:stroke-blue-500{
   stroke: #3970FD;
 }
@@ -10730,6 +10720,11 @@ select{
   color: rgb(30 86 227 / var(--tw-text-opacity));
 }
 
+.group\/card:hover .group-hover\/card\:text-neutral-1000{
+  --tw-text-opacity: 1;
+  color: rgb(0 6 21 / var(--tw-text-opacity));
+}
+
 .group\/icon:hover .group-hover\/icon\:text-blue-600{
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));
@@ -10944,8 +10939,8 @@ select{
     position: absolute;
   }
 
-  .tb\:left-6{
-    left: 1.5rem;
+  .tb\:left-3{
+    left: 0.75rem;
   }
 
   .tb\:left-auto{
@@ -10964,14 +10959,6 @@ select{
     top: 160px;
   }
 
-  .tb\:left-4{
-    left: 1rem;
-  }
-
-  .tb\:left-3{
-    left: 0.75rem;
-  }
-
   .tb\:mb-0{
     margin-bottom: 0px;
   }
@@ -11128,6 +11115,10 @@ select{
     width: 100%;
   }
 
+  .tb\:min-w-\[140px\]{
+    min-width: 140px;
+  }
+
   .tb\:min-w-\[150px\]{
     min-width: 150px;
   }
@@ -11156,6 +11147,10 @@ select{
     min-width: 500px;
   }
 
+  .tb\:min-w-\[130px\]{
+    min-width: 130px;
+  }
+
   .tb\:max-w-\[17rem\]{
     max-width: 17rem;
   }
@@ -12028,6 +12023,14 @@ select{
     margin-top: 0px;
   }
 
+  .tb-l\:-ml-6{
+    margin-left: -1.5rem;
+  }
+
+  .tb-l\:-ml-1{
+    margin-left: -0.25rem;
+  }
+
   .tb-l\:block{
     display: block;
   }
@@ -12044,14 +12047,6 @@ select{
     display: none;
   }
 
-  .tb-l\:h-12{
-    height: 3rem;
-  }
-
-  .tb-l\:h-\[124px\]{
-    height: 124px;
-  }
-
   .tb-l\:h-full{
     height: 100%;
   }
@@ -12064,14 +12059,6 @@ select{
     width: 50%;
   }
 
-  .tb-l\:w-12{
-    width: 3rem;
-  }
-
-  .tb-l\:w-\[170px\]{
-    width: 170px;
-  }
-
   .tb-l\:w-\[38\%\]{
     width: 38%;
   }
@@ -12320,20 +12307,6 @@ select{
   }
 }
 
-@media (min-width: 970px){
-  .tb-xl\:w-\[175px\]{
-    width: 175px;
-  }
-
-  .tb-xl\:w-\[223px\]{
-    width: 223px;
-  }
-
-  .tb-xl\:min-w-\[175px\]{
-    min-width: 175px;
-  }
-}
-
 @media (min-width: 1024px){
   .lg\:flex{
     display: flex;
@@ -12374,6 +12347,10 @@ select{
     padding-right: 2.25rem;
   }
 
+  .lg\:pt-2{
+    padding-top: 0.5rem;
+  }
+
   .db-s\:mb-0{
     margin-bottom: 0px;
   }