improve landing hero

Author: souhaib-benbouzid

packages/ui/src/button/index.tsx

@@ -5,7 +5,7 @@ import { BaseUIProps, ChildrenProp } from "src/_types";
 import { Link } from "src/link";
 
 export interface ButtonProps extends BaseUIProps, ChildrenProp {
-  variant: "v1" | "v2" | "v3";
+  variant: "v1" | "v2" | "v3" | "v4";
   onClick?: (event: MouseEvent<HTMLElement>) => void;
   href?: string;
 }
@@ -16,12 +16,25 @@ const variantToMUIButtonVariant: Record<
 > = {
   v2: "text",
   v3: "contained",
+  v4: "outlined",
 };
 
 export const Button: FC<ButtonProps> = ({ children, variant, margin, ...props }) => {
   const { toCSSMargin } = useTheme();
 
   switch (variant) {
+    case "v4":
+      return (
+        <MUIButton
+          sx={{ margin: toCSSMargin(margin), textTransform: "capitalize" }}
+          {...props}
+          variant="outlined"
+          LinkComponent={Link}
+        >
+          {children}
+        </MUIButton>
+      );
+
     case "v1":
       return (
         <Link {...props} variant="v2" margin={margin}>
@@ -32,7 +45,7 @@ export const Button: FC<ButtonProps> = ({ children, variant, margin, ...props })
     default:
       return (
         <MUIButton
-          sx={{ margin: toCSSMargin(margin) }}
+          sx={{ margin: toCSSMargin(margin), textTransform: "capitalize" }}
           {...props}
           variant={variantToMUIButtonVariant[variant]}
           LinkComponent={Link}