Initial commit

Ecommerce/Classes/00_Base/BaseView.swift

@@ -0,0 +1,563 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class BaseView: UIViewController {
+
+	@IBOutlet var tableView: UITableView!
+
+	private var names: [String] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+		title = "List of Views"
+
+		navigationItem.largeTitleDisplayMode = .never
+		navigationItem.backBarButtonItem = UIBarButtonItem(title: "Back", style: .plain, target: nil, action: nil)
+
+		tableView.tableFooterView = UIView()
+
+		names.append("Login1View")
+		names.append("Login2View")
+		names.append("Login3View")
+		names.append("Login4View")
+		names.append("SignUp1View")
+		names.append("SignUp2View")
+		names.append("PhoneView")
+		names.append("SecureCodeView")
+		names.append("Location1View")
+		names.append("Location2View")
+		names.append("NotificationView")
+		names.append("PasscodeView")
+		names.append("PlanView")
+		names.append("Walkthrough1View")
+		names.append("Walkthrough2View")
+		names.append("Walkthrough3View")
+		names.append("Walkthrough4View")
+		names.append("Walkthrough5View")
+		names.append("Home1View")
+		names.append("Home2View")
+		names.append("Home3View")
+		names.append("Categories1View")
+		names.append("Categories2View")
+		names.append("Categories3View")
+		names.append("Categories4View")
+		names.append("Items1View")
+		names.append("Items2View")
+		names.append("Items3View")
+		names.append("Items4View")
+		names.append("Items5View")
+		names.append("Items6View")
+		names.append("Items7View")
+		names.append("Items8View")
+		names.append("Items9View")
+		names.append("Items10View")
+		names.append("Search1View")
+		names.append("Search2View")
+		names.append("ImageZoom1View")
+		names.append("ImageZoom2View")
+		names.append("Item3DTouchView")
+		names.append("ItemOptionsView")
+		names.append("ItemDescriptionView")
+		names.append("ChooseSizeView")
+		names.append("ChooseColorView")
+		names.append("SizeGuideView")
+		names.append("HowToMeasureView")
+		names.append("CompareItemsView")
+		names.append("Item1View")
+		names.append("Item2View")
+		names.append("Item3View")
+		names.append("Item4View")
+		names.append("Item5View")
+		names.append("Review1View")
+		names.append("Review2View")
+		names.append("AddReview1View")
+		names.append("AddReview2View")
+		names.append("Filters1View")
+		names.append("FiltersCategoryView")
+		names.append("SortByView")
+		names.append("Filters2View")
+		names.append("Filters3View")
+		names.append("Cart1View")
+		names.append("Cart2View")
+		names.append("Cart3View")
+		names.append("Cart4View")
+		names.append("Cart5View")
+		names.append("Payment1View")
+		names.append("Payment2View")
+		names.append("Payment3View")
+		names.append("Payment4View")
+		names.append("Shipping1View")
+		names.append("Shipping2View")
+		names.append("Shipping3View")
+		names.append("OrderInfo1View")
+		names.append("OrderInfo2View")
+		names.append("SuccessOrderView")
+		names.append("Wishlist1View")
+		names.append("Wishlist2View")
+		names.append("ContactsView")
+		names.append("FeedbackView")
+		names.append("AddGiftCardView")
+		names.append("ScanCardView")
+		names.append("SettingsView")
+		names.append("AccountView")
+		names.append("AccountDetailsView")
+		names.append("AboutView")
+	}
+}
+
+// MARK: - UITableViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension BaseView: UITableViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in tableView: UITableView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+
+		return names.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+
+		var cell: UITableViewCell! = tableView.dequeueReusableCell(withIdentifier: "cell")
+		if (cell == nil) { cell = UITableViewCell(style: .default, reuseIdentifier: "cell") }
+
+		cell.textLabel?.text = "\(indexPath.row+1). " + names[indexPath.row]
+
+		return cell
+	}
+}
+
+// MARK: - UITableViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension BaseView: UITableViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+
+		tableView.deselectRow(at: indexPath, animated: true)
+
+		switch names[indexPath.row] {
+
+			case "Login1View":
+				let login1View = Login1View()
+				login1View.isModalInPresentation = true
+				login1View.modalPresentationStyle = .fullScreen
+				present(login1View, animated: true)
+
+			case "Login2View":
+				let login2View = Login2View()
+				login2View.isModalInPresentation = true
+				login2View.modalPresentationStyle = .fullScreen
+				present(login2View, animated: true)
+
+			case "Login3View":
+				let login3View = Login3View()
+				login3View.isModalInPresentation = true
+				login3View.modalPresentationStyle = .fullScreen
+				present(login3View, animated: true)
+
+			case "Login4View":
+				let login4View = Login4View()
+				login4View.isModalInPresentation = true
+				login4View.modalPresentationStyle = .fullScreen
+				present(login4View, animated: true)
+
+			case "SignUp1View":
+				let signUp1View = SignUp1View()
+				let navigation = NavigationController(rootViewController: signUp1View)
+				navigation.isModalInPresentation = true
+				navigation.navigationBar.isTranslucent = false
+				navigation.modalPresentationStyle = .fullScreen
+				present(navigation, animated: true)
+
+			case "SignUp2View":
+				let signUp2View = SignUp2View()
+				let navigation = NavigationController(rootViewController: signUp2View)
+				navigation.isModalInPresentation = true
+				navigation.modalPresentationStyle = .fullScreen
+				present(navigation, animated: true)
+
+			case "PhoneView":
+				let phoneView = PhoneView()
+				navigationController?.pushViewController(phoneView, animated: true)
+
+			case "SecureCodeView":
+				let secureCodeView = SecureCodeView()
+				navigationController?.pushViewController(secureCodeView, animated: true)
+
+			case "Location1View":
+				let location1View = Location1View()
+				navigationController?.pushViewController(location1View, animated: true)
+
+			case "Location2View":
+				let location2View = Location2View()
+				navigationController?.pushViewController(location2View, animated: true)
+
+			case "NotificationView":
+				let notificationView = NotificationView()
+				let navigation = NavigationController(rootViewController: notificationView)
+				navigation.isModalInPresentation = true
+				navigation.modalPresentationStyle = .fullScreen
+				present(navigation, animated: true)
+
+			case "PasscodeView":
+				let passcodeView = PasscodeView()
+				let navigation = NavigationController(rootViewController: passcodeView)
+				navigation.isModalInPresentation = true
+				navigation.modalPresentationStyle = .fullScreen
+				present(navigation, animated: true)
+
+			case "PlanView":
+				let planView = PlanView()
+				navigationController?.pushViewController(planView, animated: true)
+
+			case "Walkthrough1View":
+				let walkthrough1View = Walkthrough1View()
+				let navigation = NavigationController(rootViewController: walkthrough1View)
+				navigation.isModalInPresentation = true
+				navigation.modalPresentationStyle = .fullScreen
+				present(navigation, animated: true)
+
+			case "Walkthrough2View":
+				let walkthrough2View = Walkthrough2View()
+				let navigation = NavigationController(rootViewController: walkthrough2View)
+				navigation.isModalInPresentation = true
+				navigation.modalPresentationStyle = .fullScreen
+				present(navigation, animated: true)
+
+			case "Walkthrough3View":
+				let walkthrough3View = Walkthrough3View()
+				let navigation = NavigationController(rootViewController: walkthrough3View)
+				navigation.isModalInPresentation = true
+				navigation.modalPresentationStyle = .fullScreen
+				present(navigation, animated: true)
+
+			case "Walkthrough4View":
+				let walkthrough4View = Walkthrough4View()
+				walkthrough4View.isModalInPresentation = true
+				walkthrough4View.modalPresentationStyle = .fullScreen
+				present(walkthrough4View, animated: true)
+
+			case "Walkthrough5View":
+				let walkthrough5View = Walkthrough5View()
+				walkthrough5View.isModalInPresentation = true
+				walkthrough5View.modalPresentationStyle = .fullScreen
+				present(walkthrough5View, animated: true)
+
+			case "Home1View":
+				let home1View = Home1View()
+				home1View.modalPresentationStyle = .fullScreen
+				present(home1View, animated: true)
+
+			case "Home2View":
+				let home2View = Home2View()
+				let navController = NavigationController(rootViewController: home2View)
+				navController.modalPresentationStyle = .fullScreen
+				present(navController, animated: true)
+
+			case "Home3View":
+				let home3View = Home3View()
+				let navController = NavigationController(rootViewController: home3View)
+				navController.modalPresentationStyle = .fullScreen
+				present(navController, animated: true)
+
+			case "Categories1View":
+				let categories1View = Categories1View()
+				navigationController?.pushViewController(categories1View, animated: true)
+
+			case "Categories2View":
+				let categories2View = Categories2View()
+				navigationController?.pushViewController(categories2View, animated: true)
+
+			case "Categories3View":
+				let categories3View = Categories3View()
+				navigationController?.pushViewController(categories3View, animated: true)
+
+			case "Categories4View":
+				let categories4View = Categories4View()
+				navigationController?.pushViewController(categories4View, animated: true)
+
+			case "Items1View":
+				let items1View = Items1View()
+				navigationController?.pushViewController(items1View, animated: true)
+
+			case "Items2View":
+				let items2View = Items2View()
+				navigationController?.pushViewController(items2View, animated: true)
+
+			case "Items3View":
+				let items3View = Items3View()
+				navigationController?.pushViewController(items3View, animated: true)
+
+			case "Items4View":
+				let items4View = Items4View()
+				navigationController?.pushViewController(items4View, animated: true)
+
+			case "Items5View":
+				let items5View = Items5View()
+				navigationController?.pushViewController(items5View, animated: true)
+
+			case "Items6View":
+				let items6View = Items6View()
+				navigationController?.pushViewController(items6View, animated: true)
+
+			case "Items7View":
+				let items7View = Items7View()
+				navigationController?.pushViewController(items7View, animated: true)
+
+			case "Items8View":
+				let items8View = Items8View()
+				navigationController?.pushViewController(items8View, animated: true)
+
+			case "Items9View":
+				let items9View = Items9View()
+				navigationController?.pushViewController(items9View, animated: true)
+
+			case "Items10View":
+				let items10View = Items10View()
+				navigationController?.pushViewController(items10View, animated: true)
+
+			case "Search1View":
+				let search1View = Search1View()
+				let navController = NavigationController(rootViewController: search1View)
+				navController.modalPresentationStyle = .fullScreen
+				present(navController, animated: true)
+
+			case "Search2View":
+				let search2View = Search2View()
+				let navController = NavigationController(rootViewController: search2View)
+				navController.modalPresentationStyle = .fullScreen
+				present(navController, animated: true)
+
+			case "ImageZoom1View":
+				let imageZoom1View = ImageZoom1View()
+				let navController = NavigationController(rootViewController: imageZoom1View)
+				navController.modalPresentationStyle = .fullScreen
+				present(navController, animated: true)
+
+			case "ImageZoom2View":
+				let imageZoom2View = ImageZoom2View()
+				let navController = NavigationController(rootViewController: imageZoom2View)
+				navController.modalPresentationStyle = .fullScreen
+				present(navController, animated: true)
+
+			case "Item3DTouchView":
+				let item3DTouchView = Item3DTouchView()
+				present(item3DTouchView, animated: true)
+
+			case "ItemOptionsView":
+				let itemOptionsView = ItemOptionsView()
+				present(itemOptionsView, animated: true)
+
+			case "ItemDescriptionView":
+				let itemDescriptionView = ItemDescriptionView()
+				navigationController?.pushViewController(itemDescriptionView, animated: true)
+
+			case "ChooseSizeView":
+				let chooseSizeView = ChooseSizeView()
+				present(chooseSizeView, animated: true)
+
+			case "ChooseColorView":
+				let chooseColorView = ChooseColorView()
+				present(chooseColorView, animated: true)
+
+			case "SizeGuideView":
+				let sizeGuideView = SizeGuideView()
+				navigationController?.pushViewController(sizeGuideView, animated: true)
+
+			case "HowToMeasureView":
+				let howToMeasureView = HowToMeasureView()
+				navigationController?.pushViewController(howToMeasureView, animated: true)
+
+			case "CompareItemsView":
+				let compareItemsView = CompareItemsView()
+				navigationController?.pushViewController(compareItemsView, animated: true)
+
+			case "Item1View":
+				let item1View = Item1View()
+				navigationController?.pushViewController(item1View, animated: true)
+
+			case "Item2View":
+				let item2View = Item2View()
+				navigationController?.pushViewController(item2View, animated: true)
+
+			case "Item3View":
+				let item3View = Item3View()
+				navigationController?.pushViewController(item3View, animated: true)
+
+			case "Item4View":
+				let item4View = Item4View()
+				navigationController?.pushViewController(item4View, animated: true)
+
+			case "Item5View":
+				let item5View = Item5View()
+				navigationController?.pushViewController(item5View, animated: true)
+
+			case "Review1View":
+				let review1View = Review1View()
+				navigationController?.pushViewController(review1View, animated: true)
+
+			case "Review2View":
+				let review2View = Review2View()
+				navigationController?.pushViewController(review2View, animated: true)
+
+			case "AddReview1View":
+				let addReview1View = AddReview1View()
+				present(addReview1View, animated: true)
+
+			case "AddReview2View":
+				let addReview2View = AddReview2View()
+				present(addReview2View, animated: true)
+
+			case "Filters1View":
+				let filters1View = Filters1View()
+				navigationController?.pushViewController(filters1View, animated: true)
+
+			case "FiltersCategoryView":
+				let filtersCategoryView = FiltersCategoryView()
+				navigationController?.pushViewController(filtersCategoryView, animated: true)
+
+			case "SortByView":
+				let sortByView = SortByView()
+				present(sortByView, animated: true)
+
+			case "Filters2View":
+				let filters2View = Filters2View()
+				navigationController?.pushViewController(filters2View, animated: true)
+
+			case "Filters3View":
+				let filters3View = Filters3View()
+				navigationController?.pushViewController(filters3View, animated: true)
+
+			case "Cart1View":
+				let cart1View = Cart1View()
+				let navController = NavigationController(rootViewController: cart1View)
+				navController.modalPresentationStyle = .fullScreen
+				present(navController, animated: true)
+
+			case "Cart2View":
+				let cart2View = Cart2View()
+				let navController = NavigationController(rootViewController: cart2View)
+				navController.modalPresentationStyle = .fullScreen
+				present(navController, animated: true)
+
+			case "Cart3View":
+				let cart3View = Cart3View()
+				let navController = NavigationController(rootViewController: cart3View)
+				navController.modalPresentationStyle = .fullScreen
+				present(navController, animated: true)
+
+			case "Cart4View":
+				let cart4View = Cart4View()
+				present(cart4View, animated: true)
+
+			case "Cart5View":
+				let cart5View = Cart5View()
+				present(cart5View, animated: true)
+
+			case "Payment1View":
+				let payment1View = Payment1View()
+				navigationController?.pushViewController(payment1View, animated: true)
+
+			case "Payment2View":
+				let payment2View = Payment2View()
+				navigationController?.pushViewController(payment2View, animated: true)
+
+			case "Payment3View":
+				let payment3View = Payment3View()
+				present(payment3View, animated: true)
+
+			case "Payment4View":
+				let payment4View = Payment4View()
+				present(payment4View, animated: true)
+
+			case "Shipping1View":
+				let shipping1View = Shipping1View()
+				navigationController?.pushViewController(shipping1View, animated: true)
+
+			case "Shipping2View":
+				let shipping2View = Shipping2View()
+				present(shipping2View, animated: true)
+
+			case "Shipping3View":
+				let shipping3View = Shipping3View()
+				navigationController?.pushViewController(shipping3View, animated: true)
+
+			case "OrderInfo1View":
+				let orderInfo1View = OrderInfo1View()
+				navigationController?.pushViewController(orderInfo1View, animated: true)
+
+			case "OrderInfo2View":
+				let orderInfo2View = OrderInfo2View()
+				navigationController?.pushViewController(orderInfo2View, animated: true)
+
+			case "SuccessOrderView":
+				let successOrderView = SuccessOrderView()
+				present(successOrderView, animated: true)
+
+			case "Wishlist1View":
+				let wishlist1View = Wishlist1View()
+				navigationController?.pushViewController(wishlist1View, animated: true)
+
+			case "Wishlist2View":
+				let wishlist2View = Wishlist2View()
+				let navController = NavigationController(rootViewController: wishlist2View)
+				navController.modalPresentationStyle = .fullScreen
+				present(navController, animated: true)
+
+			case "ContactsView":
+				let contactsView = ContactsView()
+				navigationController?.pushViewController(contactsView, animated: true)
+
+			case "FeedbackView":
+				let feedbackView = FeedbackView()
+				present(feedbackView, animated: true)
+
+			case "AddGiftCardView":
+				let addGiftCardView = AddGiftCardView()
+				navigationController?.pushViewController(addGiftCardView, animated: true)
+
+			case "ScanCardView":
+				let scanCardView = ScanCardView()
+				navigationController?.pushViewController(scanCardView, animated: true)
+
+			case "SettingsView":
+				let settingsView = SettingsView()
+				navigationController?.pushViewController(settingsView, animated: true)
+
+			case "AccountView":
+				let accountView = AccountView()
+				navigationController?.pushViewController(accountView, animated: true)
+
+			case "AccountDetailsView":
+				let accountDetailsView = AccountDetailsView()
+				navigationController?.pushViewController(accountDetailsView, animated: true)
+
+			case "AboutView":
+				let aboutView = AboutView()
+				navigationController?.pushViewController(aboutView, animated: true)
+
+			default:
+				break
+		}
+	}
+}

Ecommerce/Classes/00_Base/BaseView.xib

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="BaseView">
+            <connections>
+                <outlet property="tableView" destination="i5M-Pr-FkT" id="fMe-6h-afm"/>
+                <outlet property="view" destination="DFy-n0-gqW" id="U20-6M-hJi"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view contentMode="scaleToFill" id="DFy-n0-gqW">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+            <subviews>
+                <tableView opaque="NO" clipsSubviews="YES" clearsContextBeforeDrawing="NO" contentMode="scaleToFill" alwaysBounceVertical="YES" bouncesZoom="NO" style="grouped" separatorStyle="default" rowHeight="50" sectionHeaderHeight="18" sectionFooterHeight="18" translatesAutoresizingMaskIntoConstraints="NO" id="i5M-Pr-FkT">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                    <connections>
+                        <outlet property="dataSource" destination="-1" id="Tng-2m-Rnh"/>
+                        <outlet property="delegate" destination="-1" id="9aC-8N-iBw"/>
+                    </connections>
+                </tableView>
+            </subviews>
+            <color key="backgroundColor" cocoaTouchSystemColor="groupTableViewBackgroundColor"/>
+            <constraints>
+                <constraint firstItem="i5M-Pr-FkT" firstAttribute="top" secondItem="DFy-n0-gqW" secondAttribute="top" id="5k3-cA-Bwj"/>
+                <constraint firstAttribute="trailing" secondItem="i5M-Pr-FkT" secondAttribute="trailing" id="AMO-7S-PxO"/>
+                <constraint firstItem="i5M-Pr-FkT" firstAttribute="leading" secondItem="DFy-n0-gqW" secondAttribute="leading" id="DMi-TA-jwj"/>
+                <constraint firstAttribute="bottom" secondItem="i5M-Pr-FkT" secondAttribute="bottom" id="j3D-Fa-h5s"/>
+            </constraints>
+            <point key="canvasLocation" x="-105" y="154"/>
+        </view>
+    </objects>
+</document>

Ecommerce/Classes/00_Base/Utilities/AppColor.swift

@@ -0,0 +1,20 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+struct AppColor {
+
+	static let Border		= UIColor(named: "Border")!
+	static let Theme		= UIColor(named: "Theme")!
+	static let Navigation	= UIColor(named: "Navigation")!
+}

Ecommerce/Classes/00_Base/Utilities/NavController.swift

@@ -0,0 +1,55 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class NavigationController: UINavigationController {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		setNavigationBar()
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override var preferredStatusBarStyle: UIStatusBarStyle {
+
+		return .default
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func setNavigationBar() {
+
+		let compactAppearance = UINavigationBarAppearance()
+		compactAppearance.configureWithTransparentBackground()
+		compactAppearance.titleTextAttributes = [.foregroundColor: UIColor.label]
+		compactAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.label]
+		compactAppearance.backgroundColor = .systemBackground
+
+		navigationBar.isTranslucent = true
+		navigationBar.standardAppearance = compactAppearance
+		navigationBar.compactAppearance = compactAppearance
+		navigationBar.scrollEdgeAppearance = compactAppearance
+		navigationBar.tintColor = AppColor.Theme
+		navigationBar.layoutIfNeeded()
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func setBackground(color: UIColor) {
+
+		self.navigationBar.standardAppearance.backgroundColor = color
+		self.navigationBar.compactAppearance?.backgroundColor = color
+		self.navigationBar.scrollEdgeAppearance?.backgroundColor = color
+	}
+}

Ecommerce/Classes/00_Base/Utilities/UIImageView+Extension.swift

@@ -0,0 +1,28 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension UIImageView {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func sample(_ topic: String, _ subtopic: String, _ index: Int) {
+
+		let size = CGSize(width: 1, height: 1)
+		let placeholder = UIGraphicsImageRenderer(size: size).image { rendererContext in
+			UIColor.lightGray.setFill()
+			rendererContext.fill(CGRect(origin: .zero, size: size))
+		}
+
+		self.image = placeholder
+	}
+}

Ecommerce/Classes/00_Base/Utilities/UITextField+Extension.swift

@@ -0,0 +1,30 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension UITextField {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func setLeftPadding(value: Int) {
+
+		self.leftView = UIView(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: value, height: value)))
+		self.leftViewMode = .always
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func setRightPadding(value: Int) {
+
+		self.rightView = UIView(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: value, height: value)))
+		self.rightViewMode = .always
+	}
+}

Ecommerce/Classes/00_Base/Utilities/UIView+Extension.swift

@@ -0,0 +1,54 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension UIView {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBInspectable
+	var cornerRadius: CGFloat {
+
+		get {
+			return layer.cornerRadius
+		}
+		set {
+			layer.cornerRadius = newValue
+			layer.masksToBounds = newValue > 0
+		}
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBInspectable
+	var borderWidth: CGFloat {
+
+		get {
+			return layer.borderWidth
+		}
+		set {
+			layer.borderWidth = newValue
+		}
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBInspectable
+	var borderColor: UIColor? {
+
+		get {
+			let color = UIColor.init(cgColor: layer.borderColor!)
+			return color
+		}
+		set {
+			layer.borderColor = newValue?.cgColor
+		}
+	}
+}

Ecommerce/Classes/01_Login1/Login1View.swift

@@ -0,0 +1,72 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Login1View: UIViewController {
+
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelSubTitle: UILabel!
+	@IBOutlet var imageViewLogo: UIImageView!
+	@IBOutlet var textFieldEmail: UITextField!
+	@IBOutlet var textFieldPassword: UITextField!
+	@IBOutlet var buttonHideShowPassword: UIButton!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		textFieldEmail.setLeftPadding(value: 15)
+		textFieldPassword.setLeftPadding(value: 15)
+		textFieldPassword.setRightPadding(value: 40)
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		labelTitle.text = "Welcome to\nAppDesignKit"
+		labelSubTitle.text = "An exciting place for the whole family to shop."
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionHideShowPassword(_ sender: Any) {
+
+		buttonHideShowPassword.isSelected = !buttonHideShowPassword.isSelected
+		textFieldPassword.isSecureTextEntry = !buttonHideShowPassword.isSelected
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionLogin(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionForgotPassword(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionSignUp(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+}

Ecommerce/Classes/01_Login1/Login1View.xib

@@ -0,0 +1,206 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Login1View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="buttonHideShowPassword" destination="9Cr-lm-T6G" id="EPn-GM-jww"/>
+                <outlet property="imageViewLogo" destination="6mY-FI-59H" id="Nx0-aH-KPm"/>
+                <outlet property="labelSubTitle" destination="r1b-a9-nKA" id="ezO-YJ-Gtw"/>
+                <outlet property="labelTitle" destination="yio-pd-3cZ" id="XAw-ux-9tU"/>
+                <outlet property="textFieldEmail" destination="WS9-XG-Odj" id="OgW-zu-QHN"/>
+                <outlet property="textFieldPassword" destination="kEO-kg-Vqr" id="3RM-ps-d6K"/>
+                <outlet property="view" destination="uEt-Ne-Kpo" id="Fga-2G-vtP"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view opaque="NO" contentMode="scaleToFill" id="uEt-Ne-Kpo">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+            <subviews>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="yio-pd-3cZ">
+                    <rect key="frame" x="30" y="64" width="73" height="43"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <nil key="textColor"/>
+                </label>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Subtitle" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="r1b-a9-nKA">
+                    <rect key="frame" x="30" y="118" width="260" height="19.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <nil key="textColor"/>
+                </label>
+                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circles.hexagongrid.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="6mY-FI-59H">
+                    <rect key="frame" x="258" y="65" width="32" height="30"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <color key="tintColor" name="Theme"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="32" id="D0B-G6-FDj"/>
+                        <constraint firstAttribute="width" constant="32" id="flX-gX-Ww2"/>
+                    </constraints>
+                </imageView>
+                <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Email" translatesAutoresizingMaskIntoConstraints="NO" id="WS9-XG-Odj">
+                    <rect key="frame" x="30" y="233.5" width="260" height="44"/>
+                    <color key="backgroundColor" systemColor="tertiarySystemFillColor"/>
+                    <color key="tintColor" name="Theme"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="44" id="Pl3-GT-ruk"/>
+                    </constraints>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <textInputTraits key="textInputTraits" textContentType="email"/>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                </textField>
+                <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Password" translatesAutoresizingMaskIntoConstraints="NO" id="kEO-kg-Vqr">
+                    <rect key="frame" x="30" y="287.5" width="260" height="40.5"/>
+                    <color key="backgroundColor" systemColor="tertiarySystemFillColor"/>
+                    <color key="tintColor" name="Theme"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <textInputTraits key="textInputTraits" secureTextEntry="YES"/>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                </textField>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="bPQ-b5-OLK">
+                    <rect key="frame" x="30" y="348" width="260" height="48"/>
+                    <color key="backgroundColor" name="Theme"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="48" id="RBQ-zF-oYt"/>
+                    </constraints>
+                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="18"/>
+                    <state key="normal" title="Login">
+                        <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    </state>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                    <connections>
+                        <action selector="actionLogin:" destination="-1" eventType="touchUpInside" id="lNR-Mh-dSx"/>
+                    </connections>
+                </button>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="4f8-BC-Xs6">
+                    <rect key="frame" x="30" y="418" width="124" height="32"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <state key="normal" title="Fogot password?">
+                        <color key="titleColor" name="Theme"/>
+                    </state>
+                    <connections>
+                        <action selector="actionForgotPassword:" destination="-1" eventType="touchUpInside" id="7R9-br-r09"/>
+                    </connections>
+                </button>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="715-HL-vUa">
+                    <rect key="frame" x="30" y="490" width="260" height="48"/>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="16"/>
+                    <inset key="contentEdgeInsets" minX="15" minY="0.0" maxX="0.0" maxY="0.0"/>
+                    <state key="normal" title="Sign Up">
+                        <color key="titleColor" systemColor="labelColor"/>
+                    </state>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                        <userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
+                            <real key="value" value="0.5"/>
+                        </userDefinedRuntimeAttribute>
+                        <userDefinedRuntimeAttribute type="color" keyPath="borderColor">
+                            <color key="value" name="Border"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                    <connections>
+                        <action selector="actionSignUp:" destination="-1" eventType="touchUpInside" id="CsB-br-6tc"/>
+                    </connections>
+                </button>
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="chevron.right" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="P3k-01-CVK">
+                    <rect key="frame" x="262.5" y="506" width="12.5" height="16.5"/>
+                    <color key="tintColor" systemColor="secondaryLabelColor"/>
+                </imageView>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="9Cr-lm-T6G">
+                    <rect key="frame" x="248" y="287.5" width="27" height="40.5"/>
+                    <color key="tintColor" systemColor="secondaryLabelColor"/>
+                    <state key="normal" image="eye.fill" catalog="system"/>
+                    <state key="selected" image="eye.slash.fill" catalog="system"/>
+                    <connections>
+                        <action selector="actionHideShowPassword:" destination="-1" eventType="touchUpInside" id="wMn-xP-5Eh"/>
+                    </connections>
+                </button>
+            </subviews>
+            <viewLayoutGuide key="safeArea" id="Bwk-xK-TgM"/>
+            <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+            <constraints>
+                <constraint firstItem="bPQ-b5-OLK" firstAttribute="top" secondItem="kEO-kg-Vqr" secondAttribute="bottom" constant="20" id="1Su-Zu-0Fq"/>
+                <constraint firstItem="kEO-kg-Vqr" firstAttribute="leading" secondItem="WS9-XG-Odj" secondAttribute="leading" id="2EN-Yn-YM0"/>
+                <constraint firstItem="4f8-BC-Xs6" firstAttribute="leading" secondItem="bPQ-b5-OLK" secondAttribute="leading" id="5kE-Qk-5ca"/>
+                <constraint firstItem="r1b-a9-nKA" firstAttribute="leading" secondItem="yio-pd-3cZ" secondAttribute="leading" id="7kg-4y-EkG"/>
+                <constraint firstItem="yio-pd-3cZ" firstAttribute="leading" secondItem="uEt-Ne-Kpo" secondAttribute="leading" constant="30" id="8fi-Uq-y85"/>
+                <constraint firstItem="Bwk-xK-TgM" firstAttribute="bottom" secondItem="715-HL-vUa" secondAttribute="bottom" constant="30" id="EVq-0S-gfR"/>
+                <constraint firstItem="r1b-a9-nKA" firstAttribute="top" secondItem="yio-pd-3cZ" secondAttribute="bottom" constant="11" id="FNv-9R-Ix7"/>
+                <constraint firstItem="9Cr-lm-T6G" firstAttribute="centerY" secondItem="kEO-kg-Vqr" secondAttribute="centerY" id="FOs-nL-LyS"/>
+                <constraint firstItem="715-HL-vUa" firstAttribute="centerX" secondItem="uEt-Ne-Kpo" secondAttribute="centerX" id="KXv-oz-jvV"/>
+                <constraint firstItem="9Cr-lm-T6G" firstAttribute="top" secondItem="kEO-kg-Vqr" secondAttribute="top" id="Kfd-Kr-s9o"/>
+                <constraint firstItem="Bwk-xK-TgM" firstAttribute="trailing" secondItem="r1b-a9-nKA" secondAttribute="trailing" constant="30" id="Lt2-Xc-M5L"/>
+                <constraint firstItem="4f8-BC-Xs6" firstAttribute="top" secondItem="bPQ-b5-OLK" secondAttribute="bottom" constant="22" id="Ltt-r4-N3o"/>
+                <constraint firstItem="715-HL-vUa" firstAttribute="leading" secondItem="bPQ-b5-OLK" secondAttribute="leading" id="NTq-4W-adz"/>
+                <constraint firstItem="bPQ-b5-OLK" firstAttribute="leading" secondItem="kEO-kg-Vqr" secondAttribute="leading" id="OoD-rR-ysn"/>
+                <constraint firstItem="kEO-kg-Vqr" firstAttribute="height" secondItem="WS9-XG-Odj" secondAttribute="height" multiplier="0.916667" id="Wbt-Wj-bEo"/>
+                <constraint firstItem="9Cr-lm-T6G" firstAttribute="trailing" secondItem="kEO-kg-Vqr" secondAttribute="trailing" constant="-15" id="XVo-Tz-pj4"/>
+                <constraint firstItem="715-HL-vUa" firstAttribute="height" secondItem="bPQ-b5-OLK" secondAttribute="height" id="Yud-17-L3y"/>
+                <constraint firstItem="WS9-XG-Odj" firstAttribute="top" relation="greaterThanOrEqual" secondItem="r1b-a9-nKA" secondAttribute="bottom" constant="30" id="Yux-8b-3vX"/>
+                <constraint firstItem="WS9-XG-Odj" firstAttribute="leading" secondItem="Bwk-xK-TgM" secondAttribute="leading" constant="30" id="cT8-IO-pJd"/>
+                <constraint firstItem="P3k-01-CVK" firstAttribute="centerY" secondItem="715-HL-vUa" secondAttribute="centerY" id="cl5-Zu-Pua"/>
+                <constraint firstItem="715-HL-vUa" firstAttribute="trailing" secondItem="bPQ-b5-OLK" secondAttribute="trailing" id="d4F-Gz-rYG"/>
+                <constraint firstItem="WS9-XG-Odj" firstAttribute="centerY" secondItem="uEt-Ne-Kpo" secondAttribute="centerY" multiplier="0.9" id="eAq-6O-ln9"/>
+                <constraint firstItem="9Cr-lm-T6G" firstAttribute="bottom" secondItem="kEO-kg-Vqr" secondAttribute="bottom" id="gS6-oN-2rz"/>
+                <constraint firstItem="P3k-01-CVK" firstAttribute="trailing" secondItem="715-HL-vUa" secondAttribute="trailing" constant="-15" id="jFm-eZ-apb"/>
+                <constraint firstItem="6mY-FI-59H" firstAttribute="top" secondItem="yio-pd-3cZ" secondAttribute="top" id="mHb-JO-W1m"/>
+                <constraint firstItem="yio-pd-3cZ" firstAttribute="top" secondItem="Bwk-xK-TgM" secondAttribute="top" constant="64" id="oON-gH-8DU"/>
+                <constraint firstItem="Bwk-xK-TgM" firstAttribute="trailing" secondItem="WS9-XG-Odj" secondAttribute="trailing" constant="30" id="uF7-zz-j6s"/>
+                <constraint firstAttribute="trailing" secondItem="6mY-FI-59H" secondAttribute="trailing" constant="30" id="vU1-Fd-CBf"/>
+                <constraint firstItem="kEO-kg-Vqr" firstAttribute="trailing" secondItem="WS9-XG-Odj" secondAttribute="trailing" id="vbb-6o-LdR"/>
+                <constraint firstItem="kEO-kg-Vqr" firstAttribute="top" secondItem="WS9-XG-Odj" secondAttribute="bottom" constant="10" id="wp9-B1-OD9"/>
+                <constraint firstItem="bPQ-b5-OLK" firstAttribute="trailing" secondItem="kEO-kg-Vqr" secondAttribute="trailing" id="zfK-WE-rT1"/>
+            </constraints>
+            <point key="canvasLocation" x="140" y="153"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="chevron.right" catalog="system" width="96" height="128"/>
+        <image name="circles.hexagongrid.fill" catalog="system" width="128" height="112"/>
+        <image name="eye.fill" catalog="system" width="128" height="78"/>
+        <image name="eye.slash.fill" catalog="system" width="128" height="82"/>
+        <namedColor name="Border">
+            <color red="0.55699998140335083" green="0.55699998140335083" blue="0.57599997520446777" alpha="0.5" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+        <namedColor name="Theme">
+            <color red="0.045000001788139343" green="0.59799998998641968" blue="0.83499997854232788" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+        <systemColor name="labelColor">
+            <color white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+        <systemColor name="secondaryLabelColor">
+            <color red="0.23529411764705882" green="0.23529411764705882" blue="0.2627450980392157" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+        </systemColor>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+        <systemColor name="tertiarySystemFillColor">
+            <color red="0.46274509803921571" green="0.46274509803921571" blue="0.50196078431372548" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+        </systemColor>
+    </resources>
+</document>

Ecommerce/Classes/02_Login2/Login2View.swift

@@ -0,0 +1,45 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Login2View: UIViewController {
+
+	@IBOutlet var imageViewLogo: UIImageView!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelSubTitle: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		imageViewLogo.image = UIImage(systemName: "circles.hexagongrid.fill")
+		labelTitle.text = "Welcome to\nAppDesignKit"
+		labelSubTitle.text = "Meet new people with\nnew ideas and posts."
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionFacebook(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+}

Ecommerce/Classes/02_Login2/Login2View.xib

@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Login2View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="imageViewLogo" destination="X8j-wQ-QgF" id="Wd1-KN-oA0"/>
+                <outlet property="labelSubTitle" destination="zje-xy-xEx" id="TPh-Y1-hw4"/>
+                <outlet property="labelTitle" destination="Ry5-KV-B9w" id="JJR-VJ-6iM"/>
+                <outlet property="view" destination="q2w-md-8r0" id="GLH-qE-sBV"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view opaque="NO" contentMode="scaleToFill" id="q2w-md-8r0">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+            <subviews>
+                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circles.hexagongrid.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="X8j-wQ-QgF">
+                    <rect key="frame" x="30" y="66" width="32" height="30"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <color key="tintColor" name="Theme"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="32" id="DOJ-uA-Nq2"/>
+                        <constraint firstAttribute="width" constant="32" id="ZD7-no-FG7"/>
+                    </constraints>
+                </imageView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Ry5-KV-B9w">
+                    <rect key="frame" x="30" y="119" width="230" height="43"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <nil key="textColor"/>
+                </label>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Subtitle" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="zje-xy-xEx">
+                    <rect key="frame" x="30" y="173" width="260" height="19.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <nil key="textColor"/>
+                </label>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Use Facebook to find your friends" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QCB-6L-0uE">
+                    <rect key="frame" x="30" y="465" width="218" height="17"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                    <color key="textColor" systemColor="secondaryLabelColor"/>
+                </label>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="xrq-pr-zAN">
+                    <rect key="frame" x="30" y="490" width="260" height="48"/>
+                    <color key="backgroundColor" name="Theme"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="48" id="aVv-G7-n5z"/>
+                    </constraints>
+                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="16"/>
+                    <inset key="contentEdgeInsets" minX="15" minY="0.0" maxX="0.0" maxY="0.0"/>
+                    <state key="normal" title="Log In with Facebook">
+                        <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    </state>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                        <userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
+                            <real key="value" value="0.5"/>
+                        </userDefinedRuntimeAttribute>
+                        <userDefinedRuntimeAttribute type="color" keyPath="borderColor">
+                            <color key="value" name="Border"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                    <connections>
+                        <action selector="actionFacebook:" destination="-1" eventType="touchUpInside" id="aK5-VP-fnu"/>
+                    </connections>
+                </button>
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="login2_facebook.png" translatesAutoresizingMaskIntoConstraints="NO" id="eRm-Px-tDW">
+                    <rect key="frame" x="257" y="505" width="18" height="18"/>
+                    <color key="tintColor" systemColor="secondaryLabelColor"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="18" id="NdU-b3-aUN"/>
+                        <constraint firstAttribute="width" constant="18" id="SYT-ni-N4E"/>
+                    </constraints>
+                </imageView>
+            </subviews>
+            <viewLayoutGuide key="safeArea" id="gcd-wP-JGk"/>
+            <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+            <constraints>
+                <constraint firstItem="xrq-pr-zAN" firstAttribute="top" secondItem="QCB-6L-0uE" secondAttribute="bottom" constant="8" id="1w7-k0-p64"/>
+                <constraint firstItem="eRm-Px-tDW" firstAttribute="centerY" secondItem="xrq-pr-zAN" secondAttribute="centerY" id="77u-oW-VZR"/>
+                <constraint firstItem="Ry5-KV-B9w" firstAttribute="leading" secondItem="q2w-md-8r0" secondAttribute="leading" constant="30" id="EZn-Sf-FgA"/>
+                <constraint firstItem="gcd-wP-JGk" firstAttribute="trailing" secondItem="Ry5-KV-B9w" secondAttribute="trailing" constant="60" id="JU6-g9-dhE"/>
+                <constraint firstItem="Ry5-KV-B9w" firstAttribute="top" secondItem="X8j-wQ-QgF" secondAttribute="bottom" constant="22" id="OL1-xj-0Ya"/>
+                <constraint firstItem="zje-xy-xEx" firstAttribute="top" secondItem="Ry5-KV-B9w" secondAttribute="bottom" constant="11" id="Rpt-K8-BsA"/>
+                <constraint firstItem="gcd-wP-JGk" firstAttribute="trailing" secondItem="zje-xy-xEx" secondAttribute="trailing" constant="30" id="SBT-Yr-wa6"/>
+                <constraint firstItem="eRm-Px-tDW" firstAttribute="trailing" secondItem="xrq-pr-zAN" secondAttribute="trailing" constant="-15" id="T43-QW-U8i"/>
+                <constraint firstItem="QCB-6L-0uE" firstAttribute="leading" secondItem="xrq-pr-zAN" secondAttribute="leading" id="W1P-x0-TWK"/>
+                <constraint firstItem="X8j-wQ-QgF" firstAttribute="top" secondItem="gcd-wP-JGk" secondAttribute="top" constant="65" id="asa-uf-Ylv"/>
+                <constraint firstItem="X8j-wQ-QgF" firstAttribute="leading" secondItem="gcd-wP-JGk" secondAttribute="leading" constant="30" id="b9C-bM-Xt1"/>
+                <constraint firstItem="xrq-pr-zAN" firstAttribute="leading" secondItem="gcd-wP-JGk" secondAttribute="leading" constant="30" id="evS-VY-cT9"/>
+                <constraint firstItem="gcd-wP-JGk" firstAttribute="trailing" secondItem="xrq-pr-zAN" secondAttribute="trailing" constant="30" id="oRP-0Y-Bf9"/>
+                <constraint firstItem="gcd-wP-JGk" firstAttribute="bottom" secondItem="xrq-pr-zAN" secondAttribute="bottom" constant="30" id="xN3-rv-wNW"/>
+                <constraint firstItem="zje-xy-xEx" firstAttribute="leading" secondItem="Ry5-KV-B9w" secondAttribute="leading" id="yGI-3d-j5f"/>
+            </constraints>
+            <point key="canvasLocation" x="140" y="153"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="circles.hexagongrid.fill" catalog="system" width="128" height="112"/>
+        <image name="login2_facebook.png" width="18" height="18"/>
+        <namedColor name="Border">
+            <color red="0.55699998140335083" green="0.55699998140335083" blue="0.57599997520446777" alpha="0.5" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+        <namedColor name="Theme">
+            <color red="0.045000001788139343" green="0.59799998998641968" blue="0.83499997854232788" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+        <systemColor name="secondaryLabelColor">
+            <color red="0.23529411764705882" green="0.23529411764705882" blue="0.2627450980392157" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+        </systemColor>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>

Ecommerce/Classes/03_Login3/Login3View.swift

@@ -0,0 +1,64 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Login3View: UIViewController {
+
+	@IBOutlet var imageViewLogo: UIImageView!
+	@IBOutlet var labelSubTitle: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		imageViewLogo.image = UIImage(systemName: "circles.hexagongrid.fill")
+		labelSubTitle.text = "Meet new people from over millions of users. Create posts, find friends and more."
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionFacebook(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionTwitter(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionSignUp(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionLoginWithEmail(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+}

Ecommerce/Classes/03_Login3/Login3View.xib

@@ -0,0 +1,242 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina6_1" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Login3View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="imageViewLogo" destination="63A-Nw-1fp" id="JXx-bg-3Dw"/>
+                <outlet property="labelSubTitle" destination="CSQ-uk-9iJ" id="pij-qS-v6R"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circles.hexagongrid.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="63A-Nw-1fp">
+                    <rect key="frame" x="167" y="155" width="80" height="78"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <color key="tintColor" name="Theme"/>
+                    <constraints>
+                        <constraint firstAttribute="width" constant="80" id="l9Z-7o-JP6"/>
+                        <constraint firstAttribute="height" constant="80" id="pYY-96-lF3"/>
+                    </constraints>
+                </imageView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Subtitle" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="2" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="CSQ-uk-9iJ">
+                    <rect key="frame" x="30" y="266" width="354" height="21.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="18"/>
+                    <nil key="textColor"/>
+                </label>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Login with social networks" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="hT0-QJ-qme">
+                    <rect key="frame" x="122" y="609" width="170" height="17"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                    <color key="textColor" systemColor="secondaryLabelColor"/>
+                </label>
+                <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="15" translatesAutoresizingMaskIntoConstraints="NO" id="RDA-oR-XCX">
+                    <rect key="frame" x="30" y="641" width="354" height="48"/>
+                    <subviews>
+                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="zFa-0N-RhZ">
+                            <rect key="frame" x="0.0" y="0.0" width="169.5" height="48"/>
+                            <subviews>
+                                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="qjr-d7-yoJ">
+                                    <rect key="frame" x="0.0" y="0.0" width="169.5" height="48"/>
+                                    <color key="backgroundColor" name="Theme"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="48" id="wMV-fV-ngY"/>
+                                    </constraints>
+                                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="16"/>
+                                    <inset key="contentEdgeInsets" minX="15" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                    <state key="normal" title="Facebook">
+                                        <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                    </state>
+                                    <userDefinedRuntimeAttributes>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                            <real key="value" value="8"/>
+                                        </userDefinedRuntimeAttribute>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
+                                            <real key="value" value="0.5"/>
+                                        </userDefinedRuntimeAttribute>
+                                        <userDefinedRuntimeAttribute type="color" keyPath="borderColor">
+                                            <color key="value" name="Border"/>
+                                        </userDefinedRuntimeAttribute>
+                                    </userDefinedRuntimeAttributes>
+                                    <connections>
+                                        <action selector="actionFacebook:" destination="-1" eventType="touchUpInside" id="MBz-m0-xG8"/>
+                                    </connections>
+                                </button>
+                                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="login3_facebook.png" translatesAutoresizingMaskIntoConstraints="NO" id="rei-qY-sad">
+                                    <rect key="frame" x="136.5" y="15" width="18" height="18"/>
+                                    <color key="tintColor" systemColor="secondaryLabelColor"/>
+                                    <constraints>
+                                        <constraint firstAttribute="width" constant="18" id="7FL-T9-Rll"/>
+                                        <constraint firstAttribute="height" constant="18" id="sKl-RB-LY9"/>
+                                    </constraints>
+                                </imageView>
+                            </subviews>
+                            <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                            <constraints>
+                                <constraint firstAttribute="trailing" secondItem="qjr-d7-yoJ" secondAttribute="trailing" id="M7l-kR-JXI"/>
+                                <constraint firstItem="rei-qY-sad" firstAttribute="centerY" secondItem="qjr-d7-yoJ" secondAttribute="centerY" id="QOh-8g-t76"/>
+                                <constraint firstAttribute="bottom" secondItem="qjr-d7-yoJ" secondAttribute="bottom" id="R9L-tA-jms"/>
+                                <constraint firstItem="qjr-d7-yoJ" firstAttribute="top" secondItem="zFa-0N-RhZ" secondAttribute="top" id="k7t-70-Veb"/>
+                                <constraint firstItem="rei-qY-sad" firstAttribute="trailing" secondItem="qjr-d7-yoJ" secondAttribute="trailing" constant="-15" id="qfZ-iA-XnV"/>
+                                <constraint firstItem="qjr-d7-yoJ" firstAttribute="leading" secondItem="zFa-0N-RhZ" secondAttribute="leading" id="w08-0u-nyJ"/>
+                            </constraints>
+                        </view>
+                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="BHD-A0-ihZ">
+                            <rect key="frame" x="184.5" y="0.0" width="169.5" height="48"/>
+                            <subviews>
+                                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ViR-gD-X4s">
+                                    <rect key="frame" x="0.0" y="0.0" width="169.5" height="48"/>
+                                    <color key="backgroundColor" name="Theme"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="48" id="Dfo-kC-jjD"/>
+                                    </constraints>
+                                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="16"/>
+                                    <inset key="contentEdgeInsets" minX="15" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                    <state key="normal" title="Twitter">
+                                        <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                    </state>
+                                    <userDefinedRuntimeAttributes>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                            <real key="value" value="8"/>
+                                        </userDefinedRuntimeAttribute>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
+                                            <real key="value" value="0.5"/>
+                                        </userDefinedRuntimeAttribute>
+                                        <userDefinedRuntimeAttribute type="color" keyPath="borderColor">
+                                            <color key="value" name="Border"/>
+                                        </userDefinedRuntimeAttribute>
+                                    </userDefinedRuntimeAttributes>
+                                    <connections>
+                                        <action selector="actionTwitter:" destination="-1" eventType="touchUpInside" id="eCK-6b-7I8"/>
+                                    </connections>
+                                </button>
+                                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="login3_twitter.png" translatesAutoresizingMaskIntoConstraints="NO" id="Brg-WS-gBL">
+                                    <rect key="frame" x="136.5" y="15" width="18" height="18"/>
+                                    <color key="tintColor" systemColor="secondaryLabelColor"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="18" id="j4J-TI-ZPN"/>
+                                        <constraint firstAttribute="width" constant="18" id="w4v-tE-5gd"/>
+                                    </constraints>
+                                </imageView>
+                            </subviews>
+                            <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                            <constraints>
+                                <constraint firstItem="ViR-gD-X4s" firstAttribute="top" secondItem="BHD-A0-ihZ" secondAttribute="top" id="8KT-Uy-QzZ"/>
+                                <constraint firstAttribute="trailing" secondItem="ViR-gD-X4s" secondAttribute="trailing" id="Jbz-hv-8hr"/>
+                                <constraint firstItem="Brg-WS-gBL" firstAttribute="trailing" secondItem="ViR-gD-X4s" secondAttribute="trailing" constant="-15" id="MZr-Pm-3uq"/>
+                                <constraint firstItem="ViR-gD-X4s" firstAttribute="leading" secondItem="BHD-A0-ihZ" secondAttribute="leading" id="Wxz-5F-XDY"/>
+                                <constraint firstAttribute="bottom" secondItem="ViR-gD-X4s" secondAttribute="bottom" id="emY-AU-kLg"/>
+                                <constraint firstItem="Brg-WS-gBL" firstAttribute="centerY" secondItem="ViR-gD-X4s" secondAttribute="centerY" id="jaJ-dv-fju"/>
+                            </constraints>
+                        </view>
+                    </subviews>
+                </stackView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="or sign up with Email" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ywn-ie-yd2">
+                    <rect key="frame" x="140.5" y="707" width="133.5" height="17"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                    <color key="textColor" systemColor="secondaryLabelColor"/>
+                </label>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="cKg-qd-gQK">
+                    <rect key="frame" x="30" y="736" width="354" height="48"/>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="48" id="8Gn-Of-gAv"/>
+                    </constraints>
+                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="16"/>
+                    <inset key="contentEdgeInsets" minX="15" minY="0.0" maxX="0.0" maxY="0.0"/>
+                    <state key="normal" title="Sign Up">
+                        <color key="titleColor" systemColor="labelColor"/>
+                    </state>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                        <userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
+                            <real key="value" value="0.5"/>
+                        </userDefinedRuntimeAttribute>
+                        <userDefinedRuntimeAttribute type="color" keyPath="borderColor">
+                            <color key="value" name="Border"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                    <connections>
+                        <action selector="actionSignUp:" destination="-1" eventType="touchUpInside" id="Unz-QJ-LFC"/>
+                    </connections>
+                </button>
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="envelope.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="tfU-MG-atT">
+                    <rect key="frame" x="346.5" y="751.5" width="22.5" height="16.5"/>
+                    <color key="tintColor" systemColor="secondaryLabelColor"/>
+                </imageView>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="GhX-yl-kNs">
+                    <rect key="frame" x="142" y="806" width="130" height="34"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="18"/>
+                    <state key="normal" title="Login with Email">
+                        <color key="titleColor" name="Theme"/>
+                    </state>
+                    <connections>
+                        <action selector="actionLoginWithEmail:" destination="-1" eventType="touchUpInside" id="MdD-RR-kc8"/>
+                    </connections>
+                </button>
+            </subviews>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+            <constraints>
+                <constraint firstItem="tfU-MG-atT" firstAttribute="centerY" secondItem="cKg-qd-gQK" secondAttribute="centerY" id="0oc-ij-iJP"/>
+                <constraint firstItem="RDA-oR-XCX" firstAttribute="top" secondItem="hT0-QJ-qme" secondAttribute="bottom" constant="15" id="5x9-TK-FJf"/>
+                <constraint firstItem="cKg-qd-gQK" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" constant="30" id="915-ca-uff"/>
+                <constraint firstItem="RDA-oR-XCX" firstAttribute="trailing" secondItem="cKg-qd-gQK" secondAttribute="trailing" id="DdP-IJ-h13"/>
+                <constraint firstItem="63A-Nw-1fp" firstAttribute="centerX" secondItem="i5M-Pr-FkT" secondAttribute="centerX" id="EAs-Sz-GRV"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="bottom" secondItem="GhX-yl-kNs" secondAttribute="bottom" constant="22" id="HCc-8O-b2c"/>
+                <constraint firstItem="GhX-yl-kNs" firstAttribute="centerX" secondItem="i5M-Pr-FkT" secondAttribute="centerX" id="Wvl-th-cvm"/>
+                <constraint firstAttribute="trailing" secondItem="CSQ-uk-9iJ" secondAttribute="trailing" constant="30" id="a2v-t4-z7S"/>
+                <constraint firstItem="GhX-yl-kNs" firstAttribute="top" secondItem="cKg-qd-gQK" secondAttribute="bottom" constant="22" id="f6D-ch-saA"/>
+                <constraint firstItem="cKg-qd-gQK" firstAttribute="top" secondItem="ywn-ie-yd2" secondAttribute="bottom" constant="12" id="gQI-L7-5GU"/>
+                <constraint firstItem="CSQ-uk-9iJ" firstAttribute="top" secondItem="63A-Nw-1fp" secondAttribute="bottom" constant="32" id="gk0-WK-fVP"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="cKg-qd-gQK" secondAttribute="trailing" constant="30" id="jLB-bS-0k8"/>
+                <constraint firstItem="CSQ-uk-9iJ" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" constant="30" id="mbf-LJ-qhi"/>
+                <constraint firstItem="RDA-oR-XCX" firstAttribute="leading" secondItem="cKg-qd-gQK" secondAttribute="leading" id="vtM-bp-JhC"/>
+                <constraint firstItem="tfU-MG-atT" firstAttribute="trailing" secondItem="cKg-qd-gQK" secondAttribute="trailing" constant="-15" id="wHM-5B-w2j"/>
+                <constraint firstItem="63A-Nw-1fp" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" constant="110" id="xap-eh-wdg"/>
+                <constraint firstItem="ywn-ie-yd2" firstAttribute="centerX" secondItem="i5M-Pr-FkT" secondAttribute="centerX" id="xp7-Kc-d4k"/>
+                <constraint firstItem="ywn-ie-yd2" firstAttribute="top" secondItem="RDA-oR-XCX" secondAttribute="bottom" constant="18" id="z9f-V1-ifr"/>
+                <constraint firstItem="hT0-QJ-qme" firstAttribute="centerX" secondItem="i5M-Pr-FkT" secondAttribute="centerX" id="zy2-gS-3rR"/>
+            </constraints>
+            <point key="canvasLocation" x="139" y="137"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="circles.hexagongrid.fill" catalog="system" width="128" height="112"/>
+        <image name="envelope.fill" catalog="system" width="128" height="93"/>
+        <image name="login3_facebook.png" width="18" height="18"/>
+        <image name="login3_twitter.png" width="18" height="15"/>
+        <namedColor name="Border">
+            <color red="0.55699998140335083" green="0.55699998140335083" blue="0.57599997520446777" alpha="0.5" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+        <namedColor name="Theme">
+            <color red="0.045000001788139343" green="0.59799998998641968" blue="0.83499997854232788" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+        <systemColor name="labelColor">
+            <color white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+        <systemColor name="secondaryLabelColor">
+            <color red="0.23529411764705882" green="0.23529411764705882" blue="0.2627450980392157" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+        </systemColor>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>

Ecommerce/Classes/04_Login4/Login4View.swift

@@ -0,0 +1,56 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Login4View: UIViewController {
+
+	@IBOutlet var imageViewLogo: UIImageView!
+	@IBOutlet var imageViewProfile: UIButton!
+	@IBOutlet var labelName: UILabel!
+	@IBOutlet var labelEmail: UILabel!
+	@IBOutlet var buttonContinue: UIButton!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationController?.setNavigationBarHidden(true, animated: false)
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		imageViewLogo.image = UIImage(systemName: "circles.hexagongrid.fill")
+		labelName.text = "Larry Dennis"
+		labelEmail.text = "larry.dennis@mail.io"
+		buttonContinue.setTitle("Continue as Dennis", for: .normal)
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionContinue(_ sender: Any) {
+
+		print(#function)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionChooseAnother(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+}

Ecommerce/Classes/04_Login4/Login4View.xib

@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Login4View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="buttonContinue" destination="7oG-5d-M4V" id="1Gg-Pd-HiN"/>
+                <outlet property="imageViewLogo" destination="pe5-HF-3yv" id="wMY-CS-rWQ"/>
+                <outlet property="imageViewProfile" destination="GJS-y5-amw" id="kQ0-ao-f49"/>
+                <outlet property="labelEmail" destination="cTa-BS-3O0" id="lcg-jV-brk"/>
+                <outlet property="labelName" destination="ZfE-6o-Chb" id="XZn-Vy-iZr"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circles.hexagongrid.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="pe5-HF-3yv">
+                    <rect key="frame" x="140" y="66" width="40" height="38"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <color key="tintColor" name="Theme"/>
+                    <constraints>
+                        <constraint firstAttribute="width" constant="40" id="DyA-yE-peO"/>
+                        <constraint firstAttribute="height" constant="40" id="XH3-zM-r0n"/>
+                    </constraints>
+                </imageView>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="7bx-5G-LJ0">
+                    <rect key="frame" x="0.0" y="155" width="320" height="172.5"/>
+                    <subviews>
+                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="GJS-y5-amw">
+                            <rect key="frame" x="110" y="0.0" width="100" height="100"/>
+                            <color key="backgroundColor" systemColor="tertiarySystemFillColor"/>
+                            <constraints>
+                                <constraint firstAttribute="width" constant="100" id="Fwb-wQ-sKI"/>
+                                <constraint firstAttribute="height" constant="100" id="Qvk-t7-TDq"/>
+                            </constraints>
+                            <color key="tintColor" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                            <state key="normal" image="person.fill" catalog="system">
+                                <preferredSymbolConfiguration key="preferredSymbolConfiguration" configurationType="pointSize" pointSize="50"/>
+                            </state>
+                            <userDefinedRuntimeAttributes>
+                                <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                    <real key="value" value="50"/>
+                                </userDefinedRuntimeAttribute>
+                            </userDefinedRuntimeAttributes>
+                        </button>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Name" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ZfE-6o-Chb">
+                            <rect key="frame" x="30" y="112" width="260" height="36"/>
+                            <fontDescription key="fontDescription" type="boldSystem" pointSize="30"/>
+                            <nil key="textColor"/>
+                            <nil key="highlightedColor"/>
+                        </label>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Email" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="cTa-BS-3O0">
+                            <rect key="frame" x="30" y="153" width="260" height="19.5"/>
+                            <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                            <nil key="textColor"/>
+                        </label>
+                    </subviews>
+                    <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                    <constraints>
+                        <constraint firstItem="GJS-y5-amw" firstAttribute="top" secondItem="7bx-5G-LJ0" secondAttribute="top" id="9qZ-Wr-2kW"/>
+                        <constraint firstItem="cTa-BS-3O0" firstAttribute="leading" secondItem="ZfE-6o-Chb" secondAttribute="leading" id="EDa-GZ-dBo"/>
+                        <constraint firstItem="GJS-y5-amw" firstAttribute="centerX" secondItem="7bx-5G-LJ0" secondAttribute="centerX" id="G81-5W-BhG"/>
+                        <constraint firstItem="ZfE-6o-Chb" firstAttribute="leading" secondItem="7bx-5G-LJ0" secondAttribute="leading" constant="30" id="WKx-Ce-1pM"/>
+                        <constraint firstItem="ZfE-6o-Chb" firstAttribute="top" secondItem="GJS-y5-amw" secondAttribute="bottom" constant="12" id="WaR-7d-N8g"/>
+                        <constraint firstAttribute="bottom" secondItem="cTa-BS-3O0" secondAttribute="bottom" id="nC0-Lx-GW5"/>
+                        <constraint firstAttribute="trailing" secondItem="ZfE-6o-Chb" secondAttribute="trailing" constant="30" id="tse-f8-RWh"/>
+                        <constraint firstItem="cTa-BS-3O0" firstAttribute="trailing" secondItem="ZfE-6o-Chb" secondAttribute="trailing" id="vCD-8Z-mMC"/>
+                        <constraint firstItem="cTa-BS-3O0" firstAttribute="top" secondItem="ZfE-6o-Chb" secondAttribute="bottom" constant="5" id="zMU-ep-hsf"/>
+                    </constraints>
+                </view>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="7oG-5d-M4V">
+                    <rect key="frame" x="30" y="442" width="260" height="48"/>
+                    <color key="backgroundColor" name="Theme"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="48" id="GWB-xJ-D8n"/>
+                    </constraints>
+                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="18"/>
+                    <state key="normal" title="Continue as User">
+                        <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    </state>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                    <connections>
+                        <action selector="actionContinue:" destination="-1" eventType="touchUpInside" id="7GY-BN-odf"/>
+                    </connections>
+                </button>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="92A-iT-Ndq">
+                    <rect key="frame" x="61" y="512" width="198" height="34"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="18"/>
+                    <state key="normal" title="Choose another account">
+                        <color key="titleColor" name="Theme"/>
+                    </state>
+                    <connections>
+                        <action selector="actionChooseAnother:" destination="-1" eventType="touchUpInside" id="fWd-fA-OBh"/>
+                    </connections>
+                </button>
+            </subviews>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+            <constraints>
+                <constraint firstItem="pe5-HF-3yv" firstAttribute="centerX" secondItem="i5M-Pr-FkT" secondAttribute="centerX" id="6NA-z6-hZ4"/>
+                <constraint firstItem="7oG-5d-M4V" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" constant="30" id="ACc-7U-gvz"/>
+                <constraint firstItem="7bx-5G-LJ0" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="BRJ-4C-Yi5"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="bottom" secondItem="92A-iT-Ndq" secondAttribute="bottom" constant="22" id="GyJ-3x-BHr"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="7bx-5G-LJ0" secondAttribute="trailing" id="Isf-lV-aSe"/>
+                <constraint firstItem="92A-iT-Ndq" firstAttribute="centerX" secondItem="i5M-Pr-FkT" secondAttribute="centerX" id="Qgr-Ni-lTx"/>
+                <constraint firstItem="92A-iT-Ndq" firstAttribute="top" secondItem="7oG-5d-M4V" secondAttribute="bottom" constant="22" id="XAK-6h-a4E"/>
+                <constraint firstItem="pe5-HF-3yv" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" constant="65" id="ihY-kT-qqH"/>
+                <constraint firstItem="7bx-5G-LJ0" firstAttribute="centerY" secondItem="i5M-Pr-FkT" secondAttribute="centerY" multiplier="0.85" id="r4T-AF-6Kb"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="7oG-5d-M4V" secondAttribute="trailing" constant="30" id="vJ7-HW-xLn"/>
+            </constraints>
+            <point key="canvasLocation" x="139" y="137"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="circles.hexagongrid.fill" catalog="system" width="128" height="112"/>
+        <image name="person.fill" catalog="system" width="128" height="120"/>
+        <namedColor name="Theme">
+            <color red="0.045000001788139343" green="0.59799998998641968" blue="0.83499997854232788" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+        <systemColor name="tertiarySystemFillColor">
+            <color red="0.46274509803921571" green="0.46274509803921571" blue="0.50196078431372548" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+        </systemColor>
+    </resources>
+</document>

Ecommerce/Classes/05_SignUp1/SignUp1View.swift

@@ -0,0 +1,68 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class SignUp1View: UIViewController {
+
+	@IBOutlet var textFieldFirstName: UITextField!
+	@IBOutlet var textFieldLastName: UITextField!
+	@IBOutlet var textFieldEmail: UITextField!
+	@IBOutlet var textFieldPassword: UITextField!
+	@IBOutlet var textFieldPassword2: UITextField!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationController?.navigationBar.prefersLargeTitles = false
+		navigationItem.largeTitleDisplayMode = .never
+
+		navigationItem.titleView = UIImageView(image: UIImage(systemName: "circles.hexagongrid.fill"))
+
+		textFieldFirstName.setLeftPadding(value: 15)
+		textFieldLastName.setLeftPadding(value: 15)
+		textFieldEmail.setLeftPadding(value: 15)
+		textFieldPassword.setLeftPadding(value: 15)
+		textFieldPassword2.setLeftPadding(value: 15)
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionFacebook(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionContinue(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionTerms(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionPrivacy(_ sender: Any) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+}

Ecommerce/Classes/05_SignUp1/SignUp1View.xib

@@ -0,0 +1,250 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="SignUp1View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="textFieldEmail" destination="pkg-4J-ebn" id="YZb-Pj-wqc"/>
+                <outlet property="textFieldFirstName" destination="dgY-Qr-lTZ" id="uvD-hl-HT0"/>
+                <outlet property="textFieldLastName" destination="q0b-DR-rIb" id="kuh-OD-aaV"/>
+                <outlet property="textFieldPassword" destination="gmq-Sq-siN" id="is6-EG-w6z"/>
+                <outlet property="textFieldPassword2" destination="sjC-Dy-3Y1" id="1jK-n4-xkd"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Wwi-IG-GfU">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <subviews>
+                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Z1M-c2-ubJ">
+                            <rect key="frame" x="0.0" y="0.0" width="320" height="541"/>
+                            <subviews>
+                                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="a79-hw-mP9">
+                                    <rect key="frame" x="30" y="22" width="260" height="48"/>
+                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="48" id="Is4-zG-XiV"/>
+                                    </constraints>
+                                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="16"/>
+                                    <inset key="contentEdgeInsets" minX="15" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                    <state key="normal" title="Log In with Facebook">
+                                        <color key="titleColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
+                                    </state>
+                                    <userDefinedRuntimeAttributes>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                            <real key="value" value="8"/>
+                                        </userDefinedRuntimeAttribute>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
+                                            <real key="value" value="0.5"/>
+                                        </userDefinedRuntimeAttribute>
+                                        <userDefinedRuntimeAttribute type="color" keyPath="borderColor">
+                                            <color key="value" name="Border"/>
+                                        </userDefinedRuntimeAttribute>
+                                    </userDefinedRuntimeAttributes>
+                                    <connections>
+                                        <action selector="actionFacebook:" destination="-1" eventType="touchUpInside" id="vN4-4d-Efp"/>
+                                    </connections>
+                                </button>
+                                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="signup1_facebook.png" translatesAutoresizingMaskIntoConstraints="NO" id="BE4-fB-8nd">
+                                    <rect key="frame" x="257" y="37" width="18" height="18"/>
+                                    <color key="tintColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="18" id="7PZ-IZ-Fuw"/>
+                                        <constraint firstAttribute="width" constant="18" id="xI0-Qt-AJP"/>
+                                    </constraints>
+                                </imageView>
+                                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="or sign up with Email" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ujw-Pu-L1H">
+                                    <rect key="frame" x="93.5" y="88" width="133.5" height="17"/>
+                                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                                    <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                    <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                </label>
+                                <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="T8H-QV-9Lf">
+                                    <rect key="frame" x="30" y="123" width="260" height="260"/>
+                                    <subviews>
+                                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="First Name" translatesAutoresizingMaskIntoConstraints="NO" id="dgY-Qr-lTZ">
+                                            <rect key="frame" x="0.0" y="0.0" width="260" height="44"/>
+                                            <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                                            <color key="tintColor" name="Theme"/>
+                                            <constraints>
+                                                <constraint firstAttribute="height" constant="44" id="SZE-mb-q61"/>
+                                            </constraints>
+                                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                                            <textInputTraits key="textInputTraits"/>
+                                            <userDefinedRuntimeAttributes>
+                                                <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                                    <real key="value" value="8"/>
+                                                </userDefinedRuntimeAttribute>
+                                            </userDefinedRuntimeAttributes>
+                                        </textField>
+                                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Last Name" translatesAutoresizingMaskIntoConstraints="NO" id="q0b-DR-rIb">
+                                            <rect key="frame" x="0.0" y="54" width="260" height="44"/>
+                                            <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                                            <color key="tintColor" name="Theme"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                                            <textInputTraits key="textInputTraits"/>
+                                            <userDefinedRuntimeAttributes>
+                                                <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                                    <real key="value" value="8"/>
+                                                </userDefinedRuntimeAttribute>
+                                            </userDefinedRuntimeAttributes>
+                                        </textField>
+                                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Email" translatesAutoresizingMaskIntoConstraints="NO" id="pkg-4J-ebn">
+                                            <rect key="frame" x="0.0" y="108" width="260" height="44"/>
+                                            <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                                            <color key="tintColor" name="Theme"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                                            <textInputTraits key="textInputTraits" textContentType="email"/>
+                                            <userDefinedRuntimeAttributes>
+                                                <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                                    <real key="value" value="8"/>
+                                                </userDefinedRuntimeAttribute>
+                                            </userDefinedRuntimeAttributes>
+                                        </textField>
+                                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Password" translatesAutoresizingMaskIntoConstraints="NO" id="gmq-Sq-siN">
+                                            <rect key="frame" x="0.0" y="162" width="260" height="44"/>
+                                            <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                                            <color key="tintColor" name="Theme"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                                            <textInputTraits key="textInputTraits" secureTextEntry="YES"/>
+                                            <userDefinedRuntimeAttributes>
+                                                <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                                    <real key="value" value="8"/>
+                                                </userDefinedRuntimeAttribute>
+                                            </userDefinedRuntimeAttributes>
+                                        </textField>
+                                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Password" translatesAutoresizingMaskIntoConstraints="NO" id="sjC-Dy-3Y1">
+                                            <rect key="frame" x="0.0" y="216" width="260" height="44"/>
+                                            <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                                            <color key="tintColor" name="Theme"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                                            <textInputTraits key="textInputTraits" secureTextEntry="YES"/>
+                                            <userDefinedRuntimeAttributes>
+                                                <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                                    <real key="value" value="8"/>
+                                                </userDefinedRuntimeAttribute>
+                                            </userDefinedRuntimeAttributes>
+                                        </textField>
+                                    </subviews>
+                                </stackView>
+                                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="FwV-3I-GAf">
+                                    <rect key="frame" x="30" y="403" width="260" height="48"/>
+                                    <color key="backgroundColor" name="Theme"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="48" id="kqc-Xq-uvV"/>
+                                    </constraints>
+                                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="18"/>
+                                    <state key="normal" title="Continue">
+                                        <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                    </state>
+                                    <userDefinedRuntimeAttributes>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                            <real key="value" value="8"/>
+                                        </userDefinedRuntimeAttribute>
+                                    </userDefinedRuntimeAttributes>
+                                    <connections>
+                                        <action selector="actionContinue:" destination="-1" eventType="touchUpInside" id="qTb-Rv-daF"/>
+                                    </connections>
+                                </button>
+                                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="By signing up, you agree to our" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Mr1-C7-eCZ">
+                                    <rect key="frame" x="30" y="473" width="260" height="17"/>
+                                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                                    <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                    <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                </label>
+                                <stackView opaque="NO" contentMode="scaleToFill" alignment="center" translatesAutoresizingMaskIntoConstraints="NO" id="10A-B0-ahT">
+                                    <rect key="frame" x="94" y="490" width="132" height="29"/>
+                                    <subviews>
+                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="j9U-Ew-gqa">
+                                            <rect key="frame" x="0.0" y="0.0" width="40" height="29"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                            <state key="normal" title="Terms">
+                                                <color key="titleColor" name="Theme"/>
+                                            </state>
+                                            <connections>
+                                                <action selector="actionTerms:" destination="-1" eventType="touchUpInside" id="dDX-dt-eDU"/>
+                                            </connections>
+                                        </button>
+                                        <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="and" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="atL-qt-YE4">
+                                            <rect key="frame" x="40" y="6" width="44" height="17"/>
+                                            <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                            <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                        </label>
+                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="DPt-L8-NmD">
+                                            <rect key="frame" x="84" y="0.0" width="48" height="29"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                            <state key="normal" title="Privacy">
+                                                <color key="titleColor" name="Theme"/>
+                                            </state>
+                                            <connections>
+                                                <action selector="actionPrivacy:" destination="-1" eventType="touchUpInside" id="UWw-rk-xOE"/>
+                                            </connections>
+                                        </button>
+                                    </subviews>
+                                </stackView>
+                            </subviews>
+                            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                            <constraints>
+                                <constraint firstAttribute="bottom" secondItem="10A-B0-ahT" secondAttribute="bottom" constant="22" id="2hK-In-4OH"/>
+                                <constraint firstItem="FwV-3I-GAf" firstAttribute="top" secondItem="T8H-QV-9Lf" secondAttribute="bottom" constant="20" id="2yM-CE-7DL"/>
+                                <constraint firstItem="BE4-fB-8nd" firstAttribute="trailing" secondItem="a79-hw-mP9" secondAttribute="trailing" constant="-15" id="48W-nc-hwJ"/>
+                                <constraint firstItem="T8H-QV-9Lf" firstAttribute="trailing" secondItem="a79-hw-mP9" secondAttribute="trailing" id="4wi-e7-OhA"/>
+                                <constraint firstItem="Mr1-C7-eCZ" firstAttribute="leading" secondItem="FwV-3I-GAf" secondAttribute="leading" id="50Y-fq-5PO"/>
+                                <constraint firstItem="T8H-QV-9Lf" firstAttribute="top" secondItem="ujw-Pu-L1H" secondAttribute="bottom" constant="18" id="6nU-6W-vad"/>
+                                <constraint firstItem="FwV-3I-GAf" firstAttribute="trailing" secondItem="T8H-QV-9Lf" secondAttribute="trailing" id="8Mr-Uf-R51"/>
+                                <constraint firstItem="a79-hw-mP9" firstAttribute="leading" secondItem="Z1M-c2-ubJ" secondAttribute="leading" constant="30" id="91j-wE-avy"/>
+                                <constraint firstItem="ujw-Pu-L1H" firstAttribute="top" secondItem="a79-hw-mP9" secondAttribute="bottom" constant="18" id="9ns-r8-qR0"/>
+                                <constraint firstItem="FwV-3I-GAf" firstAttribute="leading" secondItem="T8H-QV-9Lf" secondAttribute="leading" id="CrX-9J-OlK"/>
+                                <constraint firstItem="a79-hw-mP9" firstAttribute="top" secondItem="Z1M-c2-ubJ" secondAttribute="top" constant="22" id="TBM-LL-Uiv"/>
+                                <constraint firstItem="Mr1-C7-eCZ" firstAttribute="trailing" secondItem="FwV-3I-GAf" secondAttribute="trailing" id="VQv-79-Si5"/>
+                                <constraint firstItem="10A-B0-ahT" firstAttribute="top" secondItem="Mr1-C7-eCZ" secondAttribute="bottom" id="ZUh-Y4-CKF"/>
+                                <constraint firstAttribute="trailing" secondItem="a79-hw-mP9" secondAttribute="trailing" constant="30" id="g2z-gr-050"/>
+                                <constraint firstItem="T8H-QV-9Lf" firstAttribute="leading" secondItem="a79-hw-mP9" secondAttribute="leading" id="lc2-JB-62r"/>
+                                <constraint firstItem="Mr1-C7-eCZ" firstAttribute="top" secondItem="FwV-3I-GAf" secondAttribute="bottom" constant="22" id="rY7-w2-4p4"/>
+                                <constraint firstItem="BE4-fB-8nd" firstAttribute="centerY" secondItem="a79-hw-mP9" secondAttribute="centerY" id="tDC-hz-eTi"/>
+                                <constraint firstItem="10A-B0-ahT" firstAttribute="centerX" secondItem="Z1M-c2-ubJ" secondAttribute="centerX" id="whs-2j-1hM"/>
+                                <constraint firstItem="ujw-Pu-L1H" firstAttribute="centerX" secondItem="Z1M-c2-ubJ" secondAttribute="centerX" id="xhH-S9-Fyb"/>
+                            </constraints>
+                        </view>
+                    </subviews>
+                    <constraints>
+                        <constraint firstItem="Z1M-c2-ubJ" firstAttribute="top" secondItem="Wwi-IG-GfU" secondAttribute="top" id="6wp-Pe-Jmi"/>
+                        <constraint firstItem="Z1M-c2-ubJ" firstAttribute="leading" secondItem="Wwi-IG-GfU" secondAttribute="leading" id="Fzy-dS-8GN"/>
+                        <constraint firstItem="Z1M-c2-ubJ" firstAttribute="width" secondItem="Wwi-IG-GfU" secondAttribute="width" id="UvA-eS-0xY"/>
+                        <constraint firstAttribute="trailing" secondItem="Z1M-c2-ubJ" secondAttribute="trailing" id="V0O-2E-2y4"/>
+                        <constraint firstAttribute="bottom" secondItem="Z1M-c2-ubJ" secondAttribute="bottom" id="ecp-4N-gRD"/>
+                    </constraints>
+                </scrollView>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="Wwi-IG-GfU" secondAttribute="trailing" id="4vC-8W-GLg"/>
+                <constraint firstItem="Wwi-IG-GfU" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="Vwx-8n-DC9"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="bottom" secondItem="Wwi-IG-GfU" secondAttribute="bottom" id="sBu-lf-9qE"/>
+                <constraint firstItem="Wwi-IG-GfU" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="wcx-JA-fMQ"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="139" y="137"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="signup1_facebook.png" width="18" height="18"/>
+        <namedColor name="Border">
+            <color red="0.55699998140335083" green="0.55699998140335083" blue="0.57599997520446777" alpha="0.5" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+        <namedColor name="Theme">
+            <color red="0.26600000262260437" green="0.61599999666213989" blue="0.75999999046325684" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/06_SignUp2/SignUp2View.swift

@@ -0,0 +1,71 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class SignUp2View: UIViewController {
+
+	@IBOutlet var imageViewProfile: UIButton!
+	@IBOutlet var textFieldFullName: UITextField!
+	@IBOutlet var textFieldEmail: UITextField!
+	@IBOutlet var textFieldPassword: UITextField!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+		title = "Sign Up"
+
+		navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "xmark"), style: .done, target: self, action: #selector(actionClose))
+
+		textFieldFullName.setLeftPadding(value: 15)
+		textFieldEmail.setLeftPadding(value: 15)
+		textFieldPassword.setLeftPadding(value: 15)
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionClose() {
+
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionImagePick(_ sender: Any) {
+
+		print(#function)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionCreateAccount(_ sender: Any) {
+
+		print(#function)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionTerms(_ sender: Any) {
+
+		print(#function)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionPrivacy(_ sender: Any) {
+
+		print(#function)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionHaveAccount(_ sender: Any) {
+
+		print(#function)
+	}
+}

Ecommerce/Classes/06_SignUp2/SignUp2View.xib

@@ -0,0 +1,237 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="SignUp2View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="imageViewProfile" destination="l8r-BB-nTm" id="Fpn-Fa-i2G"/>
+                <outlet property="textFieldEmail" destination="V0C-tj-mZw" id="7sf-MT-MYs"/>
+                <outlet property="textFieldFullName" destination="eBR-Yb-DjO" id="a9y-xO-PrY"/>
+                <outlet property="textFieldPassword" destination="w6L-bj-O22" id="mrT-yq-gP0"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="pHD-y4-Mwa">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <subviews>
+                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="O7n-3J-oGA">
+                            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                            <subviews>
+                                <button opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="l8r-BB-nTm">
+                                    <rect key="frame" x="110" y="42" width="100" height="100"/>
+                                    <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                                    <constraints>
+                                        <constraint firstAttribute="width" constant="100" id="1Bl-SU-sRU"/>
+                                        <constraint firstAttribute="height" constant="100" id="vKO-ar-Jfb"/>
+                                    </constraints>
+                                    <color key="tintColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                    <state key="normal" image="person.fill" catalog="system">
+                                        <preferredSymbolConfiguration key="preferredSymbolConfiguration" configurationType="pointSize" pointSize="50"/>
+                                    </state>
+                                    <userDefinedRuntimeAttributes>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                            <real key="value" value="50"/>
+                                        </userDefinedRuntimeAttribute>
+                                    </userDefinedRuntimeAttributes>
+                                </button>
+                                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="pVp-ll-PKc">
+                                    <rect key="frame" x="178" y="110" width="32" height="32"/>
+                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="32" id="l5Y-Bd-58U"/>
+                                        <constraint firstAttribute="width" constant="32" id="w8H-2n-4lW"/>
+                                    </constraints>
+                                    <color key="tintColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                    <state key="normal" image="camera.fill" catalog="system"/>
+                                    <userDefinedRuntimeAttributes>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
+                                            <real key="value" value="0.5"/>
+                                        </userDefinedRuntimeAttribute>
+                                        <userDefinedRuntimeAttribute type="color" keyPath="borderColor">
+                                            <color key="value" name="Border"/>
+                                        </userDefinedRuntimeAttribute>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                            <real key="value" value="16"/>
+                                        </userDefinedRuntimeAttribute>
+                                    </userDefinedRuntimeAttributes>
+                                    <connections>
+                                        <action selector="actionImagePick:" destination="-1" eventType="touchUpInside" id="6Sb-5a-YSm"/>
+                                    </connections>
+                                </button>
+                                <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="Weo-aX-MmG">
+                                    <rect key="frame" x="30" y="174" width="260" height="152"/>
+                                    <subviews>
+                                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Full Name" translatesAutoresizingMaskIntoConstraints="NO" id="eBR-Yb-DjO">
+                                            <rect key="frame" x="0.0" y="0.0" width="260" height="44"/>
+                                            <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                                            <color key="tintColor" name="Theme"/>
+                                            <constraints>
+                                                <constraint firstAttribute="height" constant="44" id="2G3-OE-bwr"/>
+                                            </constraints>
+                                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                                            <textInputTraits key="textInputTraits"/>
+                                            <userDefinedRuntimeAttributes>
+                                                <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                                    <real key="value" value="8"/>
+                                                </userDefinedRuntimeAttribute>
+                                            </userDefinedRuntimeAttributes>
+                                        </textField>
+                                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Email" translatesAutoresizingMaskIntoConstraints="NO" id="V0C-tj-mZw">
+                                            <rect key="frame" x="0.0" y="54" width="260" height="44"/>
+                                            <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                                            <color key="tintColor" name="Theme"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                                            <textInputTraits key="textInputTraits" textContentType="email"/>
+                                            <userDefinedRuntimeAttributes>
+                                                <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                                    <real key="value" value="8"/>
+                                                </userDefinedRuntimeAttribute>
+                                            </userDefinedRuntimeAttributes>
+                                        </textField>
+                                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Password" translatesAutoresizingMaskIntoConstraints="NO" id="w6L-bj-O22">
+                                            <rect key="frame" x="0.0" y="108" width="260" height="44"/>
+                                            <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                                            <color key="tintColor" name="Theme"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                                            <textInputTraits key="textInputTraits" secureTextEntry="YES"/>
+                                            <userDefinedRuntimeAttributes>
+                                                <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                                    <real key="value" value="8"/>
+                                                </userDefinedRuntimeAttribute>
+                                            </userDefinedRuntimeAttributes>
+                                        </textField>
+                                    </subviews>
+                                </stackView>
+                                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Occ-R0-LED">
+                                    <rect key="frame" x="30" y="346" width="260" height="48"/>
+                                    <color key="backgroundColor" name="Theme"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="48" id="DKD-KS-riI"/>
+                                    </constraints>
+                                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="18"/>
+                                    <state key="normal" title="Create an Account">
+                                        <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                    </state>
+                                    <userDefinedRuntimeAttributes>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                            <real key="value" value="8"/>
+                                        </userDefinedRuntimeAttribute>
+                                    </userDefinedRuntimeAttributes>
+                                    <connections>
+                                        <action selector="actionCreateAccount:" destination="-1" eventType="touchUpInside" id="HY5-iw-x2R"/>
+                                    </connections>
+                                </button>
+                                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="By signing up, you agree to our" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="vqg-Dg-geS">
+                                    <rect key="frame" x="30" y="416" width="260" height="17"/>
+                                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                                    <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                    <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                </label>
+                                <stackView opaque="NO" contentMode="scaleToFill" alignment="center" translatesAutoresizingMaskIntoConstraints="NO" id="NMC-YF-LUd">
+                                    <rect key="frame" x="94" y="433" width="132" height="29"/>
+                                    <subviews>
+                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="hOX-J7-Wjx">
+                                            <rect key="frame" x="0.0" y="0.0" width="40" height="29"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                            <state key="normal" title="Terms">
+                                                <color key="titleColor" name="Theme"/>
+                                            </state>
+                                            <connections>
+                                                <action selector="actionTerms:" destination="-1" eventType="touchUpInside" id="w8x-fO-qK9"/>
+                                            </connections>
+                                        </button>
+                                        <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="and" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="OYx-Fg-68c">
+                                            <rect key="frame" x="40" y="6" width="44" height="17"/>
+                                            <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                            <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                        </label>
+                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="fQS-pw-T6S">
+                                            <rect key="frame" x="84" y="0.0" width="48" height="29"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                            <state key="normal" title="Privacy">
+                                                <color key="titleColor" name="Theme"/>
+                                            </state>
+                                            <connections>
+                                                <action selector="actionPrivacy:" destination="-1" eventType="touchUpInside" id="ZHb-YK-fB2"/>
+                                            </connections>
+                                        </button>
+                                    </subviews>
+                                </stackView>
+                                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ApH-ml-9Ot">
+                                    <rect key="frame" x="89" y="512" width="142" height="34"/>
+                                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                                    <fontDescription key="fontDescription" type="system" pointSize="18"/>
+                                    <state key="normal" title="I have an account">
+                                        <color key="titleColor" name="Theme"/>
+                                    </state>
+                                    <connections>
+                                        <action selector="actionHaveAccount:" destination="-1" eventType="touchUpInside" id="juX-Bc-bFi"/>
+                                    </connections>
+                                </button>
+                            </subviews>
+                            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                            <constraints>
+                                <constraint firstItem="Occ-R0-LED" firstAttribute="trailing" secondItem="Weo-aX-MmG" secondAttribute="trailing" id="GU9-h8-h3X"/>
+                                <constraint firstItem="vqg-Dg-geS" firstAttribute="top" secondItem="Occ-R0-LED" secondAttribute="bottom" constant="22" id="HDt-dT-nHa"/>
+                                <constraint firstItem="ApH-ml-9Ot" firstAttribute="centerX" secondItem="O7n-3J-oGA" secondAttribute="centerX" id="Il1-lg-HgN"/>
+                                <constraint firstItem="vqg-Dg-geS" firstAttribute="trailing" secondItem="Occ-R0-LED" secondAttribute="trailing" id="J9t-tt-rWb"/>
+                                <constraint firstItem="Occ-R0-LED" firstAttribute="leading" secondItem="Weo-aX-MmG" secondAttribute="leading" id="RIO-DP-hyK"/>
+                                <constraint firstAttribute="bottom" secondItem="ApH-ml-9Ot" secondAttribute="bottom" constant="22" id="TWK-3h-EWc"/>
+                                <constraint firstItem="Weo-aX-MmG" firstAttribute="leading" secondItem="O7n-3J-oGA" secondAttribute="leading" constant="30" id="WpY-e8-56m"/>
+                                <constraint firstAttribute="trailing" secondItem="Weo-aX-MmG" secondAttribute="trailing" constant="30" id="XEH-Jt-xDo"/>
+                                <constraint firstItem="NMC-YF-LUd" firstAttribute="centerX" secondItem="O7n-3J-oGA" secondAttribute="centerX" id="XKd-Zw-OZn"/>
+                                <constraint firstItem="pVp-ll-PKc" firstAttribute="trailing" secondItem="l8r-BB-nTm" secondAttribute="trailing" id="Zik-vq-edo"/>
+                                <constraint firstItem="Weo-aX-MmG" firstAttribute="top" secondItem="l8r-BB-nTm" secondAttribute="bottom" constant="32" id="anU-rO-Kkn"/>
+                                <constraint firstItem="pVp-ll-PKc" firstAttribute="bottom" secondItem="l8r-BB-nTm" secondAttribute="bottom" id="faf-Pt-Ynb"/>
+                                <constraint firstItem="NMC-YF-LUd" firstAttribute="top" secondItem="vqg-Dg-geS" secondAttribute="bottom" id="hac-Pp-uit"/>
+                                <constraint firstItem="vqg-Dg-geS" firstAttribute="leading" secondItem="Occ-R0-LED" secondAttribute="leading" id="itI-yF-GCC"/>
+                                <constraint firstItem="l8r-BB-nTm" firstAttribute="centerX" secondItem="O7n-3J-oGA" secondAttribute="centerX" id="n4T-z5-y50"/>
+                                <constraint firstItem="l8r-BB-nTm" firstAttribute="top" secondItem="O7n-3J-oGA" secondAttribute="top" constant="42" id="u4Z-Fz-jSB"/>
+                                <constraint firstItem="Occ-R0-LED" firstAttribute="top" secondItem="Weo-aX-MmG" secondAttribute="bottom" constant="20" id="z8h-Gb-pJz"/>
+                            </constraints>
+                        </view>
+                    </subviews>
+                    <constraints>
+                        <constraint firstItem="O7n-3J-oGA" firstAttribute="leading" secondItem="pHD-y4-Mwa" secondAttribute="leading" id="6vC-pK-UXk"/>
+                        <constraint firstItem="O7n-3J-oGA" firstAttribute="top" secondItem="pHD-y4-Mwa" secondAttribute="top" id="Cbe-hE-dC9"/>
+                        <constraint firstItem="O7n-3J-oGA" firstAttribute="height" secondItem="pHD-y4-Mwa" secondAttribute="height" id="VHt-yc-NFk"/>
+                        <constraint firstItem="O7n-3J-oGA" firstAttribute="width" secondItem="pHD-y4-Mwa" secondAttribute="width" id="fEA-YR-j8P"/>
+                        <constraint firstAttribute="trailing" secondItem="O7n-3J-oGA" secondAttribute="trailing" id="lNE-2S-hqU"/>
+                        <constraint firstAttribute="bottom" secondItem="O7n-3J-oGA" secondAttribute="bottom" id="rf3-7U-5VJ"/>
+                    </constraints>
+                </scrollView>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="pHD-y4-Mwa" secondAttribute="trailing" id="BEQ-lL-gml"/>
+                <constraint firstItem="pHD-y4-Mwa" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="R1n-Fz-50v"/>
+                <constraint firstItem="pHD-y4-Mwa" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="jYH-08-9Eh"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="bottom" secondItem="pHD-y4-Mwa" secondAttribute="bottom" id="lOD-cn-l8B"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="138.40000000000001" y="136.28185907046478"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="camera.fill" catalog="system" width="64" height="48"/>
+        <image name="person.fill" catalog="system" width="64" height="60"/>
+        <namedColor name="Border">
+            <color red="0.55699998140335083" green="0.55699998140335083" blue="0.57599997520446777" alpha="0.5" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+        <namedColor name="Theme">
+            <color red="0.045000001788139343" green="0.59799998998641968" blue="0.83499997854232788" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/07_Phone/PhoneView.swift

@@ -0,0 +1,126 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class PhoneView: UIViewController {
+
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelSubTitle: UILabel!
+	@IBOutlet var textFieldCountry: UITextField!
+	@IBOutlet var textFieldPhoneNumber: UITextField!
+
+	var countries: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationItem.titleView = UIImageView(image: UIImage(systemName: "circles.hexagongrid.fill"))
+		navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Continue", style: .done, target: self, action: #selector(actionContinue))
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		countries.removeAll()
+
+		if let url = Bundle.main.url(forResource: "phone_countyCode", withExtension: "json") {
+			do {
+				let data = try Data(contentsOf: url)
+				let object = try JSONSerialization.jsonObject(with: data, options: .allowFragments)
+				if let dictionary = object as? [[String: String]] {
+					countries = dictionary
+				}
+			} catch {
+			}
+		}
+
+		labelTitle.text = "Start with\nphone number"
+		labelSubTitle.text = "Please enter your mobile number to get sms for activate your account."
+		textFieldCountry.text = "+816"
+		textFieldPhoneNumber.text = "770 90 87"
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionContinue() {
+
+		print(#function)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionCountries(_ sender: Any) {
+
+		showPickerView(title: "Select country")
+	}
+
+	// MARK: - Picker methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func showPickerView(title: String) {
+
+		let alertView = UIAlertController(title: title, message: nil, preferredStyle: .actionSheet)
+
+		let height:NSLayoutConstraint = NSLayoutConstraint(item: alertView.view!, attribute: NSLayoutConstraint.Attribute.height, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 300)
+		alertView.view.addConstraint(height)
+
+		let pickerview = UIPickerView(frame: CGRect(x: 0, y: 35, width: alertView.view.frame.size.width - 16, height: 200))
+		pickerview.delegate = self
+		pickerview.dataSource = self
+
+		alertView.view.addSubview(pickerview)
+
+		alertView.addAction(UIAlertAction(title: "OK", style: .cancel, handler: { action in
+			self.textFieldCountry.text = self.countries[pickerview.selectedRow(inComponent: 0)]["dial_code"]
+		}))
+		present(alertView, animated: true, completion: nil)
+	}
+}
+
+// MARK: - UIPickerViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension PhoneView: UIPickerViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
+
+		let country = countries[row]
+		return "\(country["name"] ?? "") (\(country["dial_code"] ?? ""))"
+	}
+}
+
+// MARK: - UIPickerViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension PhoneView: UIPickerViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfComponents(in pickerView: UIPickerView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
+
+		return countries.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
+
+		return 30.0
+	}
+}

Ecommerce/Classes/07_Phone/PhoneView.xib

@@ -0,0 +1,148 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="PhoneView" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="labelSubTitle" destination="H4j-IJ-ISO" id="4QS-9C-3dG"/>
+                <outlet property="labelTitle" destination="2w5-JO-mnL" id="5JX-Gw-fRl"/>
+                <outlet property="textFieldCountry" destination="Zoa-bg-rTf" id="UHU-Lm-7fj"/>
+                <outlet property="textFieldPhoneNumber" destination="db9-SK-nwZ" id="517-1V-0pi"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="phone.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="1QD-8D-Ucj">
+                    <rect key="frame" x="220" y="31.5" width="60" height="57.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <color key="tintColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstAttribute="width" constant="60" id="4cm-Zv-ESn"/>
+                        <constraint firstAttribute="height" constant="60" id="k23-kY-61v"/>
+                    </constraints>
+                </imageView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="2w5-JO-mnL">
+                    <rect key="frame" x="30" y="80" width="230" height="43"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <nil key="textColor"/>
+                </label>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Subtitle" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="H4j-IJ-ISO">
+                    <rect key="frame" x="30" y="134" width="260" height="19.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <nil key="textColor"/>
+                </label>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="in1-9i-YwO">
+                    <rect key="frame" x="30" y="195.5" width="96" height="70"/>
+                    <subviews>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Country" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="PQ6-Xg-jd3">
+                            <rect key="frame" x="15" y="12" width="45.5" height="14.5"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="12"/>
+                            <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                            <nil key="highlightedColor"/>
+                        </label>
+                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Code" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="Zoa-bg-rTf">
+                            <rect key="frame" x="15" y="31.5" width="66" height="26.5"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                            <textInputTraits key="textInputTraits"/>
+                        </textField>
+                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="right" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="GOT-Ym-IwK">
+                            <rect key="frame" x="0.0" y="0.0" width="96" height="70"/>
+                            <color key="tintColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                            <inset key="contentEdgeInsets" minX="0.0" minY="0.0" maxX="12" maxY="0.0"/>
+                            <state key="normal" image="chevron.down.circle.fill" catalog="system">
+                                <preferredSymbolConfiguration key="preferredSymbolConfiguration" configurationType="pointSize" pointSize="12"/>
+                            </state>
+                            <connections>
+                                <action selector="actionCountries:" destination="-1" eventType="touchUpInside" id="mh6-BN-7j5"/>
+                            </connections>
+                        </button>
+                    </subviews>
+                    <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstItem="GOT-Ym-IwK" firstAttribute="top" secondItem="in1-9i-YwO" secondAttribute="top" id="1WD-AE-fkF"/>
+                        <constraint firstItem="PQ6-Xg-jd3" firstAttribute="top" secondItem="in1-9i-YwO" secondAttribute="top" constant="12" id="5zU-nc-GEM"/>
+                        <constraint firstItem="Zoa-bg-rTf" firstAttribute="top" secondItem="PQ6-Xg-jd3" secondAttribute="bottom" constant="5" id="EfB-t3-ekl"/>
+                        <constraint firstAttribute="bottom" secondItem="GOT-Ym-IwK" secondAttribute="bottom" id="QMn-Ya-Ttj"/>
+                        <constraint firstItem="PQ6-Xg-jd3" firstAttribute="leading" secondItem="in1-9i-YwO" secondAttribute="leading" constant="15" id="Sne-3p-gr2"/>
+                        <constraint firstAttribute="height" constant="70" id="cL2-GB-b3G"/>
+                        <constraint firstItem="Zoa-bg-rTf" firstAttribute="leading" secondItem="in1-9i-YwO" secondAttribute="leading" constant="15" id="g7q-fD-5AJ"/>
+                        <constraint firstAttribute="bottom" secondItem="Zoa-bg-rTf" secondAttribute="bottom" constant="12" id="kc5-s7-YTm"/>
+                        <constraint firstItem="GOT-Ym-IwK" firstAttribute="leading" secondItem="in1-9i-YwO" secondAttribute="leading" id="qkK-Hk-5qs"/>
+                        <constraint firstAttribute="trailing" secondItem="GOT-Ym-IwK" secondAttribute="trailing" id="tmE-nM-jQ7"/>
+                        <constraint firstAttribute="trailing" secondItem="Zoa-bg-rTf" secondAttribute="trailing" constant="15" id="ypY-EY-Ccd"/>
+                    </constraints>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                </view>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="0ja-n3-bUC">
+                    <rect key="frame" x="138" y="195.5" width="152" height="70"/>
+                    <subviews>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Phone Number" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="b1Z-tT-XlI">
+                            <rect key="frame" x="15" y="12" width="84.5" height="14.5"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="12"/>
+                            <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                            <nil key="highlightedColor"/>
+                        </label>
+                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Number" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="db9-SK-nwZ">
+                            <rect key="frame" x="15" y="31.5" width="122" height="26.5"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                            <textInputTraits key="textInputTraits"/>
+                        </textField>
+                    </subviews>
+                    <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstItem="b1Z-tT-XlI" firstAttribute="leading" secondItem="0ja-n3-bUC" secondAttribute="leading" constant="15" id="3rO-8M-QMJ"/>
+                        <constraint firstItem="db9-SK-nwZ" firstAttribute="top" secondItem="b1Z-tT-XlI" secondAttribute="bottom" constant="5" id="5cf-y2-GbT"/>
+                        <constraint firstItem="db9-SK-nwZ" firstAttribute="leading" secondItem="0ja-n3-bUC" secondAttribute="leading" constant="15" id="94C-A6-mq3"/>
+                        <constraint firstAttribute="bottom" secondItem="db9-SK-nwZ" secondAttribute="bottom" constant="12" id="O0F-Ma-PTy"/>
+                        <constraint firstAttribute="trailing" secondItem="db9-SK-nwZ" secondAttribute="trailing" constant="15" id="Ti1-mT-RIE"/>
+                        <constraint firstItem="b1Z-tT-XlI" firstAttribute="top" secondItem="0ja-n3-bUC" secondAttribute="top" constant="12" id="mdD-bf-kIP"/>
+                    </constraints>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                </view>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="0ja-n3-bUC" firstAttribute="leading" secondItem="in1-9i-YwO" secondAttribute="trailing" constant="12" id="1ae-Xx-gKB"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="0ja-n3-bUC" secondAttribute="trailing" constant="30" id="1om-AS-ou3"/>
+                <constraint firstItem="1QD-8D-Ucj" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" constant="30" id="5gA-R8-RHI"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="2w5-JO-mnL" secondAttribute="trailing" constant="60" id="CsH-ep-qyT"/>
+                <constraint firstItem="0ja-n3-bUC" firstAttribute="top" secondItem="in1-9i-YwO" secondAttribute="top" id="Ewe-Vq-XsM"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="H4j-IJ-ISO" secondAttribute="trailing" constant="30" id="H0s-ZP-oo0"/>
+                <constraint firstItem="in1-9i-YwO" firstAttribute="top" secondItem="H4j-IJ-ISO" secondAttribute="bottom" constant="42" id="JvQ-jx-YOF"/>
+                <constraint firstItem="H4j-IJ-ISO" firstAttribute="top" secondItem="2w5-JO-mnL" secondAttribute="bottom" constant="11" id="MfY-nw-BBX"/>
+                <constraint firstItem="0ja-n3-bUC" firstAttribute="bottom" secondItem="in1-9i-YwO" secondAttribute="bottom" id="TZI-pZ-ctp"/>
+                <constraint firstItem="H4j-IJ-ISO" firstAttribute="leading" secondItem="2w5-JO-mnL" secondAttribute="leading" id="aeE-Ap-OIz"/>
+                <constraint firstItem="in1-9i-YwO" firstAttribute="leading" secondItem="H4j-IJ-ISO" secondAttribute="leading" id="eyv-TB-gxi"/>
+                <constraint firstItem="2w5-JO-mnL" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" constant="30" id="phb-g7-hEm"/>
+                <constraint firstAttribute="trailing" secondItem="1QD-8D-Ucj" secondAttribute="trailing" constant="40" id="rvG-vy-hsc"/>
+                <constraint firstItem="2w5-JO-mnL" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" constant="80" id="u8K-Az-SHr"/>
+                <constraint firstItem="in1-9i-YwO" firstAttribute="width" secondItem="i5M-Pr-FkT" secondAttribute="width" multiplier="0.3" id="wNq-qK-OFT"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="139" y="138"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="chevron.down.circle.fill" catalog="system" width="64" height="60"/>
+        <image name="phone.fill" catalog="system" width="64" height="56"/>
+    </resources>
+</document>

Ecommerce/Classes/08_SecureCode/SecureCodeView.swift

@@ -0,0 +1,55 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class SecureCodeView: UIViewController {
+
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelSubTitle: UILabel!
+	@IBOutlet var textFieldSecureCode: UITextField!
+	@IBOutlet var labelAvailableTime: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationItem.titleView = UIImageView(image: UIImage(systemName: "circles.hexagongrid.fill"))
+		navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(actionDone))
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		labelTitle.text = "Enter secure\ncode to verify"
+		labelSubTitle.text = "Please enter your verification code for verify your mobile number."
+		textFieldSecureCode.text = "8890128"
+		labelAvailableTime.text = "Available in 9 seconds"
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionDone() {
+
+		print(#function)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionResendCode(_ sender: Any) {
+
+		print(#function)
+	}
+}

Ecommerce/Classes/08_SecureCode/SecureCodeView.xib

@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="SecureCodeView" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="labelAvailableTime" destination="FyL-Kq-NCH" id="Qs3-zb-K8N"/>
+                <outlet property="labelSubTitle" destination="Q3S-4B-XhK" id="lvD-6b-Dhw"/>
+                <outlet property="labelTitle" destination="OVf-4U-A4m" id="cWi-fb-wQY"/>
+                <outlet property="textFieldSecureCode" destination="CPN-GW-vhZ" id="19w-Dk-Wra"/>
+                <outlet property="view" destination="ibM-by-YPD" id="vgl-4p-Efv"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="ibM-by-YPD">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="checkmark.circle.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="5RB-hZ-vDW">
+                    <rect key="frame" x="220" y="30.5" width="60" height="59"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <color key="tintColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstAttribute="width" constant="60" id="FlG-Yl-7jX"/>
+                        <constraint firstAttribute="height" constant="60" id="sC1-Oz-ksL"/>
+                    </constraints>
+                </imageView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="OVf-4U-A4m">
+                    <rect key="frame" x="30" y="90" width="230" height="43"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <nil key="textColor"/>
+                </label>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Subtitle" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Q3S-4B-XhK">
+                    <rect key="frame" x="30" y="144" width="260" height="19.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <nil key="textColor"/>
+                </label>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="fDQ-cM-cBw">
+                    <rect key="frame" x="30" y="205.5" width="260" height="70"/>
+                    <subviews>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Secure Code" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="qbK-kW-kbc">
+                            <rect key="frame" x="15" y="12" width="73" height="15"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="12"/>
+                            <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                            <nil key="highlightedColor"/>
+                        </label>
+                        <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Code" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="CPN-GW-vhZ">
+                            <rect key="frame" x="15" y="32" width="230" height="26"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                            <textInputTraits key="textInputTraits" keyboardType="numberPad"/>
+                        </textField>
+                    </subviews>
+                    <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstItem="CPN-GW-vhZ" firstAttribute="leading" secondItem="fDQ-cM-cBw" secondAttribute="leading" constant="15" id="2Pk-VJ-0db"/>
+                        <constraint firstAttribute="trailing" secondItem="CPN-GW-vhZ" secondAttribute="trailing" constant="15" id="M3d-sd-0pF"/>
+                        <constraint firstAttribute="bottom" secondItem="CPN-GW-vhZ" secondAttribute="bottom" constant="12" id="XDZ-5F-fbV"/>
+                        <constraint firstItem="CPN-GW-vhZ" firstAttribute="top" secondItem="qbK-kW-kbc" secondAttribute="bottom" constant="5" id="Zb1-vc-yi0"/>
+                        <constraint firstItem="qbK-kW-kbc" firstAttribute="leading" secondItem="fDQ-cM-cBw" secondAttribute="leading" constant="15" id="bzs-wG-EXj"/>
+                        <constraint firstAttribute="height" constant="70" id="gTE-EJ-zXD"/>
+                        <constraint firstItem="qbK-kW-kbc" firstAttribute="top" secondItem="fDQ-cM-cBw" secondAttribute="top" constant="12" id="uvQ-3W-mFT"/>
+                    </constraints>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                </view>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Availabel in Time" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="FyL-Kq-NCH">
+                    <rect key="frame" x="30" y="287.5" width="108" height="17"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                    <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                </label>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="sDS-bi-ngp">
+                    <rect key="frame" x="193" y="280" width="97" height="32"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <state key="normal" title="Resend Code">
+                        <color key="titleColor" name="Theme"/>
+                    </state>
+                    <connections>
+                        <action selector="actionResendCode:" destination="-1" eventType="touchUpInside" id="ABr-g5-Zx9"/>
+                    </connections>
+                </button>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="0ad-ZX-7Tf" firstAttribute="trailing" secondItem="OVf-4U-A4m" secondAttribute="trailing" constant="60" id="3fA-0R-SE9"/>
+                <constraint firstItem="0ad-ZX-7Tf" firstAttribute="trailing" secondItem="Q3S-4B-XhK" secondAttribute="trailing" constant="30" id="B9v-v6-gr6"/>
+                <constraint firstAttribute="trailing" secondItem="5RB-hZ-vDW" secondAttribute="trailing" constant="40" id="Fe5-Nx-Sbm"/>
+                <constraint firstItem="Q3S-4B-XhK" firstAttribute="top" secondItem="OVf-4U-A4m" secondAttribute="bottom" constant="11" id="Kaq-Tg-VJQ"/>
+                <constraint firstItem="OVf-4U-A4m" firstAttribute="top" secondItem="0ad-ZX-7Tf" secondAttribute="top" constant="90" id="Mtu-2N-Pkl"/>
+                <constraint firstItem="sDS-bi-ngp" firstAttribute="trailing" secondItem="fDQ-cM-cBw" secondAttribute="trailing" id="SFg-2o-3ms"/>
+                <constraint firstItem="fDQ-cM-cBw" firstAttribute="leading" secondItem="Q3S-4B-XhK" secondAttribute="leading" id="UEv-au-r4c"/>
+                <constraint firstItem="0ad-ZX-7Tf" firstAttribute="trailing" secondItem="fDQ-cM-cBw" secondAttribute="trailing" constant="30" id="YJu-Ek-G4S"/>
+                <constraint firstItem="sDS-bi-ngp" firstAttribute="centerY" secondItem="FyL-Kq-NCH" secondAttribute="centerY" id="dZ2-uR-Y10"/>
+                <constraint firstItem="FyL-Kq-NCH" firstAttribute="leading" secondItem="fDQ-cM-cBw" secondAttribute="leading" id="e3w-Qj-NeE"/>
+                <constraint firstItem="OVf-4U-A4m" firstAttribute="leading" secondItem="0ad-ZX-7Tf" secondAttribute="leading" constant="30" id="jVc-eD-jNg"/>
+                <constraint firstItem="FyL-Kq-NCH" firstAttribute="top" secondItem="fDQ-cM-cBw" secondAttribute="bottom" constant="12" id="qxn-Jr-Tgb"/>
+                <constraint firstItem="Q3S-4B-XhK" firstAttribute="leading" secondItem="OVf-4U-A4m" secondAttribute="leading" id="zK6-WB-ZLz"/>
+                <constraint firstItem="fDQ-cM-cBw" firstAttribute="top" secondItem="Q3S-4B-XhK" secondAttribute="bottom" constant="42" id="zcE-ke-tUJ"/>
+                <constraint firstItem="5RB-hZ-vDW" firstAttribute="top" secondItem="0ad-ZX-7Tf" secondAttribute="top" constant="30" id="zld-Nl-eNN"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="0ad-ZX-7Tf"/>
+            <point key="canvasLocation" x="139" y="138"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="checkmark.circle.fill" catalog="system" width="64" height="60"/>
+        <namedColor name="Theme">
+            <color red="0.51800000667572021" green="0.18799999356269836" blue="0.79600000381469727" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/09_Location1/Location1View.swift

@@ -0,0 +1,59 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Location1View: UIViewController {
+
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelSubTitle: UILabel!
+	@IBOutlet var labelLocation: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationItem.titleView = UIImageView(image: UIImage(systemName: "circles.hexagongrid.fill"))
+		navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Skip", style: .done, target: self, action: #selector(actionSkip))
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		labelTitle.text = "Choose your\nlocation"
+		labelSubTitle.text = "Please give notifiation permission for find your nearest friend."
+		labelLocation.text = "Moscow Russia"
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionSkip() {
+
+		print(#function)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionChooseAnother(_ sender: Any) {
+
+		print(#function)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionDone(_ sender: Any) {
+
+		print(#function)
+	}
+}

Ecommerce/Classes/09_Location1/Location1View.xib

@@ -0,0 +1,145 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Location1View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="labelLocation" destination="vqA-kc-G3x" id="3x9-qW-uRH"/>
+                <outlet property="labelSubTitle" destination="YpJ-ea-i8E" id="LgR-G5-ZjH"/>
+                <outlet property="labelTitle" destination="iS7-Xi-wPV" id="6GB-kk-hCW"/>
+                <outlet property="view" destination="EN9-xs-aJi" id="vBQ-f5-Gs3"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="EN9-xs-aJi">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="mappin.circle.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="o8H-LE-etC">
+                    <rect key="frame" x="220" y="30.5" width="60" height="59"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <color key="tintColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstAttribute="width" constant="60" id="VT3-Ud-mId"/>
+                        <constraint firstAttribute="height" constant="60" id="ju2-jp-dct"/>
+                    </constraints>
+                </imageView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="iS7-Xi-wPV">
+                    <rect key="frame" x="30" y="90" width="230" height="43"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <nil key="textColor"/>
+                </label>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="YpJ-ea-i8E">
+                    <rect key="frame" x="30" y="144" width="260" height="38.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <string key="text">Biggest collection of 370+ layouts 
+for iOS prototyping.</string>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <nil key="textColor"/>
+                </label>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="noE-9k-pxr">
+                    <rect key="frame" x="30" y="224.5" width="260" height="44"/>
+                    <subviews>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="252" verticalHuggingPriority="251" horizontalCompressionResistancePriority="751" text="Your Location" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ZbP-sH-0IG">
+                            <rect key="frame" x="15" y="12.5" width="99" height="19.5"/>
+                            <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                            <nil key="textColor"/>
+                        </label>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Location" textAlignment="right" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="vqA-kc-G3x">
+                            <rect key="frame" x="122" y="12.5" width="94" height="19.5"/>
+                            <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                            <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                        </label>
+                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="252" verticalHuggingPriority="251" image="location.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="Di3-NQ-20M">
+                            <rect key="frame" x="224" y="12.5" width="21" height="19"/>
+                            <color key="tintColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                        </imageView>
+                    </subviews>
+                    <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstItem="Di3-NQ-20M" firstAttribute="centerY" secondItem="noE-9k-pxr" secondAttribute="centerY" id="4Ad-2Z-Xi9"/>
+                        <constraint firstItem="ZbP-sH-0IG" firstAttribute="centerY" secondItem="noE-9k-pxr" secondAttribute="centerY" id="DTj-Eu-uQi"/>
+                        <constraint firstItem="vqA-kc-G3x" firstAttribute="leading" secondItem="ZbP-sH-0IG" secondAttribute="trailing" constant="8" id="ERO-gI-kED"/>
+                        <constraint firstAttribute="trailing" secondItem="Di3-NQ-20M" secondAttribute="trailing" constant="15" id="FKi-dK-Xqd"/>
+                        <constraint firstItem="Di3-NQ-20M" firstAttribute="leading" secondItem="vqA-kc-G3x" secondAttribute="trailing" constant="8" id="TWz-DI-PQ3"/>
+                        <constraint firstItem="ZbP-sH-0IG" firstAttribute="leading" secondItem="noE-9k-pxr" secondAttribute="leading" constant="15" id="gDg-sp-mkT"/>
+                        <constraint firstItem="vqA-kc-G3x" firstAttribute="centerY" secondItem="noE-9k-pxr" secondAttribute="centerY" id="keN-sE-xWX"/>
+                        <constraint firstAttribute="height" constant="44" id="yMO-Hl-Rpp"/>
+                    </constraints>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                </view>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="YB2-91-fjp">
+                    <rect key="frame" x="61" y="290.5" width="198" height="34"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="18"/>
+                    <state key="normal" title="Choose another location">
+                        <color key="titleColor" name="Theme"/>
+                    </state>
+                    <connections>
+                        <action selector="actionChooseAnother:" destination="-1" eventType="touchUpInside" id="dic-sx-WXS"/>
+                    </connections>
+                </button>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="B1s-An-kcy">
+                    <rect key="frame" x="30" y="498" width="260" height="48"/>
+                    <color key="backgroundColor" name="Theme"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="48" id="SHY-ea-zeG"/>
+                    </constraints>
+                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="18"/>
+                    <state key="normal" title="Done">
+                        <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    </state>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                    <connections>
+                        <action selector="actionDone:" destination="-1" eventType="touchUpInside" id="JoW-c5-YAm"/>
+                    </connections>
+                </button>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="YpJ-ea-i8E" firstAttribute="leading" secondItem="iS7-Xi-wPV" secondAttribute="leading" id="6Hg-vD-8bY"/>
+                <constraint firstItem="noE-9k-pxr" firstAttribute="top" secondItem="YpJ-ea-i8E" secondAttribute="bottom" constant="42" id="G1e-xa-3RR"/>
+                <constraint firstItem="kWE-Sp-lYg" firstAttribute="bottom" secondItem="B1s-An-kcy" secondAttribute="bottom" constant="22" id="KPy-a7-XOw"/>
+                <constraint firstItem="kWE-Sp-lYg" firstAttribute="trailing" secondItem="YpJ-ea-i8E" secondAttribute="trailing" constant="30" id="Ko2-fF-WKf"/>
+                <constraint firstItem="kWE-Sp-lYg" firstAttribute="trailing" secondItem="iS7-Xi-wPV" secondAttribute="trailing" constant="60" id="Ogq-gy-aCO"/>
+                <constraint firstItem="iS7-Xi-wPV" firstAttribute="leading" secondItem="kWE-Sp-lYg" secondAttribute="leading" constant="30" id="U0e-3Z-fRD"/>
+                <constraint firstItem="YB2-91-fjp" firstAttribute="top" secondItem="noE-9k-pxr" secondAttribute="bottom" constant="22" id="bdN-UJ-2Fz"/>
+                <constraint firstItem="noE-9k-pxr" firstAttribute="leading" secondItem="YpJ-ea-i8E" secondAttribute="leading" id="fB7-f2-KMz"/>
+                <constraint firstItem="B1s-An-kcy" firstAttribute="trailing" secondItem="noE-9k-pxr" secondAttribute="trailing" id="fkC-Jq-GTX"/>
+                <constraint firstAttribute="trailing" secondItem="o8H-LE-etC" secondAttribute="trailing" constant="40" id="iOV-OU-XM9"/>
+                <constraint firstItem="o8H-LE-etC" firstAttribute="top" secondItem="kWE-Sp-lYg" secondAttribute="top" constant="30" id="iYH-ui-IEt"/>
+                <constraint firstItem="YB2-91-fjp" firstAttribute="centerX" secondItem="EN9-xs-aJi" secondAttribute="centerX" id="oEU-ir-dfe"/>
+                <constraint firstItem="kWE-Sp-lYg" firstAttribute="trailing" secondItem="noE-9k-pxr" secondAttribute="trailing" constant="30" id="qnv-k4-hsb"/>
+                <constraint firstItem="YpJ-ea-i8E" firstAttribute="top" secondItem="iS7-Xi-wPV" secondAttribute="bottom" constant="11" id="s5T-bg-rdH"/>
+                <constraint firstItem="iS7-Xi-wPV" firstAttribute="top" secondItem="kWE-Sp-lYg" secondAttribute="top" constant="90" id="w5q-66-GTa"/>
+                <constraint firstItem="B1s-An-kcy" firstAttribute="leading" secondItem="noE-9k-pxr" secondAttribute="leading" id="xRK-Pt-Ppc"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="kWE-Sp-lYg"/>
+            <point key="canvasLocation" x="139" y="138"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="location.fill" catalog="system" width="64" height="56"/>
+        <image name="mappin.circle.fill" catalog="system" width="64" height="60"/>
+        <namedColor name="Theme">
+            <color red="0.51800000667572021" green="0.18799999356269836" blue="0.79600000381469727" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/10_Location2/Location2View.swift

@@ -0,0 +1,144 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Location2View: UIViewController {
+
+	@IBOutlet var labelLocation: UILabel!
+	@IBOutlet var tableView: UITableView!
+
+	private var locations: [[String: String]] = []
+	private var locationsDictionary: [String: [[String: String]]] = [:]
+	private var locationsSectionTitles: [String] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+		title = "Location"
+
+		navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(actionDone))
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		labelLocation.text = "Moscow Russia"
+
+		locations.removeAll()
+
+		if let url = Bundle.main.url(forResource: "location2_countyCode", withExtension: "json") {
+			do {
+				let data = try Data(contentsOf: url)
+				let object = try JSONSerialization.jsonObject(with: data, options: .allowFragments)
+				if let dictionary = object as? [[String: String]] {
+					locations = dictionary
+				}
+			} catch {
+			}
+		}
+
+		for location in locations {
+			let name = String((location["name"]?.prefix(1))!)
+			if var locationValues = locationsDictionary[name] {
+				locationValues.append(location)
+				locationsDictionary[name] = locationValues
+			} else {
+				locationsDictionary[name] = [location]
+			}
+		}
+
+		locationsSectionTitles = [String](locationsDictionary.keys)
+		locationsSectionTitles = locationsSectionTitles.sorted(by: { $0 < $1 })
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionDone() {
+
+		print(#function)
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshTableView() {
+
+		tableView.reloadData()
+	}
+}
+
+// MARK: - UITableViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Location2View: UITableViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in tableView: UITableView) -> Int {
+
+		return locationsSectionTitles.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func sectionIndexTitles(for tableView: UITableView) -> [String]? {
+
+		return locationsSectionTitles
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
+
+		return locationsSectionTitles[section]
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+
+		let locationKey = locationsSectionTitles[section]
+		if let locationsValues = locationsDictionary[locationKey] {
+			return locationsValues.count
+		}
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
+
+		return UITableView.automaticDimension
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+
+		let cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
+		let location = locationsDictionary[locationsSectionTitles[indexPath.section]]![indexPath.row]
+		cell.textLabel?.text = location["name"]
+		cell.accessoryType = .disclosureIndicator
+		return cell
+	}
+}
+
+// MARK: - UITableViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Location2View: UITableViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+
+		print("didSelectItemAt \(indexPath.row)")
+
+		tableView.deselectRow(at: indexPath, animated: true)
+	}
+}

Ecommerce/Classes/10_Location2/Location2View.xib

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Location2View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="labelLocation" destination="2xO-t5-FyA" id="gfH-ei-FuS"/>
+                <outlet property="tableView" destination="GdQ-rO-wwE" id="ssi-mS-nSk"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="wzo-SJ-6r7">
+                    <rect key="frame" x="15" y="15" width="290" height="44"/>
+                    <subviews>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="252" verticalHuggingPriority="251" horizontalCompressionResistancePriority="751" text="Your Location" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="JHy-Fd-mKt">
+                            <rect key="frame" x="15" y="12.5" width="99" height="19.5"/>
+                            <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                            <nil key="textColor"/>
+                        </label>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Location" textAlignment="right" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="2xO-t5-FyA">
+                            <rect key="frame" x="122" y="12.5" width="124" height="19.5"/>
+                            <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                            <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                        </label>
+                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="252" verticalHuggingPriority="251" image="location.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="tYR-hD-pP5">
+                            <rect key="frame" x="254" y="12.5" width="21" height="19"/>
+                            <color key="tintColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                        </imageView>
+                    </subviews>
+                    <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="44" id="0zu-JB-akJ"/>
+                        <constraint firstItem="tYR-hD-pP5" firstAttribute="centerY" secondItem="wzo-SJ-6r7" secondAttribute="centerY" id="6Na-zN-G23"/>
+                        <constraint firstItem="2xO-t5-FyA" firstAttribute="centerY" secondItem="wzo-SJ-6r7" secondAttribute="centerY" id="7EQ-XM-ziM"/>
+                        <constraint firstItem="2xO-t5-FyA" firstAttribute="leading" secondItem="JHy-Fd-mKt" secondAttribute="trailing" constant="8" id="Cdp-v3-86U"/>
+                        <constraint firstItem="tYR-hD-pP5" firstAttribute="leading" secondItem="2xO-t5-FyA" secondAttribute="trailing" constant="8" id="HVC-Zs-w8W"/>
+                        <constraint firstItem="JHy-Fd-mKt" firstAttribute="centerY" secondItem="wzo-SJ-6r7" secondAttribute="centerY" id="Pgb-cC-pO7"/>
+                        <constraint firstItem="JHy-Fd-mKt" firstAttribute="leading" secondItem="wzo-SJ-6r7" secondAttribute="leading" constant="15" id="kFq-Hs-hiL"/>
+                        <constraint firstAttribute="trailing" secondItem="tYR-hD-pP5" secondAttribute="trailing" constant="15" id="mD8-uD-Pml"/>
+                    </constraints>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                </view>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="252" verticalHuggingPriority="251" horizontalCompressionResistancePriority="751" text="Choose another location" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="i8z-cR-R8b">
+                    <rect key="frame" x="15" y="77" width="177.5" height="19.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <nil key="textColor"/>
+                </label>
+                <tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" style="plain" separatorStyle="default" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="GdQ-rO-wwE">
+                    <rect key="frame" x="0.0" y="111.5" width="320" height="456.5"/>
+                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                    <connections>
+                        <outlet property="dataSource" destination="-1" id="Ov0-sx-fuP"/>
+                        <outlet property="delegate" destination="-1" id="sOc-vG-MnG"/>
+                    </connections>
+                </tableView>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="GdQ-rO-wwE" secondAttribute="trailing" id="Fz8-N8-PSo"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="bottom" secondItem="GdQ-rO-wwE" secondAttribute="bottom" id="Q1z-ln-YFA"/>
+                <constraint firstItem="i8z-cR-R8b" firstAttribute="top" secondItem="wzo-SJ-6r7" secondAttribute="bottom" constant="18" id="QAP-GV-owi"/>
+                <constraint firstItem="GdQ-rO-wwE" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="cVE-9P-xmg"/>
+                <constraint firstItem="wzo-SJ-6r7" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" constant="15" id="fJG-2g-1g8"/>
+                <constraint firstItem="GdQ-rO-wwE" firstAttribute="top" secondItem="i8z-cR-R8b" secondAttribute="bottom" constant="15" id="fRZ-He-es5"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="wzo-SJ-6r7" secondAttribute="trailing" constant="15" id="i4Y-wh-Yfo"/>
+                <constraint firstItem="wzo-SJ-6r7" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" constant="15" id="jzC-Uz-7Yq"/>
+                <constraint firstItem="i8z-cR-R8b" firstAttribute="leading" secondItem="wzo-SJ-6r7" secondAttribute="leading" id="s2C-P2-FXY"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="139" y="129"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="location.fill" catalog="system" width="64" height="56"/>
+    </resources>
+</document>

Ecommerce/Classes/11_Notification/NotificationView.swift

@@ -0,0 +1,55 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class NotificationView: UIViewController {
+
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelSubTitle: UILabel!
+	@IBOutlet var switchNotification: UISwitch!
+	@IBOutlet var labelDescription: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationItem.titleView = UIImageView(image: UIImage(systemName: "circles.hexagongrid.fill"))
+		navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "xmark"), style: .done, target: self, action: #selector(actionClose))
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		labelTitle.text = "Turn on\nnotifications"
+		labelSubTitle.text = "Meet new people, create posts, find friends and more."
+		switchNotification.isOn = true
+		labelDescription.text = "Enable notifications to make sure you don’t miss out the post from your friend"
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionClose() {
+
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionNotification(_ sender: Any) {
+
+		print(#function)
+	}
+}

Ecommerce/Classes/11_Notification/NotificationView.xib

@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="NotificationView" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="labelDescription" destination="1SL-T4-gt5" id="noI-e5-WMG"/>
+                <outlet property="labelSubTitle" destination="y56-B7-lgu" id="KnF-PU-pav"/>
+                <outlet property="labelTitle" destination="XoW-zu-PyP" id="k2O-Qv-9Kh"/>
+                <outlet property="switchNotification" destination="c0Q-Ua-QOg" id="2Vk-4d-Df9"/>
+                <outlet property="view" destination="Hml-GN-r3O" id="2MG-L6-qTH"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="Hml-GN-r3O">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="bell.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="HG1-Vg-Npn">
+                    <rect key="frame" x="220" y="30.5" width="60" height="59.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <color key="tintColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstAttribute="width" constant="60" id="Qtz-LH-oD5"/>
+                        <constraint firstAttribute="height" constant="60" id="ipC-Cc-cCu"/>
+                    </constraints>
+                </imageView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="XoW-zu-PyP">
+                    <rect key="frame" x="30" y="80" width="230" height="43"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <nil key="textColor"/>
+                </label>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Subtitle" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="y56-B7-lgu">
+                    <rect key="frame" x="30" y="134" width="260" height="19.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <nil key="textColor"/>
+                </label>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Pqa-9L-DIY">
+                    <rect key="frame" x="30" y="290.5" width="260" height="44"/>
+                    <subviews>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="252" verticalHuggingPriority="251" horizontalCompressionResistancePriority="751" text="Notifications" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Seo-tD-OqO">
+                            <rect key="frame" x="15" y="12" width="91.5" height="19.5"/>
+                            <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                            <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                            <nil key="textColor"/>
+                        </label>
+                        <switch opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" contentHorizontalAlignment="center" contentVerticalAlignment="center" translatesAutoresizingMaskIntoConstraints="NO" id="c0Q-Ua-QOg">
+                            <rect key="frame" x="196" y="6.5" width="51" height="31"/>
+                            <color key="onTintColor" name="Theme"/>
+                            <connections>
+                                <action selector="actionNotification:" destination="-1" eventType="valueChanged" id="mLN-gl-SuX"/>
+                            </connections>
+                        </switch>
+                    </subviews>
+                    <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstItem="Seo-tD-OqO" firstAttribute="leading" secondItem="Pqa-9L-DIY" secondAttribute="leading" constant="15" id="01P-02-iGZ"/>
+                        <constraint firstAttribute="height" constant="44" id="2og-6W-t6A"/>
+                        <constraint firstItem="c0Q-Ua-QOg" firstAttribute="centerY" secondItem="Pqa-9L-DIY" secondAttribute="centerY" id="CG0-W6-pcZ"/>
+                        <constraint firstItem="Seo-tD-OqO" firstAttribute="centerY" secondItem="Pqa-9L-DIY" secondAttribute="centerY" id="a7a-54-dXF"/>
+                        <constraint firstAttribute="trailing" secondItem="c0Q-Ua-QOg" secondAttribute="trailing" constant="15" id="aIx-Sz-xAD"/>
+                    </constraints>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                            <real key="value" value="8"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                </view>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1SL-T4-gt5">
+                    <rect key="frame" x="30" y="350.5" width="230" height="18"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="15"/>
+                    <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                </label>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="hqo-H6-0cN" firstAttribute="trailing" secondItem="Pqa-9L-DIY" secondAttribute="trailing" constant="30" id="0r5-Kd-FvO"/>
+                <constraint firstAttribute="trailing" secondItem="HG1-Vg-Npn" secondAttribute="trailing" constant="40" id="6O9-re-fC5"/>
+                <constraint firstItem="Pqa-9L-DIY" firstAttribute="centerY" secondItem="Hml-GN-r3O" secondAttribute="centerY" multiplier="1.1" id="H9T-Dq-iCk"/>
+                <constraint firstItem="Pqa-9L-DIY" firstAttribute="leading" secondItem="y56-B7-lgu" secondAttribute="leading" id="MPJ-Nw-Wag"/>
+                <constraint firstItem="XoW-zu-PyP" firstAttribute="leading" secondItem="hqo-H6-0cN" secondAttribute="leading" constant="30" id="NdU-ug-tdZ"/>
+                <constraint firstItem="hqo-H6-0cN" firstAttribute="trailing" secondItem="XoW-zu-PyP" secondAttribute="trailing" constant="60" id="Nya-WN-E6N"/>
+                <constraint firstItem="1SL-T4-gt5" firstAttribute="leading" secondItem="Pqa-9L-DIY" secondAttribute="leading" id="dXk-2y-1kk"/>
+                <constraint firstItem="hqo-H6-0cN" firstAttribute="trailing" secondItem="y56-B7-lgu" secondAttribute="trailing" constant="30" id="eTP-fy-fmg"/>
+                <constraint firstItem="1SL-T4-gt5" firstAttribute="trailing" secondItem="Pqa-9L-DIY" secondAttribute="trailing" constant="-30" id="fIB-mA-wO4"/>
+                <constraint firstItem="y56-B7-lgu" firstAttribute="top" secondItem="XoW-zu-PyP" secondAttribute="bottom" constant="11" id="ffB-DX-Z2B"/>
+                <constraint firstItem="HG1-Vg-Npn" firstAttribute="top" secondItem="hqo-H6-0cN" secondAttribute="top" constant="30" id="gKm-RO-UoO"/>
+                <constraint firstItem="XoW-zu-PyP" firstAttribute="top" secondItem="hqo-H6-0cN" secondAttribute="top" constant="80" id="shr-ht-hKO"/>
+                <constraint firstItem="1SL-T4-gt5" firstAttribute="top" secondItem="Pqa-9L-DIY" secondAttribute="bottom" constant="16" id="yDM-yc-8pC"/>
+                <constraint firstItem="y56-B7-lgu" firstAttribute="leading" secondItem="XoW-zu-PyP" secondAttribute="leading" id="z7n-mg-XZj"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="hqo-H6-0cN"/>
+            <point key="canvasLocation" x="139" y="138"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="bell.fill" catalog="system" width="64" height="62"/>
+        <namedColor name="Theme">
+            <color red="0.0" green="0.32549019607843138" blue="0.62352941176470589" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/12_Passcode/PasscodeView.swift

@@ -0,0 +1,58 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class PasscodeView: UIViewController {
+
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelSubTitle: UILabel!
+	@IBOutlet var imageViewCode1: UIImageView!
+	@IBOutlet var imageViewCode2: UIImageView!
+	@IBOutlet var imageViewCode3: UIImageView!
+	@IBOutlet var imageViewCode4: UIImageView!
+	@IBOutlet var imageViewCode5: UIImageView!
+	@IBOutlet var imageViewCode6: UIImageView!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationItem.titleView = UIImageView(image: UIImage(systemName: "circles.hexagongrid.fill"))
+		navigationItem.leftBarButtonItem = UIBarButtonItem(title: "Cancel", style: .done, target: self, action: #selector(actionCancel))
+		navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(actionDone))
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		labelTitle.text = "Enter\na passcode"
+		labelSubTitle.text = "Enter your secure pin for access your information."
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionCancel() {
+
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionDone() {
+
+		print(#function)
+	}
+}

Ecommerce/Classes/12_Passcode/PasscodeView.xib

@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="PasscodeView" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="imageViewCode1" destination="29s-AJ-Nco" id="ZgC-Eq-5XQ"/>
+                <outlet property="imageViewCode2" destination="RuM-0B-dbd" id="TLd-BP-qmz"/>
+                <outlet property="imageViewCode3" destination="5Uv-Oc-Zq1" id="N1L-Kv-Dp3"/>
+                <outlet property="imageViewCode4" destination="elM-fR-hee" id="OfR-fh-X9M"/>
+                <outlet property="imageViewCode5" destination="bBA-QE-HNo" id="aEh-N8-iCI"/>
+                <outlet property="imageViewCode6" destination="OQi-Ax-o3V" id="Fu6-MZ-cbU"/>
+                <outlet property="labelSubTitle" destination="sbh-LN-9wx" id="gLW-0M-ulb"/>
+                <outlet property="labelTitle" destination="xzt-dC-8Rn" id="NOx-wt-tBl"/>
+                <outlet property="view" destination="Qbj-Dy-XS8" id="ecC-AF-bxO"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="Qbj-Dy-XS8">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="lock.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="ele-kZ-z2y">
+                    <rect key="frame" x="220" y="30.5" width="60" height="58.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <color key="tintColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="60" id="SAr-M7-iXq"/>
+                        <constraint firstAttribute="width" constant="60" id="uEF-6S-y0Y"/>
+                    </constraints>
+                </imageView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xzt-dC-8Rn">
+                    <rect key="frame" x="30" y="80" width="230" height="43"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <nil key="textColor"/>
+                </label>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Subtitle" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="sbh-LN-9wx">
+                    <rect key="frame" x="30" y="134" width="260" height="19.5"/>
+                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <nil key="textColor"/>
+                </label>
+                <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="20" translatesAutoresizingMaskIntoConstraints="NO" id="yfX-rV-Swy">
+                    <rect key="frame" x="70" y="223.5" width="180" height="20"/>
+                    <subviews>
+                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circle.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="29s-AJ-Nco">
+                            <rect key="frame" x="0.0" y="0.5" width="13.5" height="19"/>
+                            <color key="tintColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
+                        </imageView>
+                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circle" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="RuM-0B-dbd">
+                            <rect key="frame" x="33.5" y="0.5" width="13" height="19"/>
+                            <color key="tintColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
+                        </imageView>
+                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circle" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="5Uv-Oc-Zq1">
+                            <rect key="frame" x="66.5" y="0.5" width="13.5" height="19"/>
+                            <color key="tintColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
+                        </imageView>
+                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circle" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="elM-fR-hee">
+                            <rect key="frame" x="100" y="0.5" width="13.5" height="19"/>
+                            <color key="tintColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
+                        </imageView>
+                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circle" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="bBA-QE-HNo">
+                            <rect key="frame" x="133.5" y="0.5" width="13" height="19"/>
+                            <color key="tintColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
+                        </imageView>
+                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circle" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="OQi-Ax-o3V">
+                            <rect key="frame" x="166.5" y="0.5" width="13.5" height="19"/>
+                            <color key="tintColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
+                        </imageView>
+                    </subviews>
+                </stackView>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="yfX-rV-Swy" firstAttribute="top" secondItem="sbh-LN-9wx" secondAttribute="bottom" constant="70" id="DBs-JW-RS2"/>
+                <constraint firstItem="sbh-LN-9wx" firstAttribute="leading" secondItem="xzt-dC-8Rn" secondAttribute="leading" id="DKT-n0-wTb"/>
+                <constraint firstItem="eWv-CP-P8K" firstAttribute="trailing" secondItem="yfX-rV-Swy" secondAttribute="trailing" constant="70" id="Lz4-G4-wlS"/>
+                <constraint firstItem="yfX-rV-Swy" firstAttribute="leading" secondItem="eWv-CP-P8K" secondAttribute="leading" constant="70" id="NZX-0d-hf4"/>
+                <constraint firstItem="sbh-LN-9wx" firstAttribute="top" secondItem="xzt-dC-8Rn" secondAttribute="bottom" constant="11" id="NjN-Ee-x9Y"/>
+                <constraint firstItem="xzt-dC-8Rn" firstAttribute="leading" secondItem="eWv-CP-P8K" secondAttribute="leading" constant="30" id="Zd2-sA-Uvh"/>
+                <constraint firstItem="ele-kZ-z2y" firstAttribute="top" secondItem="eWv-CP-P8K" secondAttribute="top" constant="30" id="gHe-Hg-je5"/>
+                <constraint firstItem="xzt-dC-8Rn" firstAttribute="top" secondItem="eWv-CP-P8K" secondAttribute="top" constant="80" id="kHr-Od-lUE"/>
+                <constraint firstItem="eWv-CP-P8K" firstAttribute="trailing" secondItem="sbh-LN-9wx" secondAttribute="trailing" constant="30" id="kTi-zJ-phy"/>
+                <constraint firstItem="eWv-CP-P8K" firstAttribute="trailing" secondItem="xzt-dC-8Rn" secondAttribute="trailing" constant="60" id="mkP-RH-BuN"/>
+                <constraint firstAttribute="trailing" secondItem="ele-kZ-z2y" secondAttribute="trailing" constant="40" id="sfg-dd-rwh"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="eWv-CP-P8K"/>
+            <point key="canvasLocation" x="139" y="138"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="circle" catalog="system" width="64" height="60"/>
+        <image name="circle.fill" catalog="system" width="64" height="60"/>
+        <image name="lock.fill" catalog="system" width="64" height="64"/>
+    </resources>
+</document>

Ecommerce/Classes/13_Plan/PlanCell.swift

@@ -0,0 +1,30 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class PlanCell: UITableViewCell {
+
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelDescription: UILabel!
+	@IBOutlet var imageViewAccessory: UIImageView!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(data: [String: String]) {
+
+		guard let title = data["title"] else { return }
+		guard let description = data["description"] else { return }
+
+		labelTitle.text = title
+		labelDescription.text = description
+	}
+}

Ecommerce/Classes/13_Plan/PlanCell.xib

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <tableViewCell contentMode="scaleToFill" selectionStyle="none" indentationWidth="10" rowHeight="83" id="KGk-i7-Jjw" customClass="PlanCell" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="83"/>
+            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="KGk-i7-Jjw" id="H2p-sc-9uM">
+                <rect key="frame" x="0.0" y="0.0" width="320" height="83"/>
+                <autoresizingMask key="autoresizingMask"/>
+                <subviews>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="g50-0s-gF1">
+                        <rect key="frame" x="0.0" y="0.0" width="320" height="73"/>
+                        <subviews>
+                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="hjc-Ge-QE5">
+                                <rect key="frame" x="15" y="15" width="74" height="43"/>
+                                <subviews>
+                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="2" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="oRL-uL-JmJ">
+                                        <rect key="frame" x="0.0" y="0.0" width="74" height="19.5"/>
+                                        <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                                        <nil key="textColor"/>
+                                        <nil key="highlightedColor"/>
+                                    </label>
+                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="2" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="4cX-bD-EFm">
+                                        <rect key="frame" x="0.0" y="27.5" width="74" height="15.5"/>
+                                        <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                        <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                        <nil key="highlightedColor"/>
+                                    </label>
+                                </subviews>
+                            </stackView>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circle.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="bgO-d0-fqB">
+                                <rect key="frame" x="285" y="27" width="20" height="19"/>
+                                <color key="tintColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstAttribute="bottom" secondItem="hjc-Ge-QE5" secondAttribute="bottom" constant="15" id="CZ2-io-yT0"/>
+                            <constraint firstAttribute="trailing" secondItem="bgO-d0-fqB" secondAttribute="trailing" constant="15" id="DxY-z5-W3a"/>
+                            <constraint firstItem="bgO-d0-fqB" firstAttribute="centerY" secondItem="hjc-Ge-QE5" secondAttribute="centerY" id="NJ3-wz-HdL"/>
+                            <constraint firstItem="hjc-Ge-QE5" firstAttribute="top" secondItem="g50-0s-gF1" secondAttribute="top" constant="15" id="SVf-CL-DQv"/>
+                            <constraint firstItem="hjc-Ge-QE5" firstAttribute="leading" secondItem="g50-0s-gF1" secondAttribute="leading" constant="15" id="p71-mF-PWS"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                <real key="value" value="8"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </view>
+                </subviews>
+                <constraints>
+                    <constraint firstItem="g50-0s-gF1" firstAttribute="top" secondItem="H2p-sc-9uM" secondAttribute="top" id="Hde-Wv-LvB"/>
+                    <constraint firstItem="g50-0s-gF1" firstAttribute="leading" secondItem="H2p-sc-9uM" secondAttribute="leading" id="bUK-Q7-Ejx"/>
+                    <constraint firstAttribute="bottom" secondItem="g50-0s-gF1" secondAttribute="bottom" constant="10" id="ev6-Bp-uB8"/>
+                    <constraint firstAttribute="trailing" secondItem="g50-0s-gF1" secondAttribute="trailing" id="lLY-8b-i1u"/>
+                </constraints>
+            </tableViewCellContentView>
+            <viewLayoutGuide key="safeArea" id="njF-e1-oar"/>
+            <connections>
+                <outlet property="imageViewAccessory" destination="bgO-d0-fqB" id="jsf-hi-TTU"/>
+                <outlet property="labelDescription" destination="4cX-bD-EFm" id="1Kp-Cd-E4I"/>
+                <outlet property="labelTitle" destination="oRL-uL-JmJ" id="r74-z2-Uvo"/>
+            </connections>
+            <point key="canvasLocation" x="137.68115942028987" y="141.62946428571428"/>
+        </tableViewCell>
+    </objects>
+    <resources>
+        <image name="circle.fill" catalog="system" width="64" height="60"/>
+    </resources>
+</document>

Ecommerce/Classes/13_Plan/PlanView.swift

@@ -0,0 +1,149 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class PlanView: UIViewController {
+
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelSubTitle: UILabel!
+	@IBOutlet var tableView: UITableView!
+	@IBOutlet var constraintTableViewHeight: NSLayoutConstraint!
+	@IBOutlet var labelDescription: UILabel!
+
+	private var plans: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationItem.titleView = UIImageView(image: UIImage(systemName: "circles.hexagongrid.fill"))
+		navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Skip", style: .done, target: self, action: #selector(actionSkip))
+
+		tableView.register(UINib(nibName: "PlanCell", bundle: nil), forCellReuseIdentifier: "PlanCell")
+		tableView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		labelTitle.text = "Subscription\nPlan"
+		labelSubTitle.text = "Biggest collection\nof news, article & news"
+		labelDescription.text = "Choose plan to access various\ncontent for defined time period"
+
+		plans.removeAll()
+
+		var dict1: [String: String] = [:]
+		dict1["title"] = "Start - Free"
+		dict1["description"] = "Learn, explore, and create"
+		plans.append(dict1)
+
+		var dict2: [String: String] = [:]
+		dict2["title"] = "Professional - $19/m"
+		dict2["description"] = "A good fit for landing pages"
+		plans.append(dict2)
+
+		var dict3: [String: String] = [:]
+		dict3["title"] = "Team - $48/mo"
+		dict3["description"] = "For more complex projects"
+		plans.append(dict3)
+
+		refreshTableView()
+	}
+
+	// MARK: - Tableview Observer
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
+
+		if let obj = object as? UITableView {
+			if obj == tableView && keyPath == "contentSize" {
+				if let newSize = change?[NSKeyValueChangeKey.newKey] as? CGSize {
+					constraintTableViewHeight.constant = newSize.height
+				}
+			}
+		}
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionSkip() {
+
+		print(#function)
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshTableView() {
+
+		tableView.reloadData()
+	}
+}
+
+// MARK: - UITableViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension PlanView: UITableViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in tableView: UITableView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+
+		return plans.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
+
+		return UITableView.automaticDimension
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+
+		let cell = tableView.dequeueReusableCell(withIdentifier: "PlanCell", for: indexPath) as! PlanCell
+		cell.bindData(data: plans[indexPath.row])
+		return cell
+	}
+}
+
+// MARK: - UITableViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension PlanView: UITableViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+
+		print("didSelectItemAt \(indexPath.row)")
+
+		let cell = tableView.cellForRow(at: indexPath) as! PlanCell
+		cell.imageViewAccessory.image = UIImage(systemName: "smallcircle.fill.circle.fill")
+		cell.imageViewAccessory.tintColor = AppColor.Theme
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
+
+		print("didDeSelectItemAt \(indexPath.row)")
+
+		let cell = tableView.cellForRow(at: indexPath) as! PlanCell
+		cell.imageViewAccessory.image = UIImage(systemName: "circle.fill")
+		cell.imageViewAccessory.tintColor = UIColor.secondaryLabel
+	}
+}

Ecommerce/Classes/13_Plan/PlanView.xib

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="PlanView" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="constraintTableViewHeight" destination="DKE-1n-RyW" id="iLX-YC-Hvx"/>
+                <outlet property="labelDescription" destination="jB6-R9-ffN" id="bbN-ii-Ecy"/>
+                <outlet property="labelSubTitle" destination="hN4-Pz-FXp" id="IbB-Qs-z5C"/>
+                <outlet property="labelTitle" destination="VK3-u5-tji" id="BmJ-Kx-PkO"/>
+                <outlet property="tableView" destination="g42-Ka-nTo" id="PsP-tN-Yen"/>
+                <outlet property="view" destination="T9N-X2-1hL" id="gcr-wb-unS"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="T9N-X2-1hL">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="e2Q-Nz-SzA">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <subviews>
+                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Cgx-N8-4kL">
+                            <rect key="frame" x="0.0" y="0.0" width="320" height="461.5"/>
+                            <subviews>
+                                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="bookmark.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="9eW-fc-Kw1">
+                                    <rect key="frame" x="220" y="30" width="60" height="60"/>
+                                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                                    <color key="tintColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                                    <constraints>
+                                        <constraint firstAttribute="width" constant="60" id="eAM-oS-C5W"/>
+                                        <constraint firstAttribute="height" constant="60" id="han-VI-VVh"/>
+                                    </constraints>
+                                </imageView>
+                                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="VK3-u5-tji">
+                                    <rect key="frame" x="30" y="90" width="230" height="43"/>
+                                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                                    <nil key="textColor"/>
+                                </label>
+                                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Subtitle" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="hN4-Pz-FXp">
+                                    <rect key="frame" x="30" y="144" width="56" height="19.5"/>
+                                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                                    <nil key="textColor"/>
+                                </label>
+                                <tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" scrollEnabled="NO" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" style="plain" separatorStyle="none" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="g42-Ka-nTo">
+                                    <rect key="frame" x="30" y="195.5" width="260" height="200"/>
+                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="200" id="DKE-1n-RyW"/>
+                                    </constraints>
+                                    <connections>
+                                        <outlet property="dataSource" destination="-1" id="nBV-P0-pdH"/>
+                                        <outlet property="delegate" destination="-1" id="RHU-EN-a6q"/>
+                                    </connections>
+                                </tableView>
+                                <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="jB6-R9-ffN">
+                                    <rect key="frame" x="30" y="413.5" width="230" height="18"/>
+                                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                                    <fontDescription key="fontDescription" type="system" pointSize="15"/>
+                                    <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                </label>
+                            </subviews>
+                            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                            <constraints>
+                                <constraint firstAttribute="trailing" secondItem="VK3-u5-tji" secondAttribute="trailing" constant="60" id="A8M-Sm-ntq"/>
+                                <constraint firstItem="hN4-Pz-FXp" firstAttribute="leading" secondItem="VK3-u5-tji" secondAttribute="leading" id="Hal-tV-rJ4"/>
+                                <constraint firstItem="9eW-fc-Kw1" firstAttribute="top" secondItem="Cgx-N8-4kL" secondAttribute="top" constant="30" id="IRR-br-fHe"/>
+                                <constraint firstItem="VK3-u5-tji" firstAttribute="leading" secondItem="Cgx-N8-4kL" secondAttribute="leading" constant="30" id="KBI-OB-5Ad"/>
+                                <constraint firstItem="jB6-R9-ffN" firstAttribute="top" secondItem="g42-Ka-nTo" secondAttribute="bottom" constant="18" id="Mvj-g5-MJM"/>
+                                <constraint firstItem="VK3-u5-tji" firstAttribute="top" secondItem="Cgx-N8-4kL" secondAttribute="top" constant="90" id="TDz-JE-Cbl"/>
+                                <constraint firstItem="jB6-R9-ffN" firstAttribute="leading" secondItem="g42-Ka-nTo" secondAttribute="leading" id="Vhd-9o-mqB"/>
+                                <constraint firstAttribute="trailing" secondItem="9eW-fc-Kw1" secondAttribute="trailing" constant="40" id="WhZ-sU-6Pj"/>
+                                <constraint firstAttribute="bottom" secondItem="jB6-R9-ffN" secondAttribute="bottom" constant="30" id="ZgR-OO-tGu"/>
+                                <constraint firstItem="g42-Ka-nTo" firstAttribute="leading" secondItem="Cgx-N8-4kL" secondAttribute="leading" constant="30" id="aWH-Ux-WTJ"/>
+                                <constraint firstItem="jB6-R9-ffN" firstAttribute="trailing" secondItem="g42-Ka-nTo" secondAttribute="trailing" constant="-30" id="cM3-qU-0zR"/>
+                                <constraint firstItem="hN4-Pz-FXp" firstAttribute="top" secondItem="VK3-u5-tji" secondAttribute="bottom" constant="11" id="cNT-g9-SzL"/>
+                                <constraint firstAttribute="trailing" secondItem="g42-Ka-nTo" secondAttribute="trailing" constant="30" id="sCt-UH-tqT"/>
+                                <constraint firstItem="g42-Ka-nTo" firstAttribute="top" secondItem="hN4-Pz-FXp" secondAttribute="bottom" constant="32" id="y7D-J9-TZS"/>
+                            </constraints>
+                        </view>
+                    </subviews>
+                    <constraints>
+                        <constraint firstItem="Cgx-N8-4kL" firstAttribute="width" secondItem="e2Q-Nz-SzA" secondAttribute="width" id="5g3-78-hfW"/>
+                        <constraint firstItem="Cgx-N8-4kL" firstAttribute="leading" secondItem="e2Q-Nz-SzA" secondAttribute="leading" id="RWg-Os-1E4"/>
+                        <constraint firstItem="Cgx-N8-4kL" firstAttribute="top" secondItem="e2Q-Nz-SzA" secondAttribute="top" id="SVz-Xx-Hy9"/>
+                        <constraint firstAttribute="bottom" secondItem="Cgx-N8-4kL" secondAttribute="bottom" id="ib2-io-JZG"/>
+                        <constraint firstAttribute="trailing" secondItem="Cgx-N8-4kL" secondAttribute="trailing" id="yZk-ZW-KSh"/>
+                    </constraints>
+                </scrollView>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="keo-WT-Abz" firstAttribute="bottom" secondItem="e2Q-Nz-SzA" secondAttribute="bottom" id="0lX-ah-LyG"/>
+                <constraint firstItem="e2Q-Nz-SzA" firstAttribute="leading" secondItem="keo-WT-Abz" secondAttribute="leading" id="89G-uY-Bmi"/>
+                <constraint firstItem="e2Q-Nz-SzA" firstAttribute="top" secondItem="keo-WT-Abz" secondAttribute="top" id="FC6-sf-uY6"/>
+                <constraint firstItem="keo-WT-Abz" firstAttribute="trailing" secondItem="e2Q-Nz-SzA" secondAttribute="trailing" id="wbj-u0-9jz"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="keo-WT-Abz"/>
+            <point key="canvasLocation" x="138.40000000000001" y="137.18140929535232"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="bookmark.fill" catalog="system" width="56" height="64"/>
+    </resources>
+</document>

Ecommerce/Classes/14_Walkthrough1/Walkthrough1Cell.swift

@@ -0,0 +1,31 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Walkthrough1Cell: UICollectionViewCell {
+
+	@IBOutlet var imageView: UIImageView!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelDescription: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int, data: [String: String]) {
+
+		guard let title = data["title"] else { return }
+		guard let description = data["description"] else { return }
+
+		imageView.sample("Ecommerce", "Clothes", index)
+		labelTitle.text = title
+		labelDescription.text = description
+	}
+}

Ecommerce/Classes/14_Walkthrough1/Walkthrough1Cell.xib

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="Walkthrough1Cell" id="gTV-IL-0wX" customClass="Walkthrough1Cell" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="311" height="460"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="311" height="460"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Nmf-Bq-c01">
+                        <rect key="frame" x="30" y="30" width="251" height="251"/>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstAttribute="width" secondItem="Nmf-Bq-c01" secondAttribute="height" multiplier="1:1" id="a5g-f8-a16"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                <real key="value" value="12"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </imageView>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="8Nx-uF-6EW">
+                        <rect key="frame" x="30" y="303" width="251" height="43"/>
+                        <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                        <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="4eS-rB-Zom">
+                        <rect key="frame" x="30" y="358" width="251" height="19.5"/>
+                        <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                        <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstItem="8Nx-uF-6EW" firstAttribute="top" secondItem="Nmf-Bq-c01" secondAttribute="bottom" constant="22" id="8d0-v3-tE1"/>
+                <constraint firstItem="8Nx-uF-6EW" firstAttribute="leading" secondItem="Nmf-Bq-c01" secondAttribute="leading" id="B1m-Q1-bGZ"/>
+                <constraint firstItem="8Nx-uF-6EW" firstAttribute="trailing" secondItem="Nmf-Bq-c01" secondAttribute="trailing" id="Die-8K-s8O"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="top" secondItem="8Nx-uF-6EW" secondAttribute="bottom" constant="12" id="FNO-V2-qMf"/>
+                <constraint firstAttribute="trailing" secondItem="Nmf-Bq-c01" secondAttribute="trailing" constant="30" id="KQD-Fl-Bhz"/>
+                <constraint firstItem="Nmf-Bq-c01" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" constant="30" id="MjB-Ry-neG"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="leading" secondItem="8Nx-uF-6EW" secondAttribute="leading" id="UuV-gz-lhg"/>
+                <constraint firstItem="Nmf-Bq-c01" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" constant="30" id="WEj-zS-aZS"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="trailing" secondItem="8Nx-uF-6EW" secondAttribute="trailing" id="bbS-Oy-MuT"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="311" height="460"/>
+            <connections>
+                <outlet property="imageView" destination="Nmf-Bq-c01" id="E3h-nn-KXE"/>
+                <outlet property="labelDescription" destination="4eS-rB-Zom" id="IJz-Qx-1oL"/>
+                <outlet property="labelTitle" destination="8Nx-uF-6EW" id="2t2-7W-Pzr"/>
+            </connections>
+            <point key="canvasLocation" x="326.81159420289856" y="265.17857142857144"/>
+        </collectionViewCell>
+    </objects>
+</document>

Ecommerce/Classes/14_Walkthrough1/Walkthrough1View.swift

@@ -0,0 +1,145 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Walkthrough1View: UIViewController {
+
+	@IBOutlet var collectionView: UICollectionView!
+	@IBOutlet var pageControl: UIPageControl!
+
+	private var collections: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationController?.navigationBar.prefersLargeTitles = false
+		navigationItem.largeTitleDisplayMode = .never
+
+		navigationItem.leftBarButtonItem = UIBarButtonItem(customView: pageControl)
+		navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Skip", style: .done, target: self, action: #selector(actionSkip))
+
+		collectionView.register(UINib(nibName: "Walkthrough1Cell", bundle: nil), forCellWithReuseIdentifier: "Walkthrough1Cell")
+
+		pageControl.pageIndicatorTintColor = UIColor.lightGray
+
+		loadCollections()
+	}
+
+	// MARK: - Collections methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadCollections() {
+
+		collections.removeAll()
+
+		var dict1: [String: String] = [:]
+		dict1["title"] = "Discover clothes, accessories & more"
+		dict1["description"] = "Get all brands at one place. Fill the bag with full of joy"
+		collections.append(dict1)
+
+		collections.append(dict1)
+		collections.append(dict1)
+		collections.append(dict1)
+
+		refreshCollectionView()
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionSkip() {
+
+		dismiss(animated: true)
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionView() {
+
+		collectionView.reloadData()
+	}
+}
+
+// MARK:- UICollectionViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough1View: UICollectionViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in collectionView: UICollectionView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+
+		return collections.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+
+		let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Walkthrough1Cell", for: indexPath) as! Walkthrough1Cell
+		cell.bindData(index: indexPath.item, data: collections[indexPath.row])
+		return cell
+	}
+}
+
+// MARK:- UICollectionViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough1View: UICollectionViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+
+		print("didSelectItemAt \(indexPath.row)")
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
+
+		pageControl.currentPage = indexPath.row
+	}
+}
+
+// MARK:- UICollectionViewDelegateFlowLayout
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough1View: UICollectionViewDelegateFlowLayout {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+		let height = collectionView.frame.size.height
+		let width = collectionView.frame.size.width
+
+		return CGSize(width: width, height: height)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+
+		return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 0
+	}
+}

Ecommerce/Classes/14_Walkthrough1/Walkthrough1View.xib

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Walkthrough1View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="collectionView" destination="PfA-QT-IhE" id="eD4-g4-E9p"/>
+                <outlet property="pageControl" destination="GA8-IA-WeO" id="cQ7-ex-OuV"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" pagingEnabled="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" contentInsetAdjustmentBehavior="never" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="PfA-QT-IhE">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="10" minimumInteritemSpacing="10" id="q8M-Du-dpD">
+                        <size key="itemSize" width="50" height="50"/>
+                        <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                        <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                        <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                    </collectionViewFlowLayout>
+                    <connections>
+                        <outlet property="dataSource" destination="-1" id="o8O-hA-Hl8"/>
+                        <outlet property="delegate" destination="-1" id="lFM-U8-0d7"/>
+                    </connections>
+                </collectionView>
+                <pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="4" translatesAutoresizingMaskIntoConstraints="NO" id="GA8-IA-WeO">
+                    <rect key="frame" x="15" y="15" width="55" height="37"/>
+                    <color key="currentPageIndicatorTintColor" name="Theme"/>
+                </pageControl>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="GA8-IA-WeO" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" constant="15" id="Ivw-cX-2oy"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="PfA-QT-IhE" secondAttribute="trailing" id="YoX-QF-z68"/>
+                <constraint firstItem="PfA-QT-IhE" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="bU1-v6-hea"/>
+                <constraint firstItem="GA8-IA-WeO" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" constant="15" id="dBD-ma-75h"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="bottom" secondItem="PfA-QT-IhE" secondAttribute="bottom" id="mSv-Rm-lC8"/>
+                <constraint firstItem="PfA-QT-IhE" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="p7O-kc-gib"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="138.40000000000001" y="128.18590704647679"/>
+        </view>
+    </objects>
+    <resources>
+        <namedColor name="Theme">
+            <color red="0.26600000262260437" green="0.61599999666213989" blue="0.75999999046325684" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/15_Walkthrough2/Walkthrough2Cell.swift

@@ -0,0 +1,31 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Walkthrough2Cell: UICollectionViewCell {
+
+	@IBOutlet var imageView: UIImageView!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelDescription: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int, data: [String: String]) {
+
+		guard let title = data["title"] else { return }
+		guard let description = data["description"] else { return }
+
+		imageView.sample("Ecommerce", "Candles", index + 1)
+		labelTitle.text = title
+		labelDescription.text = description
+	}
+}

Ecommerce/Classes/15_Walkthrough2/Walkthrough2Cell.xib

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="Walkthrough2Cell" id="gTV-IL-0wX" customClass="Walkthrough2Cell" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="478"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="320" height="478"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="8Nx-uF-6EW">
+                        <rect key="frame" x="30" y="30" width="260" height="43"/>
+                        <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                        <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Description" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="4eS-rB-Zom">
+                        <rect key="frame" x="30" y="85" width="260" height="19.5"/>
+                        <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                        <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalCompressionResistancePriority="749" verticalCompressionResistancePriority="749" translatesAutoresizingMaskIntoConstraints="NO" id="N2x-zZ-0lD">
+                        <rect key="frame" x="37" y="149.5" width="246" height="486"/>
+                        <constraints>
+                            <constraint firstAttribute="width" constant="246" id="Quh-Wl-FQH"/>
+                            <constraint firstAttribute="height" constant="486" id="cVv-LY-BgN"/>
+                        </constraints>
+                    </imageView>
+                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="walkthrough2_iphone.png" translatesAutoresizingMaskIntoConstraints="NO" id="hbY-hA-T8S" userLabel="Image View">
+                        <rect key="frame" x="22.5" y="134.5" width="275" height="501"/>
+                    </imageView>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstItem="N2x-zZ-0lD" firstAttribute="top" secondItem="4eS-rB-Zom" secondAttribute="bottom" constant="45" id="E7x-oZ-sIW"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="top" secondItem="8Nx-uF-6EW" secondAttribute="bottom" constant="12" id="FNO-V2-qMf"/>
+                <constraint firstItem="hbY-hA-T8S" firstAttribute="centerX" secondItem="gTV-IL-0wX" secondAttribute="centerX" id="Fg0-6Y-EpI"/>
+                <constraint firstItem="8Nx-uF-6EW" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" constant="30" id="HCx-UO-48X"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="leading" secondItem="8Nx-uF-6EW" secondAttribute="leading" id="UuV-gz-lhg"/>
+                <constraint firstItem="8Nx-uF-6EW" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" constant="30" id="Vnz-eT-e3x"/>
+                <constraint firstItem="N2x-zZ-0lD" firstAttribute="centerX" secondItem="gTV-IL-0wX" secondAttribute="centerX" id="XmM-k7-cpP"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="trailing" secondItem="8Nx-uF-6EW" secondAttribute="trailing" id="bbS-Oy-MuT"/>
+                <constraint firstItem="hbY-hA-T8S" firstAttribute="top" secondItem="4eS-rB-Zom" secondAttribute="bottom" constant="30" id="hCU-Tl-2qj"/>
+                <constraint firstAttribute="trailing" secondItem="8Nx-uF-6EW" secondAttribute="trailing" constant="30" id="xnT-Ls-S1h"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="311" height="478"/>
+            <connections>
+                <outlet property="imageView" destination="N2x-zZ-0lD" id="xNk-if-BXg"/>
+                <outlet property="labelDescription" destination="4eS-rB-Zom" id="IJz-Qx-1oL"/>
+                <outlet property="labelTitle" destination="8Nx-uF-6EW" id="2t2-7W-Pzr"/>
+            </connections>
+            <point key="canvasLocation" x="324.375" y="274.64788732394368"/>
+        </collectionViewCell>
+    </objects>
+    <resources>
+        <image name="walkthrough2_iphone.png" width="275" height="501"/>
+    </resources>
+</document>

Ecommerce/Classes/15_Walkthrough2/Walkthrough2View.swift

@@ -0,0 +1,144 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Walkthrough2View: UIViewController {
+
+	@IBOutlet var collectionView: UICollectionView!
+	@IBOutlet var pageControl: UIPageControl!
+
+	private var collections: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationItem.leftBarButtonItem = UIBarButtonItem(customView: pageControl)
+		navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Skip", style: .done, target: self, action: #selector(actionSkip))
+
+		collectionView.register(UINib(nibName: "Walkthrough2Cell", bundle: nil), forCellWithReuseIdentifier: "Walkthrough2Cell")
+
+		pageControl.pageIndicatorTintColor = UIColor.lightGray
+		pageControl.currentPageIndicatorTintColor = AppColor.Theme
+
+		loadCollections()
+	}
+
+	// MARK: - Collections methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadCollections() {
+
+		collections.removeAll()
+
+		var dict1: [String: String] = [:]
+		dict1["title"] = "Attractive\ncollection"
+		dict1["description"] = "Get all brands at one place. Fill the bag with full of joy"
+		collections.append(dict1)
+
+		var dict2: [String: String] = [:]
+		dict2["title"] = "Discover\nnew things"
+		dict2["description"] = "Get all brands at one place. Fill the bag with full of joy"
+		collections.append(dict2)
+
+		collections.append(dict1)
+		collections.append(dict2)
+
+		refreshCollectionView()
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionSkip() {
+
+		dismiss(animated: true)
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionView() {
+
+		collectionView.reloadData()
+	}
+}
+
+// MARK:- UICollectionViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough2View: UICollectionViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in collectionView: UICollectionView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+
+		return collections.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+
+		let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Walkthrough2Cell", for: indexPath) as! Walkthrough2Cell
+		cell.bindData(index: indexPath.item, data: collections[indexPath.row])
+		return cell
+	}
+}
+
+// MARK:- UICollectionViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough2View: UICollectionViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+
+		print("didSelectItemAt \(indexPath.row)")
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
+
+		pageControl.currentPage = indexPath.row
+	}
+}
+
+// MARK:- UICollectionViewDelegateFlowLayout
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough2View: UICollectionViewDelegateFlowLayout {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+		return collectionView.frame.size
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+
+		return UIEdgeInsets.zero
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 0
+	}
+}

Ecommerce/Classes/15_Walkthrough2/Walkthrough2View.xib

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Walkthrough2View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="collectionView" destination="PfA-QT-IhE" id="eD4-g4-E9p"/>
+                <outlet property="pageControl" destination="GA8-IA-WeO" id="cQ7-ex-OuV"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" pagingEnabled="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" contentInsetAdjustmentBehavior="never" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="PfA-QT-IhE">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                    <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="0.0" minimumInteritemSpacing="0.0" id="q8M-Du-dpD">
+                        <size key="itemSize" width="50" height="50"/>
+                        <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                        <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                        <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                    </collectionViewFlowLayout>
+                    <connections>
+                        <outlet property="dataSource" destination="-1" id="o8O-hA-Hl8"/>
+                        <outlet property="delegate" destination="-1" id="lFM-U8-0d7"/>
+                    </connections>
+                </collectionView>
+                <pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="4" translatesAutoresizingMaskIntoConstraints="NO" id="GA8-IA-WeO">
+                    <rect key="frame" x="15" y="15" width="55" height="37"/>
+                </pageControl>
+            </subviews>
+            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+            <constraints>
+                <constraint firstItem="GA8-IA-WeO" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" constant="15" id="Ivw-cX-2oy"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="PfA-QT-IhE" secondAttribute="trailing" id="YoX-QF-z68"/>
+                <constraint firstItem="PfA-QT-IhE" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="bU1-v6-hea"/>
+                <constraint firstItem="GA8-IA-WeO" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" constant="15" id="dBD-ma-75h"/>
+                <constraint firstAttribute="bottom" secondItem="PfA-QT-IhE" secondAttribute="bottom" id="mSv-Rm-lC8"/>
+                <constraint firstItem="PfA-QT-IhE" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="p7O-kc-gib"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="138.40000000000001" y="128.18590704647679"/>
+        </view>
+    </objects>
+</document>

Ecommerce/Classes/16_Walkthrough3/Walkthrough3Cell.swift

@@ -0,0 +1,27 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Walkthrough3Cell: UICollectionViewCell {
+
+	@IBOutlet var imageView: UIImageView!
+	@IBOutlet var labelDescription: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(data: [String: String]) {
+
+		guard let description = data["description"] else { return }
+
+		labelDescription.text = description
+	}
+}

Ecommerce/Classes/16_Walkthrough3/Walkthrough3Cell.xib

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="Walkthrough3Cell" id="gTV-IL-0wX" customClass="Walkthrough3Cell" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="311" height="460"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="311" height="460"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="walkthrough2_iphone.png" translatesAutoresizingMaskIntoConstraints="NO" id="hbY-hA-T8S">
+                        <rect key="frame" x="0.0" y="30" width="311" height="350.5"/>
+                    </imageView>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Description" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="4eS-rB-Zom">
+                        <rect key="frame" x="30" y="410.5" width="251" height="19.5"/>
+                        <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                        <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstItem="hbY-hA-T8S" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" constant="30" id="0sp-KQ-zsB"/>
+                <constraint firstAttribute="trailing" secondItem="hbY-hA-T8S" secondAttribute="trailing" id="6Me-0o-hhk"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="top" secondItem="hbY-hA-T8S" secondAttribute="bottom" constant="30" id="6pq-at-uJz"/>
+                <constraint firstAttribute="bottom" secondItem="4eS-rB-Zom" secondAttribute="bottom" constant="30" id="AaK-5V-sJv"/>
+                <constraint firstItem="hbY-hA-T8S" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="KDD-Zd-9nP"/>
+                <constraint firstAttribute="trailing" secondItem="4eS-rB-Zom" secondAttribute="trailing" constant="30" id="USR-MK-czC"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" constant="30" id="q6G-CE-OTv"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="311" height="460"/>
+            <connections>
+                <outlet property="imageView" destination="hbY-hA-T8S" id="XIe-N5-Z0a"/>
+                <outlet property="labelDescription" destination="4eS-rB-Zom" id="IJz-Qx-1oL"/>
+            </connections>
+            <point key="canvasLocation" x="326.81159420289856" y="265.17857142857144"/>
+        </collectionViewCell>
+    </objects>
+    <resources>
+        <image name="walkthrough2_iphone.png" width="429" height="854"/>
+    </resources>
+</document>

Ecommerce/Classes/16_Walkthrough3/Walkthrough3View.swift

@@ -0,0 +1,142 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Walkthrough3View: UIViewController {
+
+	@IBOutlet var collectionView: UICollectionView!
+	@IBOutlet var pageControl: UIPageControl!
+
+	private var collections: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationItem.leftBarButtonItem = UIBarButtonItem(customView: pageControl)
+		navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Skip", style: .done, target: self, action: #selector(actionSkip))
+
+		collectionView.register(UINib(nibName: "Walkthrough3Cell", bundle: nil), forCellWithReuseIdentifier: "Walkthrough3Cell")
+
+		pageControl.pageIndicatorTintColor = UIColor.lightGray
+		pageControl.currentPageIndicatorTintColor = AppColor.Theme
+
+		loadCollections()
+	}
+
+	// MARK: - Collections methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadCollections() {
+
+		collections.removeAll()
+
+		var dict1: [String: String] = [:]
+		dict1["description"] = "It is those feelings that drive our love of astronomy and our desire to learn more and more about it. "
+		collections.append(dict1)
+
+		collections.append(dict1)
+		collections.append(dict1)
+		collections.append(dict1)
+
+		refreshCollectionView()
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionSkip() {
+
+		dismiss(animated: true)
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionView() {
+
+		collectionView.reloadData()
+	}
+}
+
+// MARK:- UICollectionViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough3View: UICollectionViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in collectionView: UICollectionView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+
+		return collections.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+
+		let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Walkthrough3Cell", for: indexPath) as! Walkthrough3Cell
+		cell.bindData(data: collections[indexPath.row])
+		return cell
+	}
+}
+
+// MARK:- UICollectionViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough3View: UICollectionViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+
+		print("didSelectItemAt \(indexPath.row)")
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
+
+		pageControl.currentPage = indexPath.row
+	}
+}
+
+// MARK:- UICollectionViewDelegateFlowLayout
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough3View: UICollectionViewDelegateFlowLayout {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+		let height = collectionView.frame.size.height
+		let width = collectionView.frame.size.width
+
+		return CGSize(width: width, height: height)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+
+		return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 0
+	}
+}

Ecommerce/Classes/16_Walkthrough3/Walkthrough3View.xib

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Walkthrough3View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="collectionView" destination="PfA-QT-IhE" id="eD4-g4-E9p"/>
+                <outlet property="pageControl" destination="GA8-IA-WeO" id="cQ7-ex-OuV"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" pagingEnabled="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="PfA-QT-IhE">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                    <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="10" minimumInteritemSpacing="10" id="q8M-Du-dpD">
+                        <size key="itemSize" width="50" height="50"/>
+                        <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                        <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                        <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                    </collectionViewFlowLayout>
+                    <connections>
+                        <outlet property="dataSource" destination="-1" id="o8O-hA-Hl8"/>
+                        <outlet property="delegate" destination="-1" id="lFM-U8-0d7"/>
+                    </connections>
+                </collectionView>
+                <pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="4" translatesAutoresizingMaskIntoConstraints="NO" id="GA8-IA-WeO">
+                    <rect key="frame" x="15" y="15" width="55" height="37"/>
+                </pageControl>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="GA8-IA-WeO" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" constant="15" id="Ivw-cX-2oy"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="PfA-QT-IhE" secondAttribute="trailing" id="YoX-QF-z68"/>
+                <constraint firstItem="PfA-QT-IhE" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="bU1-v6-hea"/>
+                <constraint firstItem="GA8-IA-WeO" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" constant="15" id="dBD-ma-75h"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="bottom" secondItem="PfA-QT-IhE" secondAttribute="bottom" id="mSv-Rm-lC8"/>
+                <constraint firstItem="PfA-QT-IhE" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="p7O-kc-gib"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="138.40000000000001" y="128.18590704647679"/>
+        </view>
+    </objects>
+</document>

Ecommerce/Classes/17_Walkthrough4/Walkthrough4Cell.swift

@@ -0,0 +1,33 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Walkthrough4Cell: UICollectionViewCell {
+
+	@IBOutlet var imageView: UIImageView!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelDescription: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int, data: [String: String]) {
+
+		guard let title = data["title"] else { return }
+		guard let description = data["description"] else { return }
+
+		imageView.sample("Ecommerce", "Bags", index)
+		imageView.layoutIfNeeded()
+		imageView.cornerRadius = imageView.frame.size.width / 2
+		labelTitle.text = title
+		labelDescription.text = description
+	}
+}

Ecommerce/Classes/17_Walkthrough4/Walkthrough4Cell.xib

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="Walkthrough4Cell" id="gTV-IL-0wX" customClass="Walkthrough4Cell" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="311" height="460"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="311" height="460"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Nmf-Bq-c01">
+                        <rect key="frame" x="50" y="40" width="211" height="211"/>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstAttribute="width" secondItem="Nmf-Bq-c01" secondAttribute="height" multiplier="1:1" id="a5g-f8-a16"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                <real key="value" value="12"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </imageView>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Title" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="8Nx-uF-6EW">
+                        <rect key="frame" x="30" y="273" width="251" height="43"/>
+                        <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                        <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="4eS-rB-Zom">
+                        <rect key="frame" x="30" y="328" width="251" height="19.5"/>
+                        <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="calibratedRGB"/>
+                        <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstItem="8Nx-uF-6EW" firstAttribute="top" secondItem="Nmf-Bq-c01" secondAttribute="bottom" constant="22" id="8d0-v3-tE1"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="top" secondItem="8Nx-uF-6EW" secondAttribute="bottom" constant="12" id="FNO-V2-qMf"/>
+                <constraint firstItem="8Nx-uF-6EW" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" constant="30" id="HRu-Cr-uHj"/>
+                <constraint firstAttribute="trailing" secondItem="Nmf-Bq-c01" secondAttribute="trailing" constant="50" id="KQD-Fl-Bhz"/>
+                <constraint firstItem="Nmf-Bq-c01" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" constant="40" id="MjB-Ry-neG"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="leading" secondItem="8Nx-uF-6EW" secondAttribute="leading" id="UuV-gz-lhg"/>
+                <constraint firstItem="Nmf-Bq-c01" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" constant="50" id="WEj-zS-aZS"/>
+                <constraint firstItem="4eS-rB-Zom" firstAttribute="trailing" secondItem="8Nx-uF-6EW" secondAttribute="trailing" id="bbS-Oy-MuT"/>
+                <constraint firstAttribute="trailing" secondItem="8Nx-uF-6EW" secondAttribute="trailing" constant="30" id="kle-h4-Odm"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="311" height="460"/>
+            <connections>
+                <outlet property="imageView" destination="Nmf-Bq-c01" id="E3h-nn-KXE"/>
+                <outlet property="labelDescription" destination="4eS-rB-Zom" id="IJz-Qx-1oL"/>
+                <outlet property="labelTitle" destination="8Nx-uF-6EW" id="2t2-7W-Pzr"/>
+            </connections>
+            <point key="canvasLocation" x="326.81159420289856" y="265.17857142857144"/>
+        </collectionViewCell>
+    </objects>
+</document>

Ecommerce/Classes/17_Walkthrough4/Walkthrough4View.swift

@@ -0,0 +1,145 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Walkthrough4View: UIViewController {
+
+	@IBOutlet var collectionView: UICollectionView!
+	@IBOutlet var pageControl: UIPageControl!
+
+	private var collections: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		collectionView.register(UINib(nibName: "Walkthrough4Cell", bundle: nil), forCellWithReuseIdentifier: "Walkthrough4Cell")
+
+		pageControl.pageIndicatorTintColor = UIColor.lightGray
+		pageControl.currentPageIndicatorTintColor = AppColor.Theme
+
+		loadCollections()
+	}
+
+	// MARK: - Collections methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadCollections() {
+
+		collections.removeAll()
+
+		var dict1: [String: String] = [:]
+		dict1["title"] = "Attractive\ncollection"
+		dict1["description"] = "Get all brands at one place. Fill the bag with full of joy"
+		collections.append(dict1)
+
+		var dict2: [String: String] = [:]
+		dict2["title"] = "Discover\nnew things"
+		dict2["description"] = "Get all brands at one place. Fill the bag with full of joy"
+		collections.append(dict2)
+
+		collections.append(dict1)
+		collections.append(dict1)
+		collections.append(dict1)
+
+		refreshCollectionView()
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionSkip(_ sender: UIButton) {
+
+		dismiss(animated: true)
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionView() {
+
+		collectionView.reloadData()
+	}
+}
+
+// MARK:- UICollectionViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough4View: UICollectionViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in collectionView: UICollectionView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+
+		return collections.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+
+		let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Walkthrough4Cell", for: indexPath) as! Walkthrough4Cell
+		cell.bindData(index: indexPath.item, data: collections[indexPath.row])
+		return cell
+	}
+}
+
+// MARK:- UICollectionViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough4View: UICollectionViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+
+		print("didSelectItemAt \(indexPath.row)")
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
+
+		pageControl.currentPage = indexPath.row
+	}
+}
+
+// MARK:- UICollectionViewDelegateFlowLayout
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough4View: UICollectionViewDelegateFlowLayout {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+		let height = collectionView.frame.size.height
+		let width = collectionView.frame.size.width
+
+		return CGSize(width: width, height: height)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+
+		return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 0
+	}
+}

Ecommerce/Classes/17_Walkthrough4/Walkthrough4View.xib

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Walkthrough4View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="collectionView" destination="PfA-QT-IhE" id="eD4-g4-E9p"/>
+                <outlet property="pageControl" destination="GA8-IA-WeO" id="cQ7-ex-OuV"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" pagingEnabled="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="PfA-QT-IhE">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="497"/>
+                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                    <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="10" minimumInteritemSpacing="10" id="q8M-Du-dpD">
+                        <size key="itemSize" width="50" height="50"/>
+                        <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                        <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                        <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                    </collectionViewFlowLayout>
+                    <connections>
+                        <outlet property="dataSource" destination="-1" id="o8O-hA-Hl8"/>
+                        <outlet property="delegate" destination="-1" id="lFM-U8-0d7"/>
+                    </connections>
+                </collectionView>
+                <pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="4" translatesAutoresizingMaskIntoConstraints="NO" id="GA8-IA-WeO">
+                    <rect key="frame" x="132.5" y="519" width="55" height="37"/>
+                </pageControl>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="WOc-dJ-2by">
+                    <rect key="frame" x="273" y="521.5" width="32" height="32"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <state key="normal" title="Skip">
+                        <color key="titleColor" name="Theme"/>
+                    </state>
+                    <connections>
+                        <action selector="actionSkip:" destination="-1" eventType="touchUpInside" id="ZcE-9N-iap"/>
+                    </connections>
+                </button>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="GA8-IA-WeO" firstAttribute="top" secondItem="PfA-QT-IhE" secondAttribute="bottom" constant="22" id="ENH-FJ-5CN"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="bottom" secondItem="GA8-IA-WeO" secondAttribute="bottom" constant="12" id="TBT-TL-cGj"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="PfA-QT-IhE" secondAttribute="trailing" id="YoX-QF-z68"/>
+                <constraint firstItem="PfA-QT-IhE" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="bU1-v6-hea"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="WOc-dJ-2by" secondAttribute="trailing" constant="15" id="ct7-1g-QL0"/>
+                <constraint firstItem="GA8-IA-WeO" firstAttribute="centerX" secondItem="i5M-Pr-FkT" secondAttribute="centerX" id="deS-g9-gZl"/>
+                <constraint firstItem="WOc-dJ-2by" firstAttribute="centerY" secondItem="GA8-IA-WeO" secondAttribute="centerY" id="fjO-6C-UlR"/>
+                <constraint firstItem="PfA-QT-IhE" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="p7O-kc-gib"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="138.40000000000001" y="128.18590704647679"/>
+        </view>
+    </objects>
+    <resources>
+        <namedColor name="Theme">
+            <color red="0.80000000000000004" green="0.0" blue="0.40000000000000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/18_Walkthrough5/Walkthrough5Cell.swift

@@ -0,0 +1,37 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Walkthrough5Cell: UICollectionViewCell {
+
+	@IBOutlet var imageView: UIImageView!
+	@IBOutlet var labelFeature1: UILabel!
+	@IBOutlet var labelDescription1: UILabel!
+	@IBOutlet var labelFeature2: UILabel!
+	@IBOutlet var labelDescription2: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int, data: [String: String]) {
+
+		guard let feature1 = data["feature1"] else { return }
+		guard let description1 = data["description1"] else { return }
+		guard let feature2 = data["feature2"] else { return }
+		guard let description2 = data["description2"] else { return }
+
+		imageView.sample("Ecommerce", "Electronics", index + 5)
+		labelFeature1.text = feature1
+		labelDescription1.text = description1
+		labelFeature2.text = feature2
+		labelDescription2.text = description2
+	}
+}

Ecommerce/Classes/18_Walkthrough5/Walkthrough5Cell.xib

@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="Walkthrough5Cell" id="gTV-IL-0wX" customClass="Walkthrough5Cell" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="311" height="526"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="311" height="526"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="4Wk-Oh-3ON">
+                        <rect key="frame" x="52.5" y="52.5" width="206" height="422"/>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstAttribute="height" constant="422" id="dMX-Rn-iX8"/>
+                            <constraint firstAttribute="width" constant="206" id="syU-aF-PXa"/>
+                        </constraints>
+                    </imageView>
+                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="walkthrough5_iphone.png" translatesAutoresizingMaskIntoConstraints="NO" id="hbY-hA-T8S" userLabel="Image View">
+                        <rect key="frame" x="-69.5" y="30" width="450" height="466"/>
+                    </imageView>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="giI-Fz-3OK">
+                        <rect key="frame" x="22" y="135" width="186.5" height="72"/>
+                        <subviews>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Feature1" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="g5Y-gH-KzA">
+                                <rect key="frame" x="15" y="15" width="156.5" height="17"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                <nil key="textColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description1" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="rjg-LY-XZm">
+                                <rect key="frame" x="15" y="40" width="156.5" height="17"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                        <constraints>
+                            <constraint firstItem="g5Y-gH-KzA" firstAttribute="top" secondItem="giI-Fz-3OK" secondAttribute="top" constant="15" id="Cw7-G5-xNg"/>
+                            <constraint firstAttribute="trailing" secondItem="g5Y-gH-KzA" secondAttribute="trailing" constant="15" id="Dg1-Ju-tD2"/>
+                            <constraint firstItem="g5Y-gH-KzA" firstAttribute="leading" secondItem="giI-Fz-3OK" secondAttribute="leading" constant="15" id="K1Y-uE-zzg"/>
+                            <constraint firstAttribute="bottom" secondItem="rjg-LY-XZm" secondAttribute="bottom" constant="15" id="M9Y-5U-uSG"/>
+                            <constraint firstAttribute="trailing" secondItem="rjg-LY-XZm" secondAttribute="trailing" constant="15" id="Zvg-sB-ueR"/>
+                            <constraint firstItem="rjg-LY-XZm" firstAttribute="top" secondItem="g5Y-gH-KzA" secondAttribute="bottom" constant="8" id="eW0-Bi-utJ"/>
+                            <constraint firstItem="rjg-LY-XZm" firstAttribute="leading" secondItem="giI-Fz-3OK" secondAttribute="leading" constant="15" id="rc0-Di-WfM"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                <real key="value" value="6"/>
+                            </userDefinedRuntimeAttribute>
+                            <userDefinedRuntimeAttribute type="color" keyPath="borderColor">
+                                <color key="value" name="Border"/>
+                            </userDefinedRuntimeAttribute>
+                            <userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
+                                <real key="value" value="0.5"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </view>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="g8C-2h-93b">
+                        <rect key="frame" x="102.5" y="319" width="186.5" height="72"/>
+                        <subviews>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Feature2" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Yw9-eZ-7pn">
+                                <rect key="frame" x="15" y="15" width="156.5" height="17"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                <nil key="textColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description2" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Rpf-zt-QDF">
+                                <rect key="frame" x="15" y="40" width="156.5" height="17"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                        <constraints>
+                            <constraint firstItem="Yw9-eZ-7pn" firstAttribute="top" secondItem="g8C-2h-93b" secondAttribute="top" constant="15" id="0mw-2y-ezH"/>
+                            <constraint firstItem="Yw9-eZ-7pn" firstAttribute="leading" secondItem="g8C-2h-93b" secondAttribute="leading" constant="15" id="bfy-ZK-YaE"/>
+                            <constraint firstAttribute="trailing" secondItem="Yw9-eZ-7pn" secondAttribute="trailing" constant="15" id="fFC-Wk-biw"/>
+                            <constraint firstItem="Rpf-zt-QDF" firstAttribute="top" secondItem="Yw9-eZ-7pn" secondAttribute="bottom" constant="8" id="gnL-xD-EOT"/>
+                            <constraint firstAttribute="bottom" secondItem="Rpf-zt-QDF" secondAttribute="bottom" constant="15" id="oQI-0g-H6h"/>
+                            <constraint firstItem="Rpf-zt-QDF" firstAttribute="leading" secondItem="g8C-2h-93b" secondAttribute="leading" constant="15" id="rf2-yG-5uQ"/>
+                            <constraint firstAttribute="trailing" secondItem="Rpf-zt-QDF" secondAttribute="trailing" constant="15" id="vRQ-3B-K51"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                <real key="value" value="6"/>
+                            </userDefinedRuntimeAttribute>
+                            <userDefinedRuntimeAttribute type="color" keyPath="borderColor">
+                                <color key="value" name="Border"/>
+                            </userDefinedRuntimeAttribute>
+                            <userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
+                                <real key="value" value="0.5"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </view>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstItem="hbY-hA-T8S" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" constant="30" id="0sp-KQ-zsB"/>
+                <constraint firstItem="4Wk-Oh-3ON" firstAttribute="centerX" secondItem="gTV-IL-0wX" secondAttribute="centerX" id="AAo-Pb-T2S"/>
+                <constraint firstItem="giI-Fz-3OK" firstAttribute="centerY" secondItem="gTV-IL-0wX" secondAttribute="centerY" multiplier="0.65" id="DLM-Y4-vTU"/>
+                <constraint firstItem="giI-Fz-3OK" firstAttribute="width" secondItem="gTV-IL-0wX" secondAttribute="width" multiplier="0.6" id="Ius-4a-AIv"/>
+                <constraint firstItem="g8C-2h-93b" firstAttribute="width" secondItem="gTV-IL-0wX" secondAttribute="width" multiplier="0.6" id="djR-aQ-pgr"/>
+                <constraint firstItem="hbY-hA-T8S" firstAttribute="centerX" secondItem="gTV-IL-0wX" secondAttribute="centerX" id="eS6-z2-pBT"/>
+                <constraint firstAttribute="bottom" secondItem="hbY-hA-T8S" secondAttribute="bottom" constant="30" id="igi-6B-u79"/>
+                <constraint firstItem="4Wk-Oh-3ON" firstAttribute="centerY" secondItem="gTV-IL-0wX" secondAttribute="centerY" multiplier="1.001" id="scN-dc-eez"/>
+                <constraint firstAttribute="trailing" secondItem="g8C-2h-93b" secondAttribute="trailing" constant="22" id="tai-Cq-Tqd"/>
+                <constraint firstItem="g8C-2h-93b" firstAttribute="centerY" secondItem="gTV-IL-0wX" secondAttribute="centerY" multiplier="1.35" id="weD-lu-Tn8"/>
+                <constraint firstItem="giI-Fz-3OK" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" constant="22" id="xfl-KT-urX"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="311" height="526"/>
+            <connections>
+                <outlet property="imageView" destination="4Wk-Oh-3ON" id="bdJ-MD-W4G"/>
+                <outlet property="labelDescription1" destination="rjg-LY-XZm" id="m4P-HA-STj"/>
+                <outlet property="labelDescription2" destination="Rpf-zt-QDF" id="ulm-uF-Zg5"/>
+                <outlet property="labelFeature1" destination="g5Y-gH-KzA" id="RJw-bF-0nO"/>
+                <outlet property="labelFeature2" destination="Yw9-eZ-7pn" id="KfV-uq-uwc"/>
+            </connections>
+            <point key="canvasLocation" x="325.3125" y="300"/>
+        </collectionViewCell>
+    </objects>
+    <resources>
+        <image name="walkthrough5_iphone.png" width="225" height="447"/>
+        <namedColor name="Border">
+            <color red="0.55699998140335083" green="0.55699998140335083" blue="0.57599997520446777" alpha="0.5" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/18_Walkthrough5/Walkthrough5View.swift

@@ -0,0 +1,142 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Walkthrough5View: UIViewController {
+
+	@IBOutlet var collectionView: UICollectionView!
+	@IBOutlet var pageControl: UIPageControl!
+
+	private var collections: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		collectionView.register(UINib(nibName: "Walkthrough5Cell", bundle: nil), forCellWithReuseIdentifier: "Walkthrough5Cell")
+
+		pageControl.pageIndicatorTintColor = UIColor.lightGray
+		pageControl.currentPageIndicatorTintColor = AppColor.Theme
+
+		loadCollections()
+	}
+
+	// MARK: - Collections methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadCollections() {
+
+		collections.removeAll()
+
+		var dict1: [String: String] = [:]
+		dict1["feature1"] = "Feature #1"
+		dict1["description1"] = "Get all brands at one place. Fill the bag with full of joy"
+		dict1["feature2"] = "Feature #2"
+		dict1["description2"] = "Get all brands at one place. Fill the bag with full of joy"
+		collections.append(dict1)
+
+		collections.append(dict1)
+		collections.append(dict1)
+		collections.append(dict1)
+
+		refreshCollectionView()
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionSkip(_ sender: UIButton) {
+
+		dismiss(animated: true)
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionView() {
+
+		collectionView.reloadData()
+	}
+}
+
+// MARK:- UICollectionViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough5View: UICollectionViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in collectionView: UICollectionView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+
+		return collections.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+
+		let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Walkthrough5Cell", for: indexPath) as! Walkthrough5Cell
+		cell.bindData(index: indexPath.item, data: collections[indexPath.row])
+		return cell
+	}
+}
+
+// MARK:- UICollectionViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough5View: UICollectionViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+
+		print("didSelectItemAt \(indexPath.row)")
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
+
+		pageControl.currentPage = indexPath.row
+	}
+}
+
+// MARK:- UICollectionViewDelegateFlowLayout
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Walkthrough5View: UICollectionViewDelegateFlowLayout {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+		let height = collectionView.frame.size.height
+		let width = collectionView.frame.size.width
+
+		return CGSize(width: width, height: height)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+
+		return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 0
+	}
+}

Ecommerce/Classes/18_Walkthrough5/Walkthrough5View.xib

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Walkthrough5View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="collectionView" destination="Sgl-aZ-NLF" id="c4i-Ag-qDP"/>
+                <outlet property="pageControl" destination="DoN-LY-2jO" id="ONV-OO-mFL"/>
+                <outlet property="view" destination="ka1-Dk-Vdg" id="CrK-uY-7gr"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="ka1-Dk-Vdg">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" pagingEnabled="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="Sgl-aZ-NLF">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="497"/>
+                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                    <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="10" minimumInteritemSpacing="10" id="fgH-fp-wzF">
+                        <size key="itemSize" width="50" height="50"/>
+                        <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                        <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                        <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                    </collectionViewFlowLayout>
+                    <connections>
+                        <outlet property="dataSource" destination="-1" id="0XE-Db-KV3"/>
+                        <outlet property="delegate" destination="-1" id="cgX-4o-qnE"/>
+                    </connections>
+                </collectionView>
+                <pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="4" translatesAutoresizingMaskIntoConstraints="NO" id="DoN-LY-2jO">
+                    <rect key="frame" x="132.5" y="519" width="55" height="37"/>
+                </pageControl>
+                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="A6C-WW-pMM">
+                    <rect key="frame" x="273" y="521.5" width="32" height="32"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="16"/>
+                    <state key="normal" title="Skip">
+                        <color key="titleColor" name="Theme"/>
+                    </state>
+                    <connections>
+                        <action selector="actionSkip:" destination="-1" eventType="touchUpInside" id="KNU-6y-WeD"/>
+                    </connections>
+                </button>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="Fv6-qJ-tdp" firstAttribute="trailing" secondItem="A6C-WW-pMM" secondAttribute="trailing" constant="15" id="6UV-cp-Hll"/>
+                <constraint firstItem="Sgl-aZ-NLF" firstAttribute="leading" secondItem="Fv6-qJ-tdp" secondAttribute="leading" id="8NK-j0-IKB"/>
+                <constraint firstItem="DoN-LY-2jO" firstAttribute="top" secondItem="Sgl-aZ-NLF" secondAttribute="bottom" constant="22" id="CF5-fX-4X0"/>
+                <constraint firstItem="DoN-LY-2jO" firstAttribute="centerX" secondItem="ka1-Dk-Vdg" secondAttribute="centerX" id="Fc9-78-k3v"/>
+                <constraint firstItem="Fv6-qJ-tdp" firstAttribute="bottom" secondItem="DoN-LY-2jO" secondAttribute="bottom" constant="12" id="KcQ-rN-dtc"/>
+                <constraint firstItem="Sgl-aZ-NLF" firstAttribute="top" secondItem="Fv6-qJ-tdp" secondAttribute="top" id="Rgz-Ls-2GV"/>
+                <constraint firstItem="A6C-WW-pMM" firstAttribute="centerY" secondItem="DoN-LY-2jO" secondAttribute="centerY" id="fdW-9b-Tkx"/>
+                <constraint firstItem="Fv6-qJ-tdp" firstAttribute="trailing" secondItem="Sgl-aZ-NLF" secondAttribute="trailing" id="ks2-NG-TfE"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="Fv6-qJ-tdp"/>
+            <point key="canvasLocation" x="138.40000000000001" y="128.18590704647679"/>
+        </view>
+    </objects>
+    <resources>
+        <namedColor name="Theme">
+            <color red="0.0" green="0.32549019607843138" blue="0.62352941176470589" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/19_Home1/Home1Cell1.swift

@@ -0,0 +1,24 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home1Cell1: UICollectionViewCell {
+
+	@IBOutlet var imageSlider: UIImageView!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int) {
+
+		imageSlider.sample("Ecommerce", "Candles", index)
+	}
+}

Ecommerce/Classes/19_Home1/Home1Cell1.xib

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="gTV-IL-0wX" customClass="Home1Cell1" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="302" height="187"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="302" height="187"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="LQ7-PE-6yU">
+                        <rect key="frame" x="0.0" y="0.0" width="302" height="187"/>
+                        <subviews>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="izI-2R-Jyl">
+                                <rect key="frame" x="5" y="5" width="292" height="177"/>
+                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <userDefinedRuntimeAttributes>
+                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                        <integer key="value" value="10"/>
+                                    </userDefinedRuntimeAttribute>
+                                </userDefinedRuntimeAttributes>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstItem="izI-2R-Jyl" firstAttribute="top" secondItem="LQ7-PE-6yU" secondAttribute="top" constant="5" id="Unj-9c-4bN"/>
+                            <constraint firstItem="izI-2R-Jyl" firstAttribute="leading" secondItem="LQ7-PE-6yU" secondAttribute="leading" constant="5" id="dyK-ah-aiX"/>
+                            <constraint firstAttribute="bottom" secondItem="izI-2R-Jyl" secondAttribute="bottom" constant="5" id="f9l-sQ-a5J"/>
+                            <constraint firstAttribute="trailing" secondItem="izI-2R-Jyl" secondAttribute="trailing" constant="5" id="kcG-DL-s3g"/>
+                        </constraints>
+                    </view>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstItem="LQ7-PE-6yU" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="Mqu-2B-Taa"/>
+                <constraint firstItem="LQ7-PE-6yU" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" id="T36-hS-KYu"/>
+                <constraint firstAttribute="bottom" secondItem="LQ7-PE-6yU" secondAttribute="bottom" id="cRA-d7-NIJ"/>
+                <constraint firstAttribute="trailing" secondItem="LQ7-PE-6yU" secondAttribute="trailing" id="cdZ-Zl-5e5"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="302" height="187"/>
+            <connections>
+                <outlet property="imageSlider" destination="izI-2R-Jyl" id="3Zr-NI-mNG"/>
+            </connections>
+            <point key="canvasLocation" x="97" y="114"/>
+        </collectionViewCell>
+    </objects>
+</document>

Ecommerce/Classes/19_Home1/Home1Cell2.swift

@@ -0,0 +1,32 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home1Cell2: UICollectionViewCell {
+
+	@IBOutlet var imageProduct: UIImageView!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelDescription: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int, data: [String: String]) {
+
+		guard let images = data["images"] else { return }
+		guard let title = data["title"] else { return }
+		guard let description = data["description"] else { return }
+
+		imageProduct.sample("Ecommerce", images, index)
+		labelTitle.text = title
+		labelDescription.text = description
+	}
+}

Ecommerce/Classes/19_Home1/Home1Cell2.xib

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="gTV-IL-0wX" customClass="Home1Cell2" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="167" height="192"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="167" height="192"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="mdf-dq-mNR">
+                        <rect key="frame" x="0.0" y="0.0" width="167" height="192"/>
+                        <subviews>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="0kB-xf-sFC">
+                                <rect key="frame" x="0.0" y="0.0" width="167" height="152"/>
+                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <userDefinedRuntimeAttributes>
+                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                        <integer key="value" value="10"/>
+                                    </userDefinedRuntimeAttribute>
+                                </userDefinedRuntimeAttributes>
+                            </imageView>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Qgu-Bs-NUo">
+                                <rect key="frame" x="10" y="162" width="147" height="15"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="15" id="OmN-PR-dSv"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" weight="medium" pointSize="14"/>
+                                <nil key="textColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="dXh-gb-5PM">
+                                <rect key="frame" x="10" y="177" width="147" height="15"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="15" id="len-oT-VyX"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" pointSize="13"/>
+                                <color key="textColor" systemColor="systemGrayColor" red="0.5568627451" green="0.5568627451" blue="0.57647058819999997" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstItem="Qgu-Bs-NUo" firstAttribute="top" secondItem="0kB-xf-sFC" secondAttribute="bottom" constant="10" id="93k-C7-rAe"/>
+                            <constraint firstItem="dXh-gb-5PM" firstAttribute="leading" secondItem="mdf-dq-mNR" secondAttribute="leading" constant="10" id="Cti-bV-9lf"/>
+                            <constraint firstAttribute="trailing" secondItem="0kB-xf-sFC" secondAttribute="trailing" id="Kam-f4-Tuf"/>
+                            <constraint firstItem="0kB-xf-sFC" firstAttribute="leading" secondItem="mdf-dq-mNR" secondAttribute="leading" id="NtB-XJ-cWz"/>
+                            <constraint firstItem="dXh-gb-5PM" firstAttribute="top" secondItem="Qgu-Bs-NUo" secondAttribute="bottom" id="bBo-rE-iie"/>
+                            <constraint firstAttribute="trailing" secondItem="Qgu-Bs-NUo" secondAttribute="trailing" constant="10" id="cJ4-NI-2af"/>
+                            <constraint firstItem="0kB-xf-sFC" firstAttribute="top" secondItem="mdf-dq-mNR" secondAttribute="top" id="elo-oP-MuX"/>
+                            <constraint firstAttribute="bottom" secondItem="dXh-gb-5PM" secondAttribute="bottom" id="qIJ-lj-vQI"/>
+                            <constraint firstItem="Qgu-Bs-NUo" firstAttribute="leading" secondItem="mdf-dq-mNR" secondAttribute="leading" constant="10" id="tEX-iN-s3V"/>
+                            <constraint firstAttribute="trailing" secondItem="dXh-gb-5PM" secondAttribute="trailing" constant="10" id="uQe-Wa-mXn"/>
+                        </constraints>
+                    </view>
+                </subviews>
+            </view>
+            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+            <constraints>
+                <constraint firstItem="mdf-dq-mNR" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="6hI-Kh-gRt"/>
+                <constraint firstAttribute="bottom" secondItem="mdf-dq-mNR" secondAttribute="bottom" id="Kc1-GM-27O"/>
+                <constraint firstAttribute="trailing" secondItem="mdf-dq-mNR" secondAttribute="trailing" id="LJV-pY-k9a"/>
+                <constraint firstItem="mdf-dq-mNR" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" id="ycc-jS-uny"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="167" height="192"/>
+            <connections>
+                <outlet property="imageProduct" destination="0kB-xf-sFC" id="FLX-L5-n7R"/>
+                <outlet property="labelDescription" destination="dXh-gb-5PM" id="i2H-QE-9B4"/>
+                <outlet property="labelTitle" destination="Qgu-Bs-NUo" id="DxH-s9-BeN"/>
+            </connections>
+            <point key="canvasLocation" x="216.66666666666669" y="200.89285714285714"/>
+        </collectionViewCell>
+    </objects>
+</document>

Ecommerce/Classes/19_Home1/Home1View.swift

@@ -0,0 +1,243 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home1View: UIViewController {
+
+	@IBOutlet var imageProfile: UIImageView!
+	@IBOutlet var buttonProfile: UIButton!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelSubTitle: UILabel!
+	@IBOutlet var collectionViewSlider: UICollectionView!
+	@IBOutlet var pageControl: UIPageControl!
+
+	@IBOutlet var collectionViewProducts: UICollectionView!
+	@IBOutlet var layoutConstraintProductsHeight: NSLayoutConstraint!
+
+	private var products: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		collectionViewSlider.register(UINib(nibName: "Home1Cell1", bundle: Bundle.main), forCellWithReuseIdentifier: "Home1Cell1")
+		collectionViewProducts.register(UINib(nibName: "Home1Cell2", bundle: Bundle.main), forCellWithReuseIdentifier: "Home1Cell2")
+
+		loadData()
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewWillLayoutSubviews() {
+
+		super.viewWillLayoutSubviews()
+
+		layoutConstraintProductsHeight.constant = collectionViewProducts.contentSize.height
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		labelTitle.text = "Shop"
+		labelSubTitle.text = "Over 45K Items Available for you"
+		imageProfile.sample("Social", "Portraits", 1)
+		pageControl.numberOfPages = 5
+
+		products.removeAll()
+
+		var dict1: [String: String] = [:]
+		dict1["images"] = "Electronics"
+		dict1["title"] = "New Trend"
+		dict1["description"] = "Dress like a tourist"
+		products.append(dict1)
+
+		var dict2: [String: String] = [:]
+		dict2["images"] = "Clothes"
+		dict2["title"] = "Shirts"
+		dict2["description"] = "Fresh prints of Bel-Air"
+		products.append(dict2)
+
+		var dict3: [String: String] = [:]
+		dict3["images"] = "Shoes"
+		dict3["title"] = "Shoes"
+		dict3["description"] = "Bring power to your steps"
+		products.append(dict3)
+
+		var dict4: [String: String] = [:]
+		dict4["images"] = "Watches"
+		dict4["title"] = "Watches"
+		dict4["description"] = "Time is what you make of it."
+		products.append(dict4)
+
+		var dict5: [String: String] = [:]
+		dict5["images"] = "Clothes"
+		dict5["title"] = "Jeans"
+		dict5["description"] = "Quality never goes out of style"
+		products.append(dict5)
+
+		var dict6: [String: String] = [:]
+		dict6["images"] = "Clothes"
+		dict6["title"] = "T-Shirts"
+		dict6["description"] = "Blink If You Want Me"
+		products.append(dict6)
+
+		refreshCollectionViewSlider()
+		refreshCollectionViewProducts()
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionViewSlider() {
+
+		collectionViewSlider.reloadData()
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionViewProducts() {
+
+		collectionViewProducts.reloadData()
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionProfile(_ sender: UIButton) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionSeeAll(_ sender: UIButton) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+}
+
+// MARK: - UICollectionViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home1View: UICollectionViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in collectionView: UICollectionView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+
+		if (collectionView == collectionViewSlider)		{ return 5 }
+		if (collectionView == collectionViewProducts)	{ return products.count }
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+
+		if (collectionView == collectionViewSlider) {
+			let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Home1Cell1", for: indexPath) as! Home1Cell1
+			cell.bindData(index: indexPath.item)
+			return cell
+		}
+
+		if (collectionView == collectionViewProducts) {
+			let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Home1Cell2", for: indexPath) as! Home1Cell2
+			cell.bindData(index: indexPath.item, data: products[indexPath.row])
+			return cell
+		}
+
+		return UICollectionViewCell()
+	}
+}
+
+// MARK: - UICollectionViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home1View: UICollectionViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+
+		print(#function)
+		if (collectionView == collectionViewSlider) {
+
+		}
+		if (collectionView == collectionViewProducts) {
+
+		}
+	}
+}
+
+// MARK: - UICollectionViewDelegateFlowLayout
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home1View: UICollectionViewDelegateFlowLayout {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+		if (collectionView == collectionViewSlider) {
+			return collectionView.frame.size
+		}
+		if (collectionView == collectionViewProducts) {
+			let width = (collectionView.frame.size.width-15)/2
+			return CGSize(width: width, height: width)
+		}
+
+		return CGSize.zero
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+
+		if (collectionView == collectionViewSlider)		{ return 0 }
+		if (collectionView == collectionViewProducts)	{ return 15 }
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+
+		if (collectionView == collectionViewSlider)		{ return 0 }
+		if (collectionView == collectionViewProducts)	{ return 15 }
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+
+		if (collectionView == collectionViewSlider)		{ return UIEdgeInsets.zero }
+		if (collectionView == collectionViewProducts)	{ return UIEdgeInsets.zero }
+
+		return UIEdgeInsets.zero
+	}
+}
+
+// MARK: - UIScrollViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home1View: UIScrollViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
+
+		let visibleRect = CGRect(origin: collectionViewSlider.contentOffset, size: collectionViewSlider.bounds.size)
+		let visiblePoint = CGPoint(x: visibleRect.midX, y: visibleRect.midY)
+
+		if let visibleIndexPath = collectionViewSlider.indexPathForItem(at: visiblePoint) {
+			pageControl.currentPage = visibleIndexPath.row
+		}
+	}
+}

Ecommerce/Classes/19_Home1/Home1View.xib

@@ -0,0 +1,268 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Home1View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="buttonProfile" destination="li7-sV-VT9" id="jB5-VS-ztN"/>
+                <outlet property="collectionViewProducts" destination="nMv-Qc-ZwD" id="oK1-zO-0uZ"/>
+                <outlet property="collectionViewSlider" destination="uZZ-Ry-NAd" id="r4S-ss-L8u"/>
+                <outlet property="imageProfile" destination="pG8-Px-9t7" id="qW9-Bg-WPI"/>
+                <outlet property="labelSubTitle" destination="sMH-Mq-MLk" id="fdE-yC-8oo"/>
+                <outlet property="labelTitle" destination="trb-Ob-4UB" id="Fi7-1Y-YJu"/>
+                <outlet property="layoutConstraintProductsHeight" destination="enF-mH-cRp" id="vJO-jC-byc"/>
+                <outlet property="pageControl" destination="DvB-C1-DQo" id="eei-Ib-yQy"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Ygr-i1-Ncj">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <subviews>
+                        <view clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="bev-2w-ph9">
+                            <rect key="frame" x="0.0" y="0.0" width="320" height="100"/>
+                            <subviews>
+                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="trb-Ob-4UB">
+                                    <rect key="frame" x="15" y="30" width="72" height="45"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="45" id="qp9-P5-qft"/>
+                                    </constraints>
+                                    <fontDescription key="fontDescription" type="boldSystem" pointSize="35"/>
+                                    <nil key="textColor"/>
+                                    <nil key="highlightedColor"/>
+                                </label>
+                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Subtitle" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="sMH-Mq-MLk">
+                                    <rect key="frame" x="15" y="75" width="47" height="15"/>
+                                    <constraints>
+                                        <constraint firstAttribute="height" constant="15" id="Nvk-UJ-qtU"/>
+                                    </constraints>
+                                    <fontDescription key="fontDescription" type="system" pointSize="13"/>
+                                    <color key="textColor" systemColor="systemGrayColor" red="0.5568627451" green="0.5568627451" blue="0.57647058819999997" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                    <nil key="highlightedColor"/>
+                                </label>
+                                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="person.circle.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="pG8-Px-9t7">
+                                    <rect key="frame" x="245" y="30.5" width="60" height="59"/>
+                                    <color key="tintColor" systemColor="systemGrayColor" red="0.5568627451" green="0.5568627451" blue="0.57647058819999997" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                    <userDefinedRuntimeAttributes>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                            <integer key="value" value="30"/>
+                                        </userDefinedRuntimeAttribute>
+                                    </userDefinedRuntimeAttributes>
+                                </imageView>
+                                <button opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="li7-sV-VT9">
+                                    <rect key="frame" x="245" y="30" width="60" height="60"/>
+                                    <constraints>
+                                        <constraint firstAttribute="width" secondItem="li7-sV-VT9" secondAttribute="height" id="Xye-TI-ko8"/>
+                                    </constraints>
+                                    <userDefinedRuntimeAttributes>
+                                        <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                            <integer key="value" value="30"/>
+                                        </userDefinedRuntimeAttribute>
+                                    </userDefinedRuntimeAttributes>
+                                    <connections>
+                                        <action selector="actionProfile:" destination="-1" eventType="touchUpInside" id="aqh-hu-1SU"/>
+                                    </connections>
+                                </button>
+                            </subviews>
+                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                            <constraints>
+                                <constraint firstItem="pG8-Px-9t7" firstAttribute="leading" secondItem="li7-sV-VT9" secondAttribute="leading" id="6uA-HU-5eV"/>
+                                <constraint firstItem="trb-Ob-4UB" firstAttribute="leading" secondItem="bev-2w-ph9" secondAttribute="leading" constant="15" id="Aql-Qw-kai"/>
+                                <constraint firstItem="pG8-Px-9t7" firstAttribute="bottom" secondItem="li7-sV-VT9" secondAttribute="bottom" id="ILZ-Bl-TO9"/>
+                                <constraint firstItem="pG8-Px-9t7" firstAttribute="top" secondItem="li7-sV-VT9" secondAttribute="top" id="MVe-CO-w55"/>
+                                <constraint firstAttribute="bottom" secondItem="li7-sV-VT9" secondAttribute="bottom" constant="10" id="RMi-CD-g2c"/>
+                                <constraint firstItem="sMH-Mq-MLk" firstAttribute="leading" secondItem="bev-2w-ph9" secondAttribute="leading" constant="15" id="hJA-PM-FlN"/>
+                                <constraint firstItem="pG8-Px-9t7" firstAttribute="trailing" secondItem="li7-sV-VT9" secondAttribute="trailing" id="lxN-Hq-KV0"/>
+                                <constraint firstItem="sMH-Mq-MLk" firstAttribute="top" secondItem="trb-Ob-4UB" secondAttribute="bottom" id="lyn-OG-xL3"/>
+                                <constraint firstItem="li7-sV-VT9" firstAttribute="top" secondItem="trb-Ob-4UB" secondAttribute="top" id="t7z-Ij-xJw"/>
+                                <constraint firstAttribute="bottom" secondItem="sMH-Mq-MLk" secondAttribute="bottom" constant="10" id="txL-Xv-KBS"/>
+                                <constraint firstAttribute="trailing" secondItem="li7-sV-VT9" secondAttribute="trailing" constant="15" id="wXW-bz-Rjg"/>
+                                <constraint firstItem="trb-Ob-4UB" firstAttribute="top" secondItem="bev-2w-ph9" secondAttribute="top" constant="30" id="zvM-pw-ObY"/>
+                            </constraints>
+                        </view>
+                        <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" translatesAutoresizingMaskIntoConstraints="NO" id="eSb-9M-qF3">
+                            <rect key="frame" x="0.0" y="100" width="320" height="468"/>
+                            <subviews>
+                                <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="1nl-8Y-Fce">
+                                    <rect key="frame" x="0.0" y="0.0" width="320" height="454.5"/>
+                                    <subviews>
+                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="h4U-TD-UO9">
+                                            <rect key="frame" x="0.0" y="0.0" width="320" height="214.5"/>
+                                            <subviews>
+                                                <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" pagingEnabled="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="uZZ-Ry-NAd">
+                                                    <rect key="frame" x="15" y="15" width="290" height="159.5"/>
+                                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                    <constraints>
+                                                        <constraint firstAttribute="width" secondItem="uZZ-Ry-NAd" secondAttribute="height" multiplier="2:1.1" id="gjP-iF-E8P"/>
+                                                    </constraints>
+                                                    <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="10" minimumInteritemSpacing="10" id="unK-2G-1nM">
+                                                        <size key="itemSize" width="50" height="50"/>
+                                                        <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                                                        <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                                                        <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                                    </collectionViewFlowLayout>
+                                                    <connections>
+                                                        <outlet property="dataSource" destination="-1" id="WXd-kx-Rgj"/>
+                                                        <outlet property="delegate" destination="-1" id="Wxi-TZ-fwf"/>
+                                                    </connections>
+                                                </collectionView>
+                                                <pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="5" translatesAutoresizingMaskIntoConstraints="NO" id="DvB-C1-DQo">
+                                                    <rect key="frame" x="10" y="174.5" width="300" height="40"/>
+                                                    <constraints>
+                                                        <constraint firstAttribute="height" constant="40" id="WdX-NK-yes"/>
+                                                    </constraints>
+                                                    <color key="pageIndicatorTintColor" systemColor="systemGrayColor" red="0.5568627451" green="0.5568627451" blue="0.57647058819999997" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                                    <color key="currentPageIndicatorTintColor" name="Theme"/>
+                                                </pageControl>
+                                            </subviews>
+                                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                            <constraints>
+                                                <constraint firstAttribute="trailing" secondItem="DvB-C1-DQo" secondAttribute="trailing" constant="10" id="Fmn-3f-iTz"/>
+                                                <constraint firstItem="uZZ-Ry-NAd" firstAttribute="leading" secondItem="h4U-TD-UO9" secondAttribute="leading" constant="15" id="J8Q-uB-57B"/>
+                                                <constraint firstAttribute="trailing" secondItem="uZZ-Ry-NAd" secondAttribute="trailing" constant="15" id="Zpa-Ro-36j"/>
+                                                <constraint firstItem="DvB-C1-DQo" firstAttribute="top" secondItem="uZZ-Ry-NAd" secondAttribute="bottom" id="blL-ml-Wg8"/>
+                                                <constraint firstAttribute="bottom" secondItem="DvB-C1-DQo" secondAttribute="bottom" id="glw-FC-FSe"/>
+                                                <constraint firstItem="uZZ-Ry-NAd" firstAttribute="top" secondItem="h4U-TD-UO9" secondAttribute="top" constant="15" id="kh8-0L-BuA"/>
+                                                <constraint firstItem="DvB-C1-DQo" firstAttribute="leading" secondItem="h4U-TD-UO9" secondAttribute="leading" constant="10" id="y9i-BG-xad"/>
+                                            </constraints>
+                                        </view>
+                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="A8l-6T-d1I">
+                                            <rect key="frame" x="0.0" y="214.5" width="320" height="50"/>
+                                            <subviews>
+                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="New Arrivals" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="sif-gU-7RG">
+                                                    <rect key="frame" x="15" y="0.0" width="180" height="50"/>
+                                                    <fontDescription key="fontDescription" type="boldSystem" pointSize="20"/>
+                                                    <nil key="textColor"/>
+                                                    <nil key="highlightedColor"/>
+                                                </label>
+                                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2IC-k8-dgf">
+                                                    <rect key="frame" x="205" y="0.0" width="100" height="50"/>
+                                                    <subviews>
+                                                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="chevron.right" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="stv-Db-iFe">
+                                                            <rect key="frame" x="75" y="19.5" width="15" height="11.5"/>
+                                                            <color key="tintColor" name="Theme"/>
+                                                            <constraints>
+                                                                <constraint firstAttribute="width" constant="15" id="MgK-RX-Yym"/>
+                                                                <constraint firstAttribute="height" constant="15" id="Mz8-f2-GD7"/>
+                                                            </constraints>
+                                                        </imageView>
+                                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Agp-9T-xZf">
+                                                            <rect key="frame" x="0.0" y="0.0" width="100" height="50"/>
+                                                            <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="16"/>
+                                                            <color key="tintColor" name="Theme"/>
+                                                            <inset key="titleEdgeInsets" minX="-10" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                                            <inset key="imageEdgeInsets" minX="80" minY="20" maxX="10" maxY="20"/>
+                                                            <state key="normal" title="See All"/>
+                                                            <connections>
+                                                                <action selector="actionSeeAll:" destination="-1" eventType="touchUpInside" id="qa0-4p-JUT"/>
+                                                            </connections>
+                                                        </button>
+                                                    </subviews>
+                                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                    <constraints>
+                                                        <constraint firstItem="Agp-9T-xZf" firstAttribute="leading" secondItem="2IC-k8-dgf" secondAttribute="leading" id="Fql-5u-R8o"/>
+                                                        <constraint firstAttribute="width" constant="100" id="Kap-Ug-hpM"/>
+                                                        <constraint firstAttribute="trailing" secondItem="stv-Db-iFe" secondAttribute="trailing" constant="10" id="SwU-58-Pdj"/>
+                                                        <constraint firstItem="stv-Db-iFe" firstAttribute="centerY" secondItem="2IC-k8-dgf" secondAttribute="centerY" id="X6l-WH-0CI"/>
+                                                        <constraint firstAttribute="bottom" secondItem="Agp-9T-xZf" secondAttribute="bottom" id="XyP-an-o49"/>
+                                                        <constraint firstItem="Agp-9T-xZf" firstAttribute="top" secondItem="2IC-k8-dgf" secondAttribute="top" id="cIb-BZ-E7j"/>
+                                                        <constraint firstAttribute="trailing" secondItem="Agp-9T-xZf" secondAttribute="trailing" id="eVQ-5X-3Rk"/>
+                                                    </constraints>
+                                                </view>
+                                            </subviews>
+                                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                            <constraints>
+                                                <constraint firstItem="sif-gU-7RG" firstAttribute="leading" secondItem="A8l-6T-d1I" secondAttribute="leading" constant="15" id="2YR-xP-O0j"/>
+                                                <constraint firstAttribute="height" constant="50" id="76D-ZR-npS"/>
+                                                <constraint firstAttribute="bottom" secondItem="2IC-k8-dgf" secondAttribute="bottom" id="Bgo-TV-gvd"/>
+                                                <constraint firstItem="2IC-k8-dgf" firstAttribute="top" secondItem="A8l-6T-d1I" secondAttribute="top" id="NRv-Z9-cJ4"/>
+                                                <constraint firstAttribute="bottom" secondItem="sif-gU-7RG" secondAttribute="bottom" id="QO3-66-OVf"/>
+                                                <constraint firstItem="sif-gU-7RG" firstAttribute="top" secondItem="A8l-6T-d1I" secondAttribute="top" id="aL5-Bg-OMD"/>
+                                                <constraint firstItem="2IC-k8-dgf" firstAttribute="leading" secondItem="sif-gU-7RG" secondAttribute="trailing" constant="10" id="bdZ-MM-hRk"/>
+                                                <constraint firstAttribute="trailing" secondItem="2IC-k8-dgf" secondAttribute="trailing" constant="15" id="t1z-0l-YEg"/>
+                                            </constraints>
+                                        </view>
+                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="lmo-RU-hU9">
+                                            <rect key="frame" x="0.0" y="264.5" width="320" height="190"/>
+                                            <subviews>
+                                                <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="nMv-Qc-ZwD">
+                                                    <rect key="frame" x="15" y="10" width="290" height="180"/>
+                                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                    <constraints>
+                                                        <constraint firstAttribute="height" constant="180" id="enF-mH-cRp"/>
+                                                    </constraints>
+                                                    <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="10" minimumInteritemSpacing="10" id="gy5-SE-zqB">
+                                                        <size key="itemSize" width="50" height="50"/>
+                                                        <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                                                        <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                                                        <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                                    </collectionViewFlowLayout>
+                                                    <connections>
+                                                        <outlet property="dataSource" destination="-1" id="r2v-d7-q2y"/>
+                                                        <outlet property="delegate" destination="-1" id="1AY-Yr-rGk"/>
+                                                    </connections>
+                                                </collectionView>
+                                            </subviews>
+                                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                            <constraints>
+                                                <constraint firstItem="nMv-Qc-ZwD" firstAttribute="leading" secondItem="lmo-RU-hU9" secondAttribute="leading" constant="15" id="49H-d8-l28"/>
+                                                <constraint firstItem="nMv-Qc-ZwD" firstAttribute="top" secondItem="lmo-RU-hU9" secondAttribute="top" constant="10" id="GyM-tC-7EM"/>
+                                                <constraint firstAttribute="bottom" secondItem="nMv-Qc-ZwD" secondAttribute="bottom" id="Vrc-e8-8Um"/>
+                                                <constraint firstAttribute="trailing" secondItem="nMv-Qc-ZwD" secondAttribute="trailing" constant="15" id="taD-to-cSU"/>
+                                            </constraints>
+                                        </view>
+                                    </subviews>
+                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                </stackView>
+                            </subviews>
+                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                            <constraints>
+                                <constraint firstAttribute="bottom" secondItem="1nl-8Y-Fce" secondAttribute="bottom" id="2S3-Ih-Hsx"/>
+                                <constraint firstItem="1nl-8Y-Fce" firstAttribute="top" secondItem="eSb-9M-qF3" secondAttribute="top" id="mNl-F7-WRi"/>
+                                <constraint firstItem="1nl-8Y-Fce" firstAttribute="centerX" secondItem="eSb-9M-qF3" secondAttribute="centerX" id="nB3-X6-MT9"/>
+                                <constraint firstItem="1nl-8Y-Fce" firstAttribute="leading" secondItem="eSb-9M-qF3" secondAttribute="leading" id="ydf-tN-Exv"/>
+                                <constraint firstAttribute="trailing" secondItem="1nl-8Y-Fce" secondAttribute="trailing" id="z9j-ON-Ck0"/>
+                            </constraints>
+                        </scrollView>
+                    </subviews>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <constraints>
+                        <constraint firstAttribute="trailing" secondItem="bev-2w-ph9" secondAttribute="trailing" id="4tW-V7-LyE"/>
+                        <constraint firstItem="bev-2w-ph9" firstAttribute="leading" secondItem="Ygr-i1-Ncj" secondAttribute="leading" id="On6-Vr-EF8"/>
+                        <constraint firstItem="eSb-9M-qF3" firstAttribute="leading" secondItem="Ygr-i1-Ncj" secondAttribute="leading" id="TOs-aP-AhO"/>
+                        <constraint firstAttribute="trailing" secondItem="eSb-9M-qF3" secondAttribute="trailing" id="XaR-MH-ebu"/>
+                        <constraint firstAttribute="bottom" secondItem="eSb-9M-qF3" secondAttribute="bottom" id="Y5c-EH-e5C"/>
+                        <constraint firstItem="bev-2w-ph9" firstAttribute="top" secondItem="Ygr-i1-Ncj" secondAttribute="top" id="ef2-tc-vh7"/>
+                        <constraint firstItem="eSb-9M-qF3" firstAttribute="top" secondItem="bev-2w-ph9" secondAttribute="bottom" id="hAC-8U-MSI"/>
+                    </constraints>
+                </view>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="Ygr-i1-Ncj" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="4K3-fS-47Q"/>
+                <constraint firstItem="Ygr-i1-Ncj" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="ULv-Pb-jEz"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="Ygr-i1-Ncj" secondAttribute="trailing" id="cJZ-1O-JOs"/>
+                <constraint firstAttribute="bottom" secondItem="Ygr-i1-Ncj" secondAttribute="bottom" id="cmN-xB-1Ee"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="38" y="58"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="chevron.right" catalog="system" width="48" height="64"/>
+        <image name="person.circle.fill" catalog="system" width="64" height="60"/>
+        <namedColor name="Theme">
+            <color red="0.26600000262260437" green="0.61599999666213989" blue="0.75999999046325684" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/20_Home2/Home2Cell1.swift

@@ -0,0 +1,24 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home2Cell1: UICollectionViewCell {
+
+	@IBOutlet var imageSlider: UIImageView!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int) {
+
+		imageSlider.sample("Ecommerce", "Candles", index)
+	}
+}

Ecommerce/Classes/20_Home2/Home2Cell1.xib

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="gTV-IL-0wX" customClass="Home2Cell1" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="384" height="295"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="384" height="295"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Rof-A2-0Nc">
+                        <rect key="frame" x="0.0" y="0.0" width="384" height="295"/>
+                        <subviews>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="x3V-v0-zmz">
+                                <rect key="frame" x="0.0" y="0.0" width="384" height="295"/>
+                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <userDefinedRuntimeAttributes>
+                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                        <integer key="value" value="10"/>
+                                    </userDefinedRuntimeAttribute>
+                                </userDefinedRuntimeAttributes>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstAttribute="bottom" secondItem="x3V-v0-zmz" secondAttribute="bottom" id="ECW-jn-oF1"/>
+                            <constraint firstItem="x3V-v0-zmz" firstAttribute="top" secondItem="Rof-A2-0Nc" secondAttribute="top" id="WQb-hp-f0G"/>
+                            <constraint firstAttribute="trailing" secondItem="x3V-v0-zmz" secondAttribute="trailing" id="qea-J0-zf8"/>
+                            <constraint firstItem="x3V-v0-zmz" firstAttribute="leading" secondItem="Rof-A2-0Nc" secondAttribute="leading" id="zDa-G0-rfk"/>
+                        </constraints>
+                    </view>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstAttribute="trailing" secondItem="Rof-A2-0Nc" secondAttribute="trailing" id="cHB-oy-ORs"/>
+                <constraint firstAttribute="bottom" secondItem="Rof-A2-0Nc" secondAttribute="bottom" id="evf-UW-fHT"/>
+                <constraint firstItem="Rof-A2-0Nc" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="rEk-TH-EDa"/>
+                <constraint firstItem="Rof-A2-0Nc" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" id="wSj-ab-qWj"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="384" height="295"/>
+            <connections>
+                <outlet property="imageSlider" destination="x3V-v0-zmz" id="xnJ-wV-yh1"/>
+            </connections>
+            <point key="canvasLocation" x="373.91304347826087" y="235.37946428571428"/>
+        </collectionViewCell>
+    </objects>
+</document>

Ecommerce/Classes/20_Home2/Home2Cell2.swift

@@ -0,0 +1,24 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home2Cell2: UICollectionViewCell {
+
+	@IBOutlet var labelCategory: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(category: String) {
+
+		labelCategory.text = category
+	}
+}

Ecommerce/Classes/20_Home2/Home2Cell2.xib

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="gTV-IL-0wX" customClass="Home2Cell2" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="292" height="40"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="292" height="40"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <view clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="jIV-eH-46I">
+                        <rect key="frame" x="0.0" y="0.0" width="292" height="40"/>
+                        <subviews>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Category" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" preferredMaxLayoutWidth="40" translatesAutoresizingMaskIntoConstraints="NO" id="7Nw-wg-rRc">
+                                <rect key="frame" x="10" y="0.0" width="247" height="40"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="15"/>
+                                <nil key="textColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="chevron.right" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="woY-65-ypb">
+                                <rect key="frame" x="267" y="14.5" width="15" height="11.5"/>
+                                <color key="tintColor" systemColor="systemGrayColor" red="0.5568627451" green="0.5568627451" blue="0.57647058819999997" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="15" id="HOE-b3-Xka"/>
+                                    <constraint firstAttribute="width" constant="15" id="zvB-Fd-RId"/>
+                                </constraints>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstAttribute="trailing" secondItem="woY-65-ypb" secondAttribute="trailing" constant="10" id="MZY-DW-694"/>
+                            <constraint firstAttribute="bottom" secondItem="7Nw-wg-rRc" secondAttribute="bottom" id="ZOJ-Pj-Oto"/>
+                            <constraint firstItem="woY-65-ypb" firstAttribute="leading" secondItem="7Nw-wg-rRc" secondAttribute="trailing" constant="10" id="d54-pM-uww"/>
+                            <constraint firstItem="7Nw-wg-rRc" firstAttribute="leading" secondItem="jIV-eH-46I" secondAttribute="leading" constant="10" id="eqz-as-hCh"/>
+                            <constraint firstItem="7Nw-wg-rRc" firstAttribute="top" secondItem="jIV-eH-46I" secondAttribute="top" id="mPw-5G-EFv"/>
+                            <constraint firstItem="woY-65-ypb" firstAttribute="centerY" secondItem="jIV-eH-46I" secondAttribute="centerY" id="qgB-v7-sOE"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                <real key="value" value="8"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </view>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstItem="jIV-eH-46I" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="03n-Dj-imI"/>
+                <constraint firstAttribute="bottom" secondItem="jIV-eH-46I" secondAttribute="bottom" id="74h-9e-LpI"/>
+                <constraint firstAttribute="trailing" secondItem="jIV-eH-46I" secondAttribute="trailing" id="Hvi-V9-RSA"/>
+                <constraint firstItem="jIV-eH-46I" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" id="dL7-O4-EoY"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="292" height="42"/>
+            <connections>
+                <outlet property="labelCategory" destination="7Nw-wg-rRc" id="map-yD-uY1"/>
+            </connections>
+            <point key="canvasLocation" x="126.08695652173914" y="62.946428571428569"/>
+        </collectionViewCell>
+    </objects>
+    <resources>
+        <image name="chevron.right" catalog="system" width="48" height="64"/>
+    </resources>
+</document>

Ecommerce/Classes/20_Home2/Home2Cell3.swift

@@ -0,0 +1,46 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home2Cell3: UICollectionViewCell {
+
+	@IBOutlet var imageProduct: UIImageView!
+	@IBOutlet var buttonMore: UIButton!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelBrandName: UILabel!
+	@IBOutlet var labelPrice: UILabel!
+	@IBOutlet var labelOriginalPrice: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func awakeFromNib() {
+
+		super.awakeFromNib()
+		buttonMore.layer.borderWidth = 1
+		buttonMore.layer.borderColor = AppColor.Border.cgColor
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int, data: [String: String]) {
+
+		guard let title = data["title"] else { return }
+		guard let brand = data["brand"] else { return }
+		guard let price = data["price"] else { return }
+		guard let originalPrice = data["originalPrice"] else { return }
+
+		imageProduct.sample("Ecommerce", "Furniture", index)
+		labelTitle.text = title
+		labelBrandName.text = brand
+		labelPrice.text = price
+		labelOriginalPrice.text = originalPrice
+	}
+}

Ecommerce/Classes/20_Home2/Home2Cell3.xib

@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="gTV-IL-0wX" customClass="Home2Cell3" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="155" height="211"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="155" height="211"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="UJF-ci-zKO">
+                        <rect key="frame" x="0.0" y="0.0" width="155" height="211"/>
+                        <subviews>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="zxM-aT-n4T">
+                                <rect key="frame" x="0.0" y="0.0" width="155" height="146"/>
+                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <userDefinedRuntimeAttributes>
+                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                        <real key="value" value="10"/>
+                                    </userDefinedRuntimeAttribute>
+                                </userDefinedRuntimeAttributes>
+                            </imageView>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="doS-fa-uB8">
+                                <rect key="frame" x="0.0" y="151" width="155" height="20"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="20" id="UBt-y0-ipm"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" weight="medium" pointSize="14"/>
+                                <nil key="textColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Brand Name" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QMb-ua-f9s">
+                                <rect key="frame" x="0.0" y="171" width="155" height="20"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="20" id="mHX-jW-vXD"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" pointSize="13"/>
+                                <color key="textColor" systemColor="systemGrayColor" red="0.5568627451" green="0.5568627451" blue="0.57647058819999997" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="kE4-IP-LCw">
+                                <rect key="frame" x="120" y="10" width="25" height="25"/>
+                                <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="25" id="VkB-u2-m8F"/>
+                                    <constraint firstAttribute="width" constant="25" id="gOq-oC-GvU"/>
+                                </constraints>
+                                <color key="tintColor" systemColor="systemGrayColor" red="0.5568627451" green="0.5568627451" blue="0.57647058819999997" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <inset key="imageEdgeInsets" minX="5" minY="5" maxX="5" maxY="5"/>
+                                <state key="normal" image="ellipsis" catalog="system"/>
+                                <userDefinedRuntimeAttributes>
+                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                        <real key="value" value="12.5"/>
+                                    </userDefinedRuntimeAttribute>
+                                </userDefinedRuntimeAttributes>
+                            </button>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" horizontalCompressionResistancePriority="751" text="$0.00" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="iHP-11-JST">
+                                <rect key="frame" x="0.0" y="191" width="39.5" height="20"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="20" id="dEN-MJ-jme"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" weight="medium" pointSize="14"/>
+                                <nil key="textColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" verticalHuggingPriority="251" usesAttributedText="YES" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="UhJ-bY-YV3">
+                                <rect key="frame" x="44.5" y="191" width="110.5" height="20"/>
+                                <attributedString key="attributedText">
+                                    <fragment content="$0.00">
+                                        <attributes>
+                                            <color key="NSColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                            <font key="NSFont" metaFont="system" size="15"/>
+                                            <paragraphStyle key="NSParagraphStyle" alignment="left" lineBreakMode="wordWrapping" baseWritingDirection="natural" tighteningFactorForTruncation="0.0"/>
+                                            <integer key="NSStrikethrough" value="1"/>
+                                        </attributes>
+                                    </fragment>
+                                </attributedString>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstItem="QMb-ua-f9s" firstAttribute="trailing" secondItem="doS-fa-uB8" secondAttribute="trailing" id="4zA-Xy-LJu"/>
+                            <constraint firstItem="kE4-IP-LCw" firstAttribute="top" secondItem="UJF-ci-zKO" secondAttribute="top" constant="10" id="58H-mp-n47"/>
+                            <constraint firstItem="UhJ-bY-YV3" firstAttribute="bottom" secondItem="iHP-11-JST" secondAttribute="bottom" id="9Mg-5h-74q"/>
+                            <constraint firstItem="doS-fa-uB8" firstAttribute="leading" secondItem="UJF-ci-zKO" secondAttribute="leading" id="Awf-Lb-jrc"/>
+                            <constraint firstItem="QMb-ua-f9s" firstAttribute="top" secondItem="doS-fa-uB8" secondAttribute="bottom" id="Gvl-BH-81g"/>
+                            <constraint firstAttribute="trailing" secondItem="doS-fa-uB8" secondAttribute="trailing" id="HsS-E3-qKu"/>
+                            <constraint firstAttribute="bottom" secondItem="iHP-11-JST" secondAttribute="bottom" id="KwE-JN-Zda"/>
+                            <constraint firstItem="zxM-aT-n4T" firstAttribute="leading" secondItem="UJF-ci-zKO" secondAttribute="leading" id="PYT-LA-UxB"/>
+                            <constraint firstItem="iHP-11-JST" firstAttribute="top" secondItem="QMb-ua-f9s" secondAttribute="bottom" id="Vxq-xh-hYp"/>
+                            <constraint firstItem="zxM-aT-n4T" firstAttribute="top" secondItem="UJF-ci-zKO" secondAttribute="top" id="X2G-gL-9X8"/>
+                            <constraint firstItem="iHP-11-JST" firstAttribute="leading" secondItem="UJF-ci-zKO" secondAttribute="leading" id="egz-Q5-f2E"/>
+                            <constraint firstAttribute="trailing" secondItem="kE4-IP-LCw" secondAttribute="trailing" constant="10" id="etM-ko-4Sk"/>
+                            <constraint firstAttribute="trailing" secondItem="UhJ-bY-YV3" secondAttribute="trailing" id="etZ-GA-A8A"/>
+                            <constraint firstItem="UhJ-bY-YV3" firstAttribute="top" secondItem="iHP-11-JST" secondAttribute="top" id="f2w-rs-GQW"/>
+                            <constraint firstAttribute="trailing" secondItem="zxM-aT-n4T" secondAttribute="trailing" id="iFT-Qf-Nha"/>
+                            <constraint firstItem="doS-fa-uB8" firstAttribute="top" secondItem="zxM-aT-n4T" secondAttribute="bottom" constant="5" id="l3D-Et-wxl"/>
+                            <constraint firstItem="QMb-ua-f9s" firstAttribute="leading" secondItem="doS-fa-uB8" secondAttribute="leading" id="pOC-Ll-V61"/>
+                            <constraint firstItem="UhJ-bY-YV3" firstAttribute="leading" secondItem="iHP-11-JST" secondAttribute="trailing" constant="5" id="zxe-Cw-DFD"/>
+                        </constraints>
+                    </view>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstAttribute="bottom" secondItem="UJF-ci-zKO" secondAttribute="bottom" id="Os1-zY-lPF"/>
+                <constraint firstItem="UJF-ci-zKO" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="TJz-i1-sRJ"/>
+                <constraint firstItem="UJF-ci-zKO" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" id="qhe-Sv-tTt"/>
+                <constraint firstAttribute="trailing" secondItem="UJF-ci-zKO" secondAttribute="trailing" id="zfl-En-V40"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="155" height="211"/>
+            <connections>
+                <outlet property="buttonMore" destination="kE4-IP-LCw" id="4GO-Ul-a3f"/>
+                <outlet property="imageProduct" destination="zxM-aT-n4T" id="TOH-Hh-7pB"/>
+                <outlet property="labelBrandName" destination="QMb-ua-f9s" id="rNP-gY-Of0"/>
+                <outlet property="labelOriginalPrice" destination="UhJ-bY-YV3" id="rH4-Jx-ae4"/>
+                <outlet property="labelPrice" destination="iHP-11-JST" id="cHZ-V6-CnE"/>
+                <outlet property="labelTitle" destination="doS-fa-uB8" id="ld6-Ll-Gjg"/>
+            </connections>
+            <point key="canvasLocation" x="207.1875" y="206.51408450704227"/>
+        </collectionViewCell>
+    </objects>
+    <resources>
+        <image name="ellipsis" catalog="system" width="64" height="18"/>
+    </resources>
+</document>

Ecommerce/Classes/20_Home2/Home2Layout.swift

@@ -0,0 +1,67 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home2PagingCollectionViewLayout: UICollectionViewFlowLayout {
+
+	private var velocityThresholdPerPage: CGFloat = 2
+	private var numberOfItemsPerPage: CGFloat = 1
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
+
+		guard let collectionView = collectionView else { return proposedContentOffset }
+
+		let pageLength: CGFloat
+		let approxPage: CGFloat
+		let currentPage: CGFloat
+		let speed: CGFloat
+
+		if scrollDirection == .horizontal {
+			pageLength = (itemSize.width + minimumLineSpacing) * numberOfItemsPerPage
+			approxPage = collectionView.contentOffset.x / pageLength
+			speed = velocity.x
+		} else {
+			pageLength = (itemSize.height + minimumLineSpacing) * numberOfItemsPerPage
+			approxPage = collectionView.contentOffset.y / pageLength
+			speed = velocity.y
+		}
+
+		if speed < 0 {
+			currentPage = ceil(approxPage)
+		} else if speed > 0 {
+			currentPage = floor(approxPage)
+		} else {
+			currentPage = round(approxPage)
+		}
+
+		guard speed != 0 else {
+			if scrollDirection == .horizontal {
+				return CGPoint(x: currentPage * pageLength, y: 0)
+			} else {
+				return CGPoint(x: 0, y: currentPage * pageLength)
+			}
+		}
+
+		var nextPage: CGFloat = currentPage + (speed > 0 ? 1 : -1)
+
+		let increment = speed / velocityThresholdPerPage
+		nextPage += (speed < 0) ? ceil(increment) : floor(increment)
+
+		if scrollDirection == .horizontal {
+			return CGPoint(x: nextPage * pageLength, y: 0)
+		} else {
+			return CGPoint(x: 0, y: nextPage * pageLength)
+		}
+	}
+}

Ecommerce/Classes/20_Home2/Home2View.swift

@@ -0,0 +1,299 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home2View: UIViewController {
+
+	@IBOutlet var viewTitle: UIView!
+	@IBOutlet var imageView: UIImageView!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var viewProfile: UIView!
+	@IBOutlet var imageViewProfile: UIImageView!
+	@IBOutlet var collectionViewSlider: UICollectionView!
+	@IBOutlet var collectionViewCategories: UICollectionView!
+	@IBOutlet var layoutConstraintCategoriesHeight: NSLayoutConstraint!
+	@IBOutlet var collectionViewDiscounts: UICollectionView!
+	@IBOutlet var layoutConstraintDiscountsHeight: NSLayoutConstraint!
+
+	private var sliderVisibleIndex = IndexPath(item: 0, section: 0)
+	private var categories: [String] = []
+	private var products: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationItem.leftBarButtonItem = UIBarButtonItem(customView: viewTitle)
+		navigationItem.rightBarButtonItem = UIBarButtonItem(customView: viewProfile)
+
+		collectionViewSlider.register(UINib(nibName: "Home2Cell1", bundle: Bundle.main), forCellWithReuseIdentifier: "Home2Cell1")
+		collectionViewCategories.register(UINib(nibName: "Home2Cell2", bundle: Bundle.main), forCellWithReuseIdentifier: "Home2Cell2")
+		collectionViewDiscounts.register(UINib(nibName: "Home2Cell3", bundle: Bundle.main), forCellWithReuseIdentifier: "Home2Cell3")
+
+		let cellWidth = UIScreen.main.bounds.width - 100
+		let sectionSpacing = CGFloat(50)
+		let cellSpacing = CGFloat(15)
+
+		if let layout = collectionViewSlider.collectionViewLayout as? Home2PagingCollectionViewLayout {
+			layout.sectionInset = UIEdgeInsets(top: 0, left: sectionSpacing, bottom: 0, right: sectionSpacing)
+			layout.itemSize = CGSize(width: cellWidth, height: collectionViewSlider.frame.size.height)
+			layout.minimumLineSpacing = cellSpacing
+			collectionViewSlider.collectionViewLayout = layout
+			collectionViewSlider.translatesAutoresizingMaskIntoConstraints = false
+			collectionViewSlider.decelerationRate = .fast
+		}
+
+		loadData()
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewWillLayoutSubviews() {
+
+		super.viewWillLayoutSubviews()
+
+		layoutConstraintCategoriesHeight.constant = collectionViewCategories.contentSize.height
+		layoutConstraintDiscountsHeight.constant = collectionViewDiscounts.contentSize.height
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		imageView.sample("Ecommerce", "Bags", 5)
+		labelTitle.text = "AppDesignKit"
+		imageViewProfile.sample("Social", "Portraits", 7)
+
+		categories.removeAll()
+		products.removeAll()
+
+		categories.append("Shoes")
+		categories.append("Shirts")
+		categories.append("Watches")
+		categories.append("Jeans")
+
+		var dict1: [String: String] = [:]
+		dict1["title"] = "Suede Chukka Boots"
+		dict1["brand"] = "River Island"
+		dict1["price"] = "$79.00"
+		dict1["originalPrice"] = ""
+		products.append(dict1)
+
+		var dict2: [String: String] = [:]
+		dict2["title"] = "Platform Derby Shoes"
+		dict2["brand"] = "Stella McCartney"
+		dict2["price"] = "$384"
+		dict2["originalPrice"] = "$640"
+		products.append(dict2)
+
+		var dict3: [String: String] = [:]
+		dict3["title"] = "Hiking boots"
+		dict3["brand"] = "Dolce & Gabbana"
+		dict3["price"] = "$59"
+		dict3["originalPrice"] = "$70"
+		products.append(dict3)
+
+		var dict4: [String: String] = [:]
+		dict4["title"] = "Motocross boots"
+		dict4["brand"] = "Hermes"
+		dict4["price"] = "$48"
+		dict4["originalPrice"] = ""
+		products.append(dict4)
+
+		var dict5: [String: String] = [:]
+		dict5["title"] = "Riding boots"
+		dict5["brand"] = "Armani"
+		dict5["price"] = "$98"
+		dict5["originalPrice"] = ""
+		products.append(dict5)
+
+		var dict6: [String: String] = [:]
+		dict6["title"] = "Jodhpur Boots"
+		dict6["brand"] = "House of Versace"
+		dict6["price"] = "$75"
+		dict6["originalPrice"] = "$97"
+		products.append(dict6)
+
+		refreshCollectionViewSlider()
+		refreshCollectionViewCategories()
+		refreshCollectionViewDiscounts()
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionViewSlider() {
+
+		collectionViewSlider.reloadData()
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionViewCategories() {
+
+		collectionViewCategories.reloadData()
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionViewDiscounts() {
+
+		collectionViewDiscounts.reloadData()
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionProfile(_ sender: UIButton) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionDiscountsMore(_ sender: UIButton) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionSeeAllCategories(_ sender: UIButton) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@IBAction func actionSeeAllDiscounts(_ sender: UIButton) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+}
+
+// MARK: - UICollectionViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home2View: UICollectionViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in collectionView: UICollectionView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+
+		if (collectionView == collectionViewSlider)		{ return 10 }
+		if (collectionView == collectionViewCategories)	{ return 4 }
+		if (collectionView == collectionViewDiscounts)	{ return 6 }
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+
+		if (collectionView == collectionViewSlider) {
+			let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Home2Cell1", for: indexPath) as! Home2Cell1
+			cell.bindData(index: indexPath.item)
+			return cell
+		}
+
+		if (collectionView == collectionViewCategories) {
+			let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Home2Cell2", for: indexPath) as! Home2Cell2
+			cell.bindData(category: categories[indexPath.row])
+			return cell
+		}
+
+		if (collectionView == collectionViewDiscounts) {
+			let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Home2Cell3", for: indexPath) as! Home2Cell3
+			cell.bindData(index: indexPath.item, data: products[indexPath.row])
+			cell.buttonMore.tag = indexPath.row
+			cell.buttonMore.addTarget(self, action: #selector(actionDiscountsMore(_:)), for: .touchUpInside)
+			return cell
+		}
+
+		return UICollectionViewCell()
+	}
+}
+
+// MARK: - UICollectionViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home2View: UICollectionViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+
+		print(#function)
+		if (collectionView == collectionViewSlider) { }
+		if (collectionView == collectionViewCategories) { }
+		if (collectionView == collectionViewDiscounts) { }
+	}
+}
+
+// MARK: - UICollectionViewDelegateFlowLayout
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home2View: UICollectionViewDelegateFlowLayout {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+		let width = collectionView.frame.size.width
+		let height = collectionView.frame.size.height
+		let categoriesCellWidth = (width-15)/2
+
+		if (collectionView == collectionViewSlider) { return CGSize(width: width-100, height: height) }
+		if (collectionView == collectionViewCategories) { return CGSize(width: categoriesCellWidth, height: 40) }
+		if (collectionView == collectionViewDiscounts) { return CGSize(width: categoriesCellWidth, height: categoriesCellWidth+30) }
+
+		return CGSize.zero
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+
+		if (collectionView == collectionViewSlider) { return 15 }
+		if (collectionView == collectionViewCategories) { return 15 }
+		if (collectionView == collectionViewDiscounts) { return 15 }
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+
+		if (collectionView == collectionViewSlider) { return 15 }
+		if (collectionView == collectionViewCategories) { return 15 }
+		if (collectionView == collectionViewDiscounts) { return 15 }
+
+		return 0
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+
+		if (collectionView == collectionViewSlider) { return UIEdgeInsets(top: 0, left: 50, bottom: 0, right: 50) }
+		if (collectionView == collectionViewCategories) { return UIEdgeInsets.zero }
+		if (collectionView == collectionViewDiscounts) { return UIEdgeInsets.zero }
+
+		return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
+	}
+}
+
+// MARK: - UIScrollViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home2View: UIScrollViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
+
+	}
+}

Ecommerce/Classes/20_Home2/Home2View.xib

@@ -0,0 +1,354 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Home2View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="collectionViewCategories" destination="vaI-uy-jqV" id="Hjl-pC-fOh"/>
+                <outlet property="collectionViewDiscounts" destination="EXu-sx-zzx" id="gbV-du-bHG"/>
+                <outlet property="collectionViewSlider" destination="wHj-PM-Mhx" id="wzn-jq-mRO"/>
+                <outlet property="imageView" destination="afH-2d-8dn" id="Sxt-pf-9GU"/>
+                <outlet property="imageViewProfile" destination="6RK-Sh-OiA" id="xRP-vh-V8f"/>
+                <outlet property="labelTitle" destination="gNH-DP-kqw" id="9zi-vE-GqT"/>
+                <outlet property="layoutConstraintCategoriesHeight" destination="S4d-AV-kLL" id="8aI-2d-2ND"/>
+                <outlet property="layoutConstraintDiscountsHeight" destination="ZqO-dm-4fy" id="m2R-gA-18y"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="nhk-zO-c9X"/>
+                <outlet property="viewProfile" destination="4gX-Ih-zWf" id="ajS-4B-xtt"/>
+                <outlet property="viewTitle" destination="Dtz-KX-mEH" id="LhW-1B-VM3"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="kBx-Sr-99I">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <subviews>
+                        <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ge5-2H-a8a">
+                            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                            <subviews>
+                                <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="YeF-E3-SaA">
+                                    <rect key="frame" x="0.0" y="0.0" width="320" height="504"/>
+                                    <subviews>
+                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="zKK-ke-Pnj">
+                                            <rect key="frame" x="0.0" y="0.0" width="320" height="164"/>
+                                            <subviews>
+                                                <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="wHj-PM-Mhx">
+                                                    <rect key="frame" x="0.0" y="10" width="320" height="144"/>
+                                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                    <constraints>
+                                                        <constraint firstAttribute="width" secondItem="wHj-PM-Mhx" secondAttribute="height" multiplier="2:0.9" id="HdF-QB-NcO"/>
+                                                    </constraints>
+                                                    <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="10" minimumInteritemSpacing="10" id="Vsk-jb-zSU" customClass="Home2PagingCollectionViewLayout" customModule="app" customModuleProvider="target">
+                                                        <size key="itemSize" width="50" height="50"/>
+                                                        <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                                                        <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                                                        <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                                    </collectionViewFlowLayout>
+                                                    <connections>
+                                                        <outlet property="dataSource" destination="-1" id="9rJ-XZ-X6O"/>
+                                                        <outlet property="delegate" destination="-1" id="pU4-bK-c7j"/>
+                                                    </connections>
+                                                </collectionView>
+                                            </subviews>
+                                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                            <constraints>
+                                                <constraint firstAttribute="trailing" secondItem="wHj-PM-Mhx" secondAttribute="trailing" id="AWL-qK-PEb"/>
+                                                <constraint firstAttribute="bottom" secondItem="wHj-PM-Mhx" secondAttribute="bottom" constant="10" id="UKQ-dL-ng8"/>
+                                                <constraint firstItem="wHj-PM-Mhx" firstAttribute="leading" secondItem="zKK-ke-Pnj" secondAttribute="leading" id="W0J-Ls-Rfa"/>
+                                                <constraint firstItem="wHj-PM-Mhx" firstAttribute="top" secondItem="zKK-ke-Pnj" secondAttribute="top" constant="10" id="zuM-km-hWI"/>
+                                            </constraints>
+                                        </view>
+                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="hGa-hE-cWg">
+                                            <rect key="frame" x="0.0" y="164" width="320" height="50"/>
+                                            <subviews>
+                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Categories" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Nei-c1-AfH">
+                                                    <rect key="frame" x="15" y="0.0" width="180" height="50"/>
+                                                    <fontDescription key="fontDescription" type="boldSystem" pointSize="21"/>
+                                                    <nil key="textColor"/>
+                                                    <nil key="highlightedColor"/>
+                                                </label>
+                                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Dar-WN-FYM">
+                                                    <rect key="frame" x="205" y="0.0" width="100" height="50"/>
+                                                    <subviews>
+                                                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="chevron.right" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="3G5-aF-RoH">
+                                                            <rect key="frame" x="75" y="19.5" width="15" height="11.5"/>
+                                                            <color key="tintColor" name="Theme"/>
+                                                            <constraints>
+                                                                <constraint firstAttribute="width" constant="15" id="8ej-uO-WBN"/>
+                                                                <constraint firstAttribute="height" constant="15" id="kdo-q5-vUQ"/>
+                                                            </constraints>
+                                                        </imageView>
+                                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="fOG-UO-TJL">
+                                                            <rect key="frame" x="0.0" y="0.0" width="100" height="50"/>
+                                                            <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="16"/>
+                                                            <color key="tintColor" name="Theme"/>
+                                                            <inset key="titleEdgeInsets" minX="-10" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                                            <inset key="imageEdgeInsets" minX="80" minY="20" maxX="10" maxY="20"/>
+                                                            <state key="normal" title="See All"/>
+                                                            <connections>
+                                                                <action selector="actionSeeAllCategories:" destination="-1" eventType="touchUpInside" id="hRW-1L-rJV"/>
+                                                            </connections>
+                                                        </button>
+                                                    </subviews>
+                                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                    <constraints>
+                                                        <constraint firstItem="3G5-aF-RoH" firstAttribute="centerY" secondItem="Dar-WN-FYM" secondAttribute="centerY" id="16T-H3-cOY"/>
+                                                        <constraint firstAttribute="width" constant="100" id="FIg-aJ-CHD"/>
+                                                        <constraint firstAttribute="bottom" secondItem="fOG-UO-TJL" secondAttribute="bottom" id="GWj-at-72h"/>
+                                                        <constraint firstAttribute="trailing" secondItem="fOG-UO-TJL" secondAttribute="trailing" id="lCi-3t-oTo"/>
+                                                        <constraint firstAttribute="trailing" secondItem="3G5-aF-RoH" secondAttribute="trailing" constant="10" id="lcY-pA-pwL"/>
+                                                        <constraint firstItem="fOG-UO-TJL" firstAttribute="leading" secondItem="Dar-WN-FYM" secondAttribute="leading" id="nCP-dS-YGI"/>
+                                                        <constraint firstItem="fOG-UO-TJL" firstAttribute="top" secondItem="Dar-WN-FYM" secondAttribute="top" id="yBQ-9U-95x"/>
+                                                    </constraints>
+                                                </view>
+                                            </subviews>
+                                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                            <constraints>
+                                                <constraint firstAttribute="trailing" secondItem="Dar-WN-FYM" secondAttribute="trailing" constant="15" id="5lY-Fe-tKQ"/>
+                                                <constraint firstItem="Dar-WN-FYM" firstAttribute="top" secondItem="hGa-hE-cWg" secondAttribute="top" id="74W-8d-rCE"/>
+                                                <constraint firstAttribute="bottom" secondItem="Nei-c1-AfH" secondAttribute="bottom" id="NnF-Ph-IoB"/>
+                                                <constraint firstAttribute="bottom" secondItem="Dar-WN-FYM" secondAttribute="bottom" id="OPg-cp-f7e"/>
+                                                <constraint firstItem="Dar-WN-FYM" firstAttribute="leading" secondItem="Nei-c1-AfH" secondAttribute="trailing" constant="10" id="SZv-3R-c57"/>
+                                                <constraint firstItem="Nei-c1-AfH" firstAttribute="leading" secondItem="hGa-hE-cWg" secondAttribute="leading" constant="15" id="WtF-G3-C41"/>
+                                                <constraint firstItem="Nei-c1-AfH" firstAttribute="top" secondItem="hGa-hE-cWg" secondAttribute="top" id="cPJ-sD-fRn"/>
+                                                <constraint firstAttribute="height" constant="50" id="tLI-Qr-Xji"/>
+                                            </constraints>
+                                        </view>
+                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="uwb-Hg-V1H">
+                                            <rect key="frame" x="0.0" y="214" width="320" height="120"/>
+                                            <subviews>
+                                                <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="vaI-uy-jqV">
+                                                    <rect key="frame" x="15" y="10" width="290" height="100"/>
+                                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                    <constraints>
+                                                        <constraint firstAttribute="height" constant="100" id="S4d-AV-kLL"/>
+                                                    </constraints>
+                                                    <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="10" minimumInteritemSpacing="10" id="AoC-HP-d0j">
+                                                        <size key="itemSize" width="50" height="50"/>
+                                                        <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                                                        <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                                                        <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                                    </collectionViewFlowLayout>
+                                                    <connections>
+                                                        <outlet property="dataSource" destination="-1" id="qAe-dI-3rZ"/>
+                                                        <outlet property="delegate" destination="-1" id="IfV-ZW-sN7"/>
+                                                    </connections>
+                                                </collectionView>
+                                            </subviews>
+                                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                            <constraints>
+                                                <constraint firstAttribute="trailing" secondItem="vaI-uy-jqV" secondAttribute="trailing" constant="15" id="FGW-wU-kRH"/>
+                                                <constraint firstItem="vaI-uy-jqV" firstAttribute="top" secondItem="uwb-Hg-V1H" secondAttribute="top" constant="10" id="LbI-2g-AsN"/>
+                                                <constraint firstItem="vaI-uy-jqV" firstAttribute="leading" secondItem="uwb-Hg-V1H" secondAttribute="leading" constant="15" id="gXm-Pc-V1q"/>
+                                                <constraint firstAttribute="bottom" secondItem="vaI-uy-jqV" secondAttribute="bottom" constant="10" id="iiR-YY-UVJ"/>
+                                            </constraints>
+                                        </view>
+                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2hL-pc-7uH">
+                                            <rect key="frame" x="0.0" y="334" width="320" height="50"/>
+                                            <subviews>
+                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Discounts" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="gmg-E1-9LS">
+                                                    <rect key="frame" x="15" y="0.0" width="180" height="50"/>
+                                                    <fontDescription key="fontDescription" type="boldSystem" pointSize="21"/>
+                                                    <nil key="textColor"/>
+                                                    <nil key="highlightedColor"/>
+                                                </label>
+                                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="BNn-yp-nOw">
+                                                    <rect key="frame" x="205" y="0.0" width="100" height="50"/>
+                                                    <subviews>
+                                                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="chevron.right" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="vjV-EE-xqD">
+                                                            <rect key="frame" x="75" y="19.5" width="15" height="11.5"/>
+                                                            <color key="tintColor" name="Theme"/>
+                                                            <constraints>
+                                                                <constraint firstAttribute="width" constant="15" id="S9w-F8-Hx1"/>
+                                                                <constraint firstAttribute="height" constant="15" id="wqG-eU-ARc"/>
+                                                            </constraints>
+                                                        </imageView>
+                                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="vyE-e9-bFD">
+                                                            <rect key="frame" x="0.0" y="0.0" width="100" height="50"/>
+                                                            <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="16"/>
+                                                            <color key="tintColor" name="Theme"/>
+                                                            <inset key="titleEdgeInsets" minX="-10" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                                            <inset key="imageEdgeInsets" minX="80" minY="20" maxX="10" maxY="20"/>
+                                                            <state key="normal" title="See All"/>
+                                                            <connections>
+                                                                <action selector="actionSeeAllDiscounts:" destination="-1" eventType="touchUpInside" id="3KP-3A-QrT"/>
+                                                            </connections>
+                                                        </button>
+                                                    </subviews>
+                                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                    <constraints>
+                                                        <constraint firstItem="vjV-EE-xqD" firstAttribute="centerY" secondItem="BNn-yp-nOw" secondAttribute="centerY" id="9cd-xN-F0F"/>
+                                                        <constraint firstAttribute="width" constant="100" id="Nlj-ro-1hr"/>
+                                                        <constraint firstAttribute="trailing" secondItem="vyE-e9-bFD" secondAttribute="trailing" id="cAi-3N-xWe"/>
+                                                        <constraint firstItem="vyE-e9-bFD" firstAttribute="leading" secondItem="BNn-yp-nOw" secondAttribute="leading" id="dVi-gJ-Htm"/>
+                                                        <constraint firstItem="vyE-e9-bFD" firstAttribute="top" secondItem="BNn-yp-nOw" secondAttribute="top" id="eO0-l8-RzJ"/>
+                                                        <constraint firstAttribute="bottom" secondItem="vyE-e9-bFD" secondAttribute="bottom" id="kcm-7a-Ogw"/>
+                                                        <constraint firstAttribute="trailing" secondItem="vjV-EE-xqD" secondAttribute="trailing" constant="10" id="xy8-w5-aje"/>
+                                                    </constraints>
+                                                </view>
+                                            </subviews>
+                                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                            <constraints>
+                                                <constraint firstAttribute="bottom" secondItem="BNn-yp-nOw" secondAttribute="bottom" id="45B-uD-S29"/>
+                                                <constraint firstAttribute="bottom" secondItem="gmg-E1-9LS" secondAttribute="bottom" id="CdV-Je-hZN"/>
+                                                <constraint firstItem="BNn-yp-nOw" firstAttribute="top" secondItem="2hL-pc-7uH" secondAttribute="top" id="CtT-6h-UC3"/>
+                                                <constraint firstAttribute="height" constant="50" id="HMB-Qa-6dK"/>
+                                                <constraint firstItem="gmg-E1-9LS" firstAttribute="top" secondItem="2hL-pc-7uH" secondAttribute="top" id="RfG-Ra-Ffs"/>
+                                                <constraint firstItem="gmg-E1-9LS" firstAttribute="leading" secondItem="2hL-pc-7uH" secondAttribute="leading" constant="15" id="b0f-TF-Lk1"/>
+                                                <constraint firstItem="BNn-yp-nOw" firstAttribute="leading" secondItem="gmg-E1-9LS" secondAttribute="trailing" constant="10" id="boO-dh-YyJ"/>
+                                                <constraint firstAttribute="trailing" secondItem="BNn-yp-nOw" secondAttribute="trailing" constant="15" id="pB6-4a-JgE"/>
+                                            </constraints>
+                                        </view>
+                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="EOH-vf-ftK">
+                                            <rect key="frame" x="0.0" y="384" width="320" height="120"/>
+                                            <subviews>
+                                                <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="EXu-sx-zzx">
+                                                    <rect key="frame" x="15" y="10" width="290" height="100"/>
+                                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                                    <constraints>
+                                                        <constraint firstAttribute="height" constant="100" id="ZqO-dm-4fy"/>
+                                                    </constraints>
+                                                    <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="10" minimumInteritemSpacing="10" id="bSX-Gr-Ozg">
+                                                        <size key="itemSize" width="50" height="50"/>
+                                                        <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                                                        <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                                                        <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                                    </collectionViewFlowLayout>
+                                                    <connections>
+                                                        <outlet property="dataSource" destination="-1" id="xeZ-ZP-bDS"/>
+                                                        <outlet property="delegate" destination="-1" id="q8c-Hz-TOx"/>
+                                                    </connections>
+                                                </collectionView>
+                                            </subviews>
+                                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                            <constraints>
+                                                <constraint firstItem="EXu-sx-zzx" firstAttribute="leading" secondItem="EOH-vf-ftK" secondAttribute="leading" constant="15" id="CHc-n6-JVF"/>
+                                                <constraint firstAttribute="bottom" secondItem="EXu-sx-zzx" secondAttribute="bottom" constant="10" id="OVI-8Y-9kj"/>
+                                                <constraint firstAttribute="trailing" secondItem="EXu-sx-zzx" secondAttribute="trailing" constant="15" id="XrM-9u-Tsd"/>
+                                                <constraint firstItem="EXu-sx-zzx" firstAttribute="top" secondItem="EOH-vf-ftK" secondAttribute="top" constant="10" id="vfi-40-hSo"/>
+                                            </constraints>
+                                        </view>
+                                    </subviews>
+                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                </stackView>
+                            </subviews>
+                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                            <constraints>
+                                <constraint firstItem="YeF-E3-SaA" firstAttribute="top" secondItem="ge5-2H-a8a" secondAttribute="top" id="I63-BC-eSf"/>
+                                <constraint firstItem="YeF-E3-SaA" firstAttribute="centerX" secondItem="ge5-2H-a8a" secondAttribute="centerX" id="IFF-6H-WsS"/>
+                                <constraint firstAttribute="trailing" secondItem="YeF-E3-SaA" secondAttribute="trailing" id="PJQ-nP-DDd"/>
+                                <constraint firstAttribute="bottom" secondItem="YeF-E3-SaA" secondAttribute="bottom" id="Qc0-Pv-z3p"/>
+                                <constraint firstItem="YeF-E3-SaA" firstAttribute="leading" secondItem="ge5-2H-a8a" secondAttribute="leading" id="qMc-Z6-jmq"/>
+                            </constraints>
+                        </scrollView>
+                    </subviews>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <constraints>
+                        <constraint firstAttribute="trailing" secondItem="ge5-2H-a8a" secondAttribute="trailing" id="UV9-nt-I57"/>
+                        <constraint firstItem="ge5-2H-a8a" firstAttribute="leading" secondItem="kBx-Sr-99I" secondAttribute="leading" id="X7u-f1-GG2"/>
+                        <constraint firstAttribute="bottom" secondItem="ge5-2H-a8a" secondAttribute="bottom" id="gWf-Ut-WSt"/>
+                        <constraint firstItem="ge5-2H-a8a" firstAttribute="top" secondItem="kBx-Sr-99I" secondAttribute="top" id="y4h-9G-9oa"/>
+                    </constraints>
+                </view>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="kBx-Sr-99I" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="F2c-cI-ZH5"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="kBx-Sr-99I" secondAttribute="trailing" id="OVK-qX-DGR"/>
+                <constraint firstItem="kBx-Sr-99I" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="fE8-dy-fQk"/>
+                <constraint firstAttribute="bottom" secondItem="kBx-Sr-99I" secondAttribute="bottom" id="wjl-Fw-zfa"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="131.25" y="153.16901408450704"/>
+        </view>
+        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Dtz-KX-mEH">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="47"/>
+            <subviews>
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="afH-2d-8dn">
+                    <rect key="frame" x="0.0" y="5" width="37" height="37"/>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <constraints>
+                        <constraint firstAttribute="width" secondItem="afH-2d-8dn" secondAttribute="height" id="OWg-Vj-4yQ"/>
+                    </constraints>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                            <real key="value" value="5"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                </imageView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="gNH-DP-kqw">
+                    <rect key="frame" x="47" y="10" width="32" height="27"/>
+                    <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="15"/>
+                    <nil key="textColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="4gX-Ih-zWf">
+                    <rect key="frame" x="285" y="6" width="35" height="35"/>
+                    <subviews>
+                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="6RK-Sh-OiA">
+                            <rect key="frame" x="0.0" y="0.0" width="35" height="35"/>
+                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                            <constraints>
+                                <constraint firstAttribute="width" constant="35" id="Aex-IU-abs"/>
+                                <constraint firstAttribute="height" constant="35" id="eIh-3p-0Mq"/>
+                            </constraints>
+                            <userDefinedRuntimeAttributes>
+                                <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                    <real key="value" value="5"/>
+                                </userDefinedRuntimeAttribute>
+                                <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
+                                    <real key="value" value="17.5"/>
+                                </userDefinedRuntimeAttribute>
+                            </userDefinedRuntimeAttributes>
+                        </imageView>
+                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="D8X-EG-f90">
+                            <rect key="frame" x="0.0" y="0.0" width="35" height="35"/>
+                            <connections>
+                                <action selector="actionProfile:" destination="-1" eventType="touchUpInside" id="dWs-x9-01f"/>
+                            </connections>
+                        </button>
+                    </subviews>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <constraints>
+                        <constraint firstAttribute="bottom" secondItem="6RK-Sh-OiA" secondAttribute="bottom" id="1tz-iv-u0p"/>
+                        <constraint firstItem="6RK-Sh-OiA" firstAttribute="top" secondItem="4gX-Ih-zWf" secondAttribute="top" id="876-oL-KOe"/>
+                        <constraint firstAttribute="trailing" secondItem="6RK-Sh-OiA" secondAttribute="trailing" id="GSW-5J-ymh"/>
+                        <constraint firstItem="D8X-EG-f90" firstAttribute="leading" secondItem="6RK-Sh-OiA" secondAttribute="leading" id="H75-iH-dxh"/>
+                        <constraint firstItem="D8X-EG-f90" firstAttribute="trailing" secondItem="6RK-Sh-OiA" secondAttribute="trailing" id="TKH-wS-oEi"/>
+                        <constraint firstItem="6RK-Sh-OiA" firstAttribute="leading" secondItem="4gX-Ih-zWf" secondAttribute="leading" id="WwX-EH-rUd"/>
+                        <constraint firstItem="D8X-EG-f90" firstAttribute="bottom" secondItem="6RK-Sh-OiA" secondAttribute="bottom" id="dzd-NF-bvf"/>
+                        <constraint firstItem="D8X-EG-f90" firstAttribute="top" secondItem="6RK-Sh-OiA" secondAttribute="top" id="vs8-Z8-Gje"/>
+                    </constraints>
+                </view>
+            </subviews>
+            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+            <constraints>
+                <constraint firstAttribute="bottom" secondItem="gNH-DP-kqw" secondAttribute="bottom" constant="10" id="HdN-ey-6np"/>
+                <constraint firstItem="4gX-Ih-zWf" firstAttribute="centerY" secondItem="gNH-DP-kqw" secondAttribute="centerY" id="IU9-KY-QAC"/>
+                <constraint firstItem="gNH-DP-kqw" firstAttribute="leading" secondItem="afH-2d-8dn" secondAttribute="trailing" constant="10" id="Lcx-ko-Jx9"/>
+                <constraint firstItem="Wbe-KA-1P5" firstAttribute="trailing" secondItem="4gX-Ih-zWf" secondAttribute="trailing" id="MKE-Sz-xpU"/>
+                <constraint firstItem="afH-2d-8dn" firstAttribute="top" secondItem="Dtz-KX-mEH" secondAttribute="top" constant="5" id="Pyc-9T-0gw"/>
+                <constraint firstItem="gNH-DP-kqw" firstAttribute="top" secondItem="Dtz-KX-mEH" secondAttribute="top" constant="10" id="VZx-hS-Pq9"/>
+                <constraint firstItem="afH-2d-8dn" firstAttribute="leading" secondItem="Dtz-KX-mEH" secondAttribute="leading" id="XNA-N3-qma"/>
+                <constraint firstAttribute="bottom" secondItem="afH-2d-8dn" secondAttribute="bottom" constant="5" id="rfR-l6-jj2"/>
+            </constraints>
+            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
+            <viewLayoutGuide key="safeArea" id="Wbe-KA-1P5"/>
+            <point key="canvasLocation" x="129.375" y="-216.02112676056339"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="chevron.right" catalog="system" width="48" height="64"/>
+        <namedColor name="Theme">
+            <color red="0.045000001788139343" green="0.59799998998641968" blue="0.83499997854232788" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/21_Home3/Home3Cell1.swift

@@ -0,0 +1,34 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home3Cell1: UICollectionViewCell {
+
+	@IBOutlet var imageProduct: UIImageView!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelCompanyName: UILabel!
+	@IBOutlet var labelDescription: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: IndexPath, data: [String: String]) {
+
+		guard let title = data["title"] else { return }
+		guard let companyName = data["companyName"] else { return }
+		guard let description = data["description"] else { return }
+
+		imageProduct.sample("Ecommerce", "Shoes", index.row)
+		labelTitle.text = title
+		labelCompanyName.text = companyName
+		labelDescription.text = description
+	}
+}

Ecommerce/Classes/21_Home3/Home3Cell1.xib

@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="Home3Cell1" id="gTV-IL-0wX" customClass="Home3Cell1" customModule="Ecommerce" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="375" height="395"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="375" height="395"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <view clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="deU-RQ-zjE">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="395"/>
+                        <subviews>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="kjZ-nU-fXu">
+                                <rect key="frame" x="0.0" y="0.0" width="375" height="395"/>
+                                <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                            </imageView>
+                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="TUm-xH-0pr" userLabel="Gradient View">
+                                <rect key="frame" x="0.0" y="0.0" width="375" height="395"/>
+                                <color key="backgroundColor" name="Gradient"/>
+                            </view>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Company Name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="aRT-Zn-zIo">
+                                <rect key="frame" x="15" y="15" width="345" height="20"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="20" id="oVg-vN-7jH"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="12"/>
+                                <color key="textColor" name="Theme"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="13" translatesAutoresizingMaskIntoConstraints="NO" id="YaK-DG-yHb">
+                                <rect key="frame" x="15" y="35" width="345" height="25"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="25" id="L4K-nO-eqG"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="25"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="0Ef-Za-Lp3">
+                                <rect key="frame" x="15" y="365.5" width="345" height="14.5"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="12"/>
+                                <color key="textColor" cocoaTouchSystemColor="lightTextColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstAttribute="trailing" secondItem="kjZ-nU-fXu" secondAttribute="trailing" id="0Y0-0x-orB"/>
+                            <constraint firstItem="aRT-Zn-zIo" firstAttribute="top" secondItem="deU-RQ-zjE" secondAttribute="top" constant="15" id="12H-XN-QTX"/>
+                            <constraint firstItem="YaK-DG-yHb" firstAttribute="top" secondItem="aRT-Zn-zIo" secondAttribute="bottom" id="3g5-hM-tZx"/>
+                            <constraint firstItem="TUm-xH-0pr" firstAttribute="leading" secondItem="deU-RQ-zjE" secondAttribute="leading" id="79g-AV-Ja0"/>
+                            <constraint firstItem="TUm-xH-0pr" firstAttribute="top" secondItem="deU-RQ-zjE" secondAttribute="top" id="Gk9-ff-Lyq"/>
+                            <constraint firstAttribute="trailing" secondItem="aRT-Zn-zIo" secondAttribute="trailing" constant="15" id="Ogt-XG-pCc"/>
+                            <constraint firstAttribute="trailing" secondItem="TUm-xH-0pr" secondAttribute="trailing" id="Pop-Un-sWe"/>
+                            <constraint firstItem="kjZ-nU-fXu" firstAttribute="top" secondItem="deU-RQ-zjE" secondAttribute="top" id="UIo-nf-MOc"/>
+                            <constraint firstAttribute="bottom" secondItem="kjZ-nU-fXu" secondAttribute="bottom" id="Wpf-Zi-EuW"/>
+                            <constraint firstAttribute="bottom" secondItem="0Ef-Za-Lp3" secondAttribute="bottom" constant="15" id="XLd-qM-k8i"/>
+                            <constraint firstAttribute="trailing" secondItem="0Ef-Za-Lp3" secondAttribute="trailing" constant="15" id="ZQN-9X-ETx"/>
+                            <constraint firstAttribute="trailing" secondItem="YaK-DG-yHb" secondAttribute="trailing" constant="15" id="cOm-vH-sHX"/>
+                            <constraint firstItem="aRT-Zn-zIo" firstAttribute="leading" secondItem="deU-RQ-zjE" secondAttribute="leading" constant="15" id="cX8-VL-F2u"/>
+                            <constraint firstItem="YaK-DG-yHb" firstAttribute="leading" secondItem="deU-RQ-zjE" secondAttribute="leading" constant="15" id="e7Z-6F-iuO"/>
+                            <constraint firstItem="0Ef-Za-Lp3" firstAttribute="leading" secondItem="deU-RQ-zjE" secondAttribute="leading" constant="15" id="iw4-1W-1am"/>
+                            <constraint firstAttribute="bottom" secondItem="TUm-xH-0pr" secondAttribute="bottom" id="kDN-CQ-Mws"/>
+                            <constraint firstItem="kjZ-nU-fXu" firstAttribute="leading" secondItem="deU-RQ-zjE" secondAttribute="leading" id="oAE-dE-0QW"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                <real key="value" value="10"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </view>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstAttribute="bottom" secondItem="deU-RQ-zjE" secondAttribute="bottom" id="SZ3-aE-wPA"/>
+                <constraint firstAttribute="trailing" secondItem="deU-RQ-zjE" secondAttribute="trailing" id="grm-FY-seU"/>
+                <constraint firstItem="deU-RQ-zjE" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" id="o2M-as-WIt"/>
+                <constraint firstItem="deU-RQ-zjE" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="yti-Gn-U6l"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="375" height="395"/>
+            <connections>
+                <outlet property="imageProduct" destination="kjZ-nU-fXu" id="TGs-oe-cLX"/>
+                <outlet property="labelCompanyName" destination="aRT-Zn-zIo" id="ghg-E2-k9o"/>
+                <outlet property="labelDescription" destination="0Ef-Za-Lp3" id="zWD-Te-A3n"/>
+                <outlet property="labelTitle" destination="YaK-DG-yHb" id="9H2-vd-ijY"/>
+            </connections>
+            <point key="canvasLocation" x="113.4375" y="129.40140845070422"/>
+        </collectionViewCell>
+    </objects>
+    <resources>
+        <namedColor name="Gradient">
+            <color red="0.0" green="0.0" blue="0.0" alpha="0.30000001192092896" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+        <namedColor name="Theme">
+            <color red="0.51800000667572021" green="0.18799999356269836" blue="0.79600000381469727" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/21_Home3/Home3Cell2.swift

@@ -0,0 +1,34 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home3Cell2: UICollectionViewCell {
+
+	@IBOutlet var imageProduct: UIImageView!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var labelCompanyName: UILabel!
+	@IBOutlet var labelDescription: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: IndexPath, data: [String: String]) {
+
+		guard let title = data["title"] else { return }
+		guard let companyName = data["companyName"] else { return }
+		guard let description = data["description"] else { return }
+
+		imageProduct.sample("Ecommerce", "Shoes", index.row)
+		labelTitle.text = title
+		labelCompanyName.text = companyName
+		labelDescription.text = description
+	}
+}

Ecommerce/Classes/21_Home3/Home3Cell2.xib

@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="Home3Cell2" id="gTV-IL-0wX" customClass="Home3Cell2" customModule="Ecommerce" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="246" height="389"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="246" height="389"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <view clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="fh1-uh-A0R">
+                        <rect key="frame" x="0.0" y="0.0" width="246" height="389"/>
+                        <subviews>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Y0r-in-WX1">
+                                <rect key="frame" x="0.0" y="0.0" width="246" height="389"/>
+                                <color key="backgroundColor" systemColor="tertiarySystemFillColor" red="0.46274509800000002" green="0.46274509800000002" blue="0.50196078430000002" alpha="0.12" colorSpace="custom" customColorSpace="sRGB"/>
+                            </imageView>
+                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="iIl-Oi-RMv" userLabel="Gradient View">
+                                <rect key="frame" x="0.0" y="0.0" width="246" height="389"/>
+                                <color key="backgroundColor" name="Gradient"/>
+                            </view>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Company Name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="6FI-n4-uqW">
+                                <rect key="frame" x="15" y="15" width="216" height="20"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="20" id="IGz-x9-sOC"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" pointSize="12"/>
+                                <color key="textColor" name="Theme"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="13" translatesAutoresizingMaskIntoConstraints="NO" id="9RO-zU-Sie">
+                                <rect key="frame" x="15" y="35" width="216" height="25"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="25" id="SNz-c1-XCY"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="25"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Po8-Vb-fPP">
+                                <rect key="frame" x="15" y="359.5" width="216" height="14.5"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="12"/>
+                                <color key="textColor" systemColor="tertiaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.29999999999999999" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstItem="iIl-Oi-RMv" firstAttribute="leading" secondItem="fh1-uh-A0R" secondAttribute="leading" id="1Al-Pw-P4t"/>
+                            <constraint firstAttribute="trailing" secondItem="Po8-Vb-fPP" secondAttribute="trailing" constant="15" id="6Z3-Oj-VUx"/>
+                            <constraint firstAttribute="bottom" secondItem="iIl-Oi-RMv" secondAttribute="bottom" id="9im-0d-eJy"/>
+                            <constraint firstItem="Y0r-in-WX1" firstAttribute="leading" secondItem="fh1-uh-A0R" secondAttribute="leading" id="Bbe-V5-YUP"/>
+                            <constraint firstItem="9RO-zU-Sie" firstAttribute="top" secondItem="6FI-n4-uqW" secondAttribute="bottom" id="DoY-ZH-RNw"/>
+                            <constraint firstAttribute="trailing" secondItem="Y0r-in-WX1" secondAttribute="trailing" id="Ntk-Hv-7HJ"/>
+                            <constraint firstItem="Po8-Vb-fPP" firstAttribute="leading" secondItem="fh1-uh-A0R" secondAttribute="leading" constant="15" id="OdH-z1-q3t"/>
+                            <constraint firstItem="Y0r-in-WX1" firstAttribute="top" secondItem="fh1-uh-A0R" secondAttribute="top" id="UGS-Py-EKc"/>
+                            <constraint firstAttribute="trailing" secondItem="iIl-Oi-RMv" secondAttribute="trailing" id="VaU-Ce-msb"/>
+                            <constraint firstAttribute="bottom" secondItem="Y0r-in-WX1" secondAttribute="bottom" id="X41-d9-pzS"/>
+                            <constraint firstItem="6FI-n4-uqW" firstAttribute="top" secondItem="fh1-uh-A0R" secondAttribute="top" constant="15" id="ZVV-tw-q7S"/>
+                            <constraint firstAttribute="bottom" secondItem="Po8-Vb-fPP" secondAttribute="bottom" constant="15" id="cqf-B5-kKc"/>
+                            <constraint firstItem="iIl-Oi-RMv" firstAttribute="top" secondItem="fh1-uh-A0R" secondAttribute="top" id="ecf-vh-eDi"/>
+                            <constraint firstItem="9RO-zU-Sie" firstAttribute="leading" secondItem="fh1-uh-A0R" secondAttribute="leading" constant="15" id="faR-5A-9A1"/>
+                            <constraint firstItem="6FI-n4-uqW" firstAttribute="leading" secondItem="fh1-uh-A0R" secondAttribute="leading" constant="15" id="hYm-ro-OLZ"/>
+                            <constraint firstAttribute="trailing" secondItem="6FI-n4-uqW" secondAttribute="trailing" constant="15" id="izY-zz-dg8"/>
+                            <constraint firstAttribute="trailing" secondItem="9RO-zU-Sie" secondAttribute="trailing" constant="15" id="z0U-Kh-bI0"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                <real key="value" value="10"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </view>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstAttribute="trailing" secondItem="fh1-uh-A0R" secondAttribute="trailing" id="OSN-aD-l4Q"/>
+                <constraint firstItem="fh1-uh-A0R" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" id="fuy-aF-Vm7"/>
+                <constraint firstAttribute="bottom" secondItem="fh1-uh-A0R" secondAttribute="bottom" id="wK9-Jd-phc"/>
+                <constraint firstItem="fh1-uh-A0R" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="za9-lM-b8T"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="246" height="389"/>
+            <connections>
+                <outlet property="imageProduct" destination="Y0r-in-WX1" id="7FM-zy-92Q"/>
+                <outlet property="labelCompanyName" destination="6FI-n4-uqW" id="SXd-gN-RSf"/>
+                <outlet property="labelDescription" destination="Po8-Vb-fPP" id="1j3-Xp-dCG"/>
+                <outlet property="labelTitle" destination="9RO-zU-Sie" id="qhc-zM-b0Z"/>
+            </connections>
+            <point key="canvasLocation" x="-58.125" y="123.06338028169014"/>
+        </collectionViewCell>
+    </objects>
+    <resources>
+        <namedColor name="Gradient">
+            <color red="0.0" green="0.0" blue="0.0" alpha="0.30000001192092896" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+        <namedColor name="Theme">
+            <color red="0.51800000667572021" green="0.18799999356269836" blue="0.79600000381469727" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/21_Home3/Home3View.swift

@@ -0,0 +1,140 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Home3View: UIViewController {
+
+	@IBOutlet var viewTitle: UIView!
+	@IBOutlet var labelTitle: UILabel!
+	@IBOutlet var collectionView: UICollectionView!
+
+	private var products: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+
+		navigationItem.leftBarButtonItem = UIBarButtonItem(customView: viewTitle)
+		navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "person.circle.fill"), style: .plain, target: self, action: #selector(actionProfile))
+		collectionView.register(UINib(nibName: "Home3Cell1", bundle: Bundle.main), forCellWithReuseIdentifier: "Home3Cell1")
+		collectionView.register(UINib(nibName: "Home3Cell2", bundle: Bundle.main), forCellWithReuseIdentifier: "Home3Cell2")
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		products.removeAll()
+
+		var dict1: [String: String] = [:]
+		dict1["companyName"] = "Adidas"
+		dict1["title"] = "Gazelle Suede"
+		dict1["description"] = "The Adidas Originals draw inspiration from street culture and retro styles."
+		products.append(dict1)
+
+		var dict2: [String: String] = [:]
+		dict2["companyName"] = "Puma"
+		dict2["title"] = "Soccer Boots"
+		dict2["description"] = "A focus on functionality as well as style is paramount in PUMA's designs"
+		products.append(dict2)
+
+		var dict3: [String: String] = [:]
+		dict3["companyName"] = "Reebok"
+		dict3["title"] = "Combat Boxing "
+		dict3["description"] = "Reebok have aligned themselves with some of the world's top athletes"
+		products.append(dict3)
+
+		refreshCollectionViewProducts()
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionViewProducts() {
+
+		collectionView.reloadData()
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionProfile(_ sender: UIButton) {
+
+		print(#function)
+		dismiss(animated: true)
+	}
+}
+
+// MARK: - UICollectionViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home3View: UICollectionViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in collectionView: UICollectionView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+
+		return 3
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+
+		if (indexPath.row == 0) {
+			let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Home3Cell1", for: indexPath) as! Home3Cell1
+			cell.bindData(index: indexPath, data: products[indexPath.row])
+			return cell
+		}
+		if (indexPath.row == 1) || (indexPath.row == 2) {
+			let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Home3Cell2", for: indexPath) as! Home3Cell2
+			cell.bindData(index: indexPath, data: products[indexPath.row])
+			return cell
+		}
+
+		return UICollectionViewCell()
+	}
+}
+
+// MARK: - UICollectionViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home3View: UICollectionViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+
+		print(#function)
+	}
+}
+
+// MARK: - UICollectionViewDelegateFlowLayout
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Home3View: UICollectionViewDelegateFlowLayout {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+		let width = collectionView.frame.size.width
+		let height = (collectionView.frame.size.height-45)/2
+
+		if (indexPath.row == 0) { return CGSize(width: width-30, height: height) }
+		if (indexPath.row == 1) { return CGSize(width: (width-45)/2, height: height) }
+		if (indexPath.row == 2) { return CGSize(width: (width-45)/2, height: height) }
+
+		return CGSize.zero
+	}
+}

Ecommerce/Classes/21_Home3/Home3View.xib

@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Home3View" customModule="ECommerce">
+            <connections>
+                <outlet property="collectionView" destination="VFR-Ad-UjY" id="piW-eo-Tc6"/>
+                <outlet property="labelTitle" destination="0sC-fy-oYl" id="l07-mX-ykX"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+                <outlet property="viewTitle" destination="fUQ-ZB-WEc" id="ABY-Fn-iiD"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Isf-mY-oHt">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <subviews>
+                        <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="VFR-Ad-UjY">
+                            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                            <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="15" minimumInteritemSpacing="15" id="vb3-Xk-ztV">
+                                <size key="itemSize" width="50" height="50"/>
+                                <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                                <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                                <inset key="sectionInset" minX="15" minY="15" maxX="15" maxY="15"/>
+                            </collectionViewFlowLayout>
+                            <connections>
+                                <outlet property="dataSource" destination="-1" id="jCy-QW-f6I"/>
+                                <outlet property="delegate" destination="-1" id="Kxz-BL-3OR"/>
+                            </connections>
+                        </collectionView>
+                    </subviews>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <constraints>
+                        <constraint firstItem="VFR-Ad-UjY" firstAttribute="top" secondItem="Isf-mY-oHt" secondAttribute="top" id="VnK-Ve-C5Y"/>
+                        <constraint firstAttribute="bottom" secondItem="VFR-Ad-UjY" secondAttribute="bottom" id="d9X-A0-YCI"/>
+                        <constraint firstAttribute="trailing" secondItem="VFR-Ad-UjY" secondAttribute="trailing" id="kRK-dO-ohz"/>
+                        <constraint firstItem="VFR-Ad-UjY" firstAttribute="leading" secondItem="Isf-mY-oHt" secondAttribute="leading" id="p98-fu-L5U"/>
+                    </constraints>
+                </view>
+            </subviews>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+            <constraints>
+                <constraint firstItem="Isf-mY-oHt" firstAttribute="trailing" secondItem="fnl-2z-Ty3" secondAttribute="trailing" id="0h9-FP-S0g"/>
+                <constraint firstItem="Isf-mY-oHt" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="2SF-JE-lge"/>
+                <constraint firstItem="Isf-mY-oHt" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="2o3-bQ-GI2"/>
+                <constraint firstItem="Isf-mY-oHt" firstAttribute="bottom" secondItem="fnl-2z-Ty3" secondAttribute="bottom" id="Xdf-Ze-Xfw"/>
+            </constraints>
+            <point key="canvasLocation" x="132" y="154"/>
+        </view>
+        <view contentMode="scaleToFill" id="fUQ-ZB-WEc">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="47"/>
+            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+            <subviews>
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="circles.hexagongrid.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="LBF-Ki-X8e">
+                    <rect key="frame" x="0.0" y="6" width="37" height="35"/>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <color key="tintColor" name="Theme"/>
+                    <constraints>
+                        <constraint firstAttribute="width" secondItem="LBF-Ki-X8e" secondAttribute="height" id="2Gu-tK-y0I"/>
+                    </constraints>
+                    <userDefinedRuntimeAttributes>
+                        <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                            <real key="value" value="5"/>
+                        </userDefinedRuntimeAttribute>
+                    </userDefinedRuntimeAttributes>
+                </imageView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Store" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="0sC-fy-oYl">
+                    <rect key="frame" x="47" y="10" width="39" height="27"/>
+                    <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="15"/>
+                    <nil key="textColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+            </subviews>
+            <viewLayoutGuide key="safeArea" id="gsa-MS-F4J"/>
+            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+            <constraints>
+                <constraint firstItem="LBF-Ki-X8e" firstAttribute="top" secondItem="fUQ-ZB-WEc" secondAttribute="top" constant="5" id="8du-CR-VmS"/>
+                <constraint firstAttribute="bottom" secondItem="LBF-Ki-X8e" secondAttribute="bottom" constant="5" id="Dj4-9p-tGf"/>
+                <constraint firstItem="LBF-Ki-X8e" firstAttribute="leading" secondItem="fUQ-ZB-WEc" secondAttribute="leading" id="VzR-l3-NES"/>
+                <constraint firstItem="0sC-fy-oYl" firstAttribute="top" secondItem="fUQ-ZB-WEc" secondAttribute="top" constant="10" id="bk6-YQ-vKA"/>
+                <constraint firstAttribute="bottom" secondItem="0sC-fy-oYl" secondAttribute="bottom" constant="10" id="mjy-rR-IeM"/>
+                <constraint firstItem="0sC-fy-oYl" firstAttribute="leading" secondItem="LBF-Ki-X8e" secondAttribute="trailing" constant="10" id="pGM-Xz-Gzj"/>
+            </constraints>
+            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
+            <point key="canvasLocation" x="129.375" y="-216.02112676056339"/>
+        </view>
+    </objects>
+    <resources>
+        <image name="circles.hexagongrid.fill" catalog="system" width="128" height="112"/>
+        <namedColor name="Theme">
+            <color red="0.045000001788139343" green="0.59799998998641968" blue="0.83499997854232788" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>

Ecommerce/Classes/22_Categories1/Categories1Cell1.swift

@@ -0,0 +1,32 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Categories1Cell1: UITableViewCell {
+
+	@IBOutlet var imageCategory: UIImageView!
+	@IBOutlet var labelName: UILabel!
+	@IBOutlet var labelItems: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int, data: [String: String]) {
+
+		guard let images = data["images"] else { return }
+		guard let name = data["name"] else { return }
+		guard let items = data["items"] else { return }
+
+		imageCategory.sample("Ecommerce", images, index)
+		labelName.text = name
+		labelItems.text = items + " items"
+	}
+}

Ecommerce/Classes/22_Categories1/Categories1Cell1.xib

@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <tableViewCell contentMode="scaleToFill" selectionStyle="none" indentationWidth="10" reuseIdentifier="Categories1Cell1" rowHeight="80" id="KGk-i7-Jjw" customClass="Categories1Cell1" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="331" height="80"/>
+            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="KGk-i7-Jjw" id="H2p-sc-9uM">
+                <rect key="frame" x="0.0" y="0.0" width="331" height="80"/>
+                <autoresizingMask key="autoresizingMask"/>
+                <subviews>
+                    <view clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="36X-cB-cfE">
+                        <rect key="frame" x="15" y="5" width="301" height="70"/>
+                        <subviews>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="photo.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="i47-ba-TWz">
+                                <rect key="frame" x="10" y="11" width="50" height="47.5"/>
+                                <color key="tintColor" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <constraints>
+                                    <constraint firstAttribute="width" secondItem="i47-ba-TWz" secondAttribute="height" id="6nM-n0-Kuo"/>
+                                </constraints>
+                                <userDefinedRuntimeAttributes>
+                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                        <real key="value" value="10"/>
+                                    </userDefinedRuntimeAttribute>
+                                </userDefinedRuntimeAttributes>
+                            </imageView>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="L8A-8z-lwl">
+                                <rect key="frame" x="75" y="15" width="191" height="21.5"/>
+                                <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="16"/>
+                                <nil key="textColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="items" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="bCS-n0-0hC">
+                                <rect key="frame" x="75" y="36.5" width="191" height="18.5"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="chevron.right" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="Dkh-SY-BNF">
+                                <rect key="frame" x="276" y="29.5" width="15" height="11.5"/>
+                                <color key="tintColor" systemColor="systemGrayColor" red="0.5568627451" green="0.5568627451" blue="0.57647058819999997" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <constraints>
+                                    <constraint firstAttribute="width" constant="15" id="TZd-tr-j12"/>
+                                    <constraint firstAttribute="height" constant="15" id="gvw-zh-eeo"/>
+                                </constraints>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" systemColor="tertiarySystemGroupedBackgroundColor" red="0.94901960780000005" green="0.94901960780000005" blue="0.96862745100000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstAttribute="bottom" secondItem="i47-ba-TWz" secondAttribute="bottom" constant="10" id="FPl-w2-q1i"/>
+                            <constraint firstItem="L8A-8z-lwl" firstAttribute="leading" secondItem="i47-ba-TWz" secondAttribute="trailing" constant="15" id="KXy-Kh-a5Z"/>
+                            <constraint firstItem="Dkh-SY-BNF" firstAttribute="centerY" secondItem="36X-cB-cfE" secondAttribute="centerY" id="NOv-mT-Ng5"/>
+                            <constraint firstItem="bCS-n0-0hC" firstAttribute="top" secondItem="L8A-8z-lwl" secondAttribute="bottom" id="Uhu-n1-kfS"/>
+                            <constraint firstItem="Dkh-SY-BNF" firstAttribute="leading" secondItem="L8A-8z-lwl" secondAttribute="trailing" constant="10" id="WGx-bP-dse"/>
+                            <constraint firstItem="bCS-n0-0hC" firstAttribute="leading" secondItem="L8A-8z-lwl" secondAttribute="leading" id="eMd-63-XTb"/>
+                            <constraint firstItem="i47-ba-TWz" firstAttribute="top" secondItem="36X-cB-cfE" secondAttribute="top" constant="10" id="elm-gx-nqK"/>
+                            <constraint firstItem="bCS-n0-0hC" firstAttribute="trailing" secondItem="L8A-8z-lwl" secondAttribute="trailing" id="jQ7-wE-HGP"/>
+                            <constraint firstItem="L8A-8z-lwl" firstAttribute="top" secondItem="i47-ba-TWz" secondAttribute="top" constant="5" id="mgU-bm-lYO"/>
+                            <constraint firstItem="bCS-n0-0hC" firstAttribute="height" secondItem="L8A-8z-lwl" secondAttribute="height" multiplier="0.85" id="sko-ha-8ro"/>
+                            <constraint firstAttribute="trailing" secondItem="Dkh-SY-BNF" secondAttribute="trailing" constant="10" id="te5-zC-RE6"/>
+                            <constraint firstItem="i47-ba-TWz" firstAttribute="leading" secondItem="36X-cB-cfE" secondAttribute="leading" constant="10" id="uNb-vK-ypy"/>
+                            <constraint firstItem="bCS-n0-0hC" firstAttribute="bottom" secondItem="i47-ba-TWz" secondAttribute="bottom" constant="-5" id="xji-ty-hX1"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                <real key="value" value="10"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </view>
+                </subviews>
+                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                <constraints>
+                    <constraint firstAttribute="bottom" secondItem="36X-cB-cfE" secondAttribute="bottom" constant="5" id="8Yc-gp-KPI"/>
+                    <constraint firstItem="36X-cB-cfE" firstAttribute="leading" secondItem="H2p-sc-9uM" secondAttribute="leading" constant="15" id="9oe-62-Nvm"/>
+                    <constraint firstItem="36X-cB-cfE" firstAttribute="top" secondItem="H2p-sc-9uM" secondAttribute="top" constant="5" id="BKb-s0-INb"/>
+                    <constraint firstAttribute="trailing" secondItem="36X-cB-cfE" secondAttribute="trailing" constant="15" id="Wp5-gN-4W1"/>
+                </constraints>
+            </tableViewCellContentView>
+            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+            <viewLayoutGuide key="safeArea" id="njF-e1-oar"/>
+            <connections>
+                <outlet property="imageCategory" destination="i47-ba-TWz" id="G2c-8V-1kq"/>
+                <outlet property="labelItems" destination="bCS-n0-0hC" id="GBk-iv-Vke"/>
+                <outlet property="labelName" destination="L8A-8z-lwl" id="3GU-1f-rvy"/>
+            </connections>
+            <point key="canvasLocation" x="139.85507246376812" y="166.74107142857142"/>
+        </tableViewCell>
+    </objects>
+    <resources>
+        <image name="chevron.right" catalog="system" width="48" height="64"/>
+        <image name="photo.fill" catalog="system" width="64" height="46"/>
+    </resources>
+</document>

Ecommerce/Classes/22_Categories1/Categories1Cell2.swift

@@ -0,0 +1,29 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Categories1Cell2: UITableViewCell {
+
+	@IBOutlet var labelName: UILabel!
+	@IBOutlet var labelItems: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int, data: [String: String]) {
+
+		guard let name = data["name"] else { return }
+		guard let items = data["items"] else { return }
+
+		labelName.text = name
+		labelItems.text = items + " items"
+	}
+}

Ecommerce/Classes/22_Categories1/Categories1Cell2.xib

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <tableViewCell contentMode="scaleToFill" selectionStyle="none" indentationWidth="10" reuseIdentifier="Categories1Cell2" rowHeight="80" id="Ove-Xu-Q8x" customClass="Categories1Cell2" customModule="app" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="331" height="80"/>
+            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="Ove-Xu-Q8x" id="Zdb-2y-nBz">
+                <rect key="frame" x="0.0" y="0.0" width="331" height="80"/>
+                <autoresizingMask key="autoresizingMask"/>
+                <subviews>
+                    <view clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ek5-vA-0bW">
+                        <rect key="frame" x="15" y="5" width="301" height="70"/>
+                        <subviews>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="DfS-kG-Otf">
+                                <rect key="frame" x="15" y="15" width="251" height="21.5"/>
+                                <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="16"/>
+                                <nil key="textColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="items" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="eoI-xv-8Iq">
+                                <rect key="frame" x="15" y="36.5" width="251" height="18.5"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                <color key="textColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="chevron.right" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="ziU-2D-1RC">
+                                <rect key="frame" x="276" y="29.5" width="15" height="11.5"/>
+                                <color key="tintColor" systemColor="systemGrayColor" red="0.5568627451" green="0.5568627451" blue="0.57647058819999997" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <constraints>
+                                    <constraint firstAttribute="width" constant="15" id="Arc-Vm-181"/>
+                                    <constraint firstAttribute="height" constant="15" id="Q0x-g5-Nap"/>
+                                </constraints>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" systemColor="tertiarySystemGroupedBackgroundColor" red="0.94901960780000005" green="0.94901960780000005" blue="0.96862745100000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstItem="eoI-xv-8Iq" firstAttribute="top" secondItem="DfS-kG-Otf" secondAttribute="bottom" id="1wo-jL-kV5"/>
+                            <constraint firstItem="ziU-2D-1RC" firstAttribute="leading" secondItem="DfS-kG-Otf" secondAttribute="trailing" constant="10" id="2Ec-5a-a8H"/>
+                            <constraint firstItem="eoI-xv-8Iq" firstAttribute="leading" secondItem="DfS-kG-Otf" secondAttribute="leading" id="3JO-LQ-EOC"/>
+                            <constraint firstAttribute="trailing" secondItem="ziU-2D-1RC" secondAttribute="trailing" constant="10" id="EpZ-Rf-tvl"/>
+                            <constraint firstItem="DfS-kG-Otf" firstAttribute="top" secondItem="ek5-vA-0bW" secondAttribute="top" constant="15" id="FSE-Vn-7vf"/>
+                            <constraint firstItem="eoI-xv-8Iq" firstAttribute="height" secondItem="DfS-kG-Otf" secondAttribute="height" multiplier="0.85" id="I4P-9T-FJ3"/>
+                            <constraint firstItem="DfS-kG-Otf" firstAttribute="leading" secondItem="ek5-vA-0bW" secondAttribute="leading" constant="15" id="IWg-95-m77"/>
+                            <constraint firstItem="eoI-xv-8Iq" firstAttribute="trailing" secondItem="DfS-kG-Otf" secondAttribute="trailing" id="Oak-lN-TMi"/>
+                            <constraint firstAttribute="bottom" secondItem="eoI-xv-8Iq" secondAttribute="bottom" constant="15" id="YsK-Nd-kvy"/>
+                            <constraint firstItem="ziU-2D-1RC" firstAttribute="centerY" secondItem="ek5-vA-0bW" secondAttribute="centerY" id="ohr-vB-eaL"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                <real key="value" value="10"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </view>
+                </subviews>
+                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                <constraints>
+                    <constraint firstAttribute="bottom" secondItem="ek5-vA-0bW" secondAttribute="bottom" constant="5" id="AdS-HT-qLv"/>
+                    <constraint firstItem="ek5-vA-0bW" firstAttribute="top" secondItem="Zdb-2y-nBz" secondAttribute="top" constant="5" id="MVK-2m-4Ls"/>
+                    <constraint firstAttribute="trailing" secondItem="ek5-vA-0bW" secondAttribute="trailing" constant="15" id="TyX-uK-YL8"/>
+                    <constraint firstItem="ek5-vA-0bW" firstAttribute="leading" secondItem="Zdb-2y-nBz" secondAttribute="leading" constant="15" id="eAf-Db-Lpa"/>
+                </constraints>
+            </tableViewCellContentView>
+            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+            <viewLayoutGuide key="safeArea" id="AZy-pe-mGI"/>
+            <connections>
+                <outlet property="labelItems" destination="eoI-xv-8Iq" id="81q-bz-PAZ"/>
+                <outlet property="labelName" destination="DfS-kG-Otf" id="AXv-Mx-gKX"/>
+            </connections>
+            <point key="canvasLocation" x="139.85507246376812" y="166.74107142857142"/>
+        </tableViewCell>
+    </objects>
+    <resources>
+        <image name="chevron.right" catalog="system" width="48" height="64"/>
+    </resources>
+</document>

Ecommerce/Classes/22_Categories1/Categories1View.swift

@@ -0,0 +1,158 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Categories1View: UIViewController {
+
+	@IBOutlet var tableView: UITableView!
+
+	private var categories: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+		title = "Categories"
+
+		navigationController?.navigationBar.prefersLargeTitles = true
+		navigationItem.largeTitleDisplayMode = .always
+
+		tableView.register(UINib(nibName: "Categories1Cell1", bundle: Bundle.main), forCellReuseIdentifier: "Categories1Cell1")
+		tableView.register(UINib(nibName: "Categories1Cell2", bundle: Bundle.main), forCellReuseIdentifier: "Categories1Cell2")
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		categories.removeAll()
+
+		var dict1: [String: String] = [:]
+		dict1["images"] = "Shoes"
+		dict1["name"] = "Shoes"
+		dict1["items"] = "812"
+		categories.append(dict1)
+
+		var dict2: [String: String] = [:]
+		dict2["name"] = "Sneakers"
+		dict2["items"] = "1.4K"
+		categories.append(dict2)
+
+		var dict3: [String: String] = [:]
+		dict3["name"] = "Jeans"
+		dict3["items"] = "91.9K"
+		categories.append(dict3)
+
+		var dict4: [String: String] = [:]
+		dict4["images"] = "Electronics"
+		dict4["name"] = "Accessories"
+		dict4["items"] = "12.3K"
+		categories.append(dict4)
+
+		var dict5: [String: String] = [:]
+		dict5["name"] = "Casual Trousers"
+		dict5["items"] = "996"
+		categories.append(dict5)
+
+		var dict6: [String: String] = [:]
+		dict6["name"] = "Shorts"
+		dict6["items"] = "2.5K"
+		categories.append(dict6)
+
+		var dict7: [String: String] = [:]
+		dict7["name"] = "Track Pants"
+		dict7["items"] = "17K"
+		categories.append(dict7)
+
+		var dict8: [String: String] = [:]
+		dict8["name"] = "Jackets"
+		dict8["items"] = "20K"
+		categories.append(dict8)
+
+		var dict9: [String: String] = [:]
+		dict9["name"] = "Blazers"
+		dict9["items"] = "915"
+		categories.append(dict9)
+
+		var dict10: [String: String] = [:]
+		dict10["name"] = "Socks"
+		dict10["items"] = "75.1K"
+		categories.append(dict10)
+
+		refreshTableView()
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshTableView() {
+
+		tableView.reloadData()
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewWillDisappear(_ animated: Bool) {
+
+		super.viewWillDisappear(animated)
+	}
+}
+
+// MARK: - UITableViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Categories1View: UITableViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in tableView: UITableView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+
+		return categories.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+
+		if let _ = categories[indexPath.row]["images"] {
+			let cell = tableView.dequeueReusableCell(withIdentifier: "Categories1Cell1", for: indexPath) as! Categories1Cell1
+			cell.bindData(index: indexPath.row, data: categories[indexPath.row])
+			return cell
+		}
+
+		let cell = tableView.dequeueReusableCell(withIdentifier: "Categories1Cell2", for: indexPath) as! Categories1Cell2
+		cell.bindData(index: indexPath.row, data: categories[indexPath.row])
+		return cell
+	}
+}
+
+// MARK: - UITableViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Categories1View: UITableViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
+
+		return 80
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+
+		print(#function)
+		tableView.deselectRow(at: indexPath, animated: true)
+	}
+}

Ecommerce/Classes/22_Categories1/Categories1View.xib

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Categories1View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="tableView" destination="POw-9f-XhW" id="jKN-rJ-qQc"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Fod-cy-R8V">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <subviews>
+                        <tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" style="plain" separatorStyle="none" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="POw-9f-XhW">
+                            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                            <connections>
+                                <outlet property="dataSource" destination="-1" id="rUZ-ML-B7u"/>
+                                <outlet property="delegate" destination="-1" id="0pX-pO-4iM"/>
+                            </connections>
+                        </tableView>
+                    </subviews>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <constraints>
+                        <constraint firstAttribute="bottom" secondItem="POw-9f-XhW" secondAttribute="bottom" id="76o-qT-zFG"/>
+                        <constraint firstItem="POw-9f-XhW" firstAttribute="top" secondItem="Fod-cy-R8V" secondAttribute="top" id="T2p-VO-4Lu"/>
+                        <constraint firstItem="POw-9f-XhW" firstAttribute="leading" secondItem="Fod-cy-R8V" secondAttribute="leading" id="eob-7w-cYo"/>
+                        <constraint firstAttribute="trailing" secondItem="POw-9f-XhW" secondAttribute="trailing" id="wmp-WN-mof"/>
+                    </constraints>
+                </view>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstItem="Fod-cy-R8V" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="A8P-In-i2E"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="Fod-cy-R8V" secondAttribute="trailing" id="HNN-wA-J3Q"/>
+                <constraint firstItem="Fod-cy-R8V" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="fK4-Su-nV7"/>
+                <constraint firstAttribute="bottom" secondItem="Fod-cy-R8V" secondAttribute="bottom" id="vFW-7r-Fbv"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="132" y="154"/>
+        </view>
+    </objects>
+</document>

Ecommerce/Classes/23_Categories2/Categories2Cell1.swift

@@ -0,0 +1,31 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Categories2Cell1: UICollectionViewCell {
+
+	@IBOutlet var imageCategory: UIImageView!
+	@IBOutlet var labelName: UILabel!
+	@IBOutlet var labelItems: UILabel!
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(index: Int, data: [String: String]) {
+
+		guard let name = data["name"] else { return }
+		guard let items = data["items"] else { return }
+
+		imageCategory.sample("Ecommerce", "Clothes", index)
+		labelName.text = name
+		labelItems.text = items + " items"
+	}
+}

Ecommerce/Classes/23_Categories2/Categories2Cell1.xib

@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="gTV-IL-0wX" customClass="Categories2Cell1" customModule="Ecommerce" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="214" height="271"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="214" height="271"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <view clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="66a-YA-fgy">
+                        <rect key="frame" x="0.0" y="0.0" width="214" height="271"/>
+                        <subviews>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="BjN-Xk-g1O">
+                                <rect key="frame" x="0.0" y="0.0" width="214" height="271"/>
+                                <color key="tintColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <userDefinedRuntimeAttributes>
+                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                        <real key="value" value="10"/>
+                                    </userDefinedRuntimeAttribute>
+                                </userDefinedRuntimeAttributes>
+                            </imageView>
+                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="tLQ-wZ-RH1" userLabel="Gradient View">
+                                <rect key="frame" x="0.0" y="0.0" width="214" height="271"/>
+                                <color key="backgroundColor" name="Gradient"/>
+                            </view>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Name" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ag4-bM-w2J">
+                                <rect key="frame" x="15" y="216" width="184" height="20"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="20" id="6Gu-Hl-aVC"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="16"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="items" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Rik-nz-yLk">
+                                <rect key="frame" x="15" y="236" width="184" height="20"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="20" id="JXZ-Au-7mn"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" systemColor="tertiarySystemGroupedBackgroundColor" red="0.94901960780000005" green="0.94901960780000005" blue="0.96862745100000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstItem="tLQ-wZ-RH1" firstAttribute="bottom" secondItem="BjN-Xk-g1O" secondAttribute="bottom" id="2eU-Ok-pDR"/>
+                            <constraint firstAttribute="bottom" secondItem="Rik-nz-yLk" secondAttribute="bottom" constant="15" id="DJj-X6-b3t"/>
+                            <constraint firstItem="tLQ-wZ-RH1" firstAttribute="leading" secondItem="BjN-Xk-g1O" secondAttribute="leading" id="HdU-kf-Tlt"/>
+                            <constraint firstItem="ag4-bM-w2J" firstAttribute="leading" secondItem="66a-YA-fgy" secondAttribute="leading" constant="15" id="Pxk-6U-ctI"/>
+                            <constraint firstItem="Rik-nz-yLk" firstAttribute="top" secondItem="ag4-bM-w2J" secondAttribute="bottom" id="TH3-id-xT2"/>
+                            <constraint firstAttribute="trailing" secondItem="Rik-nz-yLk" secondAttribute="trailing" constant="15" id="WaM-XD-Klw"/>
+                            <constraint firstAttribute="trailing" secondItem="ag4-bM-w2J" secondAttribute="trailing" constant="15" id="XA6-xM-7lN"/>
+                            <constraint firstItem="tLQ-wZ-RH1" firstAttribute="trailing" secondItem="BjN-Xk-g1O" secondAttribute="trailing" id="a8U-Th-2DL"/>
+                            <constraint firstItem="BjN-Xk-g1O" firstAttribute="top" secondItem="66a-YA-fgy" secondAttribute="top" id="blc-nd-Msw"/>
+                            <constraint firstAttribute="trailing" secondItem="BjN-Xk-g1O" secondAttribute="trailing" id="daT-fW-Qbr"/>
+                            <constraint firstItem="BjN-Xk-g1O" firstAttribute="leading" secondItem="66a-YA-fgy" secondAttribute="leading" id="fy3-Zf-HoN"/>
+                            <constraint firstAttribute="bottom" secondItem="BjN-Xk-g1O" secondAttribute="bottom" id="hAc-US-ROO"/>
+                            <constraint firstItem="Rik-nz-yLk" firstAttribute="leading" secondItem="66a-YA-fgy" secondAttribute="leading" constant="15" id="jss-bT-L4E"/>
+                            <constraint firstItem="tLQ-wZ-RH1" firstAttribute="top" secondItem="BjN-Xk-g1O" secondAttribute="top" id="l20-en-kAA"/>
+                        </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
+                                <real key="value" value="10"/>
+                            </userDefinedRuntimeAttribute>
+                        </userDefinedRuntimeAttributes>
+                    </view>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstAttribute="bottom" secondItem="66a-YA-fgy" secondAttribute="bottom" id="DAg-po-cxu"/>
+                <constraint firstAttribute="trailing" secondItem="66a-YA-fgy" secondAttribute="trailing" id="jPL-rF-bmc"/>
+                <constraint firstItem="66a-YA-fgy" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="mFS-om-HnM"/>
+                <constraint firstItem="66a-YA-fgy" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" id="sH5-Uu-a7x"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <size key="customSize" width="214" height="271"/>
+            <connections>
+                <outlet property="imageCategory" destination="BjN-Xk-g1O" id="JAH-OG-Qi0"/>
+                <outlet property="labelItems" destination="Rik-nz-yLk" id="Pt3-h8-pjA"/>
+                <outlet property="labelName" destination="ag4-bM-w2J" id="VSr-ZU-tbf"/>
+            </connections>
+            <point key="canvasLocation" x="31.875" y="146.30281690140845"/>
+        </collectionViewCell>
+    </objects>
+    <resources>
+        <namedColor name="Gradient">
+            <color red="0.0" green="0.0" blue="0.0" alpha="0.30000001192092896" colorSpace="custom" customColorSpace="displayP3"/>
+        </namedColor>
+    </resources>
+</document>

Ecommerce/Classes/23_Categories2/Categories2View.swift

@@ -0,0 +1,154 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Categories2View: UIViewController {
+
+	@IBOutlet var collectionView: UICollectionView!
+
+	private var categories: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewDidLoad() {
+
+		super.viewDidLoad()
+		title = "Categories"
+
+		navigationController?.navigationBar.prefersLargeTitles = true
+		navigationItem.largeTitleDisplayMode = .always
+
+		collectionView.register(UINib(nibName: "Categories2Cell1", bundle: Bundle.main), forCellWithReuseIdentifier: "Categories2Cell1")
+
+		loadData()
+	}
+
+	// MARK: - Data methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func loadData() {
+
+		categories.removeAll()
+
+		var dict1: [String: String] = [:]
+		dict1["name"] = "Shoes"
+		dict1["items"] = "812"
+		categories.append(dict1)
+
+		var dict2: [String: String] = [:]
+		dict2["name"] = "Sneakers"
+		dict2["items"] = "1.4K"
+		categories.append(dict2)
+
+		var dict3: [String: String] = [:]
+		dict3["name"] = "Jeans"
+		dict3["items"] = "91.9K"
+		categories.append(dict3)
+
+		var dict4: [String: String] = [:]
+		dict4["name"] = "Accessories"
+		dict4["items"] = "12.3K"
+		categories.append(dict4)
+
+		var dict5: [String: String] = [:]
+		dict5["name"] = "Casual Trousers"
+		dict5["items"] = "996"
+		categories.append(dict5)
+
+		var dict6: [String: String] = [:]
+		dict6["name"] = "Shorts"
+		dict6["items"] = "2.5K"
+		categories.append(dict6)
+
+		var dict7: [String: String] = [:]
+		dict7["name"] = "Track Pants"
+		dict7["items"] = "17K"
+		categories.append(dict7)
+
+		var dict8: [String: String] = [:]
+		dict8["name"] = "Jackets"
+		dict8["items"] = "20K"
+		categories.append(dict8)
+
+		var dict9: [String: String] = [:]
+		dict9["name"] = "Blazers"
+		dict9["items"] = "915"
+		categories.append(dict9)
+
+		var dict10: [String: String] = [:]
+		dict10["name"] = "Socks"
+		dict10["items"] = "75.1K"
+		categories.append(dict10)
+
+		refreshCollectionView()
+	}
+
+	// MARK: - Refresh methods
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func refreshCollectionView() {
+
+		collectionView.reloadData()
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func viewWillDisappear(_ animated: Bool) {
+
+		super.viewWillDisappear(animated)
+	}
+}
+
+// MARK: - UICollectionViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Categories2View: UICollectionViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in collectionView: UICollectionView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+
+		return categories.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+
+		let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Categories2Cell1", for: indexPath) as! Categories2Cell1
+		cell.bindData(index: indexPath.item, data: categories[indexPath.row])
+		return cell
+	}
+}
+
+// MARK: - UICollectionViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Categories2View: UICollectionViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+
+		print(#function)
+	}
+}
+
+// MARK: - UICollectionViewDelegateFlowLayout
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Categories2View: UICollectionViewDelegateFlowLayout {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+		let width = (collectionView.frame.size.width-45)/2
+		return CGSize(width: width, height: (width*1.25))
+	}
+}

Ecommerce/Classes/23_Categories2/Categories2View.xib

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_0" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="Categories2View" customModule="app" customModuleProvider="target">
+            <connections>
+                <outlet property="collectionView" destination="lrD-2t-iSO" id="eAr-Sg-ZBl"/>
+                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
+            </connections>
+        </placeholder>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Qee-1Q-TpX">
+                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                    <subviews>
+                        <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="lrD-2t-iSO">
+                            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
+                            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                            <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="15" minimumInteritemSpacing="15" id="2cv-9j-kFc">
+                                <size key="itemSize" width="50" height="50"/>
+                                <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                                <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                                <inset key="sectionInset" minX="15" minY="15" maxX="15" maxY="15"/>
+                            </collectionViewFlowLayout>
+                            <connections>
+                                <outlet property="dataSource" destination="-1" id="eja-UT-dO7"/>
+                                <outlet property="delegate" destination="-1" id="L83-70-4Dh"/>
+                            </connections>
+                        </collectionView>
+                    </subviews>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <constraints>
+                        <constraint firstAttribute="trailing" secondItem="lrD-2t-iSO" secondAttribute="trailing" id="65Z-Vl-jHV"/>
+                        <constraint firstAttribute="bottom" secondItem="lrD-2t-iSO" secondAttribute="bottom" id="M5e-pg-7zx"/>
+                        <constraint firstItem="lrD-2t-iSO" firstAttribute="top" secondItem="Qee-1Q-TpX" secondAttribute="top" id="SMr-qI-GPJ"/>
+                        <constraint firstItem="lrD-2t-iSO" firstAttribute="leading" secondItem="Qee-1Q-TpX" secondAttribute="leading" id="cjd-bf-mj6"/>
+                    </constraints>
+                </view>
+            </subviews>
+            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+            <constraints>
+                <constraint firstAttribute="bottom" secondItem="Qee-1Q-TpX" secondAttribute="bottom" id="6c8-vE-m2Y"/>
+                <constraint firstItem="fnl-2z-Ty3" firstAttribute="trailing" secondItem="Qee-1Q-TpX" secondAttribute="trailing" id="VZ8-4O-xZO"/>
+                <constraint firstItem="Qee-1Q-TpX" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" id="YeN-zN-FFd"/>
+                <constraint firstItem="Qee-1Q-TpX" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" id="gFC-5A-3F7"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
+            <point key="canvasLocation" x="133" y="154"/>
+        </view>
+    </objects>
+</document>

Ecommerce/Classes/24_Categories3/Categories3Cell1.swift

@@ -0,0 +1,117 @@
+//
+// Copyright (c) 2021 Related Code - https://relatedcode.com
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import UIKit
+
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+class Categories3Cell1: UITableViewCell {
+
+	@IBOutlet var labelCategory: UILabel!
+	@IBOutlet var buttonSeeAll: UIButton!
+	@IBOutlet var collectionView: UICollectionView!
+
+	private var products: [[String: String]] = []
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	override func awakeFromNib() {
+
+		super.awakeFromNib()
+
+		collectionView.register(UINib(nibName: "Categories3Cell2", bundle: Bundle.main), forCellWithReuseIdentifier: "Categories3Cell2")
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func bindData(data: [String: Any]) {
+
+		guard let name = data["name"] as? String else { return }
+		guard let items = data["items"] as? [[String: String]] else { return }
+
+		labelCategory.text = name
+		products = items
+	}
+
+	// MARK: - User actions
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	@objc func actionFavorite(_ sender: UIButton) {
+
+		print(#function)
+	}
+}
+
+// MARK: - UICollectionViewDataSource
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Categories3Cell1: UICollectionViewDataSource {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func numberOfSections(in collectionView: UICollectionView) -> Int {
+
+		return 1
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+
+		return products.count
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+
+		let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Categories3Cell2", for: indexPath) as! Categories3Cell2
+		cell.bindData(index: indexPath, data: products[indexPath.row])
+		cell.buttonFavorite.tag = indexPath.row
+		cell.buttonFavorite.addTarget(self, action: #selector(actionFavorite(_:)), for: .touchUpInside)
+		return cell
+	}
+}
+
+// MARK: - UICollectionViewDelegate
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Categories3Cell1: UICollectionViewDelegate {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+
+		print(#function)
+	}
+}
+
+// MARK: - UICollectionViewDelegateFlowLayout
+//-----------------------------------------------------------------------------------------------------------------------------------------------
+extension Categories3Cell1: UICollectionViewDelegateFlowLayout {
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+
+		let width = (collectionView.frame.size.width-45)/2
+		let height = collectionView.frame.size.height
+
+		return CGSize(width: width, height: height)
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 15
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+
+		return 15
+	}
+
+	//-------------------------------------------------------------------------------------------------------------------------------------------
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+
+		return UIEdgeInsets(top: 0, left: 15, bottom: 0, right: 15)
+	}
+}