hds-web 1.33.1 → 1.33.2

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

@@ -1,147 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import { Typography } from "../../foundation/Typography";
-import { HDSButton } from "../Buttons";
-import { Icon } from '../common-components/Icon';
-import { HDSColor } from "../../foundation/ColorPalette";
-import { LinkCard } from '../Cards/Link';
-
-const tabCard = (Content) => (
-  <>
-    {Content.title &&
-      <Typography
-        textStyle='h2'
-        as="h2"
-        className={` hidden tb:block ${Content.titleTextColor ? HDSColor(Content.titleTextColor) : 'text-neutral-1000'}`}>
-        {Content.title}
-      </Typography>
-    }
-
-    {Content.subTitle &&
-      <Typography
-        textStyle='sub1'
-        className={`mt-2 ${Content.subTitleTextColor ? HDSColor(Content.subTitleTextColor) : 'text-neutral-700'}`}>
-        {Content.subTitle}
-      </Typography>
-    }
-    {
-      Content.buttons && (
-        <div className='flex items-center flex-wrap flex-row gap-2 pt-6'>
-          {Content.buttons.map((btn, index) => (
-            <Fragment key={index}>
-              {btn.url && btn.text && btn.type && (
-                <a href={btn.url} key={index} className='flex '>
-                  <HDSButton
-                    label={btn.text}
-                    type={btn.type}
-                    leftIconVariant='none'
-                    rightIconVariant='none'
-                    state='default'
-                    size='md'
-                    rightAnimatedArrow={true}
-                    rightAnimatedArrowColor={btn.rightAnimatedArrowColor ?? '#3970FD'}
-                    animatedHoverStroke={btn.animatedHoverStroke ?? 'group-hover:stroke-neutral-0'}
-                    btnTextColorClass={btn.btnTextColorClass}
-                    btnTextHoverClass={btn.btnTextHoverClass}
-                    className={btn.className}
-                    // btnTextColorClass={HDSColor('text-neutral-0')}
-                    btnbgHoverClass={btn.btnBgColorClass}
-                  />
-                </a>)}
-            </Fragment>
-          ))
-          }
-        </div>
-      )
-    }
-  </>
-)
-
-export default function HeroLinkCard(props) {
-  const [showVideo, setShowVideo] = useState(false);
-  if (!props) {
-    return <div></div>; // Replace with your loading indicator or fallback UI
-  }
-  const LinkCardsFn = (props) => {
-    return (
-      props.linkCards && (
-        <div className="flex tb-m:justify-center overflow-auto no-scrollbar db:overflow-visible scrollbar-hide flex-row mt-10 tb:mt-12 db:mt-16 gap-6 tb:flex-row  ">
-          {props.linkCards.map((card, index) => (
-            <div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
-              <LinkCard
-                titleTextColor={card.titleTextColor}
-                descTextColor={card.descTextColor}
-                linkUrl={card.linkUrl}
-                iconVariant={card.iconVariant}
-                iconStrokeClass={card.iconStrokeColor}
-                iconArrowVariant={card.iconArrowVariant}
-                iconArrowStrokeClass={card.iconArrowStrokeColor}
-                title={card.title}
-                description={card.description}
-              />
-            </div>
-          ))}
-        </div>
-      )
-    );
-  };
-
-
-  return (
-    <div>
-      <div className="flex flex-col-reverse tb-l:flex tb-l:flex-row tb-l:justify-between gap-4">
-        <div className={`max-w-[435px] db:max-w-[${props.contentWd ? props.contentWd : '535px'}]`}>
-          {props &&
-            tabCard(props)}
-        </div>
-        <div className="grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear ">
-          <Typography
-            textStyle="h2"
-            as="h2"
-            className={`tb:hidden pb-6 ${props.titleTextColor ? HDSColor(props.titleTextColor) : 'text-neutral-1000'}`}
-          >
-            {props.title}
-          </Typography>
-          {showVideo ? (
-            <>
-              {props.videoUrl && (
-                <video
-                  id="hero_vid"
-                  controls={true}
-                  autoPlay
-                  playsInline
-                  width="500"
-                  height="500"
-                  className="tb:w-full w-full rounded-3xl"
-                  src={props.videoUrl}
-                ></video>
-              )}
-            </>
-          ) : (
-            <div className="relative">
-              {props.imgUrl && (
-                <img src={props.imgUrl} alt="Illustration" loading="lazy" />
-              )}
-              {props.videoUrl && (
-                <div
-                  className={`${props.currentPlayBtnClass} w-14 h-14 cursor-pointer video-play-btn rounded-full flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl`}
-                  onClick={() => setShowVideo(true)}
-                >
-                  <Icon
-                    variant="play"
-                    height="h-6 w-6"
-                    strokeColor="#ffffff"
-                    strokeClass="stroke-neutral-0"
-                  />
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="">
-        {LinkCardsFn(props)}
-      </div>
-    </div>
-  );
-}

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

@@ -1,6 +0,0 @@
-export {default as Hero1} from './h1'
-export {default as HeroSecondary} from './h2'
-export {default as HeroCapability} from './h3'
-export {default as HeroIntegration} from './heroIntegration'
-export {default as HeroEvents} from './heroEvents'
-export {default as HeroLinkCard} from './herolinkcard'

package/src/HDS/components/InputFields/defaultIF.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-export default function DefaultIF({ disabled, label, helper, size, placeholder, onChange }) {
-  const [value, setValue] = useState('');
-
-  const handleChange = (event) => {
-    const newValue = event.target.value;
-    setValue(newValue);
-    if (onChange) {
-      onChange(newValue);
-    }
-  }
-
-  return (
-    <div>
-      <label htmlFor="email" className="ml-4 block text-sm-medium  text-neutral-800">
-        {label}
-      </label>
-      <div className="mt-1">
-        <input
-          type="email"
-          name="email"
-          id="email"
-          disabled={disabled}
-          className="block w-full rounded-full border-neutral-200 shadow-none text-neutral-800 
-          
-          focus:outline-none focus:border-neutral-200 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:ring-0 
-
-          hover:shadow hover:border-neutral-300 
-
-          placeholder:text-neutral-500 placeholder:text-md-regular 
-
-          disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200"
-
-          placeholder={placeholder}
-          aria-describedby="email-description"
-          onChange={handleChange}
-        />
-      </div>
-      <p className="mt-2 ml-4 text-sm-regular text-neutral-800" id="email-description">
-        {helper}
-      </p>
-    </div>
-
-  )
-}

package/src/HDS/components/InputFields/error.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import { Icon } from "../common-components/Icon"
-export default function ErrorIF({ label, helper, size, placeholder, rightIconVariant, rightIconColor, disabled, onChange }) {
-  const [value, setValue] = useState('');
-
-  const handleChange = (event) => {
-    const newValue = event.target.value;
-    setValue(newValue);
-    if (onChange) {
-      onChange(newValue);
-    }
-  }
-
-  return (
-    <div>
-      <label htmlFor="email" className="block ml-4 text-sm-medium  text-neutral-800">
-        {label}
-      </label>
-      <div className="relative mt-1 rounded-full shadow-sm">
-        <input
-          type="email"
-          name="email"
-          id="email"
-          className="block w-full rounded-full shadow border-pink-500
-            
-            focus:border-pink-500 focus:outline-none focus:ring-pink-500 sm:text-sm
-            focus:shadow-[0_0px_0px_4px_#FFE6F0] 
-            
-            placeholder:text-neutral-500 placeholder:text-md-regular 
-            
-            
-            "
-          placeholder={placeholder}
-          defaultValue="adamwathan"
-          aria-invalid="true"
-          aria-describedby="email-error"
-          onChange={handleChange}
-        />
-        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
-          {rightIconVariant && rightIconVariant !== 'none' && (
-            <div className=' ml-1.5 h-4 w-4'>
-              <Icon variant={rightIconVariant} strokeColor={rightIconColor} />
-            </div>
-          )}
-        </div>
-      </div>
-      <p className="mt-2 ml-4 text-xs-regular text-pink-600" id="email-error">
-        {helper}
-      </p>
-    </div>
-  )
-}

package/src/HDS/components/InputFields/iconLeading.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import { Icon } from "../common-components/Icon"
-export default function IconLeadingIF({ label, helper, size, placeholder, leftIconVariant, leftIconColor, disabled, onChange }) {
-  const [value, setValue] = useState('');
-
-  const handleChange = (event) => {
-    const newValue = event.target.value;
-    setValue(newValue);
-    if (onChange) {
-      onChange(newValue);
-    }
-  }
-  return (
-    <div>
-      <label htmlFor="email" className="block text-sm-medium  text-neutral-800">
-        {label}
-      </label>
-      <div className="relative mt-1 rounded-md shadow-sm">
-        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-          {leftIconVariant && leftIconVariant !== 'none' && (
-            <div className='-ml-0.5 mr-2 h-4 w-4'>
-              <Icon variant={leftIconVariant} strokeColor={leftIconColor} />
-            </div>
-          )}
-
-        </div>
-        <input
-          type="email"
-          name="email"
-          id="email"
-          disabled={disabled}
-          className="block w-full rounded-md border-gray-300 pl-10 
-                      focus:border-indigo-500 focus:ring-indigo-500 
-                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200
-                      sm:text-sm"
-          placeholder={placeholder}
-        />
-      </div>
-      <p className="mt-2 text-sm-regular text-neutral-800" id="email-description">
-        {helper}
-      </p>
-    </div>
-  )
-}

package/src/HDS/components/InputFields/iconTrail.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import { Icon } from "../common-components/Icon"
-export default function IconTrailIF({ label, helper, size, placeholder, rightIconVariant, rightIconColor, disabled, onChange }) {
-  const [value, setValue] = useState('');
-
-  const handleChange = (event) => {
-    const newValue = event.target.value;
-    setValue(newValue);
-    if (onChange) {
-      onChange(newValue);
-    }
-  }
-
-  return (
-    <div>
-      <label htmlFor="account-number" className="block text-sm-medium ml-4 text-neutral-800">
-        {label}
-      </label>
-      <div className="relative mt-1 rounded-full shadow-sm">
-        <input
-          type="text"
-          name="account-number"
-          id="account-number"
-          disabled={disabled}
-          className="block w-full rounded-full border-gray-300 pr-10 
-                      focus:border-indigo-500 focus:ring-indigo-500 
-                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200
-                      sm:text-sm"
-          placeholder="000-00-0000"
-          onChange={handleChange}
-        />
-        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
-          {rightIconVariant && rightIconVariant !== 'none' && (
-            <div className=' ml-1.5 h-4 w-4'>
-              <Icon variant={rightIconVariant} strokeColor={rightIconColor} />
-            </div>
-          )}
-        </div>
-      </div>
-      <p className="mt-2 ml-4 text-sm-regular text-neutral-800" id="email-description">
-        {helper}
-      </p>
-    </div>
-  )
-}

package/src/HDS/components/InputFields/index.js

@@ -1,10 +0,0 @@
-export {default as DefaultIF} from './defaultIF';
-export {default as ErrorIF} from './error';
-export {default as IconLeadingIF} from './iconLeading';
-export {default as IconTrailIF} from './iconTrail';
-export {default as LeadingDropIF} from './leadingDrop';
-export {default as LeadingTextIF} from './leadingText';
-export {default as TextAreaIF} from './textArea';
-export {default as TrailingButtonIF} from './trailingButton';
-export {default as TrailingDropdownIF} from './trailingDropdown';
-export {default as InviteIF} from './inviteIF';

package/src/HDS/components/InputFields/inviteIF.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import { HDSButton } from '../Buttons';
-export default function InviteIF({ disabled, label, helper, size, placeholder, onChange }) {
-    const [value, setValue] = useState('');
-
-    const handleChange = (event) => {
-        const newValue = event.target.value;
-        setValue(newValue);
-        if (onChange) {
-            onChange(newValue);
-        }
-    }
-
-    return (
-        <div>
-            <div className="flex bg-neutral-0 border border-neutral-300 rounded-full shadow-sm">
-                <div className="relative flex flex-grow items-stretch ">
-                    <input
-                        type="email"
-                        name="email"
-                        id="email"
-                        disabled={disabled}
-                        className="block w-full rounded-l-full border-0 text-hds-m-body3c tb:text-hds-t-body3c db:text-hds-d-body3c py-3 pl-5 placeholder:text-hds-m-body3c placeholder:tb:text-hds-t-body3c placeholder:db:text-hds-d-body3c placeholder:text-neutral-500 placeholder:bg-neutral-0
-                        focus:ring-0 active:bg-neutral-0 focus:bg-neutral-0 visited:bg-neutral-0 
-                        disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-neutral-200"
-                        placeholder={placeholder}
-                    />
-                </div>
-                <div className=' py-[3.5px] pr-[3px] z-20'>
-                    <HDSButton
-                        type='tonal'
-                        btnBgColorClass='bg-blue-100'
-                        btnbgHoverClass='hover:bg-blue-500'
-                        rightAnimatedArrowColor='#3970FD'
-                        label={label}
-                    />
-                </div>
-            </div>
-        </div>
-
-    )
-}

package/src/HDS/components/InputFields/leadingDrop.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-export default function LeadingDropIF({ disabled, label, helper, size, placeholder, dropOptions, onChange }) {
-  const [value, setValue] = useState('');
-
-  const handleChange = (event) => {
-    const newValue = event.target.value;
-    setValue(newValue);
-    if (onChange) {
-      onChange(newValue);
-    }
-  }
-  return (
-    <div>
-      <label htmlFor="phone-number" className="block text-sm-medium  text-neutral-800">
-        {label}
-      </label>
-      <div className="relative mt-1">
-        <div className="absolute inset-y-0 left-0 flex items-center">
-          <label htmlFor="country" className="sr-only">
-            Country
-          </label>
-          <select
-            id="country"
-            name="country"
-            autoComplete="country"
-            disabled={disabled}
-            className="h-full rounded-l-md border-neutral-300 border-r-0 bg-transparent py-0 pl-3 pr-7 text-gray-500 
-                      focus:border-none focus:ring-0 sm:text-sm-regular focus:outline-none focus:border-neutral-200 focus:shadow-[0_0px_0px_4px_#DFE8FF]
-                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200"
-          >
-
-            {dropOptions.map((item) => (
-              <option>{item}</option>
-            ))}
-          </select>
-        </div>
-        <input
-          type="text"
-          name="phone-number"
-          id="phone-number"
-          disabled={disabled}
-          className="
-                      block w-full rounded-lg border-neutral-200 shadow-none text-neutral-800 py-1.5 pl-16 sm:text-sm-regular
-                      focus:outline-none focus:border-neutral-200 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:ring-0 
-                      hover:shadow hover:border-neutral-300 
-                      placeholder:text-neutral-500 placeholder:text-md-regular 
-                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200
-                    "
-
-          placeholder={`   ` + placeholder}
-        >
-
-        </input>
-
-      </div>
-      <p className="mt-2 text-sm-regular text-neutral-800" id="email-description">
-        {helper}
-      </p>
-    </div>
-  )
-}

package/src/HDS/components/InputFields/leadingText.js

@@ -1,8 +0,0 @@
-export default function LeadingText () {
-
-    return(
-      <div>
-        leading text
-      </div>
-    )
-  }

package/src/HDS/components/InputFields/textArea.js

@@ -1,26 +0,0 @@
-import React from 'react';
-export default function TextArea ({label, placeholder, disabled }) {
-
-    return (
-      <div>
-        <label htmlFor="comment" className="block text-sm-medium leading-6 text-neutral-800">
-          {label}
-        </label>
-        <div className="mt-2">
-          <textarea
-            rows={4}
-            name="comment"
-            id="comment"
-            disabled={disabled}
-            className="block w-full rounded-md border-0 text-neutral-800 shadow ring-1 ring-inset ring-neutral-200 placeholder:text-gray-400 
-                      focus:ring-2 focus:ring-inset focus:ring-indigo-600 
-                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200
-                      sm:py-1.5 sm:text-md-regular sm:leading-6"
-            defaultValue={''}
-            placeholder={placeholder}
-          />
-        </div>
-      </div>
-    )
-  }
-  

package/src/HDS/components/InputFields/trailingButton.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import  {Icon}  from '../common-components/Icon';
-export default function TrailingButton ({label, disabled, helper, size, placeholder, leftIconVariant, leftIconColor, rightIconVariant, rightIconColor, buttonName}) {
-
-    return (
-      <div>
-        <label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
-          {label}
-        </label>
-        <div className="mt-2 flex rounded-md shadow-sm">
-          <div className="relative flex flex-grow items-stretch focus-within:z-10">
-            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-            {leftIconVariant && leftIconVariant !== 'none' && (
-          <div className='-ml-0.5 mr-2 h-4 w-4'>
-            <Icon variant={leftIconVariant} strokeColor={leftIconColor} />
-          </div>
-        )}
-            </div>
-            <input
-              type="email"
-              name="email"
-              id="email"
-              disabled={disabled}
-              className="block w-full rounded-none rounded-l-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 
-                        focus:ring-2 focus:ring-inset focus:ring-indigo-600 
-                        disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200
-                        sm:text-sm sm:leading-6"
-              placeholder={placeholder}
-            />
-          </div>
-          <button
-            type="button"
-            disabled={disabled}
-            className="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200"
-          >
-             {rightIconVariant && rightIconVariant !== 'none' && (
-          <div className=' ml-1.5 h-4 w-4'>
-            <Icon variant={rightIconVariant} strokeColor={rightIconColor} />
-          </div>
-        )}
-            {buttonName}
-          </button>
-        </div>
-      </div>
-    )
-  }
-  

package/src/HDS/components/InputFields/trailingDropdown.js

@@ -1,43 +0,0 @@
-import React from 'react';
-export default function TrailingDropdown ({disabled, label, helper, size, placeholder, dropOptions, currencySymbol}) {
-    return (
-      <div>
-        <label htmlFor="price" className="block text-sm font-medium leading-6 text-gray-900">
-          {label}
-        </label>
-        <div className="relative mt-2 rounded-md shadow-sm">
-          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-            <span className="text-gray-500 sm:text-sm">{currencySymbol}</span>
-          </div>
-          <input
-            type="text"
-            name="price"
-            id="price"
-            disabled={disabled}
-            className="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 
-                      focus:ring-2 focus:ring-inset focus:ring-indigo-600 
-                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200
-                      sm:text-sm sm:leading-6"
-            placeholder={placeholder}
-          />
-          <div className="absolute inset-y-0 right-0 flex items-center">
-            <label htmlFor="currency" className="sr-only">
-              Currency
-            </label>
-            <select
-              id="currency"
-              name="currency"
-              disabled={disabled}
-              className="h-full rounded-md border border-blue-200 py-0 pl-2 pr-7 text-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm"
-            >
-              
-            {dropOptions.map((item) => (
-              <option>{item}</option>
-            ))}
-            </select>
-          </div>
-        </div>
-      </div>
-    )
-  }
-  

package/src/HDS/components/Pre-footers/linkImagePF.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import { LinkCard } from '../Cards/Link'
-import { Typography } from '../../foundation/Typography';
-import { HDSButton } from '../Buttons'
-
-export default function LinkImagePF(props) {
-    const {
-        sectionPreFooterData
-    } = props;
-    return (
-        <>
-            <div className="w-full">
-                {/* <div className="rounded-3xl bg-neutral-0 shadow db:p-20 tb:p-10 px-5 py-10">
-                    <div className="pt-10 tb:pt-16 db:pt-24">
-                        <Typography textStyle="h4" as="h4" className="text-neutral-1000 pb-8">{sectionPreFooterData.title}</Typography>
-                        <div className="grid grid-cols-1 tb-l:grid-cols-2 gap-10 tb:gap-20 db:gap-30">
-                            <div className="max-w-[380px]">
-                                {
-                                    (sectionPreFooterData.link_card.length > 0) && sectionPreFooterData.link_card.map((card, index) => (
-                                        <div key={index} className="pb-4 last:pb-0 border border-neutral-150 rounded-2xl transition ease-in duration-150 hover:shadow-xl hover:border-transparent mb-4 last:mb-0">
-                                            <LinkCard
-                                                titleTextColor={card.titleTextColor}
-                                                descTextColor={card.descTextColor}
-                                                linkUrl={card.linkUrl}
-                                                cardBgColor={card.cardBgColor}
-                                                cardHoverBg={card.cardHoverBg}
-                                                iconVariant={card.iconVariant}
-                                                iconStrokeClass={card.iconStrokeColor}
-                                                iconArrowVariant={card.iconArrowVariant}
-                                                iconArrowStrokeClass={card.iconArrowStrokeColor}
-                                                title={card.title}
-                                                description={card.description}
-                                            />
-                                        </div>
-                                    ))
-                                }
-
-                            </div>
-                            <div className="text-center self-start">
-                                <img
-                                    loading="lazy"
-                                    src={sectionPreFooterData.get_tickets.img_url}
-                                    width={214}
-                                    height={284}
-                                    alt={sectionPreFooterData.get_tickets.title}
-                                    className="inline-block"
-                                />
-                                <Typography textStyle="h3" as="h3" className="text-neutral-1000 py-6">{sectionPreFooterData.get_tickets.title}</Typography>
-                                <a href={sectionPreFooterData.get_tickets.button.cta_link}>
-                                    <HDSButton
-                                        label={sectionPreFooterData.get_tickets.button.cta_text}
-                                        type='secondary'
-                                        leftIconVariant='none'
-                                        rightIconVariant='none'
-                                        state='default'
-                                        size='md'
-                                        rightAnimatedArrow={true}
-                                        rightAnimatedArrowColor='#3970FD'
-                                    />
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div> */}
-            </div>
-        </>
-    )
-}
-