landing page: scroll to hash and UI fixes

Author: andresarbelaez

landing/src/components/confidant-header.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link'
 import { Menu, X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { scrollToHash } from '@/lib/scroll-to-hash'
 import React from 'react'
 import { cn } from '@/lib/utils'
 import { ConfidantLogo } from './confidant-logo'
@@ -31,13 +32,14 @@ export function ConfidantHeader() {
                   <Link
                     href={item.href}
                     {...(item.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                    {...(item.href.startsWith('#') ? { onClick: (e) => scrollToHash(e, item.href) } : {})}
                   >
                     {item.name}
                   </Link>
                 </Button>
               ))}
               <Button asChild size="sm" className="ml-2">
-                <Link href="#download">Download</Link>
+                <Link href="#download" onClick={(e) => scrollToHash(e, '#download')}>Download</Link>
               </Button>
             </div>
             <button
@@ -55,12 +57,22 @@ export function ConfidantHeader() {
                   key={item.name}
                   href={item.href}
                   {...(item.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-                  onClick={() => setMenuState(false)}
+                  {...(item.href.startsWith('#') ? { onClick: (e) => { scrollToHash(e, item.href); setMenuState(false) } } : { onClick: () => setMenuState(false) })}
                   className="block py-2 text-muted-foreground hover:text-foreground"
                 >
                   {item.name}
                 </Link>
               ))}
+              <Link
+                href="#download"
+                onClick={(e) => {
+                  scrollToHash(e, '#download')
+                  setMenuState(false)
+                }}
+                className="block py-2 text-muted-foreground hover:text-foreground"
+              >
+                Download
+              </Link>
             </div>
           )}
         </div>

landing/src/components/confidant-hero.tsx

@@ -1,5 +1,8 @@
+'use client'
+
 import Link from 'next/link'
 import { Button } from '@/components/ui/button'
+import { scrollToHash } from '@/lib/scroll-to-hash'
 import { ChevronRight } from 'lucide-react'
 import { ConfidantHeader } from './confidant-header'
 
@@ -18,7 +21,7 @@ export function ConfidantHero() {
             </p>
             <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
               <Button asChild size="lg" className="pr-2">
-                <Link href="#download">
+                <Link href="#download" onClick={(e) => scrollToHash(e, '#download')}>
                   Download for free
                   <ChevronRight className="ml-1 size-4 opacity-70" />
                 </Link>

landing/src/lib/scroll-to-hash.ts

@@ -0,0 +1,10 @@
+import type { MouseEvent } from 'react'
+
+export function scrollToHash(e: MouseEvent<HTMLAnchorElement>, hash: string) {
+  const el = document.getElementById(hash.replace('#', ''))
+  if (el) {
+    e.preventDefault()
+    el.scrollIntoView({ behavior: 'smooth' })
+    window.history.pushState(null, '', hash)
+  }
+}