"use client"; import { cn } from "@midday/ui/cn"; import { Icons } from "@midday/ui/icons"; import { motion } from "motion/react"; import Image from "next/image"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useCallback, useEffect, useRef, useState } from "react"; import { HeaderIntegrationsPreview } from "./header-integrations-preview"; import type { Testimonial } from "./sections/testimonials-section"; import { defaultTestimonials } from "./sections/testimonials-section"; // All testimonials for header rotation (includes default + new ones) const headerTestimonials: Testimonial[] = [ ...defaultTestimonials, { name: "Vitalie Rosescu", title: "", company: "Awwwocado", country: "Netherlands", image: "/stories/vitalie.jpg", content: "All in one platform for freelancers looking to create clear insights on income and expenses.", fullContent: "Company\nAwwwocado is a Webflow development business.\n\nChallenge\nWhat I lacked in other software is the overview of which invoices were paid and which were pending, and seeing my overall income. Existing tools didn't give a clear picture of finances.\n\nImpact\nHaving a clear overview of income, invoices, and expenses in one place made managing the business much easier.\n\nFavorite features\nInvoices, because it's a big time saver.\nA clean share link for customers is very nice.\nExpenses being taken from my inbox and being able to upload expenses is a huge one.\nThe invoice template is clean out of the box and very customizable.", }, { name: "Nick Speer", title: "", company: "Speer Technologies", country: "United States", image: "/stories/speer.jpeg", content: "Midday is bookkeeping software without the fluff. It's a ledger with modern tooling and integrations.", fullContent: "Company\nSpeer Technologies is an AI consulting firm in the US. We accelerate our clients' AI initiatives from problem discovery to production across industries including Finance, Healthcare, and Defense.\n\nChallenge\nI was spending too much time on weekends cleaning up my books, juggling invoices, and clicking around clunky software. It felt like another job, and the other solutions didn't work the way I wanted.\n\nImpact\nAfter switching from QuickBooks to Midday, it felt like I was in control of my books. I could see every transaction and expense as it came in and manage it without feeling overwhelmed.\n\nFavorite features\nAuto-categorization is far better than other programs, which saves time from manually organizing books. From there, I can export data and get insights into exact spending categories.", }, { name: "Ivo Dukov", title: "", company: "Smarch", country: "Bulgaria", content: "Everything lives in one place now — customers, invoices, documents, and financial analytics.", fullContent: "Company\nSmarch is a software development agency specializing in e-commerce, web applications, and custom backend systems.\n\nChallenge\nBefore Midday, I was manually creating PDF invoices, piecing together bank reports to understand how the company was doing, and collecting financial documents every time accounting needed something. It was scattered and tedious.\n\nImpact\nEverything lives in one place now. I set up invoice templates once, have all clients organized, get real analytics on company performance, and keep documents in a proper vault. What used to take hours of admin work is now streamlined and mostly automatic.\n\nFavorite features\nInvoice templates. They eliminate repetitive work when billing multiple clients.", }, { name: "Ciarán Harris", title: "", company: "CogniStream", country: "Ireland", image: "/stories/ciaran.jpeg", content: "Financial admin stopped being a source of friction. Midday actually works the way you'd expect modern software to work.", fullContent: "Company\nCogniStream is an AI-moderated qualitative research platform. We have natural voice conversations with customers, analyse not just what they say but how they feel when they say it, and help businesses make confident decisions faster. I'm Ciarán Harris, CEO and Co-Founder, a two-time founder with over 25 years of research experience for global giants.\n\nChallenge\nI tried using Xero. It couldn't connect to my bank account reliably, the interface felt like it hadn't been updated in a decade, and just getting up and running was painful. It never worked out of the box. The real kicker? My accountant also used Xero, but he preferred I send him everything as a CSV anyway. That completely negated the point. As a founder, you need financial admin to just work so you can focus on building the business. It wasn't working.\n\nImpact\nFinancial admin stopped being a source of friction. Midday actually works the way you'd expect modern software to work. I check in every few days to keep on top of things, and every few weeks I'll do a more involved session to get through receipt scanning and matching ahead of VAT returns. It removed the single biggest pain point from my week-to-week financial admin, and everything else it does is a genuinely useful bonus on top of that.\n\nFavorite features\nReceipt scanning and matching, without question. That's the feature that removes the most friction from running the business day to day. Before, receipts were scattered and matching them to transactions was tedious. Now it's handled. That one feature alone justified the switch. The AI assistant is a nice bonus too, being able to ask a natural language question about your finances and get detailed results is genuinely useful.", }, ]; interface HeaderProps { transparent?: boolean; hideMenuItems?: boolean; } // Feature pages to prefetch on hover const FEATURE_ROUTES = [ "/assistant", "/insights", "/transactions", "/inbox", "/time-tracking", "/invoicing", "/customers", "/file-storage", "/pre-accounting", ]; // App pages to prefetch on hover const APP_ROUTES = ["/integrations", "/download", "/docs", "/mcp"]; export function Header({ transparent = false, hideMenuItems = false, }: HeaderProps) { const router = useRouter(); const [isMenuOpen, setIsMenuOpen] = useState(false); const [isFeaturesOpen, setIsFeaturesOpen] = useState(false); const [isAppsOpen, setIsAppsOpen] = useState(false); const [isMobileFeaturesOpen, setIsMobileFeaturesOpen] = useState(false); const [isMobileAppsOpen, setIsMobileAppsOpen] = useState(false); const [visibleIntegrations, setVisibleIntegrations] = useState< Array<{ id: number; key: string }> >([]); const [featuresDropdownHeight, setFeaturesDropdownHeight] = useState< number | null >(null); const featuresTimeoutRef = useRef(null); const appsTimeoutRef = useRef(null); const integrationKeyCounterRef = useRef(0); const featuresListRef = useRef(null); const preAccountingRef = useRef(null); const appsListRef = useRef(null); const macAppRef = useRef(null); const integrationsAppRef = useRef(null); const headerRef = useRef(null); const featuresPrefetched = useRef(false); const appsPrefetched = useRef(false); const [currentTestimonialIndex, setCurrentTestimonialIndex] = useState(0); // Prefetch feature pages on hover (only once) const prefetchFeatures = useCallback(() => { if (featuresPrefetched.current) return; featuresPrefetched.current = true; for (const route of FEATURE_ROUTES) { router.prefetch(route); } }, [router]); // Prefetch app pages on hover (only once) const prefetchApps = useCallback(() => { if (appsPrefetched.current) return; appsPrefetched.current = true; for (const route of APP_ROUTES) { router.prefetch(route); } }, [router]); // All non-ERP integrations const allIntegrations = [ { src: "/images/gmail.svg", alt: "Gmail" }, { src: "/images/slack.svg", alt: "Slack" }, { src: "/images/stripe.svg", alt: "Stripe" }, { src: "/images/gdrive.svg", alt: "Google Drive" }, { src: "/images/outlook.svg", alt: "Outlook" }, { src: "/images/whatsapp.svg", alt: "WhatsApp" }, { src: "/images/dropbox.svg", alt: "Dropbox" }, ]; // Initialize with 4 random integrations useEffect(() => { if (isAppsOpen && visibleIntegrations.length === 0) { const shuffled = [...allIntegrations.keys()].sort( () => Math.random() - 0.5, ); setVisibleIntegrations( shuffled.slice(0, 4).map((idx) => ({ id: idx, key: `init-${integrationKeyCounterRef.current++}`, })), ); } }, [isAppsOpen]); // Randomly fade in/out individual logos useEffect(() => { if (!isAppsOpen || visibleIntegrations.length === 0) return; const interval = setInterval( () => { setVisibleIntegrations((current) => { // Randomly decide to replace one logo (70% chance) if (Math.random() < 0.7 && current.length === 4) { const indexToReplace = Math.floor(Math.random() * 4); const availableIndices = allIntegrations .map((_, i) => i) .filter((i) => !current.some((item) => item.id === i)); if (availableIndices.length > 0) { const newIndex = availableIndices[ Math.floor(Math.random() * availableIndices.length) ]; const newVisible = [...current]; newVisible[indexToReplace] = { id: newIndex ?? 0, key: `change-${integrationKeyCounterRef.current++}`, }; return newVisible; } } return current; }); }, 1500 + Math.random() * 1000, ); // Random interval between 1.5-2.5 seconds return () => clearInterval(interval); }, [isAppsOpen, visibleIntegrations.length]); // Match Pre-accounting container height to features list and store height for apps dropdown useEffect(() => { if (isFeaturesOpen && featuresListRef.current) { // Get the full dropdown height including padding const featuresDropdown = featuresListRef.current.closest( "[data-features-dropdown]", ) as HTMLElement; const featuresHeight = featuresDropdown ? featuresDropdown.offsetHeight : featuresListRef.current.offsetHeight; setFeaturesDropdownHeight(featuresHeight); } }, [isFeaturesOpen]); // Apps dropdown height matches Features dropdown (image containers are fixed at 442x277) useEffect(() => { return () => { if (featuresTimeoutRef.current) { clearTimeout(featuresTimeoutRef.current); } if (appsTimeoutRef.current) { clearTimeout(appsTimeoutRef.current); } }; }, []); return ( <> {/* Dark Overlay */}
{/* Navigation Bar */} {/* Mobile & Tablet Menu Overlay */} {isMenuOpen && (
{/* Features Expandable Section */}
{isMobileFeaturesOpen && ( <>
{ setIsMenuOpen(false); setIsMobileFeaturesOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Assistant { setIsMenuOpen(false); setIsMobileFeaturesOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Insights { setIsMenuOpen(false); setIsMobileFeaturesOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Transactions { setIsMenuOpen(false); setIsMobileFeaturesOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Inbox { setIsMenuOpen(false); setIsMobileFeaturesOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Time tracking { setIsMenuOpen(false); setIsMobileFeaturesOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Invoicing { setIsMenuOpen(false); setIsMobileFeaturesOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Customers { setIsMenuOpen(false); setIsMobileFeaturesOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Files
)}
{ const target = e.currentTarget; if (target) { target.blur(); setTimeout(() => { if (target) { target.blur(); } }, 100); } }} className="no-touch-active text-2xl font-sans transition-colors py-2 text-primary hover:text-primary xl:active:text-primary focus:outline-none focus-visible:outline-none touch-manipulation" onClick={() => setIsMenuOpen(false)} style={{ WebkitTapHighlightColor: "transparent" }} > Pricing { const target = e.currentTarget; if (target) { target.blur(); setTimeout(() => { if (target) { target.blur(); } }, 100); } }} className="no-touch-active text-2xl font-sans transition-colors py-2 text-primary hover:text-primary xl:active:text-primary focus:outline-none focus-visible:outline-none touch-manipulation" onClick={() => setIsMenuOpen(false)} style={{ WebkitTapHighlightColor: "transparent" }} > Story { const target = e.currentTarget; if (target) { target.blur(); setTimeout(() => { if (target) { target.blur(); } }, 100); } }} className="no-touch-active text-2xl font-sans transition-colors py-2 text-primary hover:text-primary xl:active:text-primary focus:outline-none focus-visible:outline-none touch-manipulation" onClick={() => setIsMenuOpen(false)} style={{ WebkitTapHighlightColor: "transparent" }} > Download {/* Resources Expandable Section */}
{isMobileAppsOpen && ( <>
{ setIsMenuOpen(false); setIsMobileAppsOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Integrations { setIsMenuOpen(false); setIsMobileAppsOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Documentation { setIsMenuOpen(false); setIsMobileAppsOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > AI Integrations { setIsMenuOpen(false); setIsMobileAppsOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > Developer & API { setIsMenuOpen(false); setIsMobileAppsOpen(false); }} className="text-lg font-sans text-left text-muted-foreground hover:text-muted-foreground xl:active:text-muted-foreground focus:outline-none focus-visible:outline-none touch-manipulation transition-colors" style={{ WebkitTapHighlightColor: "transparent" }} > SDKs
)}
{/* Sign in */}
{ const target = e.currentTarget; if (target) { target.blur(); setTimeout(() => { if (target) { target.blur(); } }, 100); } }} className="text-2xl font-sans transition-colors py-2 text-primary hover:text-primary xl:active:text-primary focus:outline-none focus-visible:outline-none touch-manipulation" onClick={() => setIsMenuOpen(false)} style={{ WebkitTapHighlightColor: "transparent" }} > Sign in
)} ); }