feat add screenshot test

Author: jsfez

app/home/common/CiCheck.tsx

@@ -110,7 +110,7 @@ export function CiCheck({
       className={clsx("flex items-center gap-10", className)}
       data-visual-test="blackout"
     >
-      <Check status={status} />
+      <Check status={status} data-visual-test="blackout" />
       <div className="relative flex flex-col gap-2">
         <GitHubMark />
         <GitLabMark />

app/home/hero/Hero.tsx

@@ -89,7 +89,10 @@ export function Hero() {
                 </div>
                 <AppSvg />
               </a>
-              <AutomaticCheck className="-ml-5 mt-5" />
+              <AutomaticCheck
+                className="-ml-5 mt-5"
+                data-visual-test="blackout"
+              />
             </div>
             <BgGradient />
           </div>

app/home/visual-testing/ReviewChanges.tsx

@@ -3,8 +3,6 @@
 import clsx from "clsx";
 import * as React from "react";
 
-import { Button } from "@/components/Button";
-
 import { CiCheck } from "../common/CiCheck";
 import { ChangesSvg } from "./ChangesSvg";
 
@@ -26,7 +24,7 @@ export function ReviewChanges({ className }: { className?: string }) {
     };
   }, []);
   return (
-    <div className={clsx("relative", className)}>
+    <div className={clsx("relative", className)} data-visual-test="blackout">
       <div className="relative">
         <ChangesSvg className="mx-auto rounded border md:w-[50%]" />
       </div>

cypress/e2e/pages.cy.js

@@ -8,6 +8,7 @@ const pages = [
   { name: "blog-post-1", path: "/blog/visual-testing" },
   { name: "blog-post-2", path: "/blog/improve-dx" },
   { name: "blog-post-3", path: "/blog/playwright" },
+  { name: "blog-post-4", path: "/blog/screenshot-stabilization" },
 ];
 
 const viewports = ["macbook-16", "ipad-2", "iphone-8"];