SDL 3.8!

Signed-off-by: Justin Dickow <jjdickow@gmail.com>

31 files changed, 1614 insertions, 0 deletions

diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/.usb.qml.swp b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/.usb.qml.swp
new file mode 100644
index 0000000000..a88c240c3a
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/.usb.qml.swp
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/Browse/artists.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/Browse/artists.qml
new file mode 100644
index 0000000000..af5804e72e
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/Browse/artists.qml
@@ -0,0 +1,6 @@
+import QtQuick 2.0
+
+Rectangle {
+    width: 100
+    height: 62
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/applink.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/applink.qml
new file mode 100644
index 0000000000..4f9d281964
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/applink.qml
@@ -0,0 +1,29 @@
+import QtQuick 2.0
+import com.ford.sdlcore 1.0
+import "../../Components"
+import "../../Layouts"
+
+MediaPlayerLayout {
+    header: "AppLink"
+    id: applink
+
+    Column {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 20
+
+        Text {
+            id: title
+            text: AppLink.show1
+            color: "#ffffff"
+            font.pixelSize: 28
+            anchors.leftMargin: 20
+        }
+        Text {
+            id: artist
+            text: AppLink.show2
+            color: "#ffffff"
+            font.pixelSize: 18
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/bluetooth.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/bluetooth.qml
new file mode 100644
index 0000000000..397b844698
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/bluetooth.qml
@@ -0,0 +1,13 @@
+import QtQuick 2.0
+import "../../Components"
+import "../../Layouts"
+
+MediaLayout {
+    header: "Bluetooth"
+
+    Image {
+        source: "../../Assets/Content/SiriusArtwork.png"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/fm.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/fm.qml
new file mode 100644
index 0000000000..b5f3ad1c8c
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/fm.qml
@@ -0,0 +1,46 @@
+import QtQuick 2.0
+import "../../Components"
+import "../../Layouts"
+
+MediaLayout {
+    header: "FM"
+
+    Flickable {
+        width: 700
+        height: 50
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 80
+        contentHeight: height
+        contentWidth: row.width
+        clip: true
+
+        RadioButtonGroup {
+            width: row.width
+            height: row.height
+            Row {
+                id: row
+                spacing: 8
+
+                RadioButton {
+                    text: "Button"
+                }
+                RadioButton {
+                    text: "Button"
+                }
+                RadioButton {
+                    text: "Button"
+                }
+                RadioButton {
+                    text: "Button"
+                }
+                RadioButton {
+                    text: "Button"
+                }
+                RadioButton {
+                    text: "Button"
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/menu.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/menu.qml
new file mode 100644
index 0000000000..d9d951ef3b
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/menu.qml
@@ -0,0 +1,54 @@
+import QtQuick 2.0
+import com.ford.sdlcore 1.0
+import "../../Components"
+import "../../Layouts"
+
+LeftThirdSection {
+    header: "Select a source"
+
+    Grid {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: 10
+
+        GraphicalButton {
+            text: "Radio"
+            image: "../../Assets/RadioIcon.png"
+            onPress: section.state = 'fm'
+        }
+
+        GraphicalButton {
+            text: "Pandora"
+            image: "../../Assets/PandoraIcon.png"
+            onPress: section.state = 'fm'
+        }
+
+        GraphicalButton {
+            text: "Sirius"
+            image: "../../Assets/SiriusIcon.png"
+            onPress: section.state = 'sirius'
+        }
+
+        GraphicalButton {
+            text: "Bluetooth"
+            image: "../../Assets/BluetoothIcon.png"
+            onPress: section.state = 'bluetooth'
+        }
+
+        GraphicalButton {
+            text: "USB"
+            image: "../../Assets/UsbIcon.png"
+            onPress: section.state = 'usb'
+        }
+
+        Repeater {
+            model: MediaApps
+
+            delegate: GraphicalButton {
+                text: modelData
+                image: "../../Assets/UsbIcon.png"
+                onPress: section.state = 'applink'
+            }
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/sirius.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/sirius.qml
new file mode 100644
index 0000000000..dfe9fc4d53
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/sirius.qml
@@ -0,0 +1,13 @@
+import QtQuick 2.0
+import "../../Components"
+import "../../Layouts"
+
+MediaLayout {
+    header: "Sirius"
+
+    Image {
+        source: "../../Assets/Content/SiriusArtwork.png"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/usb.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/usb.qml
new file mode 100644
index 0000000000..7236e98cbe
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Media/usb.qml
@@ -0,0 +1,59 @@
+import QtQuick 2.0
+import "../../Components"
+import "../../Layouts"
+
+MediaPlayerLayout {
+    header: "USB"
+    id: usb
+
+    Button {
+        text: "Browse Media"
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.rightMargin: 40
+        anchors.topMargin: 75
+
+        onPress: parent.state = 'browse'
+    }
+
+    states: [
+        State {
+            name: 'browse'
+            PropertyChanges { target: browse_interface; visible: true; opacity: 0.9 }
+        }
+
+    ]
+
+    Rectangle {
+        color: "#000000"
+        opacity: 0
+        anchors.fill: parent
+        radius: 10
+        visible: false
+        id: browse_interface
+
+        BackButton {
+            id: back_button
+            anchors.topMargin: 80
+            anchors.leftMargin: 20
+        }
+
+
+        H2 {
+            id: header
+            text: "Browse Media"
+            anchors.topMargin: 80
+        }
+
+        Item {
+            anchors.fill: parent
+            id: browse_container
+        }
+
+        Button {
+            anchors.top: back_button.bottom
+            anchors.left: parent.left
+            text: "Jump"
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/.menu.qml.swp b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/.menu.qml.swp
new file mode 100644
index 0000000000..183438e037
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/.menu.qml.swp
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/favorites.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/favorites.qml
new file mode 100644
index 0000000000..db16b994b4
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/favorites.qml
@@ -0,0 +1,70 @@
+import QtQuick 2.0
+import com.ford.navcore 1.0
+import "../../Components"
+import "../../Layouts"
+
+Item {
+    BackButton { onPress: section.state = 'menu' }
+    NavController {
+        id: navController
+    }
+
+    Flickable {
+        height: 300
+        width: 400
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        clip: true
+        contentWidth: content.width
+        contentHeight: content.height
+
+        Column {
+            id: content
+            width: parent.width
+            spacing: 10
+
+            Button {
+                text: "Barry Church's home"
+                width: parent.width
+                onPress: {
+                    navController.beginNavigation("USA", "MI", "Davison", "Victoria Sta", "3465");
+                    section.state = 'map';
+                }
+            }
+            Button {
+                text: "Subway"
+                width: parent.width
+                onPress: {
+                    navController.beginNavigation("USA", "MI", "Dearborn Heights", "Pelham St", "3929");
+                    section.state = 'map';
+                }
+            }
+            Button {
+                text: "Ford World Headquarters"
+                width: parent.width
+                onPress: {
+                    navController.beginNavigation("USA", "MI", "Dearborn", "American Rd", "1");
+                    section.state = 'map';
+                }
+            }
+            Button {
+                text: "Qdoba"
+                width: parent.width
+                onPress: {
+                    navController.beginNavigation("USA", "MI", "Allen Park", "Fairlane Dr", "48101");
+                    section.state = 'map';
+                }
+            }
+            Button {
+                text: "Levagood Park"
+                width: parent.width
+                onPress: {
+                    navController.beginNavigation("USA", "MI", "Dearborn", "Denwood St", "1100");
+                    section.state = 'map';
+                }
+            }
+
+        }
+    }
+}
+
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/keyboard_search.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/keyboard_search.qml
new file mode 100644
index 0000000000..011c761646
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/keyboard_search.qml
@@ -0,0 +1,64 @@
+import QtQuick 2.0
+import "../../Components"
+import "../../Layouts"
+
+Item {
+    anchors.fill: parent
+    id: keyboard_search
+
+    states: [
+        State {
+            name: 'city'
+            PropertyChanges {target: text_entry; autocompleteModel: citySuggestions}
+        },
+        State {
+            name: 'street'
+            PropertyChanges {target: text_entry; autocompleteModel: streetSuggestions}
+        },
+        State {
+            name: 'door'
+            PropertyChanges {target: text_entry; autocompleteModel: undefined}
+        },
+        State {
+            name: 'review'
+            PropertyChanges {target: text_entry; visible: false}
+            PropertyChanges {target: review; visible: true}
+        }
+    ]
+
+    Column {
+        id: review
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: 500
+
+        visible: false
+        Button {
+            text: stateSuggestions.selected
+            width: parent.width
+            onPress: keyboard_search.state = ""
+        }
+        Button {
+            text: citySuggestions.selected
+            width: parent.width
+             onPress: keyboard_search.state = "city"
+        }
+        Button {
+            text: streetSuggestions.selected
+            width: parent.width
+            onPress: keyboard_search.state = "city"
+        }
+        Button {
+            id: doornumber
+            width: parent.width
+            onPress: keyboard_search.state = "door"
+        }
+        Button {
+            text: "Begin navigation"
+            anchors.horizontalCenter: parent.horizontalCenter
+            onPress: {
+                section.state = 'map';
+            }
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/map.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/map.qml
new file mode 100644
index 0000000000..8b48efe780
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/map.qml
@@ -0,0 +1,63 @@
+import QtQuick 2.0
+import "../../Components"
+
+Item {
+    Column {
+        anchors.left: parent.left;
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: 10
+
+        Button {
+            text: "Zoom in"
+        }
+
+        Button {
+            text: "Zoom out"
+        }
+
+        Button {
+            text: "3D"
+        }
+
+        Button {
+            text: "2D"
+        }
+
+        Button {
+            text: "North up"
+        }
+    }
+
+    Rectangle {
+        width: next_turn.width + 20
+        height: 30
+        anchors.top: parent.top
+        anchors.topMargin: 65
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: "black"
+        opacity: 0.6
+
+    }
+
+    Rectangle {
+        width: current_street.width + 20
+        height: 30
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 65
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: "black"
+        opacity: 0.6
+        visible: navController.current_street.length > 0
+
+    }
+
+
+    Button {
+        text: "Go"
+        anchors.top: parent.top
+        anchors.topMargin: 3
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        onPress: section.state = 'menu'
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/menu.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/menu.qml
new file mode 100644
index 0000000000..fdcae3f58e
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/menu.qml
@@ -0,0 +1,57 @@
+import QtQuick 2.0
+import "../../Components"
+import "../../Layouts"
+
+EmptyLayout {
+    back_button: true
+
+    Grid {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: 10
+
+        GraphicalButton {
+            text: "Home"
+            image: "../../Assets/HomeIcon.png"
+            onPress: {
+                section.state = 'map';
+            }
+        }
+        GraphicalButton {
+            text: "Work"
+            image: "../../Assets/WorkIcon.png"
+            onPress: {
+                section.state = 'map';
+            }
+        }
+        GraphicalButton {
+            text: "Recent Destination"
+            image: "../../Assets/RecentDestinationsIcon.png"
+            onPress: section.state = 'recent_destinations'
+        }
+        GraphicalButton {
+            text: "Keyboard"
+            image: "../../Assets/KeyboardIcon.png"
+            onPress: section.state = 'keyboard_search'
+        }
+        GraphicalButton {
+            text: "Favorites"
+            image: "../../Assets/FavoritesIcon.png"
+            onPress: section.state = 'favorites'
+        }
+        GraphicalButton {
+            text: "Point of Interest"
+            image: "../../Assets/PoiIcon.png"
+            onPress: section.state = 'poi'
+        }
+        GraphicalButton {
+            text: "Scout"
+            image: "../../Assets/ScoutIcon.png"
+        }
+        GraphicalButton {
+            text: "SYNC Services"
+            image: "../../Assets/ServicesIcon.png"
+            onPress: section.state = "video_moving_map"
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/poi.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/poi.qml
new file mode 100644
index 0000000000..0ecea8a113
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/poi.qml
@@ -0,0 +1,205 @@
+import QtQuick 2.0
+import com.ford.navcore 1.0
+import "../../Components"
+import "../../Layouts"
+
+EmptyLayout {
+    anchors.fill: parent
+    back_button: true
+    id: poi_search
+
+    Component.onCompleted: state = "search_type"
+
+    states: [
+        State {
+            name: 'search_type'
+            PropertyChanges {
+                target: search_type
+                visible: true
+            }
+        },
+        State {
+            name: 'categories'
+            PropertyChanges {
+                target: category_select
+                visible: true
+            }
+        },
+        State {
+            name: 'select_state'
+            PropertyChanges {
+                target: text_entry
+                visible: true
+            }
+        },
+        State {
+            name: 'results'
+            PropertyChanges {
+                target: results
+                visible: true
+            }
+        },
+        State {
+            name: 'result'
+            PropertyChanges {
+                target: result
+                visible: true
+            }
+        }
+    ]
+
+    NavController {
+        id: navController
+    }
+
+    Grid {
+        id: search_type
+        property string type
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: 10
+        visible: false
+
+        GraphicalButton {
+            text: "Near me"
+            image: "../../Assets/HomeIcon.png"
+            onPress: {
+                search_type.type = "nearby"
+                poi_search.state = "categories"
+            }
+        }
+
+        GraphicalButton {
+            text: "Along route"
+            image: "../../Assets/HomeIcon.png"
+            onPress: {
+                search_type.type = "route"
+                poi_search.state = "categories"
+            }
+        }
+
+        GraphicalButton {
+            text: "In city"
+            image: "../../Assets/HomeIcon.png"
+            onPress: {
+                search_type.type = "city"
+                poi_search.state = "select_state"
+            }
+        }
+    }
+
+    ListView {
+        id: category_select
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: parent.height - 120
+        width: parent.width
+        spacing: 10
+        clip: true
+
+        GraphicalButton {
+            text: "Search by name"
+            image: "../../Assets/HomeIcon.png"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 20
+        }
+
+        visible: false
+        model: NavPoiCategoryListModel { id: poi_categories }
+
+        delegate: Button {
+            property int category_id: id
+            text: name
+            width: 400
+            anchors.horizontalCenter: parent.horizontalCenter
+            onPress: {
+                navController.poiSearch(search_type.type, category_id, "USA", state_suggestions.getSelected(), city_suggestions.getSelected());
+                poi_search.state = "results"
+            }
+        }
+    }
+
+    ListView {
+        id: results
+        visible: false
+        anchors.topMargin: 80
+        anchors.top: parent.top
+        anchors.bottomMargin: 80
+        anchors.bottom: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: 400
+        height: parent.height - 120
+        spacing: 10
+        clip: true
+
+        model: NavPoiSuggestionListModel {
+            id: poi_suggestions
+        }
+
+        delegate: Button {
+            text: name
+            width: parent.width
+            onPress: {
+                results.currentIndex = index
+                poi_search.state = "result"
+            }
+        }
+    }
+
+    Item {
+        anchors.fill: parent
+        anchors.topMargin: 80
+        anchors.bottomMargin: 80
+        id: result
+        visible: false
+
+        H1 {
+            id: poi_name
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: (results.currentItem ? results.currentItem.text : "")
+        }
+
+        Button {
+            text: "Begin navigation"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: poi_name.bottom
+            onPress: {
+                poi_suggestions.navigateToResult(results.currentIndex);
+                section.state = 'map'
+            }
+        }
+    }
+
+    TextEntry {
+        id: text_entry
+        anchors.topMargin: 80
+        input_border.color: "#3C7855"
+
+        states: [
+            State {
+                name: "city_select"
+                PropertyChanges {
+                    target: text_entry
+                    autocompleteModel: city_suggestions
+                }
+            }
+
+        ]
+
+        NavStateSuggestionListModel { id: state_suggestions }
+        NavCitySuggestionListModel { id: city_suggestions; stateListModel: state_suggestions }
+        autocompleteModel: state_suggestions
+        visible: false
+
+        onSelected: {
+            if (text_entry.state === '') {
+                text = "";
+                text_entry.state = 'city_select';
+            }
+            else {
+                poi_search.state = 'categories'
+            }
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/recent_destinations.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/recent_destinations.qml
new file mode 100644
index 0000000000..db16b994b4
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/recent_destinations.qml
@@ -0,0 +1,70 @@
+import QtQuick 2.0
+import com.ford.navcore 1.0
+import "../../Components"
+import "../../Layouts"
+
+Item {
+    BackButton { onPress: section.state = 'menu' }
+    NavController {
+        id: navController
+    }
+
+    Flickable {
+        height: 300
+        width: 400
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        clip: true
+        contentWidth: content.width
+        contentHeight: content.height
+
+        Column {
+            id: content
+            width: parent.width
+            spacing: 10
+
+            Button {
+                text: "Barry Church's home"
+                width: parent.width
+                onPress: {
+                    navController.beginNavigation("USA", "MI", "Davison", "Victoria Sta", "3465");
+                    section.state = 'map';
+                }
+            }
+            Button {
+                text: "Subway"
+                width: parent.width
+                onPress: {
+                    navController.beginNavigation("USA", "MI", "Dearborn Heights", "Pelham St", "3929");
+                    section.state = 'map';
+                }
+            }
+            Button {
+                text: "Ford World Headquarters"
+                width: parent.width
+                onPress: {
+                    navController.beginNavigation("USA", "MI", "Dearborn", "American Rd", "1");
+                    section.state = 'map';
+                }
+            }
+            Button {
+                text: "Qdoba"
+                width: parent.width
+                onPress: {
+                    navController.beginNavigation("USA", "MI", "Allen Park", "Fairlane Dr", "48101");
+                    section.state = 'map';
+                }
+            }
+            Button {
+                text: "Levagood Park"
+                width: parent.width
+                onPress: {
+                    navController.beginNavigation("USA", "MI", "Dearborn", "Denwood St", "1100");
+                    section.state = 'map';
+                }
+            }
+
+        }
+    }
+}
+
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/video_moving_map.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/video_moving_map.qml
new file mode 100644
index 0000000000..2f6b798d18
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Navigation/video_moving_map.qml
@@ -0,0 +1,20 @@
+import QtQuick 2.0
+import "../../Components"
+import QtMultimedia 5.0
+
+Item {
+    Video {
+        anchors.fill: parent
+        source: "rtsp://172.20.10.7:8086"
+        autoPlay: true
+    }
+
+    Button {
+        text: "Go"
+        anchors.top: parent.top
+        anchors.topMargin: 3
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        onPress: section.state = 'menu'
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/device_info.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/device_info.qml
new file mode 100644
index 0000000000..1f409f58e6
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/device_info.qml
@@ -0,0 +1,21 @@
+import QtQuick 2.0
+import "../../Components"
+import com.ford.phonecore 1.0
+
+Item {
+    anchors.fill: parent
+
+    H2 {
+        id: h2
+        text: PhoneCore.device_name
+
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+    Button {
+        text: "Forget device"
+        onPress: PhoneCore.unpairDevice()
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: h2.bottom
+        anchors.topMargin: 20
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/discovery.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/discovery.qml
new file mode 100644
index 0000000000..5d7c51be6c
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/discovery.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.0
+import com.ford.phonecore 1.0
+import "../../Components"
+
+Item {
+    ListView {
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: 300
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        spacing: 10
+
+        delegate: Button {
+            text: name
+            width: parent.width
+            onPress: bluetooth_devices.createPairedDevice(mac)
+        }
+
+        model: BluetoothDiscoveredDevices {
+            id: bluetooth_devices
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/keypad.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/keypad.qml
new file mode 100644
index 0000000000..fd5ed4ff09
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/keypad.qml
@@ -0,0 +1,55 @@
+import QtQuick 2.0
+import com.ford.phonecore 1.0
+import "../../Components"
+import "../../Layouts"
+
+Item {
+    anchors.top: parent.top
+    anchors.topMargin: 80
+
+    TextBox {
+        id: phone_number
+        border.color: Qt.rgba(0.454901961,0.37254902,0.203921569,1)
+        anchors.top: parent.top
+        width: parent.width - 160
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    BackButton {
+        anchors.top: phone_number.top
+        anchors.topMargin: 1
+        anchors.right: phone_number.left
+        anchors.rightMargin: 10
+        onPress: section.state = ''
+    }
+
+    ImageButton {
+        anchors.top: phone_number.top
+        anchors.topMargin: 1
+        icon: "../../Assets/DeleteIcon.png"
+        anchors.left: phone_number.right
+        anchors.leftMargin: 10
+        height: 42
+
+        onPress: phone_number.text = phone_number.text.replace(/.$/, '')
+    }
+
+    Keypad {
+        anchors.topMargin: 40
+        anchors.top: phone_number.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        onLetterClicked: phone_number.text += letter
+    }
+
+    Button {
+        text: "Call"
+        onPress: PhoneCore.dial(phone_number.text);
+        y: 100
+    }
+    Button {
+        text: "End call"
+        onPress: PhoneCore.hangup();
+        y: 160
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/manage_devices.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/manage_devices.qml
new file mode 100644
index 0000000000..cf62a9c287
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/manage_devices.qml
@@ -0,0 +1,16 @@
+import QtQuick 2.0
+import com.ford.phonecore 1.0
+import "../../Components"
+import "../../Layouts"
+
+TitledLayout {
+    title: "Manage Bluetooth devices"
+    back_button: true
+
+    Loader {
+        id: view
+
+        anchors.fill: parent
+        source: (PhoneCore.device_name === "") ? "discovery.qml" : "device_info.qml"
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/menu.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/menu.qml
new file mode 100644
index 0000000000..2d53656ba0
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/menu.qml
@@ -0,0 +1,54 @@
+import QtQuick 2.0
+import "../../Components"
+import "../../Layouts"
+
+LeftThirdSection {
+    Grid {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: 10
+
+        GraphicalButton {
+            text: "Do Not Disturb"
+            image: "../../Assets/DndIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Phonebook"
+            image: "../../Assets/PhonebookIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Voicemail"
+            image: "../../Assets/VoicemailIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Messages"
+            image: "../../Assets/MessagesIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Recent Calls"
+            image: "../../Assets/RecentCallsIcon.png"
+            onPress: section.state = 'recent_calls'
+        }
+
+        GraphicalButton {
+            text: "Keypad"
+            image: "../../Assets/KeypadIcon.png"
+            onPress: section.state = 'keypad'
+        }
+
+        GraphicalButton {
+            text: "Speed Dial"
+            image: "../../Assets/SpeedDialIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Devices"
+            image: "../../Assets/SpeedDialIcon.png"
+            onPress: section.state = 'manage_devices'
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/recent_calls.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/recent_calls.qml
new file mode 100644
index 0000000000..1873ed4382
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Phone/recent_calls.qml
@@ -0,0 +1,62 @@
+import QtQuick 2.0
+import com.ford.phonecore 1.0
+import "../../Components"
+import "../../Layouts"
+
+TitledLayout {
+    title: "Recent calls"
+    Component.onCompleted: PhoneCore.hangup()
+    back_button: true
+
+    Flickable {
+        height: 300
+        width: 400
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+        clip: true
+        contentWidth: content.width
+        contentHeight: content.height
+
+        Column {
+            id: content
+            width: parent.width
+            spacing: 10
+
+            Button {
+                text: "Chris Church: Mobile"
+                onPress: PhoneCore.dial("8106567195")
+                width: parent.width
+            }
+            Button {
+                text: "Barry Church: Mobile"
+                onPress: PhoneCore.dial("3134074522")
+                width: parent.width
+            }
+            Button {
+                text: "Barry Church: Work"
+                onPress: PhoneCore.dial("3134074522")
+                width: parent.width
+            }
+            Button {
+                text: "Aaron Church: Mobile"
+                onPress: PhoneCore.dial("3134074522")
+                width: parent.width
+            }
+            Button {
+                text: "Aaron Church: Mobile"
+                onPress: PhoneCore.dial("3134074522")
+                width: parent.width
+            }
+            Button {
+                text: "Aaron Church: Mobile"
+                onPress: PhoneCore.dial("3134074522")
+                width: parent.width
+            }
+            Button {
+                text: "Aaron Church: Mobile"
+                onPress: PhoneCore.dial("3134074522")
+                width: parent.width
+            }
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Vehicle/menu.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Vehicle/menu.qml
new file mode 100644
index 0000000000..b95bc52da8
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/Vehicle/menu.qml
@@ -0,0 +1,60 @@
+import QtQuick 2.0
+import "../../Components"
+import "../../Layouts"
+
+LeftThirdSection {
+    MultiPointTouchArea {
+        anchors.fill: parent
+    }
+
+    Grid {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: 10
+
+        GraphicalButton {
+            text: "HEV"
+            image: "../../Assets/EvIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Ambient Lighting"
+            image: "../../Assets/LightingIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Wallpaper"
+            image: "../../Assets/WallpaperIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Wi-Fi"
+            image: "../../Assets/WifiIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Health Report"
+            image: "../../Assets/VhrIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Seats"
+            image: "../../Assets/SeatsIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Keypad Entry"
+            image: "../../Assets/KeypadEntryIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Sync Services"
+            image: "../../Assets/ServicesIcon.png"
+        }
+
+        GraphicalButton {
+            text: "Add Shortcut"
+            image: "../../Assets/AddIcon.png"
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/alert.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/alert.qml
new file mode 100644
index 0000000000..f19539b9be
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/alert.qml
@@ -0,0 +1,68 @@
+import QtQuick 2.0
+
+Item {
+    property alias text: alert_text.text
+    id: alert_item
+    opacity: 0
+
+    transitions: Transition {
+        NumberAnimation {
+            properties: "opacity"
+        }
+    }
+
+    function alert(message) {
+        text = message;
+        state = 'alerting';
+        alert_timer.start();
+    }
+
+    states: [
+        State {
+            name: 'alerting'
+            PropertyChanges {
+                target: alert_item
+                opacity: 1
+            }
+        }
+    ]
+
+    Timer {
+        id: alert_timer
+        running: false
+        interval: 4000
+        onTriggered: alert_item.state = '';
+    }
+
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        color: "#000"
+        opacity: 0.8
+    }
+
+    Rectangle {
+        color: "#111"
+        width: 500
+        height: alert_text.height + 40
+        radius: 8
+        border.color: "#666"
+        border.width: 2
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+
+        Text {
+            id: alert_text
+            text: "This is a really really long long really really long longreally really long longreally really long longreally really long long alert"
+            color: "#fff"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignHCenter
+            font.pixelSize: 24
+            width: parent.width
+            wrapMode: Text.WordWrap
+        }
+    }
+
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/chrome.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/chrome.qml
new file mode 100644
index 0000000000..b8f4f09d56
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/chrome.qml
@@ -0,0 +1,144 @@
+import QtQuick 2.0
+import "../Components"
+
+Item {
+    id: container
+    anchors.fill: parent
+
+    property int horizontalLabelMargin: 20
+
+    Image {
+        id: phonetab
+        source: "../Assets/PhoneTab.png"
+        anchors.top: parent.top
+        anchors.topMargin: (root.state === "phone") ? -height : 0
+        Behavior on anchors.topMargin { PropertyAnimation {} }
+        width: parent.width / 2 - 145
+        height: parent.height / 20 + 25
+
+        Clickable {
+            anchors.fill: parent
+            text: "Phone"
+            onPress: go("phone")
+            textAnchors.verticalCenter: verticalCenter
+            textAnchors.leftMargin: horizontalLabelMargin
+            textAnchors.left: left
+        }
+    }
+    Row {
+        anchors.right: phonetab.right
+        anchors.rightMargin: phonetab.width / 4
+        anchors.top: parent.top
+        height: phonetab.height
+        spacing: 10
+
+        Image {
+            source: "../Assets/PhoneCornerIcons.png"
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+
+    Image {
+        source: "../Assets/NavigationTab.png"
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.topMargin: (root.state === "navigation") ? -height : 0
+        Behavior on anchors.topMargin { PropertyAnimation {} }
+        width: parent.width / 2 - 145
+        height: parent.height / 20 + 25
+
+        Clickable {
+            anchors.fill: parent
+            text: "Navigation"
+            onPress: go("navigation")
+            textAnchors.verticalCenter: verticalCenter
+            textAnchors.rightMargin: horizontalLabelMargin
+            textAnchors.right: right
+        }
+    }
+
+    Image {
+        id: test1
+        source: "../Assets/MediaTab.png"
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: (root.state === "media") ? -height : 0
+        anchors.left: parent.left
+        Behavior on anchors.bottomMargin { PropertyAnimation {} }
+        width: parent.width / 2 - 145
+        height: parent.height / 20 + 25
+
+        Clickable {
+            anchors.fill: parent
+            text: "Media"
+            onPress: go("media")
+            textAnchors.verticalCenter: verticalCenter
+            textAnchors.leftMargin: horizontalLabelMargin
+            textAnchors.left: left
+        }
+    }
+
+    Image {
+        source: "../Assets/VehicleTab.png"
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: (root.state === "vehicle") ? -height : 0
+        Behavior on anchors.bottomMargin { PropertyAnimation {} }
+        width: parent.width / 2 - 145
+        height: parent.height / 20 + 25
+
+        Clickable {
+            anchors.fill: parent
+            text: "Vehicle"
+            onPress: go("vehicle")
+            textAnchors.verticalCenter: verticalCenter
+            textAnchors.rightMargin: horizontalLabelMargin
+            textAnchors.right: right
+        }
+    }
+
+    Image {
+        id: chrometop
+        source: "../Assets/ChromeTop.png"
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: parent.height / 18 + 35
+        width: parent.width / 2 + 40
+        fillMode: Image.PreserveAspectFit
+        Clickable {
+            onPress: go((root.state === 'home_corners') ? 'home' : 'home_corners')
+            width: parent.width / 5
+            height: parent.height
+            anchors.left: parent.left
+            anchors.leftMargin: (parent.width - parent.paintedWidth)/2 + 20
+        }
+
+        Text {
+            id: clock
+            text: "12:00"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 10
+            color: "#ffffff"
+            font.pixelSize: 28
+        }
+    }
+    Image {
+        source: "../Assets/ChromeBottom.png"
+        anchors.bottom: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: parent.height / 18 + 35
+        width: parent.width / 2
+        fillMode: Image.PreserveAspectFit
+
+        Text {
+            id: exterior_temp
+            text: "72F Outside"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: parent.bottom
+            color: "#ffffff"
+            anchors.bottomMargin: 15
+            font.pixelSize: 18
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/home.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/home.qml
new file mode 100644
index 0000000000..c45f66782f
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/home.qml
@@ -0,0 +1,51 @@
+import QtQuick 2.0
+import "../Components"
+import "../Layouts"
+import com.ford.phonecore 1.0
+
+LeftThirdSection {
+    header: "Good Morning, Jen"
+
+    Column {
+        anchors.left: parent.left
+        anchors.leftMargin: 60
+        spacing: 40
+        anchors.verticalCenter: parent.verticalCenter
+
+        Weather {}
+        Weather {
+            text: "Tonight"
+            temp: "55"
+            image: "../Assets/CloudNight.png"
+        }
+    }
+
+
+    Image {
+        id: schedule
+        source: "../Assets/CMaxCal.png"
+        anchors.right: parent.right
+        anchors.rightMargin: 70
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Column {
+        anchors.right: schedule.left
+        anchors.rightMargin: 20
+        anchors.top: schedule.top
+        anchors.topMargin: 5
+        spacing: 40
+
+        Button {
+            text: "Dial"
+        }
+        Button {
+            text: "Navigate"
+        }
+        Button {
+            text: "Siri"
+            onPress: PhoneCore.siriEyesFree()
+            visible: PhoneCore.device_state === "connected" || PhoneCore.device_state === "playing"
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/home_corners.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/home_corners.qml
new file mode 100644
index 0000000000..432e978b87
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/home_corners.qml
@@ -0,0 +1,133 @@
+import QtQuick 2.0
+import com.ford.phonecore 1.0
+import "../Components"
+import "../Layouts"
+
+Item {
+
+    Image {
+        source: "../Assets/Crosshairs.png"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Item {
+        width: parent.width / 2
+        height: parent.height / 2
+
+        Image {
+            id: phone_corner_icon
+            visible: (PhoneCore.device_state === "connected")
+            source: "../Assets/PhoneIcons.png"
+            anchors.top: parent.top
+            anchors.topMargin: 80
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        OverflowableText {
+            id: phone_name
+            text: PhoneCore.device_name
+            anchors.top: phone_corner_icon.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            textAlign: 'center'
+            anchors.topMargin: 10
+            width: 350
+            fontColor: (PhoneCore.device_state === "connected") ? "#ffffff" : "#333"
+            font.pixelSize: 24
+        }
+
+        Text {
+            text: "Connecting..."
+            anchors.top: phone_name.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.topMargin: 10
+            color: "#333"
+            visible: (PhoneCore.device_state === "connecting")
+            font.pixelSize: 24
+        }
+
+        CheckButton {
+            text: "Do Not Disturb"
+            visible: (PhoneCore.device_state === "connected")
+            anchors.top: phone_name.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.topMargin: 10
+        }
+
+
+
+        Row {
+            anchors.top: phone_name.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.topMargin: 10
+            visible: (PhoneCore.device_state === "disconnected")
+            spacing: 10
+
+            Button {
+                text: "Connect"
+                onPress: {
+                    PhoneCore.initializeDevice()
+                }
+            }
+
+            Button {
+                text: "Manage Phones"
+                onPress: {
+                    go("phone");
+                }
+            }
+        }
+
+    }
+
+    Item {
+        width: parent.width / 2
+        height: parent.height / 2
+        anchors.right: parent.right
+    }
+
+    Item {
+        width: parent.width / 2
+        height: parent.height / 2
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+
+        Image {
+            source: "../Assets/VehicleCornerIcon.png"
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    Item {
+        width: parent.width / 2
+        height: parent.height / 2
+        anchors.bottom: parent.bottom
+
+        Image {
+            id: media_corner_icon
+            source: "../Assets/UsbIcon.png"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 40
+        }
+
+        Text {
+            id: media_artist
+            text: ""
+            font.pixelSize: 18
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: media_corner_icon.bottom
+            color: "#ffffff"
+            anchors.topMargin: 10
+        }
+
+        Text {
+            id: media_title
+            text: ""
+            font.pixelSize: 24
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: media_artist.bottom
+            color: "#ffffff"
+        }
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/media.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/media.qml
new file mode 100644
index 0000000000..af33ddaffd
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/media.qml
@@ -0,0 +1,55 @@
+import QtQuick 2.0
+import "../Components"
+import "../Layouts"
+
+Rectangle {
+    anchors.fill: parent
+    id: section
+
+    gradient: Gradient {
+        GradientStop { position: 0.8; color: "#000000" }
+        GradientStop { position: 1.0; color: "#7C3232" }
+    }
+
+    states: [
+        State {
+            name: 'menu'
+            PropertyChanges { target: page; source: "Media/menu.qml" }
+        },
+        State {
+            name: 'fm'
+            PropertyChanges { target: page; source: "Media/fm.qml" }
+        },
+        State {
+            name: 'sirius'
+            PropertyChanges { target: page; source: "Media/sirius.qml" }
+        },
+        State {
+            name: 'usb'
+            PropertyChanges { target: page; source: "Media/usb.qml" }
+        },
+        State {
+            name: 'bluetooth'
+            PropertyChanges { target: page; source: "Media/bluetooth.qml" }
+        },
+        State {
+            name: 'applink'
+            PropertyChanges { target: page; source: "Media/applink.qml" }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            to: "bluetooth"
+        },
+        Transition {
+            to: "usb"
+        }
+
+    ]
+
+    Section {
+        id: page
+        source: "Media/usb.qml"
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/navigation.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/navigation.qml
new file mode 100644
index 0000000000..e26326b458
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/navigation.qml
@@ -0,0 +1,49 @@
+import QtQuick 2.0
+import "../Components"
+import "../Layouts"
+
+Rectangle {
+    id: section
+    anchors.fill: parent
+
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: "#3C7855" }
+        GradientStop { position: 0.4; color: "#000000" }
+    }
+
+    Section {
+        id: page
+        source: "Navigation/map.qml"
+    }
+
+    states: [
+        State {
+            name: ''
+            PropertyChanges { target: page; source: "Navigation/map.qml" }
+        },
+        State {
+            name: 'menu'
+            PropertyChanges { target: page; source: "Navigation/menu.qml" }
+        },
+        State {
+            name: 'keyboard_search'
+            PropertyChanges { target: page; source: "Navigation/keyboard_search.qml" }
+        },
+        State {
+            name: 'favorites'
+            PropertyChanges { target: page; source: "Navigation/favorites.qml" }
+        },
+        State {
+            name: 'recent_destinations'
+            PropertyChanges { target: page; source: "Navigation/recent_destinations.qml" }
+        },
+        State {
+            name: 'poi'
+            PropertyChanges { target: page; source: "Navigation/poi.qml" }
+        },
+        State {
+            name: 'video_moving_map'
+            PropertyChanges { target: page; source: "Navigation/video_moving_map.qml" }
+        }
+    ]
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/phone.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/phone.qml
new file mode 100644
index 0000000000..8c2987f2f9
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/phone.qml
@@ -0,0 +1,37 @@
+import QtQuick 2.0
+import "../Components"
+import "../Layouts"
+
+Rectangle {
+    id: section
+    anchors.fill: parent
+
+    states: [
+        State {
+            name: ''
+            PropertyChanges { target: page; source: "Phone/menu.qml" }
+        },
+        State {
+            name: 'recent_calls'
+            PropertyChanges { target: page; source: "Phone/recent_calls.qml" }
+        },
+        State {
+            name: 'keypad'
+            PropertyChanges { target: page; source: "Phone/keypad.qml" }
+        },
+        State {
+            name: 'manage_devices'
+            PropertyChanges { target: page; source: "Phone/manage_devices.qml" }
+        }
+    ]
+
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: Qt.rgba(0.454901961,0.37254902,0.203921569,1) }
+        GradientStop { position: 0.4; color: "#000000" }
+    }
+
+    Section {
+        id: page
+        source: "Phone/menu.qml"
+    }
+}
diff --git a/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/vehicle.qml b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/vehicle.qml
new file mode 100644
index 0000000000..9687e7c463
--- /dev/null
+++ b/src/components/qt_hmi/References/Work/bananasnacks/qml/Bananas/Sections/vehicle.qml
@@ -0,0 +1,17 @@
+import QtQuick 2.0
+import "../Components"
+import "../Layouts"
+
+Rectangle {
+    anchors.fill: parent
+
+    gradient: Gradient {
+        GradientStop { position: 0.4; color: "#000000" }
+        GradientStop { position: 1.0; color: "#104369" }
+    }
+
+    Section {
+        id: section
+        source: "Vehicle/menu.qml"
+    }
+}