hds-web 1.39.1 → 1.39.3

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

@@ -21,7 +21,7 @@ const updatePGParam = (originalLink, websiteKey) => {
 };
 
 export default function V3Header(props) {
-  const listSize = props.HEADER_LIST.length;
+  // const listSize = props.HEADER_LIST.length;
 
   const [mobileNavOpen, setmobileNavOpen] = useState(false);
 
@@ -29,17 +29,19 @@ export default function V3Header(props) {
 
   const [isDeveloper, setIsDeveloper] = useState(false);
 
+  const [isResources, setIsResources] = useState(false);
+
   const [isCompany, setIsCompany] = useState(false);
 
   const [currentTab, setCurrentTab] = useState("");
 
-  const [isShown, setIsShown] = useState(false);
+  // const [isShown, setIsShown] = useState(false);
 
   const [isArrowActive, setIsArrowActive] = useState(false);
 
   const signUpLink = props.signUpLink
     ? props.signUpLink
-    : "https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default";
+    : "https://console.hasura.io";
 
   const logInLink = props.logInLink
     ? props.logInLink
@@ -172,6 +174,21 @@ export default function V3Header(props) {
     <>
       {renderDropdownContainer(headerList, 0)}
       {renderDropdownContainer(headerList, 1)}
+      {
+        <a href="/enterprise">
+          <Typography
+            className={
+              isDarkMode
+                ? "text-neutral-0 hover:text-blue-400 cursor-pointer"
+                : "hover:text-blue-600 cursor-pointer"
+            }
+            textStyle="body3c-medium"
+          >
+            {`Enterprise`}
+          </Typography>
+        </a>
+      }
+      {renderDropdownContainer(headerList, 2)}
       {
         <a href="/customers">
           <Typography
@@ -186,8 +203,6 @@ export default function V3Header(props) {
           </Typography>
         </a>
       }
-      {renderDropdownContainer(headerList, 3)}
-
       {
         <a href="/pricing">
           <Typography
@@ -226,10 +241,21 @@ export default function V3Header(props) {
               primaryCard={HEADER_LIST[1]["primaryCard"]}
               secondaryCardArr={HEADER_LIST[1]["secondaryCardArr"]}
               tertiaryCard={HEADER_LIST[1]["tertiaryCard"]}
+              flyoutD={HEADER_LIST[1]["flyoutD"]}
+            />
+          </div>
+        )}
+        {isResources && (
+          <div className="product_resources">
+            <V3Dropdown
+              primaryCard={HEADER_LIST[2]["primaryCard"]}
+              secondaryCardArr={HEADER_LIST[2]["secondaryCardArr"]}
+              tertiaryCard={HEADER_LIST[2]["tertiaryCard"]}
+              flyoutD={HEADER_LIST[2]["flyoutD"]}
             />
           </div>
         )}
-        {isCompany && (
+        {/* {isCompany && (
           <div className="product_company">
             <V3Dropdown
               primaryCard={HEADER_LIST[3]["primaryCard"]}
@@ -237,7 +263,7 @@ export default function V3Header(props) {
               tertiaryCard={HEADER_LIST[3]["tertiaryCard"]}
             />
           </div>
-        )}
+        )} */}
       </div>
     </div>
   );
@@ -259,6 +285,7 @@ export default function V3Header(props) {
   function handleMbDropdownClose() {
     setmobileNavOpen(!mobileNavOpen);
     setIsDeveloper(false);
+    setIsResources(false);
     setIsCompany(false);
     setIsProduct(false);
     setCurrentTab("");
@@ -269,6 +296,7 @@ export default function V3Header(props) {
   }
   function handleBackClick() {
     setIsDeveloper(false);
+    setIsResources(false);
     setIsCompany(false);
     setIsProduct(false);
     setCurrentTab("");
@@ -285,12 +313,18 @@ export default function V3Header(props) {
     if (title === "Developer") {
       setIsDeveloper(true);
     }
+    if (title === "Resources") {
+      setIsResources(true);
+    }
     if (title === "Customers") {
       window.location.href = "/customers";
     }
     if (title === "Pricing") {
       window.location.href = "/pricing";
     }
+    if (title === "Enterprise") {
+      window.location.href = "/enterprise";
+    }
     if (title === "Product") {
       setIsProduct(true);
     }
@@ -304,10 +338,12 @@ export default function V3Header(props) {
       setCurrentTab("Product");
     } else if (isDeveloper) {
       setCurrentTab("Developer");
+    } else if (isResources) {
+      setCurrentTab("Resources");
     } else if (isCompany) {
       setCurrentTab("Company");
     }
-  }, [isProduct, isDeveloper, isCompany]);
+  }, [isProduct, isDeveloper, isCompany, isResources]);
 
   // **************************** //
 
@@ -336,7 +372,7 @@ export default function V3Header(props) {
             <div className={"h-full " + (mobileNavOpen ? " hds-hidden" : "")}>
               {!props.hideSearch && <AlgoliaSearch {...props} />}
             </div>
-            {!(isCompany || isDeveloper || isProduct) && (
+            {!(isCompany || isDeveloper || isProduct || isResources) && (
               <motion.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
@@ -435,7 +471,7 @@ export default function V3Header(props) {
           >
             <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
               <div className="pt-6 pb-4 tb:mr-[12px] mr-[30px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 ">
-                {(isCompany || isDeveloper || isProduct) && (
+                {(isCompany || isDeveloper || isProduct || isResources) && (
                   <div
                     className=" flex flex-row justify-start z-10"
                     onClick={() => handleBackClick()}
@@ -460,7 +496,7 @@ export default function V3Header(props) {
                     {currentTab}
                   </Typography>
                 </motion.div>
-                {(isCompany || isDeveloper || isProduct) && (
+                {(isCompany || isDeveloper || isProduct || isResources) && (
                   <motion.div
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
@@ -477,7 +513,7 @@ export default function V3Header(props) {
                 )}
               </div>
               <AnimatePresence mode="wait" exit={false}>
-                {isProduct || isDeveloper || isCompany ? (
+                {isProduct || isDeveloper || isCompany || isResources ? (
                   <motion.div
                     key="hey"
                     exit={{ opacity: 0, y: [0, 300] }}
@@ -487,7 +523,7 @@ export default function V3Header(props) {
                       exit: { duration: 0.3 },
                       opacity: { ease: "easeIn" },
                     }}
-                    when={isProduct || isDeveloper || isCompany}
+                    when={isProduct || isDeveloper || isCompany || isResources}
                     className="flex flex-col justify-between "
                   >
                     <div className="flex flex-col justify-between rounded-2xl h-full">
@@ -534,6 +570,48 @@ export default function V3Header(props) {
                           />
                         </div>
                       ))}
+                      <a href="https://hasura.io/enterprise">
+                        <div
+                          key={`Contact`}
+                          className="flex justify-between items-center p-4 cursor-pointer group"
+                        >
+                          <div className="flex items-center justify-center gap-2">
+                            {/* <Icon height="h-5 w-5" variant="home03" strokeColor="#3970FD" /> */}
+                            <Typography
+                              textStyle="body3c-medium"
+                              className="text-neutral-700 hover:text-neutral-1000 transition-all duration-300 ease-in-out"
+                            >
+                              Enterprise
+                            </Typography>
+                          </div>
+                          <Icon
+                            height="h-5 w-5 stroke-[1.5px] group-hover:translate-x-1 ease-in-out transition duration-300"
+                            variant="chevronright"
+                            strokeClass="stroke-neutral-500"
+                          />
+                        </div>
+                      </a>
+                      <a href="https://hasura.io/customers">
+                        <div
+                          key={`Contact`}
+                          className="flex justify-between items-center p-4 cursor-pointer group"
+                        >
+                          <div className="flex items-center justify-center gap-2">
+                            {/* <Icon height="h-5 w-5" variant="home03" strokeColor="#3970FD" /> */}
+                            <Typography
+                              textStyle="body3c-medium"
+                              className="text-neutral-700 hover:text-neutral-1000 transition-all duration-300 ease-in-out"
+                            >
+                              Customers
+                            </Typography>
+                          </div>
+                          <Icon
+                            height="h-5 w-5 stroke-[1.5px] group-hover:translate-x-1 ease-in-out transition duration-300"
+                            variant="chevronright"
+                            strokeClass="stroke-neutral-500"
+                          />
+                        </div>
+                      </a>
                       <a href="https://hasura.io/contact-us">
                         <div
                           key={`Contact`}
@@ -631,8 +709,7 @@ V3Header.defaultProps = {
             cta_leftVariantIcon: "zap",
             cta_leftVariantIconColor: "#6C737F",
             cta_text: "Get Started",
-            cta_link:
-              "https://cloud.hasura.io/signup?pg=nav&plcmt=product-dropdown&cta=get-started",
+            cta_link: "https://console.hasura.io/",
           },
         ],
       },
@@ -649,44 +726,51 @@ V3Header.defaultProps = {
             },
             {
               description: "",
-              href: "/graphql/database/mongodb",
+              href: "/graphql/database/mysql",
               icon: "database01",
-              name: "MongoDB",
+              name: "MySQL",
               strokeClass: "stroke-blue-500",
             },
             {
               description: "",
-              href: "/graphql/database/mysql",
+              href: "/graphql/database/elasticsearch",
               icon: "database01",
-              name: "MySQL",
+              name: "Elasticsearch",
               strokeClass: "stroke-blue-500",
             },
             {
               description: "",
-              href: "/graphql/database/snowflake",
+              href: "/graphql/database/sql-server",
               icon: "database01",
-              name: "Snowflake",
+              name: "SQL Server",
               strokeClass: "stroke-blue-500",
             },
             {
               description: "",
-              href: "/graphql/database/oracle",
+              href: "/graphql/database/mongodb",
               icon: "database01",
-              name: "Oracle",
+              name: "MongoDB",
               strokeClass: "stroke-blue-500",
             },
             {
               description: "",
-              href: "/graphql/database/sql-server",
+              href: "/graphql/database/snowflake",
               icon: "database01",
-              name: "SQL Server",
+              name: "Snowflake",
+              strokeClass: "stroke-blue-500",
+            },
+            {
+              description: "",
+              href: "/graphql/database/clickhouse",
+              icon: "database01",
+              name: "ClickHouse",
               strokeClass: "stroke-blue-500",
             },
             {
               description: "",
               href: "/graphql/database",
               icon: "database01",
-              name: "See all",
+              name: "More",
               strokeClass: "stroke-blue-500",
             },
           ],
@@ -694,7 +778,8 @@ V3Header.defaultProps = {
       ],
       flyoutD: {
         link: "https://hasura.io/ddn",
-        cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1716906625/Frame_12754_2_iaixzx.png`,
+        cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1721205269/Frame_2610016_1_jluh5u.png`,
+        cardImgAlt: "Hasura DDN",
       },
     },
     {
@@ -704,56 +789,16 @@ V3Header.defaultProps = {
           childArray: [
             {
               description: "",
-              href: "/docs/latest/index/",
+              href: "/docs/3.0/index/",
               icon: "file02",
               name: "Documentation",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/hub",
-              icon: "hasura",
-              name: "Hasura Hub",
-              strokeClass: "stroke-neutral-500",
-            },
-            {
-              description: "",
-              href: "/reference-app/",
+              href: "/connectors",
               icon: "route",
-              name: "Guides",
-              strokeClass: "stroke-neutral-500",
-            },
-            {
-              description: "",
-              href: "/graphql/",
-              icon: "asterisk02",
-              name: "GraphQL Hub",
-              strokeClass: "stroke-neutral-500",
-            },
-            {
-              description: "",
-              href: "https://cloud.hasura.io/public/graphiql",
-              icon: "codebrowser",
-              name: "GraphiQL",
-              strokeClass: "stroke-neutral-500",
-            },
-            {
-              description: "",
-              href: "/changelog",
-              icon: "gitpullrequest",
-              name: "Changelog",
-              strokeClass: "stroke-neutral-500",
-            },
-          ],
-          label: "BUILD",
-        },
-        {
-          childArray: [
-            {
-              description: "",
-              href: "/blog",
-              icon: "bookopen01",
-              name: "Blog",
+              name: "Connector Hub",
               strokeClass: "stroke-neutral-500",
             },
             {
@@ -763,22 +808,8 @@ V3Header.defaultProps = {
               name: "Tutorials",
               strokeClass: "stroke-neutral-500",
             },
-            {
-              description: "",
-              href: "/events",
-              icon: "calendarplus02",
-              name: "Events",
-              strokeClass: "stroke-neutral-500",
-            },
-            {
-              description: "",
-              href: "/sample-apps/",
-              icon: "box",
-              name: "Resources",
-              strokeClass: "stroke-neutral-500",
-            },
           ],
-          label: "Learn",
+          label: "BUILD",
         },
         {
           childArray: [
@@ -814,107 +845,64 @@ V3Header.defaultProps = {
           label: "Connect",
         },
       ],
-      tertiaryCard: [
-        {
-          title: "HasuraCon 2023 is here!",
-
-          title_colorClass: "text-neutral-900",
-          img_url:
-            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png",
-        },
-        {
-          title: "Top 6 Architecture Trends for API Development",
-
-          title_colorClass: "text-neutral-900",
-          img_url:
-            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png",
-        },
-        {
-          title: "Announcing Hasura integration with Snowflake",
-
-          title_colorClass: "text-neutral-900",
-          img_url:
-            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png",
-        },
-      ],
-    },
-    {
-      title: "Customers",
-      href: "",
+      flyoutD: {
+        link: "https://hasura.io/events/community-call/latest",
+        cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1723398379/cc-blog-july_4_d9mzrf.png`,
+        cardImgAlt: "Hasura Community Call",
+      },
     },
-
     {
-      title: "Company",
+      title: "Resources",
       secondaryCardArr: [
         {
           childArray: [
             {
               description: "",
-              href: "/about/",
-              icon: "pentool02",
-              name: "Our Story",
+              href: "/blog",
+              icon: "bookopen01",
+              name: "Blogs",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "/events?category=Webinar#wall-section",
+              icon: "videorecorder",
+              name: "Webinars",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/partners",
-              icon: "intersectcircle",
-              name: "Partners",
+              href: "/graphql/",
+              icon: "home04",
+              name: "GraphQL Hub",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/careers/",
-              icon: "hearthand",
-              name: "Work at Hasura",
+              href: "/events",
+              icon: "calendarplus02",
+              name: "Events",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "/",
+              icon: "file05",
+              name: "Whitepapers",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "https://supergraph.io/",
+              icon: "beziercurve02",
+              name: "Supergraph Manifesto",
               strokeClass: "stroke-neutral-500",
             },
-            // {
-            //     description: '',
-            //     href: '/press/',
-            //     icon: 'headingsquare',
-            //     name: 'Newsroom',
-            //     strokeClass: 'stroke-neutral-500'
-            // },
-            // {
-            //     description: '',
-            //     href: '/brand',
-            //     icon: 'star06',
-            //     name: 'Brand',
-            //     strokeClass: 'stroke-neutral-500'
-            // },
           ],
-          label: "Company",
-        },
-      ],
-      tertiaryCard: [
-        {
-          title: "HasuraCon 2023 is here!",
-
-          title_colorClass: "text-neutral-900",
-          img_url:
-            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png",
-        },
-        {
-          title: "Top 6 Architecture Trends for API Development",
-
-          title_colorClass: "text-neutral-900",
-          img_url:
-            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png",
-        },
-        {
-          title: "Announcing Hasura integration with Snowflake",
-
-          title_colorClass: "text-neutral-900",
-          img_url:
-            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png",
+          label: "RESOURCES",
         },
       ],
     },
-    {
-      title: "Pricing",
-      href: "",
-    },
   ],
   headerUrl: "/",
 };

package/src/styles/tailwind.css

@@ -11156,6 +11156,10 @@ select{
     min-width: 18rem;
   }
 
+  .tb\:min-w-\[200px\]{
+    min-width: 200px;
+  }
+
   .tb\:min-w-\[310px\]{
     min-width: 310px;
   }
@@ -11903,6 +11907,14 @@ select{
 }
 
 @media (min-width: 768px){
+  .md\:ml-16{
+    margin-left: 4rem;
+  }
+
+  .md\:flex-row{
+    flex-direction: row;
+  }
+
   .md\:px-6{
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -12329,6 +12341,10 @@ select{
 }
 
 @media (min-width: 1024px){
+  .lg\:ml-0{
+    margin-left: 0px;
+  }
+
   .lg\:flex{
     display: flex;
   }
@@ -12341,6 +12357,14 @@ select{
     height: auto;
   }
 
+  .lg\:max-w-\[712px\]{
+    max-width: 712px;
+  }
+
+  .lg\:max-w-\[716px\]{
+    max-width: 716px;
+  }
+
   .lg\:grid-cols-2{
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -12993,6 +13017,12 @@ select{
   }
 }
 
+@media (min-width: 1536px){
+  .\32xl\:max-w-\[756px\]{
+    max-width: 756px;
+  }
+}
+
 .\[\&\>\*\]\:mb-8>*{
   margin-bottom: 2rem;
 }