hds-web 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -25,7 +25,8 @@
     "watch:storybook": "start-storybook -p 6006 -s public",
     "watch:tailwind": "npx tailwindcss -i ./src/index.css -o ./src/styles/tailwind.css --watch",
     "build-storybook": "build-storybook -s public",
-    "build-lib": "rollup -c"
+    "build-lib": "rollup -c",
+    "chromatic": "npx chromatic --project-token=chpt_522a228102c089e"
   },
   "eslintConfig": {
     "extends": [
@@ -80,6 +81,7 @@
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.2.2",
     "babel-plugin-named-exports-order": "^0.0.2",
+    "chromatic": "^6.17.4",
     "concurrently": "^7.6.0",
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",
@@ -97,5 +99,7 @@
   "peerDependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
-  }
+  },
+  "readme": "ERROR: No README data found!",
+  "_id": "hds-web@1.0.0"
 }

package/src/HDS/assets/icons/HasuraPrimary.svg

@@ -0,0 +1,10 @@
+<svg width="105" height="33" viewBox="0 0 105 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.2318 11.3966C31.1444 8.52639 30.5954 2.80038 28.8272 0.686435C28.5954 0.409138 28.1641 0.448752 27.9715 0.754859L25.7933 4.20847C25.255 4.89991 24.2853 5.05837 23.5544 4.5758C21.1908 3.01285 18.3673 2.10533 15.3334 2.10533C12.2996 2.10533 9.47604 3.01285 7.11241 4.5758C6.38514 5.05837 5.41545 4.89631 4.87356 4.20847L2.69531 0.754859C2.5028 0.448752 2.07143 0.412739 1.8397 0.686435C0.0714324 2.80398 -0.477586 8.52999 0.435068 11.3966C0.738097 12.3509 0.820094 13.3593 0.641841 14.3388C0.463588 15.3112 0.285336 16.4852 0.285336 17.3027C0.285336 25.6972 7.02329 32.5 15.3299 32.5C23.64 32.5 30.3744 25.6936 30.3744 17.3027C30.3744 16.4852 30.1961 15.3112 30.0179 14.3388C29.8432 13.3593 29.9288 12.3509 30.2318 11.3966ZM15.3299 29.1076C8.90564 29.1076 3.68283 23.8282 3.68283 17.3387C3.68283 17.1262 3.68996 16.9173 3.70066 16.7085C3.93239 12.2861 6.59192 8.50838 10.353 6.70775C11.8611 5.98029 13.5509 5.57695 15.3334 5.57695C17.116 5.57695 18.8022 5.98029 20.3138 6.71135C24.0749 8.51198 26.7345 12.2933 26.9662 16.7121C26.9769 16.9209 26.984 17.1334 26.984 17.3423C26.9805 23.8282 21.7541 29.1076 15.3299 29.1076Z" fill="#3970FD"/>
+<path d="M20.3769 21.8691L17.4001 16.6545L14.8475 12.3077C14.7869 12.2033 14.6764 12.1421 14.5588 12.1421H12.1203C11.9991 12.1421 11.8885 12.2069 11.8279 12.315C11.7673 12.4194 11.7709 12.549 11.8315 12.6535L14.2736 16.7985L10.9973 21.8475C10.9295 21.9519 10.926 22.0852 10.983 22.1932C11.0401 22.3013 11.1541 22.3697 11.2789 22.3697H13.7352C13.8493 22.3697 13.9563 22.3121 14.0169 22.2148L15.7887 19.4202L17.3787 22.204C17.4393 22.3085 17.5498 22.3733 17.6675 22.3733H20.0882C20.2094 22.3733 20.3199 22.3085 20.3769 22.204C20.4375 22.1032 20.4375 21.9735 20.3769 21.8691Z" fill="#3970FD"/>
+<path d="M43.2929 8.5H46.4041V25.5632H43.2929V18.2927H39.7782V25.5667H36.667V8.5H39.7782V15.9098H43.2929V8.5Z" fill="black"/>
+<path d="M56.0018 25.5666L55.3517 22.0225H51.619L51.0225 25.5666H47.9114L51.344 8.50342H55.5339L59.1308 25.5666H56.0018ZM52.0263 19.6681H54.9195L53.4336 11.5009L52.0263 19.6681Z" fill="black"/>
+<path d="M66.0606 22.4548V18.8035C66.0606 18.5141 66.007 18.3212 65.8999 18.2211C65.7927 18.1211 65.5927 18.0711 65.3034 18.0711H63.1138C61.2563 18.0711 60.3276 17.1708 60.3276 15.3665V11.1794C60.3276 9.39302 61.2992 8.50342 63.2459 8.50342H66.2213C68.168 8.50342 69.1396 9.39659 69.1396 11.1794V13.5588H66.0035V11.6117C66.0035 11.3223 65.9499 11.1293 65.8427 11.0293C65.7356 10.9293 65.5355 10.8793 65.2462 10.8793H64.2175C63.9103 10.8793 63.7031 10.9293 63.596 11.0293C63.4888 11.1293 63.4352 11.3223 63.4352 11.6117V15.045C63.4352 15.3344 63.4888 15.5273 63.596 15.6274C63.7031 15.7274 63.9103 15.7774 64.2175 15.7774H66.3535C68.2466 15.7774 69.1932 16.6599 69.1932 18.4283V22.8906C69.1932 24.677 68.2109 25.5666 66.2463 25.5666H63.3245C61.3599 25.5666 60.3776 24.6734 60.3776 22.8906V20.5362H63.4852V22.4548C63.4852 22.7441 63.5388 22.9371 63.646 23.0371C63.7531 23.1371 63.9603 23.1872 64.2675 23.1872H65.2962C65.5855 23.1872 65.782 23.1371 65.8927 23.0371C66.0035 22.9371 66.0606 22.7441 66.0606 22.4548Z" fill="black"/>
+<path d="M77.4944 8.5H80.602V22.8872C80.602 24.6735 79.6197 25.5632 77.6551 25.5632H74.3582C72.3937 25.5632 71.4114 24.67 71.4114 22.8872V8.5H74.5225V22.4549C74.5225 22.7443 74.5761 22.9372 74.6833 23.0373C74.7904 23.1373 74.9905 23.1873 75.2798 23.1873H76.7121C77.0193 23.1873 77.2265 23.1373 77.3336 23.0373C77.4408 22.9372 77.4944 22.7443 77.4944 22.4549V8.5V8.5Z" fill="black"/>
+<path d="M86.2817 18.9144V25.5667H83.1741V8.5H89.4464C91.411 8.5 92.3932 9.39317 92.3932 11.1759V16.2349C92.3932 17.714 91.736 18.5785 90.418 18.8322L93.2577 25.5667H89.9036L87.3068 18.9144H86.2817ZM86.2817 10.8794V16.6136H88.5248C88.8142 16.6136 89.0106 16.5636 89.1213 16.4635C89.2285 16.3635 89.2821 16.1706 89.2821 15.8812V11.6118C89.2821 11.3224 89.2285 11.1295 89.1213 11.0295C89.0142 10.9294 88.8142 10.8794 88.5248 10.8794H86.2817Z" fill="black"/>
+<path d="M101.801 25.5666L101.151 22.0225H97.4187L96.8222 25.5666H93.7146L97.1472 8.50342H101.337L104.934 25.5666H101.801ZM97.8295 19.6681H100.723L99.2368 11.5009L97.8295 19.6681Z" fill="black"/>
+</svg>

