hds-web 1.5.5 → 1.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Hero/h3.js

@@ -47,7 +47,6 @@ const tabCard = (Content) => (
 )
 
 export default function HeroCapability(props) {
-    console.log(props.heroData);
 
     const LinkCardsFn = (heroData) => {
         return (
@@ -160,3 +159,246 @@ export default function HeroCapability(props) {
         </div>
     )
 }
+
+HeroCapability.defaultProps={
+ heroData :  {
+        tabContent: {
+          'Performance': {
+            heroBgColor:'bg-green-500',
+            title: 'Blazing-fast APIs at Global Scale ',
+            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.',
+            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
+            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
+            subTitleTextColor: 'text-neutral-0',
+            titleTextColor: 'text-neutral-0',
+            bgColorTab: 'bg-neutral-1000',
+            pillColor:'bg-pink-500',
+            button: [
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                
+                cta_link: '',
+                cta_type:''
+              },
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                cta_link: '',
+                cta_type:''
+              }
+            ],
+            linkCards: [
+              {
+                titleTextColor: 'text-neutral-0',
+                descTextColor: 'text-neutral-0',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+            ],
+    
+    
+    
+    
+          },
+          'Company': {
+            heroBgColor:'bg-blue-500',
+            title: 'Leverage Hasura’s Authorization Engine',
+            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.ss',
+            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
+            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
+            imgUrl:'',
+            subTitleTextColor: 'text-neutral-0',
+            titleTextColor: 'text-neutral-0',
+            bgColorTab: 'bg-neutral-1000',
+            pillColor:'bg-amber-500',
+            button: [
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                
+                cta_link: '',
+                cta_type:''
+              },
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                cta_link: '',
+                cta_type:''
+              }
+            ],
+            linkCards: [
+              {
+                titleTextColor: 'text-neutral-0',
+                descTextColor: 'text-neutral-0',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+            ],
+    
+    
+    
+    
+          },
+          'Authorization': {
+            heroBgColor:'bg-cyan-500',
+            title: 'Blazing-fast APIs at Global Scale ',
+            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.',
+            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
+            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
+            imgUrl:'',
+            subTitleTextColor: 'text-neutral-0',
+            titleTextColor: 'text-neutral-0',
+            bgColorTab: 'bg-pink-500',
+            pillColor:'bg-neutral-500',
+            button: [
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                
+                cta_link: '',
+                cta_type:''
+              },
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                cta_link: '',
+                cta_type:''
+              }
+            ],
+            linkCards: [
+              {
+                titleTextColor: 'text-neutral-0',
+                descTextColor: 'text-neutral-0',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+            ],
+    
+    
+    
+    
+          },
+        },
+      
+        navTabs: [
+          {
+            current: true,
+            name: 'Performance'
+          },
+          {
+            current: 'false',
+            name: 'Company'
+          },
+          {
+            current: 'false',
+            name: 'Authorization'
+          },
+          {
+            current: 'false',
+            name: 'Observability'
+          },
+          {
+            current: 'false',
+            name: 'API Security'
+          }
+        ]
+      }
+    
+}

package/src/HDS/components/Tabs/tab.js

@@ -40,9 +40,6 @@ export default function Tab(props) {
   function tabClass(name) {
     let classActive = ' text-neutral-0 transition-all rounded-full ' + pillColorClass;
     let clasnInActive = ' text-neutral-500 flex-nowrap rounded-full';
-
-    console.log(classActive, clasnInActive, 'heeelo');
-
     if (activeTab.name === name) {
       return classActive;
     }

package/src/index.css

@@ -405,4 +405,33 @@
 
 .token.operator {
     background: none !important;
-}
+}
+
+
+.border-80 {
+  position: relative;
+}
+
+.border-80::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 8%;
+  width: 80%;
+  border-bottom: 1px solid #E5E7EB;
+}
+
+.border-90 {
+  position: relative;
+}
+
+.border-90::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-bottom: 1px solid rgb(255, 255, 255);
+}
+
+

package/src/styles/tailwind.css

@@ -1145,6 +1145,10 @@ select {
   margin-bottom: 2.5rem;
 }
 
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1205,6 +1209,10 @@ select {
   margin-left: 2rem;
 }
 
+.ml-\[30px\] {
+  margin-left: 30px;
+}
+
 .ml-\[9\.55rem\] {
   margin-left: 9.55rem;
 }
@@ -1273,14 +1281,6 @@ select {
   margin-top: 2.25rem;
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
-}
-
-.ml-\[30px\] {
-  margin-left: 30px;
-}
-
 .mt-\[70px\] {
   margin-top: 70px;
 }
@@ -1991,6 +1991,12 @@ select {
   margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -2015,12 +2021,6 @@ select {
   margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
 }
 
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .divide-x > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-x-reverse: 0;
   border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -5230,6 +5230,11 @@ select {
   padding-right: 0.375rem;
 }
 
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -5350,11 +5355,6 @@ select {
   padding-bottom: 1.625rem;
 }
 
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -5387,6 +5387,10 @@ select {
   padding-bottom: 2rem;
 }
 
+.pb-\[54px\] {
+  padding-bottom: 54px;
+}
+
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -5423,6 +5427,10 @@ select {
   padding-left: 1.75rem;
 }
 
+.pl-\[30px\] {
+  padding-left: 30px;
+}
+
 .pr-10 {
   padding-right: 2.5rem;
 }
@@ -5471,6 +5479,10 @@ select {
   padding-top: 2.5rem;
 }
 
+.pt-12 {
+  padding-top: 3rem;
+}
+
 .pt-16 {
   padding-top: 4rem;
 }
@@ -5487,18 +5499,6 @@ select {
   padding-top: 1.5rem;
 }
 
-.pb-\[54px\] {
-  padding-bottom: 54px;
-}
-
-.pl-\[30px\] {
-  padding-left: 30px;
-}
-
-.pt-12 {
-  padding-top: 3rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -6500,18 +6500,10 @@ select {
   transition-duration: 500ms;
 }
 
-.duration-1000 {
-  transition-duration: 1000ms;
-}
-
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
@@ -7298,6 +7290,32 @@ select {
   background: none !important;
 }
 
+.border-80 {
+  position: relative;
+}
+
+.border-80::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 8%;
+  width: 80%;
+  border-bottom: 1px solid #E5E7EB;
+}
+
+.border-90 {
+  position: relative;
+}
+
+.border-90::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-bottom: 1px solid rgb(255, 255, 255);
+}
+
 .placeholder\:text-neutral-500::-webkit-input-placeholder {
   --tw-text-opacity: 1;
   color: rgb(108 115 127 / var(--tw-text-opacity));
@@ -9447,4 +9465,6 @@ select {
 .\[\&\>ul\]\:ps-4>ul {
   -webkit-padding-start: 1rem;
           padding-inline-start: 1rem;
-}
+}
+
+