Fix: Unhide "See More" button on services page (#22)

* Fix: Fix hidden see more button in services page

* fix padding in mobile

Author: sintaherena

app/(services)/services/[lang]/home.tsx

@@ -37,8 +37,12 @@ import { ServiceCard } from "../components/service-card";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import Image from "next/image";
+import { sendGAEvent } from "@next/third-parties/google";
+import data from "@/data.json";
 
 export default function Home({ lang }: { lang: SupportedLanguage }) {
+  const { gaEventName, link } = data.cta;
+
   return (
     <main className="xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-wrap items-center justify-center px-4 py-12 text-center md:px-20 xl:px-0">
       <h3 className="mb-14 text-[34px] font-medium text-hyperjump-black md:text-[40px]">
@@ -155,7 +159,17 @@ export default function Home({ lang }: { lang: SupportedLanguage }) {
             asChild
             size="lg"
             className="bg-hyperjump-blue text-base font-semibold text-white hover:bg-hyperjump-blue/90">
-            <Link href="#" target="_blank" rel="noreferrer noopener">
+            <Link
+              onClick={() => {
+                sendGAEvent({
+                  event: gaEventName,
+                  category: "engagement",
+                  label: "Services CTA"
+                });
+              }}
+              href={link}
+              target="_blank"
+              rel="noreferrer noopener">
               {servicesCtaLabel(lang)}
             </Link>
           </Button>

app/(services)/services/components/service-card.tsx

@@ -33,7 +33,7 @@ export function ServiceCard(
   return (
     <div
       className={`mb-14 flex flex-col gap-6 ${
-        withBorder ? "border-b border-gray-200 pb-14" : ""
+        withBorder ? "border-b border-gray-200 pb-7 md:pb-14" : ""
       } md:flex-row ${reverse ? "md:flex-row-reverse" : ""} items-center`}>
       <div className="relative w-full md:w-1/2">
         <Image
@@ -43,7 +43,7 @@ export function ServiceCard(
           width={660}
           height={400}
         />
-        <div className="absolute -bottom-3 left-1 rounded-md">
+        <div className="absolute -bottom-1 left-1 rounded-md">
           <Image src={icon} alt={`${title} icon`} width={80} height={80} />
         </div>
       </div>
@@ -59,7 +59,7 @@ export function ServiceCard(
           </p>
         </div>
 
-        <ul className="mb-8 list-none text-base text-gray-700 md:text-lg">
+        <ul className="list-none text-base text-gray-700 md:text-lg">
           {items.map((point, i) => (
             <li key={i} className="mb-4 flex items-start gap-2">
               <Image
@@ -72,14 +72,6 @@ export function ServiceCard(
             </li>
           ))}
         </ul>
-        <div className="md:text-left">
-          <Button
-            asChild
-            size="lg"
-            className="w-full bg-hyperjump-blue text-base font-semibold text-white hover:bg-hyperjump-blue/90 md:w-44">
-            <Link href={url}>{servicesSeeMore(lang)}</Link>
-          </Button>
-        </div>
       </div>
     </div>
   );

app/components/nav.tsx

@@ -104,7 +104,6 @@ export default function Nav({
 
                   <Button
                     asChild
-                    variant="outline"
                     className={cn(
                       isWhite
                         ? "bg-hyperjump-blue text-white hover:bg-hyperjump-blue/90"