package/src/HDS/components/BadgesCaption/badges.js

@@ -52,7 +52,7 @@ export default function Badge({
     >
        {leftIconVariant && leftIconVariant !== 'none' && (
           <div className='mr-1'>
-            <Icon height={'h-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
+            <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
           </div>
         )}
         {children}

package/src/HDS/components/Buttons/button.js

@@ -20,7 +20,7 @@ const Buttonclasses = {
   'primary': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full justify-center justify-center bg-blue-500 text-neutral-0',
-      'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-300 hover:duration-300',
+      'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
       'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:text-neutral-0 focus:outline-none active:bg-blue-600 active:text-neutral-0 active:outline-none',
      
     },
@@ -29,7 +29,7 @@ const Buttonclasses = {
   'tonal': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full  justify-center bg-blue-100 text-blue-600',
-      'hover': 'hover:bg-blue-200 hover:text-blue-600 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-300 hover:duration-300',
+      'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
       'focus': 'focus:bg-blue-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
@@ -72,7 +72,7 @@ const Buttonclasses = {
     'default': {
       'base': 'w-fit justify-center justify-center bg-blue-200 rounded-full p-1.5',
 
-      'hover': 'hover:bg-blue-600 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-300 hover:duration-300',
+      'hover': 'hover:bg-blue-600 hover:shadow-md hover:shadow hover:transition-all hover:ease-in-out hover:duration-300',
 
       'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:text-neutral-0 focus:outline-none',
     },
@@ -129,7 +129,7 @@ export default function Button(props) {
 
 
   const buttonClasses = [
-    'inline-flex items-center',
+    'inline-flex items-center whitespace-pre',
     'rounded-full',
     Buttonclasses['buttonSizes'][`${sizeType}`][`${size}`],
     'group',
@@ -146,14 +146,14 @@ export default function Button(props) {
         {...rest}
       >
         {leftIconVariant && leftIconVariant !== 'none' && type!='iconOnly' && (
-          <div className={`-ml-0.5 mr-2  ${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} `}>
+          <div className={`-ml-0.5 mr-2 ${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} `}>
             <Icon variant={leftIconVariant} strokeColor={leftIconColor} />
           </div>
         )}
         
          {leftIconVariant && leftIconVariant !== 'none' && type=='iconOnly' && (
           <div className={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} `}>
-            <Icon variant={leftIconVariant} height='group-active:stroke-neutral-0 group-hover:transition-all group-hover:ease-out group-hover:delay-300 group-hover:duration-300 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0' strokeColor={leftIconColor} />
+            <Icon variant={leftIconVariant} height='group-active:stroke-neutral-0 group-hover:transition-all group-hover:ease-in-out group-hover:duration-100 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0' strokeColor={leftIconColor} />
           </div>
         )}
         {label}
@@ -162,7 +162,7 @@ export default function Button(props) {
           <div className={ `group-hover:transition-all ${animatedHoverStroke}`}>
             <Icon className='z-10 stroke-2 group-hover:translate-x-[0.15rem] group-hover:transition-all group-hover:duration-300' height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} ${animatedHoverStroke}`} variant={'chevronright'} strokeColor={rightAnimatedArrowColor} />
 
-            <Icon className='invisible stroke-2 group-hover:transition-all group-hover:delay-300 group-hover:visible ' height={`${ANIMATED_ARR_CLASSES['icon2'][`${size}`]} ${animatedHoverStroke}`} variant='minus01' strokeColor={rightAnimatedArrowColor} />
+            <Icon className='invisible stroke-2 group-hover:transition-all group-hover:delay-100 group-hover:visible ' height={`${ANIMATED_ARR_CLASSES['icon2'][`${size}`]} ${animatedHoverStroke}`} variant='minus01' strokeColor={rightAnimatedArrowColor} />
 
           </div>
         )}

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { Badges } from '../../BadgesCaption';
+import { Typography } from '../../../foundation/Typography'
+import { ProfileAvatar } from '../../Avatars'
+import { Time } from "../../../helpers/Time";
+import { HDSButton } from '../../Buttons'
+import { Icon } from "../../common-components";
+
+export default function FlyoutB(props) {
+    const {
+        iconVariant = 'home03',
+        strokeColor = '#C6D6FF',
+        primaryBtnLabel = 'label1',
+        mainDescription = 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
+        secondaryBtn = [
+            { cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Button 1' },
+            { cta_leftVariantIcon: 'home04', cta_leftVariantIconColor: '#6C737F', cta_text: 'Button 2' }
+        ]
+    } = props;
+
+    return (
+        <div>
+            <div className="">
+                <div className="bg-neutral-0 shadow-sm rounded-2xl">
+                    <div className="p-6">
+                    <Icon height='h-10 w-10' variant={iconVariant} strokeColor={strokeColor} />
+                    <div>
+                    <HDSButton
+                        label={primaryBtnLabel}
+                        type='secondaryLink'
+                        leftIconVariant='none'
+                        rightIconVariant='none'
+                        state='default'
+                        size='sm'
+                        rightAnimatedArrow={true}
+                        rightAnimatedArrowColor='#6C737F'
+                    />
+                    </div>
+                    <Typography className='mt-2 text-neutral-800' textStyle='body3'>{mainDescription}</Typography>
+                    </div>
+                    
+                    <div className="grid grid-cols-2 justify-around border-t divide-x divide-neutral-150 border-neutral-150">
+                        {secondaryBtn.map((btn, index) => (
+                            <a key={index} href='#' className=" p-6 flex justify-center ">
+                                <HDSButton
+                                    leftIconVariant={btn.cta_leftVariantIcon}
+                                    leftIconColor={btn.cta_leftVariantIconColor}
+                                    rightIconVariant='none'
+                                    type='secondaryLink'
+                                    label={btn.cta_text}
+                                    state='default'
+                                    size='lg'
+                                    rightAnimatedArrow={true}
+                                    rightAnimatedArrowColor='#6C737F'
+                                />
+                            </a>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -1 +1,2 @@
-export {default as Flyout} from './flyout';
+export {default as Flyout} from './flyout';
+export {default as FlyoutB} from './flyoutB';

package/src/HDS/components/Cards/Misc/iconCard.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Icon } from "../../common-components/Icon";
+import {HDSColor} from '../../../foundation/ColorPalette'
+import { Typography } from '../../../foundation/Typography'
+
+
+export default function TalkCard(props) {
+    const iconBG = HDSColor(props.iconBg);
+    return (
+        <div className='bg-neutral-0 rounded-3xl shadow p-6'>
+            <div className={`${iconBG} w-12 h-12 flex items-center justify-center rounded-full mb-6`}>
+                <Icon height={'w-6 h-6 stroke-neutral-800 stroke-[1.5px]'} variant={props.iconVariant} strokeColor={props.iconStroke} />
+            </div>
+            <div className="flex-1">
+                <Typography textStyle="h5" as="h5" className="mb-1 text-blue-600">{props.title}</Typography>
+                <Typography textStyle="body1" className="text-neutral-1000">{props.description}</Typography>
+            </div>
+        </div>
+
+    )
+
+}

package/src/HDS/components/Cards/Misc/index.js

@@ -1 +1,2 @@
-export {default as TalkCard} from './talkCard';
+export {default as TalkCard} from './talkCard';
+export {default as IconCard} from './iconCard';

package/src/HDS/components/Cards/Misc/talkCard.js

@@ -2,38 +2,59 @@ import React from "react";
 import { Badges } from '../../BadgesCaption';
 import { Typography } from '../../../foundation/Typography'
 import { ProfileAvatar } from '../../Avatars'
+import { Time } from "../../../helpers/Time";
+import { HDSButton } from '../../Buttons'
 
 export default function TalkCard(props) {
     return (
 
-        <div className=" flex-col p-6 border border-neutral-200 rounded-3xl shadow bg-neutral-0">
-            <Badges
-                size={props.badges.size}
-                color={props.badges.color}
-                leftIconVariant={props.badges.leftIconVariant}
-                leftIconColor={props.badges.leftIconColor}
-                children={props.badges.label}
-            />
-            <Typography className='my-2 text-neutral-800' textStyle='h5'>{props.title}</Typography>
-            <Typography className='my-2 text-neutral-600' textStyle='body1'>{props.para}</Typography>
-
-            
-            <div className="grid grid-cols-2 my-6 gap-4">
-            {props.speakerSet.map((value,i) => (
-   
-                  <ProfileAvatar
-                name={value.name}
-                size='md'
-                designation={value.designation}
-                imageUrl={value.imageUrl}
-                 />
-              
-            ))}
+        <div className=" ">
+
+            <div className="grid rounded-3xl shadow bg-neutral-0  grid-cols-2  border border-neutral-200 min-w-[882px] ">
+                <div className="px-8 py-6 border-r border-r-neutral-150" >
+
+
+                    <Badges
+                        size={props.badges.size}
+                        color={props.badges.color}
+                        leftIconVariant={props.badges.leftIconVariant}
+                        leftIconColor={props.badges.leftIconColor}
+                        children={props.badges.label}
+                    />
+
+                    <Typography className='my-2 text-neutral-800' textStyle='h5'>{props.title}</Typography>
+                    <Typography className='my-2 text-neutral-600' textStyle='body1'>{props.para}</Typography>
+                </div>
+
+                <div className="flex flex-col pt-[2.875rem] justify-between">
+                    <div className="pl-6 flex gap-6 mb-9 flex-col ">
+                        {props.speakerSet.map((value, i) => (
+                            <div key={i} className="">
+
+                                <ProfileAvatar
+                                    name={value.name}
+                                    size='md'
+                                    designation={value.designation}
+                                    imageUrl={value.imageUrl}
+                                />
+                            </div>
+
+                        ))}
+                    </div>
+                    <div className=" w-full border-t border-t-neutral-150 p-6 flex flex-row justify-between items-center">
+                        <Typography textStyle='h6' className='text-blue-800'>{props.eventTime}</Typography>
+                        <HDSButton
+                            leftIconVariant='calendarplus02'
+                            leftIconColor="#1E56E3"
+                            rightIconVariant='none'
+                            state='default'
+                            size='sm'
+                            type="iconOnly"
+
+                        />
+                    </div>
+                </div>
             </div>
-
-
-
-          
         </div>
 
     )

package/src/HDS/components/Carousels/carouselCard.js

@@ -8,6 +8,8 @@ export default function Carouseltest(props) {
     const [visibleCardsContainerWidth, setvisibleCardsContainerWidth] = React.useState(0);
     const [cardWidth, setcardWidth] = React.useState(0);
     const [totalContainerWidth, setTotalContainerWidth] = React.useState(0);
+    const [totalClick, setTotalClick] = React.useState(1);
+    const [totalCards, setTotalCards] = React.useState(0);
     React.useEffect(() => {
         const visibleCardsContainerWidth = refs[0]?.current?.parentNode?.offsetWidth;
         setvisibleCardsContainerWidth(visibleCardsContainerWidth);
@@ -19,6 +21,15 @@ export default function Carouseltest(props) {
             return acc + rect.width + parseFloat(getComputedStyle(ref.current).marginLeft) + parseFloat(getComputedStyle(ref.current).marginRight);
           }, 0);
           setTotalContainerWidth(totalCardsWidth);
+          const noOfcardsinaview = (visibleCardsContainerWidth/cardWidth);
+          console.log('noOfcardsinaview',noOfcardsinaview)
+          const cardLength = props.length;
+          setTotalCards(cardLength);
+          console.log('cardLength',cardLength)
+          setTotalClick(2*(cardLength/noOfcardsinaview));
+          
+
+
       }, []);
       
 
@@ -56,9 +67,9 @@ export default function Carouseltest(props) {
         });
     };
 
-    const totalCards = props.cards.length;
     const nextCard = () => {
-        if (currentCard >= totalCards - 1) {
+        console.log('currentCard', currentCard,'totalClick', totalClick );
+        if (currentCard >= totalCards-1 || currentCard > totalClick+1) {
             scrollToCard(0);
         } else {
             scrollToCard(currentCard + 1);
@@ -76,24 +87,24 @@ export default function Carouseltest(props) {
 
         let x = visibleCardsContainerWidth;
         let noOfcardsinaview = visibleCardsContainerWidth/cardWidth;
+  
         let y = 1;
-        console.log('noOfcardsinaview*currentCard',noOfcardsinaview*(currentCard+1));
+     
         // if((noOfcardsinaview*(currentCard+1))<=totalCards){
         // let y = (totalContainerWidth/(noOfcardsinaview*visibleCardsContainerWidth))*(noOfcardsinaview*(currentCard+1));
           
         // }
         console.log(totalContainerWidth, visibleCardsContainerWidth, currentCard )
-        let slider1 = (384/(totalCards*cardWidth)) * (328)* (currentCard+3);
+        let slider1 = (384/(totalCards*cardWidth)) * (328)* (currentCard+noOfcardsinaview);
         if(slider1>384){
             slider1 = 384;
         }
-       
-      
-        console.log('x',x, 'slider1', slider1 );
-
-
-
-        let sliderWidth = slider1+ 'px';
+        let roundOff = Math.floor(totalClick);
+        let slider2 = 384/(roundOff+Math.floor(noOfcardsinaview)+1);
+        let sliderWidth = 1;
+        sliderWidth = (slider2 * (currentCard+1))+ 'px';
+        
+        
         return (
             <div className=' '>
                 <div className='bg-pink-500 w-96 rounded-md content-center h-1'>
@@ -115,11 +126,11 @@ export default function Carouseltest(props) {
             <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
                 {isLeft ?
 
-                    <Icon height={'h-6'} variant={'chevronleft'} strokeColor='#1F2A37' />
+                    <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#1F2A37' />
 
                     :
 
-                    <Icon height={'h-6'} variant={'chevronright'} strokeColor='#1F2A37' />
+                    <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#1F2A37' />
 
                 }
             </span>

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

@@ -2,7 +2,8 @@ import React from 'react';
 import { useState } from 'react';
 import { Dialog } from '@headlessui/react';
 import { Icon } from '../common-components/Icon';
-import { Typography } from '../../foundation/Typography'
+import { Typography } from '../../foundation/Typography';
+import {HDSButton} from '../Buttons'
 
 export default function CustomHeader(props) {
   const {
@@ -15,8 +16,7 @@ export default function CustomHeader(props) {
     <header className="bg-white">
       <nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
         <a href="#" className="-m-1.5 p-1.5 flex">
-          <Icon variant={'HasuraBlueLogo'} strokeColor={'#1EA7FD'} />
-          <Typography className='ml-1.5' textStyle='h4'>{label}</Typography>
+          <Icon variant={'hasuraPrimary'} strokeColor={''} />
         </a>
         <div className="flex lg:hidden">
           <button
@@ -26,7 +26,7 @@ export default function CustomHeader(props) {
           >
             <span className="sr-only">Open main menu</span>
 
-            <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} />
+            <Icon height={'h-6'} variant={'menu05'} strokeColor={'#3970FD'} />
           </button>
         </div>
         <div className="hidden lg:flex lg:gap-x-12">
@@ -40,11 +40,12 @@ export default function CustomHeader(props) {
           </a>
         </div>
       </nav>
-      <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
-        <div className="fixed inset-0 z-10" />
-        <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
-          <div className="flex items-center justify-between">
-            {/* <a href="#" className="-m-1.5 p-1.5">
+      <div className='transition-all '>
+        <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+          <div className="fixed inset-0 z-10" />
+          <Dialog.Panel className="fixed border rounded-l-3xl inset-y-0 bg-neutral-0 max-w-min min-w-fit right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:ring-1 sm:ring-gray-900/10">
+            <div className="flex items-center justify-end">
+              {/* <a href="#" className="-m-1.5 p-1.5">
               <span className="sr-only">Your Company</span>
               <img
                 className="h-8 w-auto"
@@ -52,41 +53,49 @@ export default function CustomHeader(props) {
                 alt=""
               />
             </a> */}
-            <button
-              type="button"
-              className="-m-2.5 rounded-md p-2.5 text-gray-700"
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              <span className="sr-only">Close menu</span>
+              <button
+                type="button"
+                className="-m-2.5 rounded-md p-2.5 text-gray-700"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                <span className="sr-only">Close menu</span>
 
-              <Icon height={'h-6'} variant={'home03'} strokeColor={'#3970FD'} />
-            </button>
-          </div>
-          <div className="mt-6 flow-root">
-            <div className="-my-6 divide-y divide-gray-500/10">
-              <div className="space-y-2 py-6">
-                {childArray.map((item) => (
-                  <a
-                    key={item.name}
-                    href={item.href}
-                    className="-mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-                  >
-                    {item.name}
-                  </a>
-                ))}
-              </div>
-              <div className="py-6">
-                <a
-                  href="#"
-                  className="-mx-3 block rounded-lg py-2.5 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-                >
-                  Log in
-                </a>
+                <Icon height={'h-6'} variant={'xclose'} strokeColor={'#3970FD'} />
+              </button>
+            </div>
+            <div className="mt-6 flow-root">
+              <Typography textStyle='h6' className='text-neutral-400'>MENU</Typography>
+              <div className=" flex-col divide-y divide-blue-600/10">
+                <div className="space-y-2 py-6 pr-48">
+                  {childArray.map((item) => (
+                    <a
+                      key={item.name}
+                      href={item.href}
+                      className="-mx-3 rounded-lg flex gap-5 py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                    >
+                      <Icon height={'h-6'} variant={'home03'} strokeColor={'#6C737F'} />
+                      {item.name}
+                    </a>
+                  ))}
+                </div>
+                <div className="py-6">
+                  <HDSButton
+                    leftIconVariant = 'none'
+                    rightIconVariant = 'none'
+                    label = 'Log In'
+                    state = 'default'
+                    size = 'sm'
+                    rightAnimatedArrow = 'true'
+                    rightAnimatedArrowColor = '#ffffff'
+                    animatedHoverStroke = 'group-hover:stroke-neutral-0'
+                   />  
+                </div>
               </div>
             </div>
-          </div>
-        </Dialog.Panel>
-      </Dialog>
+          </Dialog.Panel>
+        </Dialog>
+      </div>
+
     </header>
   )
 }