chore: make login a button instead

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

@@ -93,13 +93,6 @@ const Links = [
 	},
 ];
 
-const AuthLinks = [
-	{
-		label: "Log In",
-		href: "/login",
-	},
-];
-
 export const Navbar = () => {
 	const pathname = usePathname();
 	const [showMobileMenu, setShowMobileMenu] = useState(false);
@@ -159,24 +152,6 @@ export const Navbar = () => {
 												)}
 											</NavigationMenuItem>
 										))}
-										{!auth &&
-											AuthLinks.map((link) => (
-												<NavigationMenuItem key={link.label}>
-													<Link href={link.href} legacyBehavior passHref>
-														<NavigationMenuLink
-															className={classNames(
-																navigationMenuTriggerStyle(),
-																pathname === link.href
-																	? "text-blue-9"
-																	: "text-gray-10",
-																"px-2 py-0 text-sm font-medium hover:text-blue-9 focus:text-8",
-															)}
-														>
-															{link.label}
-														</NavigationMenuLink>
-													</Link>
-												</NavigationMenuItem>
-											))}
 									</NavigationMenuList>
 								</NavigationMenu>
 							</div>
@@ -194,6 +169,16 @@ export const Navbar = () => {
 									</Button>
 								}
 							>
+								{!auth && (
+									<Button
+										variant="gray"
+										href="/login"
+										size="sm"
+										className="w-full font-medium sm:w-auto"
+									>
+										Login
+									</Button>
+								)}
 								<LoginOrDashboard />
 							</Suspense>
 						</div>

apps/web/components/ReadyToGetStarted.tsx

@@ -3,6 +3,7 @@
 import { Button } from "@cap/ui";
 import Link from "next/link";
 import { homepageCopy } from "../data/homepage-copy";
