style: floating navbar and call icon

Made-with: Cursor

src/components/floating-call-button.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { PhoneCall } from "lucide-react";
 import { offices } from "@/lib/site-config";
 
 export function FloatingCallButton() {
@@ -12,8 +13,8 @@ export function FloatingCallButton() {
       href={vaOffice.phoneHref}
       className="fixed bottom-4 right-4 z-40 inline-flex h-12 items-center justify-center rounded-full bg-sky-500 px-4 text-sm font-semibold text-white shadow-lg shadow-sky-500/40 hover:bg-sky-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
     >
-      <span className="mr-2 inline-flex h-7 w-7 items-center justify-center rounded-full bg-sky-600">
-        <span className="block h-3 w-3 rotate-45 border-2 border-white border-t-transparent border-l-transparent" />
+      <span className="mr-2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-sky-600">
+        <PhoneCall className="h-4 w-4" />
       </span>
       Call Ghion Financial
     </a>

src/components/hero.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 
 export function Hero() {
   return (
-    <section className="bg-slate-900 py-12 sm:py-16 md:py-20">
+    <section className="bg-slate-900 py-12 sm:py-16 md:py-20 -mt-3 min-h-screen">
       <div className="mx-auto flex max-w-6xl flex-col gap-10 px-4 md:flex-row md:items-center md:px-6">
         <div className="max-w-xl space-y-5">
           <p className="text-xs font-semibold uppercase tracking-[0.2em] text-sky-300">

src/components/site-header.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useState } from "react";
+import { PhoneCall, Menu } from "lucide-react";
 import { offices } from "@/lib/site-config";
 import { Button } from "@/components/ui/button";
 
@@ -10,8 +11,8 @@ export function SiteHeader() {
   const [open, setOpen] = useState(false);
 
   return (
-    <header className="sticky top-0 z-40 border-b border-slate-200 bg-slate-50/90 backdrop-blur">
-      <div className="mx-auto flex max-w-6xl items-center justify-between rounded-b-3xl bg-white px-4 py-3 shadow-sm md:px-6">
+    <header className="pointer-events-none sticky top-0 z-40 bg-transparent pb-2">
+      <div className="pointer-events-auto mx-auto mt-3 flex max-w-6xl items-center justify-between rounded-full border border-slate-200 bg-white/95 px-4 py-2.5 shadow-md shadow-slate-900/5 backdrop-blur md:px-6">
         <Link href="/" className="flex items-center gap-2">
           <span className="flex h-8 w-8 items-center justify-center rounded-full border border-sky-400 bg-sky-100 text-xs font-semibold text-sky-800">
             GF
@@ -47,14 +48,6 @@ export function SiteHeader() {
           </Link>
         </nav>
         <div className="flex items-center gap-3">
-          {vaOffice ? (
-            <a
-              href={vaOffice.phoneHref}
-              className="hidden text-[0.7rem] font-medium text-slate-600 md:inline"
-            >
-              Call {vaOffice.phone}
-            </a>
-          ) : null}
           <div className="hidden md:block">
             <Button
               variant="outline"
@@ -70,13 +63,12 @@ export function SiteHeader() {
             aria-label="Toggle navigation"
             onClick={() => setOpen((prev) => !prev)}
           >
-            <span className="block h-0.5 w-4 rounded bg-slate-700" />
-            <span className="block h-0.5 w-4 rounded bg-slate-700" />
+            <Menu className="h-4 w-4" />
           </button>
         </div>
       </div>
       {open && (
-        <div className="border-t border-slate-200 bg-white md:hidden">
+        <div className="pointer-events-auto border-t border-slate-200 bg-white md:hidden">
           <div className="mx-auto max-w-6xl px-4 py-3 text-sm text-slate-800">
             <nav className="flex flex-col gap-3">
               <Link href="/" onClick={() => setOpen(false)}>