fix: home screen btn sizing

Author: shaaddev

components/landing/collab.tsx

@@ -16,8 +16,9 @@ export function Collab({ delay }: { delay?: number }) {
             </h1>
           </div>
           <Button
-            size="lg"
+            size="xl"
             variant="outline"
+            className="rounded-full font-semibold"
             render={
               <a
                 href="https://github.com/shaaddev/ApplicationRecord"

components/landing/home-page.tsx

@@ -23,7 +23,8 @@ export function HomePage({ delay }: { delay?: number }) {
           </div>
           <Button
             variant="brand"
-            size="lg"
+            size="xl"
+            className="rounded-full font-semibold"
             render={<ViewLink href="/application-record" />}
             nativeButton={false}
           >

components/landing/nav-bar.tsx

@@ -21,7 +21,12 @@ export function NavBar() {
       </ViewLink>
       <div className="flex items-center gap-1">
         <ThemeToggle />
-        <Button size="sm" render={<Link href="/login" />} nativeButton={false}>
+        <Button
+          size="lg"
+          className="rounded-full px-5 font-semibold"
+          render={<Link href="/login" />}
+          nativeButton={false}
+        >
           Log in
           <ArrowRightIcon data-icon="inline-end" />
         </Button>

components/ui/button.tsx

@@ -27,6 +27,7 @@ const buttonVariants = cva(
         xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         lg: "h-9 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        xl: "h-12 gap-2 px-6 text-base has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-5",
         icon: "size-8",
         "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-7",