Fix speaker CTA height

opengento · Jan 28, 2025 · 888a227 · 888a227
1 parent eab0afc
commit 888a227
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/src/components/ButtonLink/ButtonLink.tsx b/src/components/ButtonLink/ButtonLink.tsx
@@ -14,7 +14,7 @@ const ButtonLink = ({
 }: ButtonLinkProps) => {
 
   const variantClass = {
-    primary: "bg-[url(/images/background.svg)] bg-cover bg-center text-black",
+    primary: "text-black bg-[url(/images/background.svg)] bg-cover bg-center hover:bg-[left_75%]",
     secondary: "bg-white text-primary hover:bg-primary hover:text-white",
     "secondary-invert": "bg-primary text-white hover:bg-white hover:text-primary",
     "soft-pink": "bg-purple-500 text-white hover:bg-white hover:text-purple-500",
@@ -31,24 +31,26 @@ const ButtonLink = ({
     ? classNames("py-2.5", iconPosition === "left" ? "pr-5 pl-3" : "pl-5 pr-3")
     : "py-2.5 px-5";
 
-  const primaryClass: string = variant === "primary"
-    ? "rounded-3xl bg-white py-2 px-5"
-    : "";
+  const wrapperClass: string = variant === "primary"
+    ? "gap-1 rounded-3xl bg-white py-2 px-5"
+    : "gap-3 ";
 
   const renderContent = (content: ReactNode) => {
     const iconClassName: string = "inline-block p-1 rounded-full";
+    const contentClassName: string = variant === "primary"
+      ? "flex-1 bg-none bg-cover bg-center bg-clip-text group-hover:bg-gradient-to-r group-hover:from-pink-500 group-hover:to-violet-500 group-hover:text-transparent"
+      : "flex-1";
 
     if (iconPosition === "left") {
       return (
         <>
           <div className={classNames(
-            "self-start",
             iconClass[variant],
             iconClassName
           )}>
             {icon}
           </div>
-          <div className="flex-1">
+          <div className={contentClassName}>
             {content}
           </div>
         </>
@@ -57,11 +59,10 @@ const ButtonLink = ({
     if (iconPosition === "right") {
       return (
         <>
-          <div className="flex-1">
+          <div className={contentClassName}>
             {content}
           </div>
           <div className={classNames(
-            "self-end",
             iconClass[variant],
             iconClassName
           )}>
@@ -79,13 +80,13 @@ const ButtonLink = ({
           target={target}
           rel={rel}
           className={classNames(
-            "inline-block group rounded-3xl font-medium duration-300",
+            "inline-block group rounded-3xl font-semibold duration-300",
             variant === "primary" ? "p-[3px]" : paddingClass,
             variantClass[variant]
           )}>
       <div className={classNames(
-        "flex gap-3 items-center justify-between",
-        primaryClass
+        "flex items-center justify-between text-center",
+        wrapperClass
       )}>
         {renderContent(children)}
       </div>

diff --git a/src/components/Speakers/Speakers.tsx b/src/components/Speakers/Speakers.tsx
@@ -31,7 +31,7 @@ const Speakers = () => {
                 </Typography>
               </div>
             </div>
-            <div className="bg-[url(/images/pattern_speakers.svg)] bg-cover flex items-center justify-center w-full md:w-1/2">
+            <div className="bg-[url(/images/pattern_speakers.svg)] bg-cover flex items-center justify-center w-full h-64 p-5 md:h-auto md:w-1/2">
               <ButtonLink
                 variant="secondary"
                 href="https://forms.gle/M6Y8V2xP7PGw5VD8A"