+import UpgradeToPro from "./pages/_components/UpgradeToPro";
 
 export function ReadyToGetStarted() {
 	return (
@@ -20,30 +21,23 @@ export function ReadyToGetStarted() {
 						{homepageCopy.readyToGetStarted.title}
 					</h2>
 				</div>
-				<div className="flex flex-col justify-center items-center space-y-4 sm:flex-row sm:space-y-0 sm:space-x-2 mb-8">
+				<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"
 						href="/pricing"
 						size="lg"
-						className="w-full font-medium sm:w-auto"
+						className="w-full font-medium sm:w-fit"
 					>
 						{homepageCopy.readyToGetStarted.buttons.secondary}
 					</Button>
-					<Button
-						variant="blue"
-						href="/download"
-						size="lg"
-						className="w-full font-medium sm:w-auto"
-					>
-						{homepageCopy.readyToGetStarted.buttons.primary}
-					</Button>
+					<UpgradeToPro text={homepageCopy.header.cta.primaryButton} />
 				</div>
 				<div>
 					<p>
 						or,{" "}
 						<Link
 							href="/loom-alternative"
-							className="underline font-semibold hover:text-gray-12"
+							className="font-semibold underline hover:text-gray-12"
 						>
 							Switch from Loom
 						</Link>

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

@@ -8,7 +8,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useDetectPlatform } from "hooks/useDetectPlatform";
 import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { LogoMarquee } from "@/components/ui/LogoMarquee";
 import {
 	getDownloadButtonText,
@@ -17,6 +17,8 @@ import {
 	PlatformIcons,
 } from "@/utils/platform";
 import { homepageCopy } from "../../../data/homepage-copy";
+import UpgradeToPro from "../_components/UpgradeToPro";
+import { ProArtRef } from "./Pricing/ProArt";
 import VideoModal from "./VideoModal";
 
 interface HeaderProps {
@@ -64,6 +66,8 @@ const Header = ({ serverHomepageCopyVariant = "" }: HeaderProps) => {
 		);
 	};
 
+	const proArtRef = useRef<ProArtRef>(null);
+
 	const headerContent = getHeaderContent();
 
 	return (
@@ -133,14 +137,7 @@ const Header = ({ serverHomepageCopyVariant = "" }: HeaderProps) => {
 							{!loading && getPlatformIcon(platform)}
 							{getDownloadButtonText(platform, loading, isIntel)}
 						</Button>
-						<Button
-							variant="blue"
-							href="/pricing"
-							size="lg"
-							className="relative z-[20] w-full font-medium sm:w-auto"
-						>
-							{homepageCopy.header.cta.primaryButton}
-						</Button>
+						<UpgradeToPro text={homepageCopy.header.cta.primaryButton} />
 					</motion.div>
 
 					<motion.p

apps/web/components/pages/HomePage/Pricing/ProArt.tsx

@@ -1,13 +1,18 @@
 import { Fit, Layout, useRive } from "@rive-app/react-canvas";
+import clsx from "clsx";
 import { forwardRef, memo, useImperativeHandle } from "react";
 
 export interface ProArtRef {
 	playHoverAnimation: () => void;
 	playDefaultAnimation: () => void;
 }
 
+interface ProArtProps {
+	className?: string;
+}
+
 export const ProArt = memo(
-	forwardRef<ProArtRef>((_, ref) => {
+	forwardRef<ProArtRef, ProArtProps>(({ className }, ref) => {
 		const { rive, RiveComponent: ProRive } = useRive({
 			src: "/rive/pricing.riv",
 			artboard: "pro",
@@ -34,7 +39,12 @@ export const ProArt = memo(
 		}));
 
 		return (
-			<ProRive className="w-full max-w-[210px] mx-auto h-[195px] relative bottom-5" />
+			<ProRive
+				className={clsx(
+					className,
+					"relative bottom-5 mx-auto w-full max-w-[210px] h-[195px]",
+				)}
+			/>
 		);
 	}),
 );

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

@@ -11,6 +11,7 @@ import {
 	getPlatformIcon,
 } from "@/utils/platform";
 import { homepageCopy } from "../../../data/homepage-copy";
+import UpgradeToPro from "../_components/UpgradeToPro";
 
 interface Mode {
 	name: "Instant Mode" | "Studio Mode";
@@ -161,14 +162,7 @@ const RecordingModes = () => {
 							{!loading && getPlatformIcon(platform)}
 							{getDownloadButtonText(platform, loading, isIntel)}
 						</Button>
-						<Button
-							variant="blue"
-							href="/pricing"
-							size="lg"
-							className="w-full font-medium sm:w-auto"
-						>
-							{homepageCopy.header.cta.primaryButton}
-						</Button>
+						<UpgradeToPro text={homepageCopy.header.cta.primaryButton} />
 					</div>
 				</div>
 			</div>

apps/web/components/pages/_components/UpgradeToPro.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@cap/ui";
+import { useRive } from "@rive-app/react-canvas";
+
+const UpgradeToPro = ({ text = "Upgrade To Cap Pro" }: { text?: string }) => {
+	const { rive, RiveComponent: ProRive } = useRive({
+		src: "/rive/pricing.riv",
+		artboard: "pro",
+		animations: "idle",
+		autoplay: false,
+	});
+	return (
+		<Button
+			href="/pricing"
+			onMouseEnter={() => {
+				if (rive) {
+					rive.stop();
+					rive.play("items-coming-out");
+				}
+			}}
+			className="flex overflow-visible w-full sm:max-w-[220px] relative gap-3 justify-evenly items-center mx-auto cursor-pointer"
+			onMouseLeave={() => {
+				if (rive) {
+					rive.stop();
+					rive.play("items-coming-in");
+				}
+			}}
+			size="lg"
+			variant="blue"
+		>
+			<ProRive className="w-[80px] scale-[0.9] h-[62px] bottom-[24%] left-[5%] xs:left-[12%] sm:-left-2 absolute inset-y-0 my-auto" />
+			<p className="relative left-5 font-medium text-white">{text}</p>
+		</Button>
+	);
+};
+
+export default UpgradeToPro;

apps/web/components/ui/MobileMenu.tsx

@@ -58,57 +58,69 @@ const externalLinks: NavLink[] = [
 const MobileMenu: React.FC<MobileMenuProps> = ({ setShowMobileMenu, auth }) => {
 	console.log(auth, "auth");
 	return (
-		<div className="overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2 block md:hidden">
+		<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2 md:hidden">
 			<div className="pb-12">
 				<nav className="relative mt-24 mobile">
 					<ul className="p-0 space-y-4">
 						{internalLinks.map((link, index) => (
-							<li key={`internal-${index}`}>
+							<li key={`internal-${index.toString()}`}>
 								<Link
 									onClick={() => setShowMobileMenu(false)}
 									href={link.href}
 									passHref
-									className="text-lg text-black"
+									className="text-lg font-medium text-gray-12"
 								>
 									{link.text}
 								</Link>
 							</li>
 						))}
 						<div className="pt-5 pb-8 space-y-4">
 							{externalLinks.map((link, index) => (
-								<li key={`external-${index}`}>
+								<li key={`external-${index.toString()}`}>
 									<Link
 										href={link.href}
 										passHref
 										target="_blank"
-										className="flex items-center text-lg text-black"
+										className="flex items-center text-lg text-gray-12"
 									>
 										{link.icon}
-										<span className="ml-2 text-lg text-black">{link.text}</span>
+										<span className="ml-2 text-lg font-medium text-gray-11">
+											{link.text}
+										</span>
 									</Link>
 								</li>
 							))}
 						</div>
 					</ul>
 					<div className="flex flex-col gap-4 items-center">
 						{auth === null && (
-							<Button
-								variant="gray"
-								href="/login"
-								size="lg"
-								className="w-full font-medium"
-							>
-								Login
-							</Button>
+							<>
+								<Button
+									variant="dark"
+									href={auth ? "/dashboard" : "/signup"}
+									size="lg"
+									className="w-full font-medium sm:w-auto"
+								>
+									{auth ? "Dashboard" : "Sign Up"}
+								</Button>
+								<Button
+									variant="gray"
+									href="/login"
+									size="lg"
+									className="w-full font-medium"
+								>
+									Login
+								</Button>
+							</>
 						)}
 
 						<Button
-							variant="primary"
-							href={auth === null ? "/download" : "/dashboard"}
+							variant="blue"
+							href={"/download"}
 							size="lg"
-							className="w-full font-medium"
+							className="mt-6 w-full font-medium"
 						>
-							{auth === null ? "Download App" : "Dashboard"}
+							Download App
 						</Button>
 					</div>
 				</nav>