feat: feature our integrations on homepage

app/home/featured-sdk/FeaturedSDKs.tsx

@@ -0,0 +1,130 @@
+import { ArrowUpRightIcon } from "lucide-react";
+import Image, { StaticImageData } from "next/image";
+
+import { Button } from "@/components/Button";
+import { Container } from "@/components/Container";
+import { H2 } from "@/components/H2";
+
+import cypress from "./logos/cypress.png";
+import nextjs from "./logos/next-js.png";
+import playwright from "./logos/playwright.png";
+import remix from "./logos/remix.png";
+import storybook from "./logos/storybook.png";
+import webdriverio from "./logos/webdriverio.png";
+
+function SdkCard(props: {
+  href: string;
+  imgSrc: StaticImageData;
+  title: React.ReactNode;
+  description: React.ReactNode;
+}) {
+  return (
+    <a
+      href={props.href}
+      target="_blank"
+      className="group flex flex-1 flex-col items-start rounded border p-4 transition duration-300 hover:border-violet-8 hover:bg-primary-subtle"
+    >
+      <Image
+        src={props.imgSrc}
+        alt=""
+        width={48}
+        height={48}
+        className="mb-8 origin-top-left transition duration-300 group-hover:scale-125"
+      />
+      <h3 className="mb-1 flex items-center gap-1 text-xl font-semibold">
+        {props.title}
+        <ArrowUpRightIcon className="text-low" strokeWidth={1} />
+      </h3>
+      <p className="flex-1">{props.description}</p>
+    </a>
+  );
+}
+
+export function FeaturedSDKs() {
+  return (
+    <Container asChild className="py-16 md:py-20">
+      <section>
+        <H2 className="mb-6">Setup visual testing in minutes.</H2>
+        <p className="mb-12 text-lg text-low md:text-xl">
+          Argos provides SDK integrations for test frameworks and CI/CD
+          workflows. If you can capture screenshots, Argos is ready for you.
+        </p>
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          <SdkCard
+            href="/docs/quick-start/playwright"
+            imgSrc={playwright}
+            title="Playwright"
+            description={
+              <>
+                Integrate Argos with Playwright to ensure seamless visual
+                testing across all browsers.
+              </>
+            }
+          />
+          <SdkCard
+            href="/docs/quick-start/cypress"
+            imgSrc={cypress}
+            title="Cypress"
+            description={
+              <>
+                Use Argos with Cypress to automatically detect regressions in
+                your frontend applications across all browsers.
+              </>
+            }
+          />
+          <SdkCard
+            href="/docs/quick-start/webdriverio"
+            imgSrc={webdriverio}
+            title="WebdriverIO"
+            description={
+              <>
+                Argos complements WebdriverIO for efficient cross-platform
+                visual testing on both iOS and Android devices.
+              </>
+            }
+          />
+          <SdkCard
+            href="/docs/quick-start/storybook"
+            imgSrc={storybook}
+            title="Storybook"
+            description={
+              <>
+                Leverage Argos with Storybook to visually test and catch UI
+                regressions in isolated components.
+              </>
+            }
+          />
+          <SdkCard
+            href="/docs/quick-start/next-js"
+            imgSrc={nextjs}
+            title="Next.js"
+            description={
+              <>
+                Integrate Argos with Next.js to ensure consistent visual
+                rendering in server-side and client-side React applications.
+              </>
+            }
+          />
+          <SdkCard
+            href="/docs/quick-start/remix"
+            imgSrc={remix}
+            title="Remix"
+            description={
+              <>
+                Pair Argos with Remix for robust visual testing, ensuring UI
+                consistency in your full-stack React applications.
+              </>
+            }
+          />
+        </div>
+        <div className="mt-8 flex justify-center gap-4">
+          <Button size="large" variant="outline" asChild>
+            <a target="_blank" href="https://argos-ci.com/docs/getting-started">
+              Browse all our integrations
+            </a>
+          </Button>
+        </div>
+      </section>
+    </Container>
+  );
+}

app/homepage.tsx

@@ -1,16 +1,17 @@
 import { Metadata } from "next";
 import * as React from "react";
 
+import { ArgosEmblem } from "@/components/ArgosEmblem";
+import { CallToActionSection } from "@/components/CallToActionSection";
 import { RedirectIfCookie } from "@/components/RedirectIfCookie";
 import { getMetadata } from "@/lib/metadata";
 
 import { Customers } from "./home/Customers";
 import { DemoVideo } from "./home/demo-video/demoVideo";
 import { DeveloperExperience } from "./home/developer-experience/DeveloperExperience";
+import { FeaturedSDKs } from "./home/featured-sdk/FeaturedSDKs";
 import { Features } from "./home/features/Features";
 import { Hero } from "./home/hero/Hero";
-import { Integrations } from "./home/integrations/Integrations";
-import { Playwright } from "./home/playwright/Playwright";
 import { TestDebugging } from "./home/test-debugging/TestDebugging";
 import { Users } from "./home/users/Users";
 import { VisualTesting } from "./home/visual-testing/VisualTesting";
@@ -36,8 +37,13 @@ export default function Page() {
       <DeveloperExperience />
       <TestDebugging />
       <Features />
-      <Playwright />
-      <Integrations />
+      <FeaturedSDKs />
+      <CallToActionSection
+        supercharge="your visual testing experience"
+        description="Discover why Argos is the preferred visual testing tool of developers."
+      >
+        <ArgosEmblem className="mx-auto aspect-square size-24" />
+      </CallToActionSection>
     </div>
   );
 }