chore: add review suggestions

Author: LeilaFarias

src/components/About/About.tsx

@@ -9,7 +9,7 @@ export const AboutSection = ({ header }: { header: { fields: any } }) => {
       <ContentWrapper>
         <Title>{title}</Title>
         <Subtitle>{subtitle}</Subtitle>
-        <LinkButton href="/" text="Saiba mais" />
+        <LinkButton href="/">Saiba mais</LinkButton>
       </ContentWrapper>
     </Wrapper>
   );

src/components/LinkButton/LinkButton.tsx

@@ -1,15 +1,15 @@
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { Icon } from "../Icon/Icon";
+import { ReactNode } from "react";
 
 export const LinkButton = ({
   href,
-  text,
+  children,
   variant = "primary",
   className = "",
 }: {
   href: string;
-  text: string;
+  children: ReactNode;
   variant?: "primary" | "secondary";
   className?: string;
 }) => {
@@ -19,15 +19,7 @@ export const LinkButton = ({
       variant={variant}
       className={`w-full md:w-auto ${className}`}
     >
-      <Link href={href}>
-        {text}
-        {variant === "secondary" && (
-          <Icon
-            id="expand"
-            className="transform -rotate-90 !w-[8px] !h-[8px]"
-          />
-        )}
-      </Link>
+      <Link href={href}>{children}</Link>
     </Button>
   );
 };

src/components/ProjectCard/ProjectCard.tsx

@@ -31,7 +31,9 @@ const ProjectCard = ({ project }: { project: { fields: Project } }) => {
           <Title>{name}</Title>
           <Description>{description}</Description>
         </TextWrapper>
-        <LinkButton href={link} text="Acessar" className="md:w-full" />
+        <LinkButton href={link} className="md:w-full">
+          Acessar
+        </LinkButton>
       </InfoWrapper>
     </Wrapper>
   );

src/components/RecentSection/RecentSection.tsx

@@ -12,6 +12,7 @@ import {
 import { Header } from "./RecentSection.styles";
 import ContentPost from "../ContentPost/ContentPost";
 import { LinkButton } from "../LinkButton/LinkButton";
+import { Icon } from "../Icon/Icon";
 
 export const RecentSection = ({
   header,
@@ -51,7 +52,13 @@ export const RecentSection = ({
             {title} <RightIcon id="expand" size={14} />
           </Title>
           <div className="hidden md:block">
-            <LinkButton href="/posts" text="Ver Todos" variant="secondary" />
+            <LinkButton href="/posts" variant="secondary">
+              Ver Todos
+              <Icon
+                id="expand"
+                className="transform -rotate-90 !w-[8px] !h-[8px]"
+              />
+            </LinkButton>
           </div>
         </Header>
         <Subtitle>{subtitle}</Subtitle>
@@ -71,7 +78,13 @@ export const RecentSection = ({
             ))}
         </Carousel>
         <div className="block md:hidden mt-6 flex justify-center w-full">
-          <LinkButton href="/posts" text="Ver Todos" variant="secondary" />
+          <LinkButton href="/posts" variant="secondary">
+            Ver Todos
+            <Icon
+              id="expand"
+              className="transform -rotate-90 !w-[8px] !h-[8px]"
+            />
+          </LinkButton>
         </div>
       </ContentWrapper>
     </Wrapper>

src/components/ui/button.tsx

@@ -10,19 +10,19 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-[var(--color-green-800)] text-white hover:bg-[var(--color-green-900)] rounded-md py-2 px-4 gap-[10px] min-w-[105px] min-h-[40px] font-sans text-sm leading-6",
+          "bg-green-800 text-white hover:bg-green-900 min-w-[105px] font-sans text-sm leading-6",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-white text-[var(--color-green-900)] border border-[var(--color-grey-200)] hover:bg-[var(--color-grey-100)] rounded-md py-2 px-4 gap-[10px] w-[126px] min-h-[40px] font-sans text-sm leading-6",
+          "bg-white text-green-900 border border-grey-200 hover:bg-grey-100 w-[126px] font-sans text-sm leading-6",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: "h-10 rounded-md px-4 py-2 gap-[10px] has-[>svg]:px-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",