added consultation icon to redirect to Google Calendar to the bottom …

src/components/Sidebar.tsx

@@ -8,9 +8,11 @@ import { UsersIcon } from '@/components/icons/UsersIcon'
 import { KeyIcon } from '@/components/icons/KeyIcon'
 import { GlobeIcon } from '@/components/icons/GlobeIcon'
 import { CalendarDaysIcon } from '@/components/icons/CalendarDaysIcon'
+import { MessageCircleIcon } from '@/components/icons/MessageCircleIcon'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useFriendsWithInsights } from '@/api/hooks/useFriends'
 import { usePaywall } from '@/hooks/usePaywall'
+import { open } from '@tauri-apps/plugin-shell'
 
 export function Sidebar() {
   const location = useLocation()
@@ -109,8 +111,8 @@ export function Sidebar() {
           </Tooltip>
         </nav>
 
-        {!hasProAccess && (
-          <div className="p-2 border-t flex justify-center">
+        <div className="p-2 border-t flex flex-col items-center space-y-2">
+          {!hasProAccess && (
             <NoAnalyticsButton
               variant="ghost"
               iconSize={5}
@@ -119,10 +121,22 @@ export function Sidebar() {
             >
               <KeyIcon size={20} className="text-yellow-500" />
             </NoAnalyticsButton>
-          </div>
-        )}
+          )}
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <NoAnalyticsButton
+                variant="ghost"
+                iconSize={5}
+                className="w-9 h-9 p-2 text-muted-foreground [&>svg]:text-muted-foreground"
+                onClick={() => open('https://calendar.app.google/UT16rbeEvS5Ye4bx9')}
+              >
+                <MessageCircleIcon size={20} />
+              </NoAnalyticsButton>
+            </TooltipTrigger>
+            <TooltipContent side="right" sideOffset={10}>Book a Consultation</TooltipContent>
+          </Tooltip>
 
-        <div className="p-2 border-t flex justify-center">
           <Tooltip>
             <TooltipTrigger asChild>
               <NoAnalyticsButton

src/components/icons/MessageCircleIcon.tsx

@@ -0,0 +1,74 @@
+import type { Transition, Variants } from 'motion/react'
+import { motion } from 'motion/react'
+import type { HTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import { cn } from '@/lib/utils/tailwind.util'
+import type { AnimationHandle } from '@/hooks/useMouseOverAnimation'
+import { useMouseOverAnimation } from '@/hooks/useMouseOverAnimation'
+
+export type MessageCircleIconHandle = AnimationHandle
+
+interface MessageCircleIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number
+}
+
+const defaultTransition: Transition = {
+  duration: 0.6,
+  opacity: { duration: 0.2 }
+}
+
+const pathVariants: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1]
+  }
+}
+
+const MessageCircleIcon = forwardRef<MessageCircleIconHandle, MessageCircleIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const { controls, handleMouseEnter, handleMouseLeave } = useMouseOverAnimation({
+      ref,
+      onMouseEnter,
+      onMouseLeave
+    })
+
+    return (
+      <div
+        className={cn(
+          'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
+          className
+        )}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <motion.path
+            d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"
+            variants={pathVariants}
+            transition={defaultTransition}
+            animate={controls}
+          />
+        </svg>
+      </div>
+    )
+  }
+)
+
+MessageCircleIcon.displayName = 'MessageCircleIcon'
+
+export { MessageCircleIcon }