hds-web 1.0.0 → 1.0.2

package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js

@@ -0,0 +1,68 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import {HDSColor} from '../../../foundation/ColorPalette';
+import { Badges } from '../../BadgesCaption';
+import { ProfileAvatar } from '../../Avatars'
+import { Typography } from "../../../foundation/Typography";
+
+
+export default function TalkDetailCard(props) {
+  const badgeLeftIconColor = HDSColor(props.badgeLeftIconColor);
+  return (
+    <div>
+      <Badges
+        color={props.badgeColor}
+        leftIconColor={badgeLeftIconColor}
+        leftIconVariant='home03'
+        size='default'
+      >
+        {props.talk_type}
+      </Badges>
+      <Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>
+      <Typography textStyle='h3' as='h3' className='text-blue-900 pb-4'>{props.title}</Typography>
+      {
+        props.social_share && (
+          <div className='flex items-center pb-14'>
+            {
+              props.social_share.map((socialShare, i) => (
+                <div className='mx-2 first:ml-0 last:mr-0'>
+                  <img src={socialShare.img_url} alt={socialShare.img_alt} />
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+      {
+        props.speaker_card && (
+          <div>
+            <Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6'>speakers</Typography>
+            {
+              props.speaker_card.map((speaker, i) => (
+                <div className='pb-4 last:pb-0'>
+                  <ProfileAvatar
+                    name={speaker.name}
+                    size='md'
+                    designation={speaker.designation}
+                    imageUrl={speaker.speakerImgUrl}
+                    avatarVariant="circle"
+                  />
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+TalkDetailCard.defaultProps = {
+  badgeColor: 'green',
+  badgeLeftIconColor: 'stroke-neutral-0',
+  talk_type: 'Talk',
+  tag_line: 'June 20-22, 2023 | VIRTUAL | Free',
+  title: 'Deploying Hasura apps the fast way with the new Vercel integration',
+  social_share: '',
+  speaker_card: '',
+};

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>
   )
 }

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

@@ -10,37 +10,37 @@ const solutions = [
         name: 'Analytics',
         description: 'Get a better understanding of where your traffic is coming from.',
         href: '#',
-        icon: '',
+        icon: 'home03',
     },
     {
         name: 'Engagement',
         description: 'Speak directly to your customers in a more meaningful way.',
         href: '#',
-        icon: '',
+        icon: 'home03',
     },
     {
         name: 'Security',
         description: 'Your customers’ data will be safe and secure.',
         href: '#',
-        icon: ''
+        icon: 'home03'
     },
     {
         name: 'Integrations',
         description: "Connect with third-party tools that you're already using.",
         href: '#',
-        icon: '',
+        icon: 'home03',
     },
     {
         name: 'Automations',
         description: 'Build strategic funnels that will drive your customers to convert',
         href: '#',
-        icon: '',
+        icon: 'home03',
     },
     {
         name: 'Reports',
         description: 'Get detailed reports that will help you make more informed decisions ',
         href: '#',
-        icon: '',
+        icon: 'home03',
     },
 ]
 const resources = [
@@ -61,22 +61,19 @@ function classNames(...classes) {
 export default function v3Header() {
     return (
         <Popover className="relative bg-white">
-            <div className="flex items-center justify-between p-6 md:justify-start md:space-x-6">
+            <div className="flex items-center bg-neutral-50 justify-between p-6 md:justify-start md:space-x-6">
                 <div>
                     <a href="#" className="flex items-center">
-                        <Icon variant={'HasuraBlueLogo'} strokeColor={'#1EA7FD'} />
-                        <Typography className='ml-1.5' textStyle='h4'>HASURA</Typography>
+                        <Icon variant={'hasuraPrimary'} strokeColor={''} />
                     </a>
                 </div>
                 <div className="-my-2 -mr-2 md:hidden">
                     <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                         <span className="sr-only">Open menu</span>
                         <div className=' gap-6 flex'>
-                            <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} />
-                            <Icon height={'h-6'} variant={'menu05'} strokeColor={'#3970FD'} />
+                            <Icon height={'h-5 w-5'} variant={'searchsm'} strokeColor={'#3970FD'} />
+                            <Icon height={'h-5 w-5'} variant={'menu05'} strokeColor={'#3970FD'} />
                         </div>
-
-
                     </Popover.Button>
                 </div>
                 <div className="hidden md:flex md:flex-1 md:items-center md:justify-between">
@@ -112,7 +109,7 @@ export default function v3Header() {
                                     >
                                         <Popover.Panel className="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform lg:max-w-3xl">
                                             <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                                                <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
+                                                <div className="relative grid gap-6 bg-neutral-0 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
                                                     {solutions.map((item) => (
                                                         <a
                                                             key={item.name}
@@ -120,6 +117,7 @@ export default function v3Header() {
                                                             className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
                                                         >
                                                             <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
+
                                                                 {/* <item.icon className="h-6 w-6" aria-hidden="true" /> */}
                                                             </div>
                                                             <div className="ml-4">
@@ -161,69 +159,78 @@ export default function v3Header() {
                             Pricing
                         </a>
 
-                        {/* <Popover className="relative">
-              {({ open }) => (
-                <>
-                  <Popover.Button
-                    className={classNames(
-                      open ? 'text-gray-900' : 'text-gray-500',
-                      'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
-                    )}
-                  >
-                    <span>More</span>
-                    <Icon variant='home3'
-                      className={classNames(
-                        open ? 'text-gray-600' : 'text-gray-400',
-                        'ml-2 h-5 w-5 group-hover:text-gray-500'
-                      )}
-                      aria-hidden="true"
-                    />
-                    <Icon variant={'home03'} strokeColor={'#1EA7FD'} />
-                  </Popover.Button>
+                        <Popover className="relative">
+                            {({ open }) => (
+                                <>
+                                    <Popover.Button
+                                        className={classNames(
+                                            open ? 'text-gray-900' : 'text-gray-500',
+                                            'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
+                                        )}
+                                    >
+                                        <span>More</span>
+                                        <Icon variant='home03'
+                                            className={classNames(
+                                                open ? 'text-gray-600' : 'text-gray-400',
+                                                'ml-2 h-5 w-5 group-hover:text-gray-500'
+                                            )}
+                                            aria-hidden="true"
+                                        />
+                                        <Icon variant={'home03'} strokeColor={'#1EA7FD'} />
+                                    </Popover.Button>
 
-                  <Transition
-                    as={Fragment}
-                    enter="transition ease-out duration-200"
-                    enterFrom="opacity-0 translate-y-1"
-                    enterTo="opacity-100 translate-y-0"
-                    leave="transition ease-in duration-150"
-                    leaveFrom="opacity-100 translate-y-0"
-                    leaveTo="opacity-0 translate-y-1"
-                  >
-                    <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-xs -translate-x-1/2 transform px-2 sm:px-0">
-                      <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                        <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
-                          {resources.map((item) => (
-                            <a key={item.name} href={item.href} className="-m-3 block rounded-md p-3 hover:bg-gray-50">
-                              <p className="text-base font-medium text-gray-900">{item.name}</p>
-                              <p className="mt-1 text-sm text-gray-500">{item.description}</p>
-                            </a>
-                          ))}
-                        </div>
-                      </div>
-                    </Popover.Panel>
-                  </Transition>
-                </>
-              )}
-            </Popover> */}
+                                    <Transition
+                                        as={Fragment}
+                                        enter="transition ease-out duration-200"
+                                        enterFrom="opacity-0 translate-y-1"
+                                        enterTo="opacity-100 translate-y-0"
+                                        leave="transition ease-in duration-150"
+                                        leaveFrom="opacity-100 translate-y-0"
+                                        leaveTo="opacity-0 translate-y-1"
+                                    >
+                                        <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-xs -translate-x-1/2 transform px-2 sm:px-0">
+                                            <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
+                                                <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
+                                                    {resources.map((item) => (
+                                                        <a key={item.name} href={item.href} className="-m-3 block rounded-md p-3 hover:bg-gray-50">
+                                                            <p className="text-base font-medium text-gray-900">{item.name}</p>
+                                                            <p className="mt-1 text-sm text-gray-500">{item.description}</p>
+                                                        </a>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        </Popover.Panel>
+                                    </Transition>
+                                </>
+                            )}
+                        </Popover>
                     </Popover.Group>
 
 
                     <div className="flex items-center gap-6 md:ml-12">
+
                         <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} />
                         <HDSButton
-                            rightIconVariant="chevronright"
-                            rightIconColor='#3970FD'
                             label="Log In"
-                            state="default"
-                            leftIconVariant=""
                             type='tonal'
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            state='default'
+                            size='sm'
+                            rightAnimatedArrow='true'
+                            rightAnimatedArrowColor='#3970FD'
+                            animatedHoverStroke='group-hover:stroke-neutral-0'
                         />
                         <HDSButton
-                            rightIconVariant="chevronright"
                             label="Get Started"
-                            state="default"
-                            leftIconVariant=""
+                            type='primary'
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            state='default'
+                            size='sm'
+                            rightAnimatedArrow='true'
+                            rightAnimatedArrowColor='#ffffff'
+                            animatedHoverStroke='group-hover:stroke-neutral-0'
                         />
 
                     </div>
@@ -242,44 +249,46 @@ export default function v3Header() {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
             >
-                <Popover.Panel focus className="absolute inset-x-0 top-0 origin-top-right transform p-2 transition md:hidden">
-                    <div className="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
-                        <div className="px-5 pt-5 pb-6">
-                            <div className="flex items-center justify-between">
-                                <div>
-                                    <img
-                                        className="h-8 w-auto"
-                                        src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
-                                        alt="Your Company"
-                                    />
-                                </div>
+                <Popover.Panel focus className="absolute bg-neutral-0 inset-x-0 top-0 origin-top-right transform transition md:hidden">
+                    <div className=" rounded-lg bg-white shadow-lg">
+                        <div className="px-5  pt-5 pb-6">
+                            <div className="flex items-center justify-end">
                                 <div className="-mr-2">
-                                    <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
-                                        <span className="sr-only">Close menu</span>
-                                        {/* <Icon variant='home3' className="h-6 w-6" aria-hidden="true" /> */}
-                                        <Icon height={'h-6'} variant={'menu05'} strokeColor={'#3970FD'} />
+                                    <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 w-full">
+                                        <Icon height={'h-5 w-5'} variant={'xclose'} strokeColor={'#3970FD'} />
                                     </Popover.Button>
                                 </div>
                             </div>
-                            <div className="mt-6">
-                                <nav className="grid gap-6">
+                            <div className="mt-6 ">
+                                <div className='flex flex-col items-center'>
+                                    <img
+                                        className="inline-block w-full px-4 "
+                                        src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
+                                        alt=""
+                                    />
+                                </div>
+
+                                <nav className="grid gap-8 p-6">
                                     {solutions.map((item) => (
                                         <a
                                             key={item.name}
                                             href={item.href}
-                                            className="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50"
+                                            className="-m-3 bg-blue-100 flex items-center rounded-2xl px-6 py-4"
                                         >
-                                            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
-                                                <item.icon className="h-6 w-6" aria-hidden="true" />
+
+                                            <div className="flex h-10 w-10  flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
+
+                                                <Icon height='h-5 w-5' variant={'home03'} strokeColor={'#3970FD'} />
+
                                             </div>
-                                            <div className="ml-4 text-base font-medium text-gray-900">{item.name}</div>
+                                            <div className="ml-1 text-base font-medium text-gray-900">{item.name}</div>
                                         </a>
                                     ))}
                                 </nav>
                             </div>
                         </div>
                         <div className="py-6 px-5">
-                            <div className="grid grid-cols-2 gap-4">
+                            {/* <div className="grid grid-cols-2 gap-4">
                                 <a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
                                     Pricing
                                 </a>
@@ -300,20 +309,38 @@ export default function v3Header() {
                                         {item.name}
                                     </a>
                                 ))}
-                            </div>
+                            </div> */}
                             <div className="mt-6">
-                                <a
-                                    href="#"
-                                    className="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700"
-                                >
-                                    Sign up
-                                </a>
-                                <p className="mt-6 text-center text-base font-medium text-gray-500">
-                                    Existing customer?{' '}
-                                    <a href="#" className="text-indigo-600 hover:text-indigo-500">
-                                        Sign in
-                                    </a>
-                                </p>
+                                <div className='flex flex-row justify-around'>
+                                    <div className='w-full'>
+                                        <HDSButton
+                                            label="Log In"
+                                            type='primary'
+                                            leftIconVariant='none'
+                                            rightIconVariant='none'
+                                            state='default'
+                                            size='sm'
+                                            rightAnimatedArrow='true'
+                                            rightAnimatedArrowColor='#ffffff'
+                                            animatedHoverStroke='group-hover:stroke-neutral-0'
+
+                                        />
+                                    </div>
+                                    <div className='w-full'>
+                                        <HDSButton
+                                            label="Sign up"
+                                            type='primary'
+                                            leftIconVariant='none'
+                                            rightIconVariant='none'
+                                            state='default'
+                                            size='sm'
+                                            rightAnimatedArrow='true'
+                                            rightAnimatedArrowColor='#ffffff'
+                                            animatedHoverStroke='group-hover:stroke-neutral-0'
+
+                                        />
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>