adjust buttons layout (#1017)

Author: ameer2468

apps/web/components/ReadyToGetStarted.tsx

@@ -26,7 +26,7 @@ export function ReadyToGetStarted() {
 						variant="gray"
 						href="/pricing"
 						size="lg"
-						className="w-full font-medium sm:w-fit"
+						className="font-medium w-fit"
 					>
 						{homepageCopy.readyToGetStarted.buttons.secondary}
 					</Button>

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

@@ -118,7 +118,7 @@ const Header = ({ serverHomepageCopyVariant = "" }: HeaderProps) => {
 					</div>
 
 					<motion.div
-						className="flex flex-col items-center mb-5 space-y-2 sm:flex-row sm:space-y-0 sm:space-x-4"
+						className="flex flex-wrap gap-4 items-center mb-5"
 						initial="hidden"
 						animate="visible"
 						custom={3}
@@ -132,7 +132,7 @@ const Header = ({ serverHomepageCopyVariant = "" }: HeaderProps) => {
 									: getDownloadUrl(platform, isIntel)
 							}
 							size="lg"
-							className="flex justify-center items-center w-full font-medium sm:w-auto"
+							className="flex justify-center items-center font-medium max-w-fit"
 						>
 							{!loading && getPlatformIcon(platform)}
 							{getDownloadButtonText(platform, loading, isIntel)}

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

@@ -148,7 +148,7 @@ const RecordingModes = () => {
 					</p>
 				</div>
 				<div className="p-6">
-					<div className="flex flex-col items-center space-y-2 sm:flex-row sm:space-y-0 sm:space-x-4 sm:justify-center">
+					<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"
 							href={
@@ -157,7 +157,7 @@ const RecordingModes = () => {
 									: getDownloadUrl(platform, isIntel)
 							}
 							size="lg"
-							className="flex justify-center items-center w-full font-medium sm:w-auto"
+							className="flex justify-center items-center w-fit font-medium"
 						>
 							{!loading && getPlatformIcon(platform)}
 							{getDownloadButtonText(platform, loading, isIntel)}

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

@@ -17,7 +17,7 @@ const UpgradeToPro = ({ text = "Upgrade To Cap Pro" }: { text?: string }) => {
 					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"
+			className="flex overflow-visible w-full max-w-[220px] relative gap-3 justify-evenly items-center cursor-pointer"
 			onMouseLeave={() => {
 				if (rive) {
 					rive.stop();
@@ -27,7 +27,7 @@ const UpgradeToPro = ({ text = "Upgrade To Cap Pro" }: { text?: string }) => {
 			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" />
+			<ProRive className="w-[80px] scale-[0.9] h-[62px] bottom-[22.5%] -left-2 absolute inset-y-0 my-auto" />
 			<p className="relative left-5 font-medium text-white">{text}</p>
 		</Button>
 	);