add missing images to license modals and welcome wizard screens

web/src/pages/AddLocationPage/AddLocationPage.tsx

@@ -1,6 +1,10 @@
 import { useNavigate } from '@tanstack/react-router';
-import { type ReactNode, useMemo } from 'react';
-import type { WizardPageStep } from '../../shared/components/wizard/types';
+import { type ReactNode, useCallback, useMemo } from 'react';
+import type {
+  WizardPageStep,
+  WizardWelcomePageConfig,
+} from '../../shared/components/wizard/types';
+import { WizardCoverImage } from '../../shared/components/wizard/WizardCoverImage/WizardCoverImage';
 import { WizardPage } from '../../shared/components/wizard/WizardPage/WizardPage';
 import { AddLocationAccessStep } from './steps/AddLocationAccessStep';
 import { AddLocationFirewallStep } from './steps/AddLocationFirewallStep';
@@ -9,13 +13,37 @@ import { AddLocationMfaStep } from './steps/AddLocationMfaStep';
 import { AddLocationNetworkStep } from './steps/AddLocationNetworkStep';
 import { AddLocationServiceStep } from './steps/AddLocationServiceStep';
 import { AddLocationStartStep } from './steps/AddLocationStartStep';
+import { AddLocationWelcomeStep } from './steps/AddLocationWelcomeStep';
 import { AddLocationPageStep, type AddLocationPageStepValue } from './types';
 import { useAddLocationStore } from './useAddLocationStore';
 
 export const AddLocationPage = () => {
   const navigate = useNavigate();
   const activeStep = useAddLocationStore((s) => s.activeStep);
   const locationType = useAddLocationStore((s) => s.locationType);
+  const isWelcome = useAddLocationStore((s) => s.isWelcome);
+
+  const onClose = useCallback(() => {
+    navigate({
+      to: '/locations',
+    }).then(() => {
+      setTimeout(() => {
+        useAddLocationStore.getState().reset();
+      }, 100);
+    });
+  }, [navigate]);
+
+  const welcomeConfig = useMemo(
+    (): WizardWelcomePageConfig => ({
+      title: 'Add new location',
+      subtitle: `Welcome! Let's set up a new location to organize users, manage access, and connect gateways for activity tracking and monitoring.`,
+      content: <AddLocationWelcomeStep />,
+      displayDocs: false,
+      media: <WizardCoverImage variant="location" />,
+      onClose,
+    }),
+    [onClose],
+  );
 
   const stepsConfig = useMemo(
     (): Record<AddLocationPageStepValue, WizardPageStep> => ({
@@ -88,20 +116,14 @@ export const AddLocationPage = () => {
 
   return (
     <WizardPage
+      isOnWelcomePage={isWelcome}
       activeStep={activeStep}
-      onClose={() => {
-        navigate({
-          to: '/locations',
-        }).then(() => {
-          setTimeout(() => {
-            useAddLocationStore.getState().reset();
-          }, 100);
-        });
-      }}
+      onClose={onClose}
       subtitle="Welcome! Let's set up a new location to organize users, manage access, and connect gateways for activity tracking and monitoring."
       title="Create new location"
       steps={stepsConfig}
       id="add-location-wizard"
+      welcomePageConfig={welcomeConfig}
     >
       {stepsComponents[activeStep]}
     </WizardPage>

web/src/pages/AddLocationPage/steps/AddLocationStartStep.tsx

@@ -83,6 +83,13 @@ export const AddLocationStartStep = () => {
             {(field) => <field.FormInput required label={'Gateway port'} type="number" />}
           </form.AppField>
           <Controls>
+            <Button
+              variant="outlined"
+              text={m.controls_back()}
+              onClick={() => {
+                useAddLocationStore.setState({ isWelcome: true });
+              }}
+            />
             <div className="right">
               <Button
                 text={m.controls_continue()}

web/src/pages/AddLocationPage/steps/AddLocationWelcomeStep.tsx

@@ -0,0 +1,24 @@
+import { Controls } from '../../../shared/components/Controls/Controls';
+import { Button } from '../../../shared/defguard-ui/components/Button/Button';
+import { SizedBox } from '../../../shared/defguard-ui/components/SizedBox/SizedBox';
+import { ThemeSpacing } from '../../../shared/defguard-ui/types';
+import { useAddLocationStore } from '../useAddLocationStore';
+
+export const AddLocationWelcomeStep = () => {
+  return (
+    <>
+      <SizedBox height={ThemeSpacing.Xl} />
+      <Controls>
+        <Button
+          variant="primary"
+          text={`Create new location`}
+          onClick={() => {
+            useAddLocationStore.setState({
+              isWelcome: false,
+            });
+          }}
+        />
+      </Controls>
+    </>
+  );
+};

web/src/pages/AddLocationPage/useAddLocationStore.tsx

@@ -9,6 +9,7 @@ import {
 import { AddLocationPageStep, type AddLocationPageStepValue } from './types';
 
 type StoreValues = {
+  isWelcome: boolean;
   activeStep: AddLocationPageStepValue;
   locationType: 'regular' | 'service';
 } & EditNetworkLocation;
@@ -19,6 +20,7 @@ type StoreMethods = {
 };
 
 const defaults: StoreValues = {
+  isWelcome: true,
   locationType: 'regular',
   activeStep: AddLocationPageStep.Start,
   // form values

web/src/pages/EdgeSetupPage/EdgeSetupPage.tsx

@@ -5,13 +5,13 @@ import { m } from '../../paraglide/messages';
 import { ActionCard } from '../../shared/components/ActionCard/ActionCard';
 import { Controls } from '../../shared/components/Controls/Controls';
 import type { WizardPageStep } from '../../shared/components/wizard/types';
+import { WizardCoverImage } from '../../shared/components/wizard/WizardCoverImage/WizardCoverImage';
 import { WizardPage } from '../../shared/components/wizard/WizardPage/WizardPage';
 import { Button } from '../../shared/defguard-ui/components/Button/Button';
 import { Divider } from '../../shared/defguard-ui/components/Divider/Divider';
 import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../shared/defguard-ui/types';
 import deployImage from './assets/deploy.svg';
-import welcomeImage from './assets/welcome_image.svg';
 import { SetupConfirmationStep } from './steps/SetupConfirmationStep';
 import { SetupEdgeAdoptionStep } from './steps/SetupEdgeAdoptionStep';
 import { SetupEdgeComponentStep } from './steps/SetupEdgeComponentStep';
@@ -106,7 +106,7 @@ export const EdgeSetupPage = () => {
         content: <WelcomePageContent />,
         docsLink: 'https://docs.defguard.net/edge-component/deployment',
         docsText: m.edge_setup_welcome_docs_text(),
-        media: <img src={welcomeImage} alt={m.edge_setup_welcome_image_alt()} />,
+        media: <WizardCoverImage variant="edge" />,
         onClose: () => {
           navigate({ to: '/vpn-overview', replace: true }).then(() => {
             setTimeout(() => {