Skip to content

Commit aa47080

Browse files
ameer2468ameer2468
committed
improve mobile menu, login button bg, and add rive animation to upgrade button
1 parent 9352409 commit aa47080

File tree

6 files changed

+91
-48
lines changed

6 files changed

+91
-48
lines changed

‎apps/web/components/ReadyToGetStarted.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { Button } from "@cap/ui";
44
import Link from "next/link";
55
import { homepageCopy } from "../data/homepage-copy";
6+
import UpgradeToPro from "./pages/_components/UpgradeToPro";
67

78
export function ReadyToGetStarted() {
89
return (
@@ -20,30 +21,23 @@ export function ReadyToGetStarted() {
2021
{homepageCopy.readyToGetStarted.title}
2122
</h2>
2223
</div>
23-
<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">
24+
<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">
2425
<Button
2526
variant="gray"
2627
href="/pricing"
2728
size="lg"
28-
className="w-full font-medium sm:w-auto"
29+
className="w-full font-medium sm:w-fit"
2930
>
3031
{homepageCopy.readyToGetStarted.buttons.secondary}
3132
</Button>
32-
<Button
33-
variant="blue"
34-
href="/download"
35-
size="lg"
36-
className="w-full font-medium sm:w-auto"
37-
>
38-
{homepageCopy.readyToGetStarted.buttons.primary}
39-
</Button>
33+
<UpgradeToPro text={homepageCopy.header.cta.primaryButton} />
4034
</div>
4135
<div>
4236
<p>
4337
or,{" "}
4438
<Link
4539
href="/loom-alternative"
46-
className="underline font-semibold hover:text-gray-12"
40+
className="font-semibold underline hover:text-gray-12"
4741
>
4842
Switch from Loom
4943
</Link>

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { AnimatePresence, motion } from "framer-motion";
88
import { useDetectPlatform } from "hooks/useDetectPlatform";
99
import Image from "next/image";
1010
import Link from "next/link";
11-
import { useState } from "react";
11+
import { useRef, useState } from "react";
1212
import { LogoMarquee } from "@/components/ui/LogoMarquee";
1313
import {
1414
getDownloadButtonText,
@@ -17,6 +17,8 @@ import {
1717
PlatformIcons,
1818
} from "@/utils/platform";
1919
import { homepageCopy } from "../../../data/homepage-copy";
20+
import UpgradeToPro from "../_components/UpgradeToPro";
21+
import { ProArtRef } from "./Pricing/ProArt";
2022
import VideoModal from "./VideoModal";
2123

2224
interface HeaderProps {
@@ -64,6 +66,8 @@ const Header = ({ serverHomepageCopyVariant = "" }: HeaderProps) => {
6466
);
6567
};
6668

69+
const proArtRef = useRef<ProArtRef>(null);
70+
6771
const headerContent = getHeaderContent();
6872

6973
return (
@@ -133,14 +137,7 @@ const Header = ({ serverHomepageCopyVariant = "" }: HeaderProps) => {
133137
{!loading && getPlatformIcon(platform)}
134138
{getDownloadButtonText(platform, loading, isIntel)}
135139
</Button>
136-
<Button
137-
variant="blue"
138-
href="/pricing"
139-
size="lg"
140-
className="relative z-[20] w-full font-medium sm:w-auto"
141-
>
142-
{homepageCopy.header.cta.primaryButton}
143-
</Button>
140+
<UpgradeToPro text={homepageCopy.header.cta.primaryButton} />
144141
</motion.div>
145142

146143
<motion.p

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import { Fit, Layout, useRive } from "@rive-app/react-canvas";
2+
import clsx from "clsx";
23
import { forwardRef, memo, useImperativeHandle } from "react";
34

45
export interface ProArtRef {
56
playHoverAnimation: () => void;
67
playDefaultAnimation: () => void;
78
}
89

10+
interface ProArtProps {
11+
className?: string;
12+
}
13+
914
export const ProArt = memo(
10-
forwardRef<ProArtRef>((_, ref) => {
15+
forwardRef<ProArtRef, ProArtProps>(({ className }, ref) => {
1116
const { rive, RiveComponent: ProRive } = useRive({
1217
src: "/rive/pricing.riv",
1318
artboard: "pro",
@@ -34,7 +39,12 @@ export const ProArt = memo(
3439
}));
3540

3641
return (
37-
<ProRive className="w-full max-w-[210px] mx-auto h-[195px] relative bottom-5" />
42+
<ProRive
43+
className={clsx(
44+
className,
45+
"relative bottom-5 mx-auto w-full max-w-[210px] h-[195px]",
46+
)}
47+
/>
3848
);
3949
}),
4050
);

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
getPlatformIcon,
1212
} from "@/utils/platform";
1313
import { homepageCopy } from "../../../data/homepage-copy";
14+
import UpgradeToPro from "../_components/UpgradeToPro";
1415

1516
interface Mode {
1617
name: "Instant Mode" | "Studio Mode";
@@ -161,14 +162,7 @@ const RecordingModes = () => {
161162
{!loading && getPlatformIcon(platform)}
162163
{getDownloadButtonText(platform, loading, isIntel)}
163164
</Button>
164-
<Button
165-
variant="blue"
166-
href="/pricing"
167-
size="lg"
168-
className="w-full font-medium sm:w-auto"
169-
>
170-
{homepageCopy.header.cta.primaryButton}
171-
</Button>
165+
<UpgradeToPro text={homepageCopy.header.cta.primaryButton} />
172166
</div>
173167
</div>
174168
</div>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Button } from "@cap/ui";
2+
import { useRive } from "@rive-app/react-canvas";
3+
4+
const UpgradeToPro = ({ text = "Upgrade To Cap Pro" }: { text?: string }) => {
5+
const { rive, RiveComponent: ProRive } = useRive({
6+
src: "/rive/pricing.riv",
7+
artboard: "pro",
8+
animations: "idle",
9+
autoplay: false,
10+
});
11+
return (
12+
<Button
13+
href="/pricing"
14+
onMouseEnter={() => {
15+
if (rive) {
16+
rive.stop();
17+
rive.play("items-coming-out");
18+
}
19+
}}
20+
className="flex overflow-visible w-full sm:max-w-[220px] relative gap-3 justify-evenly items-center mx-auto cursor-pointer"
21+
onMouseLeave={() => {
22+
if (rive) {
23+
rive.stop();
24+
rive.play("items-coming-in");
25+
}
26+
}}
27+
size="lg"
28+
variant="blue"
29+
>
30+
<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" />
31+
<p className="relative left-5 font-medium text-white">{text}</p>
32+
</Button>
33+
);
34+
};
35+
36+
export default UpgradeToPro;

‎apps/web/components/ui/MobileMenu.tsx‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -58,57 +58,69 @@ const externalLinks: NavLink[] = [
5858
const MobileMenu: React.FC<MobileMenuProps> = ({ setShowMobileMenu, auth }) => {
5959
console.log(auth, "auth");
6060
return (
61-
<div className="overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2 block md:hidden">
61+
<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2 md:hidden">
6262
<div className="pb-12">
6363
<nav className="relative mt-24 mobile">
6464
<ul className="p-0 space-y-4">
6565
{internalLinks.map((link, index) => (
66-
<li key={`internal-${index}`}>
66+
<li key={`internal-${index.toString()}`}>
6767
<Link
6868
onClick={() => setShowMobileMenu(false)}
6969
href={link.href}
7070
passHref
71-
className="text-lg text-black"
71+
className="text-lg font-medium text-gray-12"
7272
>
7373
{link.text}
7474
</Link>
7575
</li>
7676
))}
7777
<div className="pt-5 pb-8 space-y-4">
7878
{externalLinks.map((link, index) => (
79-
<li key={`external-${index}`}>
79+
<li key={`external-${index.toString()}`}>
8080
<Link
8181
href={link.href}
8282
passHref
8383
target="_blank"
84-
className="flex items-center text-lg text-black"
84+
className="flex items-center text-lg text-gray-12"
8585
>
8686
{link.icon}
87-
<span className="ml-2 text-lg text-black">{link.text}</span>
87+
<span className="ml-2 text-lg font-medium text-gray-11">
88+
{link.text}
89+
</span>
8890
</Link>
8991
</li>
9092
))}
9193
</div>
9294
</ul>
9395
<div className="flex flex-col gap-4 items-center">
9496
{auth === null && (
95-
<Button
96-
variant="gray"
97-
href="/login"
98-
size="lg"
99-
className="w-full font-medium"
100-
>
101-
Login
102-
</Button>
97+
<>
98+
<Button
99+
variant="dark"
100+
href={auth ? "/dashboard" : "/signup"}
101+
size="lg"
102+
className="w-full font-medium sm:w-auto"
103+
>
104+
{auth ? "Dashboard" : "Sign Up"}
105+
</Button>
106+
<Button
107+
variant="gray"
108+
href="/login"
109+
size="lg"
110+
className="w-full font-medium"
111+
>
112+
Login
113+
</Button>
114+
</>
103115
)}
104116

105117
<Button
106-
variant="primary"
107-
href={auth === null ? "/download" : "/dashboard"}
118+
variant="blue"
119+
href={"/download"}
108120
size="lg"
109-
className="w-full font-medium"
121+
className="mt-6 w-full font-medium"
110122
>
111-
{auth === null ? "Download App" : "Dashboard"}
123+
Download App
112124
</Button>
113125
</div>
114126
</nav>

0 commit comments

Comments
 (0)