improvement: navbar logo animation on scroll and adjust download button

apps/web/app/(site)/Navbar.tsx

@@ -13,10 +13,10 @@ import {
 	navigationMenuTriggerStyle,
 } from "@cap/ui";
 import { classNames } from "@cap/utils";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Suspense, use, useState } from "react";
+import { Suspense, use, useEffect, useState } from "react";
 import MobileMenu from "@/components/ui/MobileMenu";
 import { useAuthContext } from "../Layout/AuthContext";
 
@@ -98,14 +98,34 @@ export const Navbar = () => {
 	const [showMobileMenu, setShowMobileMenu] = useState(false);
 	const auth = use(useAuthContext().user);
 
+	const [hideLogoName, setHideLogoName] = useState(false);
+
+	useEffect(() => {
+		const onScroll = () => {
+			setHideLogoName(window.scrollY > 10);
+		};
+		document.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			document.removeEventListener("scroll", onScroll);
+		};
+	}, []);
+
 	return (
 		<>
 			<header className="fixed top-4 left-0 right-0 z-[51] md:top-10  animate-in fade-in slide-in-from-top-4 duration-500">
 				<nav className="p-2 mx-auto w-full max-w-[calc(100%-20px)] bg-white rounded-full border backdrop-blur-md md:max-w-fit border-zinc-200 h-fit">
 					<div className="flex gap-12 justify-between items-center mx-auto max-w-4xl h-full transition-all">
 						<div className="flex items-center">
 							<Link passHref href="/home">
-								<Logo className="w-[90px]" />
+								<Logo
+									hideLogoName={hideLogoName}
+									className="transition-all duration-[0.2s] ease-out"
+									viewBoxDimensions={hideLogoName ? "0 0 60 40" : "0 0 120 40"}
+									style={{
+										width: hideLogoName ? 45.5 : 90,
+										height: 40,
+									}}
+								/>
 							</Link>
 							<div className="hidden md:flex">
 								<NavigationMenu>

apps/web/components/ReadyToGetStarted.tsx

@@ -1,11 +1,16 @@
 "use client";
 
 import { Button } from "@cap/ui";
+import { useDetectPlatform } from "hooks/useDetectPlatform";
 import Link from "next/link";
+import { getPlatformIcon } from "@/utils/platform";
 import { homepageCopy } from "../data/homepage-copy";
 import UpgradeToPro from "./pages/_components/UpgradeToPro";
 
 export function ReadyToGetStarted() {
+	const { platform } = useDetectPlatform();
+	const loading = platform === null;
+
 	return (
 		<div
 			className="max-w-[1000px] md:bg-center w-[calc(100%-20px)] bg-white min-h-[300px] mx-auto border border-gray-5 my-[150px] md:my-[200px] lg:my-[250px] rounded-[20px] overflow-hidden relative flex flex-col justify-center p-8"
@@ -23,11 +28,12 @@ export function ReadyToGetStarted() {
 				</div>
 				<div className="flex flex-col justify-center items-center mb-8 space-y-4 w-full sm:flex-row sm:space-y-0 sm:space-x-2">
 					<Button
-						variant="gray"
+						variant="dark"
 						href="/pricing"
 						size="lg"
 						className="font-medium w-fit"
 					>
+						{!loading && getPlatformIcon(platform)}
 						{homepageCopy.readyToGetStarted.buttons.secondary}
 					</Button>
 					<UpgradeToPro text={homepageCopy.header.cta.primaryButton} />

apps/web/components/pages/HomePage/RecordingModes.tsx

@@ -150,14 +150,14 @@ const RecordingModes = () => {
 				<div className="p-6">
 					<div className="flex flex-col items-center space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 sm:justify-center">
 						<Button
-							variant="gray"
+							variant="dark"
 							href={
 								platform === "windows"
 									? "/download"
 									: getDownloadUrl(platform, isIntel)
 							}
 							size="lg"
-							className="flex justify-center items-center w-fit font-medium"
+							className="flex justify-center items-center font-medium w-fit"
 						>
 							{!loading && getPlatformIcon(platform)}
 							{getDownloadButtonText(platform, loading, isIntel)}

packages/ui/src/components/icons/Logo.tsx

@@ -4,22 +4,25 @@ export const Logo = ({
 	showBeta,
 	white,
 	hideLogoName,
+	viewBoxDimensions,
+	style,
 }: {
-	className: string;
+	className?: string;
 	showVersion?: boolean;
 	showBeta?: boolean;
 	white?: boolean;
 	hideLogoName?: boolean;
+	style?: React.CSSProperties;
+	viewBoxDimensions?: `${string} ${string} ${string} ${string}`;
 }) => {
-	const viewBoxDimensions = hideLogoName ? "0 0 40 40" : "0 0 120 40";
-
 	return (
 		<div className="flex items-center">
 			<svg
-				viewBox={viewBoxDimensions}
+				viewBox={viewBoxDimensions || "0 0 120 40"}
 				xmlns="http://www.w3.org/2000/svg"
 				preserveAspectRatio="xMidYMid meet"
 				fill="none"
+				style={style}
 				aria-label="Cap Logo"
 				className={className}
 			>