fix: various fixes

Author: gregberge

app/home/features/Features.tsx

@@ -2,14 +2,13 @@ import clsx from "clsx";
 import {
   ChromeIcon,
   GalleryHorizontal,
-  GhostIcon,
+  TowerControlIcon,
   GitBranchIcon,
   GitPullRequestIcon,
   LucideIcon,
   MonitorCheckIcon,
   ScanSearchIcon,
   TabletSmartphoneIcon,
-  VibrateIcon,
   Wand2Icon,
 } from "lucide-react";
 
@@ -122,9 +121,9 @@ export function Features() {
             />
             <Separator orientation="vertical" />
             <Feature
-              title="Flaky test detection"
-              icon={GhostIcon}
-              text="Instantly identify flaky screenshots, alerting you to potential inconsistencies in your tests."
+              title="Monitoring Mode"
+              icon={TowerControlIcon}
+              text="Check visual changes to detect issues early, validate releases, and ensure integration consistency."
             />
           </Row>
         </div>

app/pricing/PricingCard.tsx

@@ -7,9 +7,9 @@ import { Button, ButtonProps } from "@/components/Button";
 import { Link } from "@/components/Link";
 import { Tooltip } from "@/components/Tooltip";
 
-import { dollarFormatter } from "./DollarFormatter";
+import { dollarFormatter, percentFormatter } from "./formatters";
 
-const PricingCardBody = twc.div`p-8 text-left text-low`;
+const PricingCardBody = twc.div`p-6 text-left text-low`;
 const Title = twc.div`mb-2 text-xl font-semibold text`;
 const Description = twc.div`my-2 h-12 last-of-type:mb-0`;
 const Badges = twc.div`block h-8`;
@@ -54,7 +54,7 @@ const PricingCard = ({
   <div
     className={clsx(
       "border-border w-full flex-1 shrink-0 basis-80 rounded-xl border bg-violet-1",
-      emphasis ? "border-2 border-violet-6 pt-4" : "md:mt-4",
+      emphasis ? "border-2 border-violet-6 pt-[calc(1rem-1px)]" : "md:mt-4",
     )}
   >
     {children}
@@ -189,11 +189,11 @@ export const PricingCards = ({
 
         <Features>
           <FeaturesCaption>Everything in Pro, plus:</FeaturesCaption>
-          <Feature>Custom amount of screenshots</Feature>
-          <Feature>Dedicated Support</Feature>
-          <Feature>GitHub SSO</Feature>
           <Feature>SAML authentication</Feature>
-          <Feature>SLA for 99.99% Uptime</Feature>
+          <Feature>Advanced access control</Feature>
+          <Feature>{percentFormatter.format(0.9999)} Uptime SLA</Feature>
+          <Feature>Onboarding and migration support</Feature>
+          <Feature>Support SLA</Feature>
         </Features>
       </PricingCardBody>
     </PricingCard>

app/pricing/PricingFaq.tsx

@@ -12,16 +12,6 @@ export const FAQ = ({
   hobbyPlanScreenshotCount: number;
 }) => (
   <Accordion type="single" collapsible className="w-full max-w-2xl text-left">
-    <AccordionItem value="apart">
-      <AccordionTrigger>
-        What sets Argos apart from other visual testing tools?
-      </AccordionTrigger>
-      <AccordionContent>
-        Argos focuses on providing a user-friendly experience with simplicity at
-        its core. Currently, our unique features include managing flaky tests,
-        and we are working on offering zero-configuration visual testing.
-      </AccordionContent>
-    </AccordionItem>
     <AccordionItem value="argos-plan">
       <AccordionTrigger>Which Argos plan is right for me?</AccordionTrigger>
       <AccordionContent>

app/pricing/PricingSlider.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import * as React from "react";
 
 import { Slider } from "../../components/Slider";
-import { dollarFormatter } from "./DollarFormatter";
+import { dollarFormatter } from "./formatters";
 
 const MIN_SCREENSHOTS = 5000;
 const MAX_SCREENSHOTS = 1000000;

app/pricing/DollarFormatter.ts renamed to app/pricing/formatters.ts

@@ -3,3 +3,8 @@ export const dollarFormatter = new Intl.NumberFormat(undefined, {
   currency: "USD",
   maximumSignificantDigits: 10,
 });
+
+export const percentFormatter = new Intl.NumberFormat(undefined, {
+  maximumSignificantDigits: 5,
+  style: 'percent'
+});

components/BrandTestimonials.tsx

@@ -17,22 +17,6 @@ import yotpo from "@/images/brands/yotpo.svg";
 
 import { Container } from "./Container";
 
-const Testimonials = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div>
-      <Container className="mx-auto mt-8 grid w-full max-w-screen-lg grid-cols-2 items-center px-5 md:grid-cols-6 md:px-0">
-        {children}
-      </Container>
-      {/* <div className="relative overflow-hidden lg:hidden">
-        <div className="flex w-max animate-[slide_20s_linear_infinite] items-baseline gap-10 pr-10">
-          {children}
-          {children}
-        </div>
-      </div> */}
-    </div>
-  );
-};
-
 export const BrandTestimonials = () => {
   return (
     <Container className="mx-auto mt-8 grid w-full max-w-screen-lg grid-cols-2 items-center justify-center gap-4 px-5 md:flex md:flex-wrap md:px-0 md:[&>*]:max-w-40">