hds-web 1.6.8 → 1.7.0

package/src/HDS/foundation/ColorPalette/color.js

@@ -574,7 +574,199 @@ const HDSColors = {
     "stroke-red-500": "stroke-red-500",
     "stroke-red-600": "stroke-red-600",
     "stroke-red-700": "stroke-red-700",
-    "stroke-red-800": "stroke-red-800"
+    "stroke-red-800": "stroke-red-800",
+    "hover:bg-storybook-default-heading": "hover:bg-storybook-default-heading",
+    "hover:bg-base-0": "hover:bg-base-0",
+    "hover:bg-base-1000": "hover:bg-base-1000",
+    "hover:bg-neutral-0": "hover:bg-neutral-0",
+    "hover:bg-neutral-50": "hover:bg-neutral-50",
+    "hover:bg-neutral-100": "hover:bg-neutral-100",
+    "hover:bg-neutral-150": "hover:bg-neutral-150",
+    "hover:bg-neutral-200": "hover:bg-neutral-200",
+    "hover:bg-neutral-300": "hover:bg-neutral-300",
+    "hover:bg-neutral-400": "hover:bg-neutral-400",
+    "hover:bg-neutral-500": "hover:bg-neutral-500",
+    "hover:bg-neutral-600": "hover:bg-neutral-600",
+    "hover:bg-neutral-700": "hover:bg-neutral-700",
+    "hover:bg-neutral-800": "hover:bg-neutral-800",
+    "hover:bg-neutral-850": "hover:bg-neutral-850",
+    "hover:bg-neutral-900": "hover:bg-neutral-900",
+    "hover:bg-neutral-950": "hover:bg-neutral-950",
+    "hover:bg-neutral-1000": "hover:bg-neutral-1000",
+    "hover:bg-blue-100": "hover:bg-blue-100",
+    "hover:bg-blue-200": "hover:bg-blue-200",
+    "hover:bg-blue-300": "hover:bg-blue-300",
+    "hover:bg-blue-400": "hover:bg-blue-400",
+    "hover:bg-blue-500": "hover:bg-blue-500",
+    "hover:bg-blue-600": "hover:bg-blue-600",
+    "hover:bg-blue-700": "hover:bg-blue-700",
+    "hover:bg-blue-800": "hover:bg-blue-800",
+    "hover:bg-blue-900": "hover:bg-blue-900",
+    "hover:bg-purple-100": "hover:bg-purple-100",
+    "hover:bg-purple-200": "hover:bg-purple-200",
+    "hover:bg-purple-300": "hover:bg-purple-300",
+    "hover:bg-purple-400": "hover:bg-purple-400",
+    "hover:bg-purple-500": "hover:bg-purple-500",
+    "hover:bg-purple-600": "hover:bg-purple-600",
+    "hover:bg-purple-700": "hover:bg-purple-700",
+    "hover:bg-purple-800": "hover:bg-purple-800",
+    "hover:bg-purple-900": "hover:bg-purple-900",
+    "hover:bg-cyan-100": "hover:bg-cyan-100",
+    "hover:bg-cyan-200": "hover:bg-cyan-200",
+    "hover:bg-cyan-300": "hover:bg-cyan-300",
+    "hover:bg-cyan-400": "hover:bg-cyan-400",
+    "hover:bg-cyan-500": "hover:bg-cyan-500",
+    "hover:bg-cyan-600": "hover:bg-cyan-600",
+    "hover:bg-cyan-700": "hover:bg-cyan-700",
+    "hover:bg-cyan-800": "hover:bg-cyan-800",
+    "hover:bg-cyan-900": "hover:bg-cyan-900",
+    "hover:bg-green-100": "hover:bg-green-100",
+    "hover:bg-green-200": "hover:bg-green-200",
+    "hover:bg-green-300": "hover:bg-green-300",
+    "hover:bg-green-400": "hover:bg-green-400",
+    "hover:bg-green-500": "hover:bg-green-500",
+    "hover:bg-green-600": "hover:bg-green-600",
+    "hover:bg-green-700": "hover:bg-green-700",
+    "hover:bg-green-800": "hover:bg-green-800",
+    "hover:bg-green-900": "hover:bg-green-900",
+    "hover:bg-pink-100": "hover:bg-pink-100",
+    "hover:bg-pink-200": "hover:bg-pink-200",
+    "hover:bg-pink-300": "hover:bg-pink-300",
+    "hover:bg-pink-400": "hover:bg-pink-400",
+    "hover:bg-pink-500": "hover:bg-pink-500",
+    "hover:bg-pink-600": "hover:bg-pink-600",
+    "hover:bg-pink-700": "hover:bg-pink-700",
+    "hover:bg-pink-800": "hover:bg-pink-800",
+    "hover:bg-pink-900": "hover:bg-pink-900",
+    "hover:bg-amber-100": "hover:bg-amber-100",
+    "hover:bg-amber-200": "hover:bg-amber-200",
+    "hover:bg-amber-300": "hover:bg-amber-300",
+    "hover:bg-amber-400": "hover:bg-amber-400",
+    "hover:bg-amber-500": "hover:bg-amber-500",
+    "hover:bg-amber-600": "hover:bg-amber-600",
+    "hover:bg-amber-700": "hover:bg-amber-700",
+    "hover:bg-amber-800": "hover:bg-amber-800",
+    "hover:bg-amber-900": "hover:bg-amber-900",
+    "hover:bg-yellow-100": "hover:bg-yellow-100",
+    "hover:bg-yellow-200": "hover:bg-yellow-200",
+    "hover:bg-yellow-300": "hover:bg-yellow-300",
+    "hover:bg-yellow-400": "hover:bg-yellow-400",
+    "hover:bg-yellow-500": "hover:bg-yellow-500",
+    "hover:bg-yellow-600": "hover:bg-yellow-600",
+    "hover:bg-yellow-700": "hover:bg-yellow-700",
+    "hover:bg-yellow-800": "hover:bg-yellow-800",
+    "hover:bg-orange-100": "hover:bg-orange-100",
+    "hover:bg-orange-200": "hover:bg-orange-200",
+    "hover:bg-orange-300": "hover:bg-orange-300",
+    "hover:bg-orange-400": "hover:bg-orange-400",
+    "hover:bg-orange-500": "hover:bg-orange-500",
+    "hover:bg-orange-600": "hover:bg-orange-600",
+    "hover:bg-orange-700": "hover:bg-orange-700",
+    "hover:bg-orange-800": "hover:bg-orange-800",
+    "hover:bg-red-100": "hover:bg-red-100",
+    "hover:bg-red-200": "hover:bg-red-200",
+    "hover:bg-red-300": "hover:bg-red-300",
+    "hover:bg-red-400": "hover:bg-red-400",
+    "hover:bg-red-500": "hover:bg-red-500",
+    "hover:bg-red-600": "hover:bg-red-600",
+    "hover:bg-red-700": "hover:bg-red-700",
+    "hover:bg-red-800": "hover:bg-red-800",
+    "border-storybook-default-heading": "border-storybook-default-heading",
+"border-base-0": "border-base-0",
+"border-base-1000": "border-base-1000",
+"border-neutral-0": "border-neutral-0",
+"border-neutral-50": "border-neutral-50",
+"border-neutral-100": "border-neutral-100",
+"border-neutral-150": "border-neutral-150",
+"border-neutral-200": "border-neutral-200",
+"border-neutral-300": "border-neutral-300",
+"border-neutral-400": "border-neutral-400",
+"border-neutral-500": "border-neutral-500",
+"border-neutral-600": "border-neutral-600",
+"border-neutral-700": "border-neutral-700",
+"border-neutral-800": "border-neutral-800",
+"border-neutral-850": "border-neutral-850",
+"border-neutral-900": "border-neutral-900",
+"border-neutral-950": "border-neutral-950",
+"border-neutral-1000": "border-neutral-1000",
+"border-blue-100": "border-blue-100",
+"border-blue-200": "border-blue-200",
+"border-blue-300": "border-blue-300",
+"border-blue-400": "border-blue-400",
+"border-blue-500": "border-blue-500",
+"border-blue-600": "border-blue-600",
+"border-blue-700": "border-blue-700",
+"border-blue-800": "border-blue-800",
+"border-blue-900": "border-blue-900",
+"border-purple-100": "border-purple-100",
+"border-purple-200": "border-purple-200",
+"border-purple-300": "border-purple-300",
+"border-purple-400": "border-purple-400",
+"border-purple-500": "border-purple-500",
+"border-purple-600": "border-purple-600",
+"border-purple-700": "border-purple-700",
+"border-purple-800": "border-purple-800",
+"border-purple-900": "border-purple-900",
+"border-cyan-100": "border-cyan-100",
+"border-cyan-200": "border-cyan-200",
+"border-cyan-300": "border-cyan-300",
+"border-cyan-400": "border-cyan-400",
+"border-cyan-500": "border-cyan-500",
+"border-cyan-600": "border-cyan-600",
+"border-cyan-700": "border-cyan-700",
+"border-cyan-800": "border-cyan-800",
+"border-cyan-900": "border-cyan-900",
+"border-green-100": "border-green-100",
+"border-green-200": "border-green-200",
+"border-green-300": "border-green-300",
+"border-green-400": "border-green-400",
+"border-green-500": "border-green-500",
+"border-green-600": "border-green-600",
+"border-green-700": "border-green-700",
+"border-green-800": "border-green-800",
+"border-green-900": "border-green-900",
+"border-pink-100": "border-pink-100",
+"border-pink-200": "border-pink-200",
+"border-pink-300": "border-pink-300",
+"border-pink-400": "border-pink-400",
+"border-pink-500": "border-pink-500",
+"border-pink-600": "border-pink-600",
+"border-pink-700": "border-pink-700",
+"border-pink-800": "border-pink-800",
+"border-pink-900": "border-pink-900",
+"border-amber-100": "border-amber-100",
+"border-amber-200": "border-amber-200",
+"border-amber-300": "border-amber-300",
+"border-amber-400": "border-amber-400",
+"border-amber-500": "border-amber-500",
+"border-amber-600": "border-amber-600",
+"border-amber-700": "border-amber-700",
+"border-amber-800": "border-amber-800",
+"border-amber-900": "border-amber-900",
+"border-yellow-100": "border-yellow-100",
+"border-yellow-200": "border-yellow-200",
+"border-yellow-300": "border-yellow-300",
+"border-yellow-400": "border-yellow-400",
+"border-yellow-500": "border-yellow-500",
+"border-yellow-600": "border-yellow-600",
+"border-yellow-700": "border-yellow-700",
+"border-yellow-800": "border-yellow-800",
+"border-orange-100": "border-orange-100",
+"border-orange-200": "border-orange-200",
+"border-orange-300": "border-orange-300",
+"border-orange-400": "border-orange-400",
+"border-orange-500": "border-orange-500",
+"border-orange-600": "border-orange-600",
+"border-orange-700": "border-orange-700",
+"border-orange-800": "border-orange-800",
+"border-red-100": "border-red-100",
+"border-red-200": "border-red-200",
+"border-red-300": "border-red-300",
+"border-red-400": "border-red-400",
+"border-red-500": "border-red-500",
+"border-red-600": "border-red-600",
+"border-red-700": "border-red-700",
+"border-red-800": "border-red-800",
 };
 
 export default function HDSColor(color = '') {

package/src/HDS/foundation/Typography/Typography.js

@@ -16,6 +16,7 @@ export default function Typography(props) {
         'h4': 'text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
         'h5': 'text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
         'h6': 'text-hds-m-h6 tb:text-hds-t-h6 db:text-hds-d-h6',
+        'h7': 'text-hds-m-h7 tb:text-hds-t-h7 db:text-hds-d-h7',
         'sub1': 'text-hds-m-sub1 tb:text-hds-t-sub1 db:text-hds-d-sub1',
         'sub2': 'text-hds-m-sub2 tb:text-hds-t-sub2 db:text-hds-d-sub2',
         'body1': 'text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1',
@@ -42,7 +43,7 @@ export default function Typography(props) {
         'body3c-medium': 'text-hds-m-body3c-medium tb:text-hds-t-body3c-medium db:text-hds-d-body3c-medium',
         'body3c-semi-bold': 'text-hds-m-body3c-semi-bold tb:text-hds-t-body3c-semi-bold db:text-hds-d-body3c-semi-bold',
         'body3c-bold': 'text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
-        'quote': 'text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
+        'quote': 'font-petrona italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
         'code1': 'text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
         'code2': 'text-hds-m-code2 tb:text-hds-t-code2 db:text-hds-d-code2',
       }

package/src/HDS/helpers/Grid/grid.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+const GridComponent = ({ cards, gridSize }) => {
+  const numCards = cards.length;
+  const cardsLeftInLastRow = numCards % gridSize;
+  const renderCards = () => {
+    let cardClass = '';
+    if(cards.length === 4 ){
+      cardClass = 'grid grid-cols-2'
+    }
+    else cardClass = 'gridAutoClass';
+    return cards.map((card, index) => (
+      <div
+      className={cardClass}
+        key={index}
+      >
+        {/* Render card content */}
+        {card}
+      </div>
+    ));
+  };
+
+  return (
+    <div className='flex flex-wrap'>
+      {renderCards()}
+    </div>
+  );
+};
+
+export default GridComponent;
+
+
+
+
+// 2x2, 3x3, 4x4
+// odd even 
+
+//2x2 -odd grid grid-cols-2
+    //case 1: NOC = 3 
+    //                 .... .... 
+    //                 ......... colr-span-2  
+
+
+//3x3 -odd 
+    //case 1: noc:5
+    ///              ... ... ...
+            //       ..... ..... col-span-1.5 col-span-1.5
+    //case 2: noc:4
+    ///              ... ... ...
+            //       ........... col-span-3
+
+
+
+//4x4 
+
+// case1: noc 5:   
+//                  .. .. .. ..
+//                  ........... col-span-4
+// case2: noc 6:   
+//                  .. .. .. ..
+//                  ..... ..... col-span-2 col span-2
+// case1: noc 7:   
+//                  .. .. .. ..
+//                  ... ... ... col-span-4/3 col-span-4/3 col-span-4/3

package/src/HDS/helpers/Grid/index.js

@@ -0,0 +1 @@
+export {default as GridComponent} from './grid';

package/src/HDS/helpers/Media/index.js

@@ -0,0 +1 @@
+export {default as MediaBox} from './mediabox';

package/src/HDS/helpers/Media/mediabox.js

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Icon } from '../../components/common-components/Icon';
+
+export default function MediaViewer ({ img_url, video_url, video_poster, width }){
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+
+  const handleVideoClick = () => {
+    setIsVideoPlaying(true);
+  };
+
+  const handleVideoClose = () => {
+    setIsVideoPlaying(false);
+  };
+
+  return (
+    <div>
+      {img_url && (
+        <div className='flex justify-center'>
+        <img src={img_url} alt="Image" className='rounded-2xl' onClick={handleVideoClick} />
+        </div>
+      )}
+
+      {video_url && !img_url && video_poster && (
+        <div>
+          {!isVideoPlaying ? (
+            <div className='relative flex justify-center'>
+              <div className='flex items-center'>
+                
+               <a
+                  className=" left-[45%] z-10 cursor-pointer absolute w-12 h-12  flex justify-center items-center rounded-full border border-neutral-0"
+                  onClick={() => {
+                    setIsVideoPlaying(true);
+                  }}
+                >
+                  
+                  <Icon variant='play' height='h-6 w-6' strokeClass='stroke-neutral-0' />
+                </a>
+                </div>
+                <div>
+              <img
+                src={video_poster}
+                alt="Video Poster"
+                onClick={handleVideoClick}
+                className="cursor-pointer rounded-2xl"
+              />
+              </div>
+            </div>
+          ) : (
+            <div className="fixed inset-0 flex justify-center items-center z-50">
+              <div className="relative w-screen h-screen flex items-start p-10">
+                <a
+                  className=" z-10 cursor-pointer left-14 top-2 relative w-12 h-12 bg-neutral-0 flex justify-center items-center rounded-full"
+                  onClick={handleVideoClose}
+                >
+                  <Icon variant='xclose' height='h-6 w-6' strokeClass='stroke-neutral-800' />
+                </a>
+                <video
+                  controls={false}
+                  autoPlay
+                  muted
+                  className="object-contain max-w-full max-h-full"
+                >
+                  <source src={video_url} type="video/mp4" />
+                </video>
+
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+

package/src/HDS/helpers/index.js

@@ -1 +1,2 @@
-export * from './Translations';
+export * from './Translations';
+export * from './Media';

package/src/HDS/modules/TextCard/textCard.js

@@ -20,7 +20,7 @@ export default function TextCard(props) {
           }
           {
             props.descriptions && props.descriptions.map((desc, i) => (
-              <Typography key={i} textStyle="body1" className="pb-6 pr-8">{desc.description}</Typography>
+              <Typography key={i} textStyle="body1" className="pb-6">{desc.description}</Typography>
             ))
           }
           {
@@ -57,7 +57,7 @@ export default function TextCard(props) {
                     const imgBgColor = HDSColor(list.tab_img_bg_class)
                     return (
                       <div className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={()=>setImgActive(list.title)}>
-                        <div className={'m-2 p-0 tb:p-6 rounded-lg transition ease-in duration-200 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-150" : "")} key={i}>
+                        <div className={'m-2 p-0 tb:p-6 rounded-lg transition-all ease-in duration-75 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-100" : "")} key={i}>
                           <div className='flex items-center pb-4'>
                             <Icon
                               height={`w-6 h-6 mr-2 stroke-[1.5px]` }
@@ -106,7 +106,7 @@ export default function TextCard(props) {
                           {
                             list.tab_img_url && (
                               <div className={`${imgBgColor} tb-l:hidden p-12 rounded-2xl mt-8`}>
-                                <img src={list.tab_img_url} alt={list.title} loading="lazy"/>
+                                <img src={list.tab_img_url} alt={list.title} />
                               </div>
                             )
                           }
@@ -143,31 +143,7 @@ export default function TextCard(props) {
                   return (
                     <Fragment key={i}>
                       {
-                        imgActive === img.title && (
-                          <div className={`${imgBgColor} hidden h-full p-12 tb-l:flex items-center rounded-2xl tb-l:rounded-s-none`}>
-                            {
-                              img.tab_video_url ? (
-                                <video
-                                  loading="lazy"
-                                  controls={false}
-                                  autoPlay
-                                  loop
-                                  muted
-                                  poster={img.tab_video_poster}
-                                  className=""
-                                >
-                                  <source
-                                    src={img.tab_video_url}
-                                    type="video/mp4"
-                                  />
-                                </video>
-                              ) : (
-                                <img src={img.tab_img_url} alt={img.title} loading="lazy"/>
-                              )
-                            }
-
-                          </div>
-                        )
+                        imgActive === img.title && img.tab_img_url && (<div className={`${imgBgColor} hidden h-full p-12 tb-l:flex items-center  rounded-2xl tb-l:rounded-s-none`}><img src={img.tab_img_url} alt={img.title} /></div>)
                       }
                     </Fragment>
                   )
@@ -176,48 +152,9 @@ export default function TextCard(props) {
             </>
           ) : (
               <div>
-                {
-                  props.iframe_url || props.video_url ? (
-                    <>
-                      {
-                        props.iframe_url ? (
-                          <div className="relative pb-[56.2%]">
-                            <iframe
-                              loading="lazy"
-                              title={props.title}
-                              src={props.iframe_url}
-                              frameBorder="0"
-                              allowFullScreen
-                              className="absolute w-full h-full"
-                            ></iframe>
-                          </div>
-                        ) : (
-                          <video
-                            loading="lazy"
-                            controls={false}
-                            autoPlay
-                            loop
-                            muted
-                            poster={props.video_poster}
-                            className=""
-                          >
-                            <source
-                              src={props.video_url}
-                              type="video/mp4"
-                            />
-                          </video>
-                        )
-                      }
-                    </>
-                  ) : (
-                    <>
-                      {props.img_url && (
-                        <img src={props.img_url} alt={props.title} loading="lazy" />
-                      )}
-                    </>
-                  )
-                }
-
+              {props.img_url && (
+                <img src={props.img_url} alt={props.title} />
+              )}
               </div>
           )
         }
@@ -225,4 +162,4 @@ export default function TextCard(props) {
 
     </>
   )
-}
+}

package/src/HDS/modules/index.js

@@ -1 +1,2 @@
-export * from './TextCard';
+export * from './TextCard';
+export * from './navCard';

package/src/HDS/modules/navCard/index.js

@@ -0,0 +1 @@
+export {default as NavCard} from './navCard'

package/src/HDS/modules/navCard/navCard.js

@@ -0,0 +1,82 @@
+import  React, { useState, useEffect } from 'react';
+import { MediaBox } from '../../helpers/Media';
+import { Typography } from '../../foundation/Typography';
+import { HDSButton } from '../../components/Buttons';
+import { HDSColor } from '../../foundation/ColorPalette';
+import { Tab } from '../../components/Tabs';
+import PropTypes from 'prop-types';
+
+const tabCard = (tabContent) => (
+    <>
+        <div className='px-3'>
+            {tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
+
+            {tabContent.sub_title && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.sub_title}</Typography>}
+        </div>
+        {tabContent.btnLabel &&
+            <div className='flex pl-3 pt-6 pb-8'>
+                <HDSButton
+                    label={tabContent.btnLabel}
+                    type='secondaryLink'
+                    leftIconVariant='none'
+                    rightIconVariant='none'
+                    state='default'
+                    size='sm'
+                    rightAnimatedArrow={true}
+                    rightAnimatedArrowColor='#1E56E3'
+                    animatedHoverStroke='group-hover:stroke-blue-600'
+                    className='flex'
+                    btnTextColorClass='text-blue-600'
+                />
+            </div>
+            }
+        <div className='mt-8'>
+            <MediaBox
+                img_url={tabContent.img_url}
+                video_url={tabContent.video_url}
+                video_poster={tabContent.video_poster}
+            />
+        </div>
+    </>
+)
+
+export default function NavCard(props) {
+    const [activeTab, setActiveTab] = useState('');
+
+    useEffect(() => {
+        if (props.tabContent) {
+            const tabNames = Object.keys(props.tabContent);
+            setActiveTab(tabNames[0]);
+        }
+    }, [props.tabContent]);
+
+    const handleTabClick = (tab) => {
+        if (tab.name) {
+            setActiveTab(tab.name);
+        }
+        else return;
+        // Perform any other actions based on the clicked tab
+    }
+
+    return (
+            <div>
+                {props.navTabs &&
+
+                    <div className='max-w-[44.44rem] p-16 bg-neutral-0 shadow rounded-2xl'>
+
+                        <div className='flex justify-center pb-8'>
+                            <Tab
+                                onTabClick={handleTabClick}
+                                tabs={props.navTabs}
+                            />
+                        </div>
+                        <div className=''>
+                            {props.tabContent &&
+                                props.tabContent[activeTab] &&
+                                tabCard(props.tabContent[activeTab])}
+                        </div>
+
+                    </div>}
+            </div>
+    )
+}

package/src/index.css

@@ -3,6 +3,15 @@
 @tailwind utilities;
 /* Typography classes */
 
+.gridAutoClass {
+  flex: 1 0 30%;
+  margin-top: 40px;
+  margin-right: 32px;
+  background: blue;
+  justify-content: center;
+  display: flex;
+}
+
 @keyframes pill-move-left {
   0% {
     left: 0;
@@ -396,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);
+}
+
+