hds-web 0.1.10 → 1.0.1

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>

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

@@ -0,0 +1,189 @@
+import { useState, useEffect } from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSButton } from "../Buttons";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { Icon } from "../common-components";
+
+export default function Hero({ heroData, logo, scrollArrow, fontSize }) {
+  const [valumeMuteIcon, setValumeMuteIcon] = useState("volumex");
+  const videoMute = () => {
+    if (heroData.video_url) {
+      const videoEle = document.getElementById("hero_vid");
+      if (videoEle?.muted) {
+        videoEle.muted = false;
+        setValumeMuteIcon("volumemax")
+      } else {
+        videoEle.muted = true;
+        setValumeMuteIcon("volumex")
+      }
+    }
+  }
+
+  const videoGradientBg = HDSColor(heroData.video_gradient_bg);
+  return (
+    <div className="db:pt-32 mb-10 db:mb-5 tb:mb-16 tb-l:mb-0">
+      <div className="tb:px-4">
+        <div className={"max-w-7xl mx-auto rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
+          <div className="w-full">
+            <div className={"db:flex db:w-full tb-l:flex block" + ((heroData.video_url) ? " tb:block" : " tb:flex")}>
+              <div className={"db:px-28 db:py-20 db:pr-0 tb-l:self-center tb-l:min-w-[400px] mx-auto db:ml-0 db:max-w-[625px] db:min-w-[625px] p-5 pt-10 z-[1] tb:p-16 tb-l:py-12" + ((heroData.video_url) ? " tb:max-w-[530px]" : " tb:ml-0 tb:max-w-[290px] tb:min-w-[310px] tb:pr-0")}
+              >
+                {
+                  heroData.tag_line && (
+                    <div
+
+                    >
+                      <Typography textStyle="h6" as="h6" className={"pb-6 uppercase text-center db:text-left font-normal tb-l:text-left " + ((heroData.tag_line_color) ? heroData.tag_line_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}
+                      >
+                        {heroData.tag_line}
+                      </Typography>
+                    </div>
+                  )
+                }
+                {
+                  heroData.title && (
+                    <div
+
+                    >
+                      {
+                        logo ? (
+                          <div className={"pb-4 db:text-left text-center tb-l:text-left" + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>
+                            <img className="w-[290px] inline-block" src={logo} alt="Brand" />
+                          </div>
+                        ) : (
+                          <Typography textStyle={fontSize ? fontSize : "h1"} as="h1" className={"pb-2 text-center break-words db:text-left tb-l:text-left  " + ((heroData.title_color) ? heroData.title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.title}</Typography>
+                        )
+                      }
+                    </div>
+                  )
+                }
+                {
+                  heroData.sub_title && (
+                    <div
+
+                    >
+                      <Typography textStyle="sub1" className={"text-center db:text-left tb-l:text-left " + ((heroData.sub_title_color) ? heroData.sub_title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.sub_title}</Typography>
+                    </div>
+                  )
+                }
+                {
+                  heroData.description && (
+                    <div
+
+                    >
+                      <Typography textStyle="sub2" className="text-center tb:text-left db:text-left tb-l:text-left text-blue-700 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                    </div>
+                  )
+                }
+                {
+                  heroData.buttons && (
+                    <div className={" gap-2 flex items-center justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
+                      {
+                        heroData.buttons.map((btn, index) => (
+                          <HDSButton
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            label={btn.cta_text}
+                            state='default'
+                            size='lg'
+                            rightAnimatedArrow='true'
+                            rightAnimatedArrowColor='#ffffff'
+                          />
+                        ))
+                      }
+                    </div>
+                  )
+                }
+              </div>
+              {
+                heroData.video_url ? (
+                  <div className={"relative" + ((heroData.video_gradient_bg) ? "" : " p-4")}>
+                    <div className="w-12 h-12 bg-neutral-0 rounded-full absolute right-8 bottom-8 shadow-md cursor-pointer z-[2] flex items-center justify-center" onClick={() => videoMute()}>
+                      <Icon height={'w-6 h-6 stroke-neutral-800 stroke-[1.5px]'} variant={valumeMuteIcon} strokeColor="#1F2A37" />
+                    </div>
+                    <video
+                      id="hero_vid"
+                      controls={false}
+                      // autoPlay
+                      loop
+                      muted
+                      poster="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg"
+                      width="500"
+                      height="500"
+                      className={"tb:w-full w-full db:max-w-[500px]" + ((heroData.video_gradient_bg) ? "" : " rounded-xl shadow-md")}
+                    >
+                      <source
+                        src={heroData.video_url}
+                        type="video/mp4"
+                      />
+                    </video>
+                    {
+                      heroData.video_gradient_bg && (<div className={`tb-l:w-1/2 w-full h-1/2 tb:h-full absolute left-0 top-0 tb-l:ml-[-4px] tb-l:bg-gradient-to-r ${videoGradientBg} to-transparent bg-gradient-to-b tb:mt-[-4px] tb-l:mt-0`}></div>)
+                    }
+                  </div>
+                ) : (
+                  <div className="w-full"
+                     variants={{
+                      hidden: {
+                        opacity: 0,
+                      },
+                      visible: {
+                        opacity: 1,
+                        transition: {
+                          delay: .2,
+                          duration: 1,
+                        }
+                      },
+                    }}
+                  >
+                    {heroData.img_url && (
+                      <div className="text-right pt-0 flex items-end justify-end h-full">
+                        <img
+                          src={heroData.img_url}
+                          alt="Hero"
+                          className="db:inline tb:w-[90%] tb-l:w-[70%] db:w-[75%] w-full rounded-b-3xl"
+                        />
+                      </div>
+                    )}
+                  </div>
+                )
+              }
+            </div>
+          </div>
+        </div>
+        {
+          scrollArrow && (
+            <div className=" hidden tb-l:block translate-y-[-20px]">
+              <div className="px-6 flex justify-center pb-16 animate-bounce h-6 grid-cols-3">
+                <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g filter="url(#filter0_dd_1052_3729)">
+                    <circle cx="30" cy="26" r="24" fill="white" />
+                    <path d="M25 27L30 32L35 27M25 20L30 25L35 20" stroke="#1F2A37" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                  </g>
+                  <defs>
+                    <filter id="filter0_dd_1052_3729" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                      <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                      <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1052_3729" />
+                      <feOffset dy="2" />
+                      <feGaussianBlur stdDeviation="2" />
+                      <feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.14902 0 0 0 0 0.247059 0 0 0 0.06 0" />
+                      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1052_3729" />
+                      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                      <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1052_3729" />
+                      <feOffset dy="4" />
+                      <feGaussianBlur stdDeviation="4" />
+                      <feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.14902 0 0 0 0 0.247059 0 0 0 0.1 0" />
+                      <feBlend mode="normal" in2="effect1_dropShadow_1052_3729" result="effect2_dropShadow_1052_3729" />
+                      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1052_3729" result="shape" />
+                    </filter>
+                  </defs>
+                </svg>
+              </div>
+            </div>
+          )
+        }
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export {default as Hero1} from './h1'