Add: Add star and for button to Monika product card (#127)

* Add: Add star and for button to Monika product card

* fix test e2e

* fix e2e timeout

* change port e2e

Author: sintaherena

.github/workflows/e2e.yml

@@ -9,7 +9,7 @@ on:
 jobs:
   e2e:
     runs-on: ubuntu-latest
-    timeout-minutes: 15
+    timeout-minutes: 30
 
     steps:
       - name: Checkout

app/[lang]/(hyperjump)/products/data.ts

@@ -28,7 +28,10 @@ export function getCommercialProduct(lang: SupportedLanguage) {
       title: ourProductsCommercialData3Title(lang),
       description: ourProductsCommercialData3Text(lang),
       image: "/images/open-source/monika.svg",
-      url: "https://monika.hyperjump.tech/"
+      url: "https://monika.hyperjump.tech/",
+      repoUrl: "https://github.com/hyperjumptech/monika",
+      button: true,
+      repo: "monika"
     }
   ];
 }

app/[lang]/(hyperjump)/products/page.tsx

@@ -3,18 +3,13 @@ import {
   type SupportedLanguage
 } from "@/locales/.generated/types";
 import {
-  mainViewMore,
   ourProductsHeroDesc,
   ourProductsHeroHeading
 } from "@/locales/.generated/server";
 import { Metadata } from "next";
 import { dynamicOpengraph } from "@/lib/default-metadata";
-import GridItemsContainer, {
-  GridItems,
-  GridItemsMoreButton
-} from "@/app/components/grid-items";
+import GridItemsContainer, { GridItems } from "@/app/components/grid-items";
 import { getCommercialProduct, getOpenSource } from "./data";
-import data from "@/data.json";
 
 export const generateStaticParams = async () => {
   return supportedLanguages.map((lang) => ({ lang }));
@@ -53,7 +48,7 @@ export default async function OurProductsPage({ params }: OurProductsProps) {
   return (
     <main className="bg-white">
       <Hero lang={lang} />
-      <div className="xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-wrap items-center justify-center px-4 pb-6 md:px-20 xl:px-0">
+      <div className="xxl:max-w-7xl mx-auto -mt-10 flex w-full max-w-6xl flex-wrap items-center justify-center px-2 pb-6 md:px-20 xl:px-0">
         <ProductCommercial lang={lang} />
         <OpenSourceProducts lang={lang} />
       </div>
@@ -65,7 +60,7 @@ function Hero({ lang }: { lang: SupportedLanguage }) {
   return (
     <section
       id="hero"
-      className="bg-services-hero text-hyperjump-black relative h-[451px] w-full px-4 text-center">
+      className="bg-services-hero text-hyperjump-black relative h-[415px] w-full px-4 text-center">
       <div className="mx-auto flex h-full max-w-3xl flex-col items-center justify-center pt-12">
         <h1
           className="text-hyperjump-black mb-4 text-3xl font-medium sm:text-4xl md:text-[40px]"

e2e/case-study-detail.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect, Page } from "@playwright/test";
 import { getCaseStudies } from "@/app/[lang]/(hyperjump)/case-studies/data";
 
 // Base URL
@@ -28,32 +28,36 @@ const viewports = [
 ] as const;
 
 // Utility: assert all images load (no broken images)
-async function expectAllImagesLoaded(page: import("@playwright/test").Page) {
+export async function expectAllImagesLoaded(page: Page) {
   await page.waitForLoadState("networkidle");
   const main = page.locator("main");
   const images = main.locator('img, [style*="background-image"], image');
   const count = await images.count();
-  if (count === 0) {
-    return;
-  }
+
+  if (count === 0) return;
+
   for (let i = 0; i < count; i++) {
     const el = images.nth(i);
     const tag = await el.evaluate((n) => n.tagName.toLowerCase());
+
+    await expect(el, `Image #${i} not visible`).toBeVisible({ timeout: 5000 });
+
     if (tag === "img" || tag === "image") {
-      await expect(el).toBeVisible();
-      // Ensure naturalWidth > 0
       const ok = await el.evaluate(
         (img: HTMLImageElement | SVGImageElement) => {
-          // @ts-ignore
-          const nw = (img as any).naturalWidth ?? 1; // SVGImageElement may not have naturalWidth
+          // @ts-ignore — handle both <img> and SVG <image>
+          const nw = (img as any).naturalWidth ?? 1;
           // @ts-ignore
           const nh = (img as any).naturalHeight ?? 1;
-          return (nw > 0 && nh > 0) || (img as any).href?.baseVal; // allow SVG xlink:href
+          // @ts-ignore
+          const href = (img as any).href?.baseVal ?? (img as any).src ?? null;
+          return (nw > 0 && nh > 0) || Boolean(href);
         }
       );
-      expect(ok, "image failed to load or has zero natural size").toBeTruthy();
-    } else {
-      await expect(el).toBeVisible();
+      expect(
+        ok,
+        `Image #${i} failed to load or has 0x0 natural size`
+      ).toBeTruthy();
     }
   }
 }