update onboarding mobile

src/pages/onboarding/Onboarding.tsx

@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
 
 import { Button } from "@/components/buttons/Button";
@@ -12,18 +11,15 @@ import {
   useNavigateOnboarding,
   useRedirectBack,
 } from "@/pages/onboarding/onboardingHooks";
-import { Card, CardContent, Link } from "@/pages/onboarding/utils";
+import {
+  Card,
+  CardContent,
+  Link,
+  MiniCardContent,
+} from "@/pages/onboarding/utils";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
 import { getProxyUrls } from "@/utils/proxyUrls";
 
-function HorizontalLine(props: { className?: string }) {
-  return (
-    <div className={classNames("w-full grid justify-center", props.className)}>
-      <div className="h-px w-10 bg-onboarding-divider" />
-    </div>
-  );
-}
-
 export function OnboardingPage() {
   const navigate = useNavigateOnboarding();
   const skipModal = useModal("skip");
@@ -67,7 +63,8 @@ export function OnboardingPage() {
           {t("onboarding.start.explainer")}
         </Paragraph>
 
-        <div className="w-full flex flex-col md:flex-row gap-3 pb-6">
+        {/* Desktop Cards */}
+        <div className="hidden md:flex w-full flex-col md:flex-row gap-3 pb-6">
           <Card
             onClick={() => navigate("/onboarding/extension")}
             className="md:w-1/3 md:h-full"
@@ -78,7 +75,9 @@ export function OnboardingPage() {
               subtitle={t("onboarding.start.options.extension.quality")}
               description={t("onboarding.start.options.extension.description")}
             >
-              <Link>{t("onboarding.start.options.extension.action")}</Link>
+              <Link className="!text-onboarding-best">
+                {t("onboarding.start.options.extension.action")}
+              </Link>
             </CardContent>
           </Card>
           <div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
@@ -130,6 +129,49 @@ export function OnboardingPage() {
             </>
           )}
         </div>
+
+        {/* Mobile Cards */}
+        <div className="md:hidden flex w-full flex-col md:flex-row gap-3 pb-6">
+          <Card
+            onClick={() => navigate("/onboarding/extension")}
+            className="md:w-1/3 md:h-full"
+          >
+            <MiniCardContent
+              colorClass="!text-onboarding-best"
+              title={t("onboarding.start.options.extension.title")}
+              subtitle={t("onboarding.start.options.extension.quality")}
+              description={t("onboarding.start.options.extension.description")}
+            />
+          </Card>
+          <Card
+            onClick={() => navigate("/onboarding/proxy")}
+            className="md:w-1/3"
+          >
+            <MiniCardContent
+              colorClass="!text-onboarding-good"
+              title={t("onboarding.start.options.proxy.title")}
+              subtitle={t("onboarding.start.options.proxy.quality")}
+              description={t("onboarding.start.options.proxy.description")}
+            />
+          </Card>
+          {noProxies ? null : (
+            <Card
+              onClick={
+                isSafari
+                  ? () => completeAndRedirect() // Skip modal on Safari
+                  : skipModal.show // Show modal on other browsers
+              }
+              className="md:w-1/3"
+            >
+              <MiniCardContent
+                colorClass="!text-onboarding-bad"
+                title={t("onboarding.defaultConfirm.confirm")}
+                subtitle=""
+                description={t("onboarding.defaultConfirm.description")}
+              />
+            </Card>
+          )}
+        </div>
       </BiggerCenterContainer>
     </MinimalPageLayout>
   );

src/pages/onboarding/utils.tsx

@@ -60,6 +60,43 @@ export function CardContent(props: {
   );
 }
 
+export function MiniCardContent(props: {
+  title: ReactNode;
+  description: ReactNode;
+  subtitle: ReactNode;
+  colorClass: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className="grid grid-rows-[1fr,auto] h-full">
+      <div className="flex">
+        <div className="flex flex-col">
+          <Heading3
+            className={classNames(
+              "!mt-0 !mb-0 !text-xs uppercase !mr-2",
+              props.colorClass,
+            )}
+          >
+            {props.subtitle}
+          </Heading3>
+          <Heading2 className="!mb-0 !mt-1 !text-sm">{props.title}</Heading2>
+        </div>
+        <Icon
+          icon={Icons.ARROW_RIGHT}
+          className={classNames(
+            "text-3xl mb-4 ml-auto block",
+            props.colorClass,
+          )}
+        />
+      </div>
+      <Paragraph className="max-w-[320px] !my-2 text-sm">
+        {props.description}
+      </Paragraph>
+      <div className="text-sm">{props.children}</div>
+    </div>
+  );
+}
+
 export function Link(props: {
   children?: React.ReactNode;
   to?: string;