Implement how it works page

app/components/sections/CardSteps/CardSteps.container.tsx

@@ -10,7 +10,7 @@ import type { CardStepsProps } from "./CardSteps.types";
  * Composes **`cards/Step`** (Figma Card / Step), not **`progress/Stepper`**.
  */
 const CardStepsContainer = memo<CardStepsProps>(
-  ({ title, subtitle, steps, headingDesktopLines }) => {
+  ({ title, subtitle, steps, headingDesktopLines, seeHowItWorksHref }) => {
     const schemaData = useSchemaData({
       type: "HowTo",
       name: title,
@@ -29,6 +29,7 @@ const CardStepsContainer = memo<CardStepsProps>(
         subtitle={subtitle}
         steps={steps}
         headingDesktopLines={headingDesktopLines}
+        seeHowItWorksHref={seeHowItWorksHref}
         schemaJson={schemaJson}
       />
     );

app/components/sections/CardSteps/CardSteps.types.ts

@@ -11,6 +11,8 @@ export interface CardStepsProps {
   steps: CardStepsItem[];
   /** Large-screen heading split: line 1–3 (e.g. How / CommunityRule / helps). */
   headingDesktopLines?: readonly [string, string, string];
+  /** When set, the section CTA renders as a link. */
+  seeHowItWorksHref?: string;
 }
 
 export interface CardStepsViewProps extends CardStepsProps {

app/components/sections/CardSteps/CardSteps.view.tsx

@@ -11,6 +11,7 @@ function CardStepsView({
   subtitle,
   steps,
   headingDesktopLines,
+  seeHowItWorksHref,
   schemaJson,
 }: CardStepsViewProps) {
   const t = useTranslation();
@@ -47,7 +48,12 @@ function CardStepsView({
             </div>
 
             <div className="text-center">
-              <Button buttonType="outline" palette="default" size="large">
+              <Button
+                buttonType="outline"
+                palette="default"
+                size="large"
+                href={seeHowItWorksHref}
+              >
                 {t("cardSteps.buttons.seeHowItWorks")}
               </Button>
             </div>