packed macos connection pics in carousel #246 (#251)

Author: akyriako

docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible.md renamed to docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible.mdx

@@ -4,6 +4,10 @@ title: Establish a Point-to-Site VPN Connection between your Development Machine
 tags: [vpc, vpn, openvpn, terraform, ansible, p2s]
 ---
 
+import React from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Carousel from '@site/src/components/Carousel';
+
 # Establish a Point-to-Site VPN Connection between your Development Machine and a VPC using Terraform and Ansible
 
 Engineers access sites from almost anywhere, earning the nickname road warriors. In order to make sure, access is as secure as possible, VPNs are a good choice. The goal of this blueprint is to deliver an easy way to setup, configure and manage an [OpenVPN](https://openvpn.net/) Server and its users. The OpenVPN Server will push a default route to its clients to make sure all traffic is routed through the VPN.
@@ -330,31 +334,22 @@ ansible-playbook -i otc-backend.ansible_inventory ansible/openvpn.yml \
   - Tests were carried out using OpenVPN Connect Version 3.7.0 (5510) on macOS Sequoia Version 15.3.2
 - Install OpenVPN Client, follow the instructions of the installer
 - Unzip the ZIP archive containing your client configuration and certificates on your local disk (e.g. Documents/VPN)
-- Start OpenVPN Connect, click on UPLOAD FILE
-
-<center>
-
-![image](/img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-GUI.png)
-
-![image](/img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-Configure.png)
-
-</center>
-
-- Navigate to the unarchived contents of your ZIP archive, and choose your `*.ovpn` file
-
-![image](/img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-Configure-Choose-ConfigDirectory.png)
-
-- Click on CONNECT
-
-<center>
-
-![image](/img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-Configure-ImportedConfig.png)
-
-![image](/img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-Connected.png)
-
-![image](/img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-NotConnected.png)
-
-</center>
+- Start OpenVPN Connect, click on UPLOAD FILE, navigate to the unarchived contents of your ZIP archive, and choose your `*.ovpn` file and then Click on CONNECT
+
+<Carousel
+ width="100%"
+  height="400px"
+  showArrows
+  showIndicators
+  className="carousel-container"
+>
+  <img src={useBaseUrl('img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-GUI.png')}  />
+  <img src={useBaseUrl('img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-Configure.png')}  />
+  <img src={useBaseUrl('img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-Configure-Choose-ConfigDirectory.png')}  />
+  <img src={useBaseUrl('img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-Configure-ImportedConfig.png')}  />
+  <img src={useBaseUrl('img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-Connected.png')}  />
+  <img src={useBaseUrl('img/docs/blueprints/by-use-case/networking/establish-a-p2s-vpn-connection-with-a-vpc-tf-ansible/MacOS-OpenVPN-Connect-NotConnected.png')}  />
+</Carousel>
 
 ## Validating Connectivity