hds-web 1.36.7 → 1.36.9

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

@@ -1,85 +1,14 @@
 import React from "react";
-import { Typography } from "../../../foundation/Typography";
-import { Icon } from "../../common-components";
 
-export default function FlyoutD(props) {
+export default function FlyoutD() {
   return (
-    <div className="flex flex-col justify-between">
-      <a
-        href={props.link}
-        className="flex flex-col gap-4 tb-l:gap-0 tb-l:flex-col w-full h-full justify-between group/icon px-6 "
-      >
-        {props.IconVariant && (
-          <div className="w-full h-full tb-l:pb-6">
-            {/* <div className=" p-2.5 rounded-2xl w-14 h-14 tb-l:w-full tb-xl:w-[175px] tb-l:h-[124px] bg-neutral-150 items-center justify-center transition-all duration-300 flex group-hover/icon:bg-blue-200">
-              <Icon
-                height=" tb-l:h-12 tb-l:w-12 h-6 w-6"
-                variant={props.IconVariant}
-                className=" stroke-neutral-800 group-hover/icon:stroke-blue-600 cursor-pointer transition-all duration-300"
-              />
-            </div> */}
-            <img
-              src={`https://res.cloudinary.com/dh8fp23nd/image/upload/v1712003758/v3-federation_1_hmumso.png`}
-              className=" rounded-lg w-14 h-14 tb-l:w-full tb-xl:min-w-[175px] tb-l:h-[124px] flex border border-neutral-200 bg-blue-200"
-              alt="hasura-ddn-illus"
-            />
-          </div>
-        )}
-        <div className="flex flex-col gap-1 w-full h-full">
-          {props.btnLabel && (
-            <div className="flex items-center">
-              <Typography
-                textStyle="body3c-medium"
-                className="text-neutral-900 whitespace-nowrap group-hover/icon:text-blue-600 transition-all duration-300 "
-              >
-                {props.btnLabel}
-              </Typography>
-            </div>
-          )}
-          {props.description && (
-            <div>
-              <Typography
-                textStyle="body3c"
-                className="text-neutral-600 line-clamp-5"
-              >
-                {props.description}
-              </Typography>
-            </div>
-          )}
-        </div>
-      </a>
-      <a
-        href={`https://hasura.io/blog/announcing-hasura-data-delivery-network-beta`}
-        className="w-full mt-4 inline-block pr-6 ml-3"
-      >
-        <div className="flex group/icon py-2 pr-3  rounded-lg flex-row w-full justify-between tb:min-w-[150px] items-center hover:bg-neutral-100 pl-3">
-          <div className="flex gap-2 flex-row items-center">
-            <div className="flex rounded-lg items-center group-hover:bg-white">
-              <Icon
-                height={
-                  "h-5 w-5 stroke-2 " + "group-hover/icon:stroke-blue-500 "
-                }
-                variant={`bookopen01`}
-                strokeClass={`stroke-neutral-500`}
-              />
-            </div>
-            <Typography
-              textStyle="body3c-medium"
-              className="text-neutral-1000  group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
-            >
-              Read announcement
-            </Typography>
-          </div>
-          <div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out ">
-            <Icon
-              height={
-                "h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out   "
-              }
-              variant={"chevronright"}
-              strokeClass={"stroke-blue-500"}
-            />
-          </div>
-        </div>
+    <div className="">
+      <a href={`https://hasura.io/ddn`}>
+        <img
+          src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1716906625/Frame_12754_2_iaixzx.png"
+          alt="Hasura DDN"
+          className="w-full min-w-[204px] max-w-[204px] mt-2 tb-l:mt-0"
+        />
       </a>
     </div>
   );

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,6 +51,8 @@ export default function V3Header(props) {
   };
 
   const handleDropdownLeave = (index) => {
+    // return null;
+
     setDropdownVisibility((prevVisibility) => {
       const updatedVisibility = [...prevVisibility];
       updatedVisibility[index] = false;
@@ -564,11 +564,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 +576,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",
-              strokeClass: "stroke-neutral-500",
-            },
-            {
-              description: "",
-              href: "/products/authorization",
-              icon: "eye",
-              name: "Authorization",
+              href: "/connectors/postgres",
+              icon: "database01",
+              name: "PostgreSQL",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/products/performance",
-              icon: "speedometer03",
-              name: "Performance",
+              href: "/connectors/mongodb",
+              icon: "database01",
+              name: "MongoDB",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/products/federation",
-              icon: "data",
-              name: "Federation",
+              href: "/connectors#connectors-list",
+              icon: "database01",
+              name: "MySQL",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/products/api-security",
-              icon: "shieldtick",
-              name: "API Security",
+              href: "/connectors#connectors-list",
+              icon: "database01",
+              name: "Snowflake",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/products/observability",
-              icon: "piechart01",
-              name: "Observability",
+              href: "/connectors#connectors-list",
+              icon: "database01",
+              name: "Oracle",
               strokeClass: "stroke-neutral-500",
             },
-          ],
-          label: "CAPABILITIES",
-        },
-        {
-          childArray: [
             {
               description: "",
-              href: "/graphql/database",
+              href: "/connectors/sqlserver",
               icon: "database01",
-              name: "All Databases",
+              name: "SQL Server",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/graphql/database?category=planned",
-              icon: "checksquare",
-              name: "Planned Databases",
+              href: "/connectors#connectors-list",
+              icon: "database01",
+              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;
 }
@@ -1519,18 +1523,15 @@ select{
   margin-top: 70px;
 }
 
-.line-clamp-3{
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+.mr-6{
+  margin-right: 1.5rem;
 }
 
-.line-clamp-5{
+.line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5;
+  -webkit-line-clamp: 3;
 }
 
 .block{
@@ -2055,6 +2056,10 @@ select{
   min-width: 18rem;
 }
 
+.min-w-\[204px\]{
+  min-width: 204px;
+}
+
 .min-w-\[20px\]{
   min-width: 20px;
 }
@@ -2097,6 +2102,10 @@ select{
   min-width: 100%;
 }
 
+.min-w-\[56px\]{
+  min-width: 56px;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -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{
@@ -11120,6 +11115,10 @@ select{
     width: 100%;
   }
 
+  .tb\:min-w-\[140px\]{
+    min-width: 140px;
+  }
+
   .tb\:min-w-\[150px\]{
     min-width: 150px;
   }
@@ -11148,6 +11147,22 @@ select{
     min-width: 500px;
   }
 
+  .tb\:min-w-\[130px\]{
+    min-width: 130px;
+  }
+
+  .tb\:min-w-\[120px\]{
+    min-width: 120px;
+  }
+
+  .tb\:min-w-\[116px\]{
+    min-width: 116px;
+  }
+
+  .tb\:min-w-\[135px\]{
+    min-width: 135px;
+  }
+
   .tb\:max-w-\[17rem\]{
     max-width: 17rem;
   }
@@ -12020,6 +12035,10 @@ select{
     margin-top: 0px;
   }
 
+  .tb-l\:-ml-2{
+    margin-left: -0.5rem;
+  }
+
   .tb-l\:block{
     display: block;
   }
@@ -12036,14 +12055,6 @@ select{
     display: none;
   }
 
-  .tb-l\:h-12{
-    height: 3rem;
-  }
-
-  .tb-l\:h-\[124px\]{
-    height: 124px;
-  }
-
   .tb-l\:h-full{
     height: 100%;
   }
@@ -12056,14 +12067,6 @@ select{
     width: 50%;
   }
 
-  .tb-l\:w-12{
-    width: 3rem;
-  }
-
-  .tb-l\:w-\[170px\]{
-    width: 170px;
-  }
-
   .tb-l\:w-\[38\%\]{
     width: 38%;
   }
@@ -12312,21 +12315,11 @@ 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\:mr-6{
+    margin-right: 1.5rem;
   }
-}
 
-@media (min-width: 1024px){
   .lg\:flex{
     display: flex;
   }
@@ -12339,6 +12332,10 @@ select{
     height: auto;
   }
 
+  .lg\:min-w-\[56px\]{
+    min-width: 56px;
+  }
+
   .lg\:grid-cols-2{
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -12366,6 +12363,10 @@ select{
     padding-right: 2.25rem;
   }
 
+  .lg\:pt-2{
+    padding-top: 0.5rem;
+  }
+
   .db-s\:mb-0{
     margin-bottom: 0px;
   }