feat: improve Talk to us button functionality and fix URL redirect

docusaurus.config.js

@@ -181,7 +181,7 @@ const config = {
           },
           {
             label: 'Talk to us',
-            href: 'https://olake.io/#olake-form-product',
+            href: '#olake-form-product',
             position: 'right',
             className: 'dev-portal-signup dev-portal-link',
           },

src/components/site/HeroSection.tsx

@@ -3,6 +3,26 @@ import React from 'react'
 import Link from '@docusaurus/Link'
 import StatsSection from './StatsSection'
 
+// Function to trigger form loading and scrolling
+const handleTalkToUsClick = (e: React.MouseEvent) => {
+  e.preventDefault()
+
+  // Dispatch custom event to trigger form loading
+  const event = new CustomEvent('talkToUsClicked', {
+    detail: { action: 'loadFormAndScroll' }
+  })
+  window.dispatchEvent(event)
+
+  // Also scroll to the form section as fallback
+  const formSection = document.getElementById('olake-form-product')
+  if (formSection) {
+    formSection.scrollIntoView({ 
+      behavior: 'smooth', 
+      block: 'start' 
+    })
+  }
+}
+
 interface HeroSectionProps {
   title?: string
   subtitle?: string
@@ -55,12 +75,12 @@ const HeroSection: React.FC<HeroSectionProps> = ({
           </div>
 
           <div className='mt-6 px-2 mx-auto lg:mx-0 max-w-full flex flex-col sm:flex-row gap-4 justify-center lg:justify-start'>
-            <Link
-              to='#olake-form-product'
+            <button
+              onClick={handleTalkToUsClick}
               className='inline-flex items-center justify-center rounded-md bg-[#203FDD] px-4 sm:px-6 py-2.5 font-medium text-white transition-colors hover:text-gray-200 dark:bg-blue-600 dark:hover:bg-blue-700 text-sm sm:text-base'
             >
               Talk to us
-            </Link>
+            </button>
 
             <Link
               to='https://github.com/datazip-inc/olake'

src/components/site/RegistrationSection.jsx

@@ -1,7 +1,7 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react'
 import { useHistory } from 'react-router-dom'
 
-const RegistrationSection = () => {
+const RegistrationSection = forwardRef((props, ref) => {
   const childRef = useRef()
   const formRef = useRef(null)
   const sectionRef = useRef(null)
@@ -10,38 +10,89 @@ const RegistrationSection = () => {
   const history = useHistory()
   // const isMobile = useIsMobile()
 
-  // Defer HubSpot script & form creation until near viewport or anchor requested
-  useEffect(() => {
-    if (childRef.current && childRef.current.init) {
-      childRef.current.init()
+  // Expose methods to parent components
+  useImperativeHandle(ref, () => ({
+    loadForm: () => {
+      loadHubSpot()
+    },
+    scrollToForm: () => {
+      if (sectionRef.current) {
+        sectionRef.current.scrollIntoView({ 
+          behavior: 'smooth', 
+          block: 'start' 
+        })
+      }
+    },
+    loadFormAndScroll: () => {
+      loadHubSpot()
+      if (sectionRef.current) {
+        // Small delay to ensure form has time to load
+        setTimeout(() => {
+          sectionRef.current.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'start' 
+          })
+        }, 100)
+      }
     }
+  }))
 
-    const loadHubSpot = () => {
+  const loadHubSpot = () => {
+    if (formInitializedRef.current) return
+    const initialize = () => {
       if (formInitializedRef.current) return
-      const initialize = () => {
-        if (formInitializedRef.current) return
-        if (window.hbspt?.forms?.create) {
-          window.hbspt.forms.create({
-            target: '#olake-product-form',
-            portalId: '21798546',
-            formId: '86391f69-48e0-4b35-8ffd-13ac212d8208'
-          })
-          formInitializedRef.current = true
-        }
+      if (window.hbspt?.forms?.create) {
+        window.hbspt.forms.create({
+          target: '#olake-product-form',
+          portalId: '21798546',
+          formId: '86391f69-48e0-4b35-8ffd-13ac212d8208'
+        })
+        formInitializedRef.current = true
       }
+    }
 
-      if (!scriptLoadedRef.current) {
-        const script = document.createElement('script')
-        script.src = 'https://js.hsforms.net/forms/v2.js'
-        script.async = true
-        script.onload = () => {
-          scriptLoadedRef.current = true
-          initialize()
-        }
-        document.body.appendChild(script)
-      } else {
+    if (!scriptLoadedRef.current) {
+      const script = document.createElement('script')
+      script.src = 'https://js.hsforms.net/forms/v2.js'
+      script.async = true
+      script.onload = () => {
+        scriptLoadedRef.current = true
         initialize()
       }
+      document.body.appendChild(script)
+    } else {
+      initialize()
+    }
+  }
+
+  // Listen for custom event from "Talk to us" button
+  useEffect(() => {
+    const handleTalkToUsEvent = (event) => {
+      if (event.detail?.action === 'loadFormAndScroll') {
+        loadHubSpot()
+        // Small delay to ensure form has time to load before scrolling
+        setTimeout(() => {
+          if (sectionRef.current) {
+            sectionRef.current.scrollIntoView({ 
+              behavior: 'smooth', 
+              block: 'start' 
+            })
+          }
+        }, 100)
+      }
+    }
+
+    window.addEventListener('talkToUsClicked', handleTalkToUsEvent)
+
+    return () => {
+      window.removeEventListener('talkToUsClicked', handleTalkToUsEvent)
+    }
+  }, [])
+
+  // Defer HubSpot script & form creation until near viewport or anchor requested
+  useEffect(() => {
+    if (childRef.current && childRef.current.init) {
+      childRef.current.init()
     }
 
     const targetEl = sectionRef.current
@@ -202,6 +253,6 @@ const RegistrationSection = () => {
       </div>
     </section>
   )
-}
+})
 
 export default RegistrationSection