From 64704dc1a3e6f5f476dfe2e6790591fa90e37d40 Mon Sep 17 00:00:00 2001
From: Connor Jackson <373598+conrjac@users.noreply.github.com>
Date: Wed, 21 Aug 2024 21:39:07 +0100
Subject: [PATCH] Added section for Industries

---
 index.html | 368 ++++++++++++++++++++++++++++++-----------------------
 style.css  |  19 ++-
 2 files changed, 228 insertions(+), 159 deletions(-)

diff --git a/index.html b/index.html
index bd9a2a0..f9fe74e 100644
--- a/index.html
+++ b/index.html
@@ -14,229 +14,283 @@ <h1>Salesforce Functional Capability Map</h1>
         <img src="images/marketing.png" />
         <h1>Channels</h1>
         <div class="items fullwidth">
-          <div><p>Web</p></div>
-          <div><p>Mobile</p></div>
-          <div><p>Email Intergration</p></div>
-          <div><p>Telephony Call Centre</p></div>
-          <div><p>Social Media</p></div>
-          <div><p>Connect Devices / IOT</p></div>
+          <div class="item"><p>Web</p></div>
+          <div class="item"><p>Mobile</p></div>
+          <div class="item"><p>Email Intergration</p></div>
+          <div class="item"><p>Telephony Call Centre</p></div>
+          <div class="item"><p>Social Media</p></div>
+          <div class="item"><p>Connect Devices / IOT</p></div>
         </div>
       </div>
       <div class="subcontainer aiandiot">
         <img src="images/einstein.png" />
         <h1>AI and IOT</h1>
         <div class="items fullwidth">
-          <div><p>Marketing Intelligence</p></div>
-          <div><p>Connected Assets</p></div>
-          <div><p>Large Scale Ingestion</p></div>
-          <div><p>Rules Based Actions</p></div>
-          <div><p>Predictive Insight</p></div>
-          <div><p>Analytics and Reporting</p></div>
-          <div><p>Sales AI</p></div>
-          <div><p>Service AI</p></div>
-          <div><p>Marketing AI</p></div>
-          <div><p>Community AI</p></div>
-          <div><p>Commerce AI</p></div>
+          <div class="item"><p>Marketing Intelligence</p></div>
+          <div class="item"><p>Connected Assets</p></div>
+          <div class="item"><p>Large Scale Ingestion</p></div>
+          <div class="item"><p>Rules Based Actions</p></div>
+          <div class="item"><p>Predictive Insight</p></div>
+          <div class="item"><p>Analytics and Reporting</p></div>
+          <div class="item"><p>Sales AI</p></div>
+          <div class="item"><p>Service AI</p></div>
+          <div class="item"><p>Marketing AI</p></div>
+          <div class="item"><p>Community AI</p></div>
+          <div class="item"><p>Commerce AI</p></div>
+        </div>
+      </div>
+      <div class="subcontainer channels">
+        <img src="images/marketing.png" />
+        <h1>Channels</h1>
+        <div class="items fullwidth">
+          <div class="item"><p>Web</p></div>
+          <div class="item"><p>Mobile</p></div>
+          <div class="item"><p>Email Intergration</p></div>
+          <div class="item"><p>Telephony Call Centre</p></div>
+          <div class="item"><p>Social Media</p></div>
+          <div class="item"><p>Connect Devices / IOT</p></div>
+        </div>
+      </div>
+      <div class="subcontainer industries">
+        <img src="images/industries.png" />
+        <h1>Industries</h1>
+        <div class="items fullwidth">
+          <div class="mainitem">
+            <h1>Health</h1>
+            <div class="item"><p>Health</p></div>
+            <div class="item"><p>Connected Assets</p></div>
+            <div class="item"><p>Large Scale Ingestion</p></div>
+          </div>
+          <div class="mainitem">
+            <h1>Automotive</h1>
+            <div class="item"><p>Health</p></div>
+            <div class="item"><p>Connected Assets</p></div>
+            <div class="item"><p>Large Scale Ingestion</p></div>
+          </div>
+          <div class="mainitem">
+            <h1>Health</h1>
+            <div class="item"><p>Health</p></div>
+            <div class="item"><p>Connected Assets</p></div>
+            <div class="item"><p>Large Scale Ingestion</p></div>
+          </div>
+          <div class="mainitem">
+            <h1>Financial Services</h1>
+            <div class="item"><p>Banking</p></div>
+            <div class="item"><p>Insurance</p></div>
+            <div class="item"><p>Wealth Management</p></div>
+          </div>
+          <div class="mainitem">
+            <h1>Nonprofit</h1>
+            <div class="item"><p>Health</p></div>
+            <div class="item"><p>Connected Assets</p></div>
+            <div class="item"><p>Large Scale Ingestion</p></div>
+          </div>
+          <div class="mainitem">
+            <h1>Goverment</h1>
+            <div class="item"><p>Health</p></div>
+            <div class="item"><p>Connected Assets</p></div>
+            <div class="item"><p>Large Scale Ingestion</p></div>
+          </div>
         </div>
       </div>
       <div class="subcontainer marketing">
         <img src="images/marketing.png" />
         <h1>Marketing</h1>
         <div class="items">
-          <div><p>Lead Generation</p></div>
-          <div><p>Website Integration</p></div>
-          <div><p>Drip Marketing</p></div>
-          <div><p>Campaign Management</p></div>
-          <div><p>Campaign Testing</p></div>
-          <div><p>Email Marketing</p></div>
-          <div><p>Social Media Marketing</p></div>
-          <div><p>Customer Interactions</p></div>
-          <div><p>Campaign Optimization</p></div>
-          <div><p>Marketing Automation</p></div>
-          <div><p>Mobile Messaging</p></div>
-          <div><p>Digital Advertising</p></div>
-          <div><p>Customer Segmentation</p></div>
-          <div><p>Content Management</p></div>
-          <div><p>Journey Management</p></div>
+          <div class="item"><p>Lead Generation</p></div>
+          <div class="item"><p>Website Integration</p></div>
+          <div class="item"><p>Drip Marketing</p></div>
+          <div class="item"><p>Campaign Management</p></div>
+          <div class="item"><p>Campaign Testing</p></div>
+          <div class="item"><p>Email Marketing</p></div>
+          <div class="item"><p>Social Media Marketing</p></div>
+          <div class="item"><p>Customer Interactions</p></div>
+          <div class="item"><p>Campaign Optimization</p></div>
+          <div class="item"><p>Marketing Automation</p></div>
+          <div class="item"><p>Mobile Messaging</p></div>
+          <div class="item"><p>Digital Advertising</p></div>
+          <div class="item"><p>Customer Segmentation</p></div>
+          <div class="item"><p>Content Management</p></div>
+          <div class="item"><p>Journey Management</p></div>
         </div>
       </div>
       <div class="subcontainer sales">
         <img src="images/sales.png" />
         <h1>Sales</h1>
         <div class="items">
-          <div><p>Lead Management</p></div>
-          <div><p>Opportunity / Pipeline Mgmt</p></div>
-          <div><p>Account Management</p></div>
-          <div><p>Contact Managment</p></div>
-          <div><p>Configure, Price, Quote</p></div>
-          <div><p>Social Network Integration</p></div>
-          <div><p>Partner Management</p></div>
-          <div><p>High Velocity Sales</p></div>
-          <div><p>B2B Commerce</p></div>
-          <div><p>Product Management</p></div>
-          <div><p>Payment</p></div>
-          <div><p>Territory Management</p></div>
-          <div><p>Personalisation</p></div>
-          <div><p>Forecasting</p></div>
-          <div><p>Order Management</p></div>
-          <div><p>B2C Commerce</p></div>
-          <div><p>Customer Segmentation</p></div>
-          <div><p>Shipping Management</p></div>
+          <div class="item"><p>Lead Management</p></div>
+          <div class="item"><p>Opportunity / Pipeline Mgmt</p></div>
+          <div class="item"><p>Account Management</p></div>
+          <div class="item"><p>Contact Managment</p></div>
+          <div class="item"><p>Configure, Price, Quote</p></div>
+          <div class="item"><p>Social Network Integration</p></div>
+          <div class="item"><p>Partner Management</p></div>
+          <div class="item"><p>High Velocity Sales</p></div>
+          <div class="item"><p>B2B Commerce</p></div>
+          <div class="item"><p>Product Management</p></div>
+          <div class="item"><p>Payment</p></div>
+          <div class="item"><p>Territory Management</p></div>
+          <div class="item"><p>Personalisation</p></div>
+          <div class="item"><p>Forecasting</p></div>
+          <div class="item"><p>Order Management</p></div>
+          <div class="item"><p>B2C Commerce</p></div>
+          <div class="item"><p>Customer Segmentation</p></div>
+          <div class="item"><p>Shipping Management</p></div>
         </div>
       </div>
       <div class="subcontainer commerce">
         <img src="images/sales.png" />
         <h1>Commerce</h1>
         <div class="items">
-          <div><p>Lead Management</p></div>
-          <div><p>Opportunity / Pipeline Mgmt</p></div>
-          <div><p>Account Management</p></div>
-          <div><p>Contact Managment</p></div>
-          <div><p>Configure, Price, Quote</p></div>
-          <div><p>Social Network Integration</p></div>
-          <div><p>Partner Management</p></div>
-          <div><p>High Velocity Sales</p></div>
-          <div><p>B2B Commerce</p></div>
-          <div><p>Product Management</p></div>
-          <div><p>Payment</p></div>
-          <div><p>Territory Management</p></div>
-          <div><p>Personalisation</p></div>
-          <div><p>Forecasting</p></div>
-          <div><p>Order Management</p></div>
-          <div><p>B2C Commerce</p></div>
-          <div><p>Customer Segmentation</p></div>
-          <div><p>Shipping Management</p></div>
+          <div class="item"><p>Lead Management</p></div>
+          <div class="item"><p>Opportunity / Pipeline Mgmt</p></div>
+          <div class="item"><p>Account Management</p></div>
+          <div class="item"><p>Contact Managment</p></div>
+          <div class="item"><p>Configure, Price, Quote</p></div>
+          <div class="item"><p>Social Network Integration</p></div>
+          <div class="item"><p>Partner Management</p></div>
+          <div class="item"><p>High Velocity Sales</p></div>
+          <div class="item"><p>B2B Commerce</p></div>
+          <div class="item"><p>Product Management</p></div>
+          <div class="item"><p>Payment</p></div>
+          <div class="item"><p>Territory Management</p></div>
+          <div class="item"><p>Personalisation</p></div>
+          <div class="item"><p>Forecasting</p></div>
+          <div class="item"><p>Order Management</p></div>
+          <div class="item"><p>B2C Commerce</p></div>
+          <div class="item"><p>Customer Segmentation</p></div>
+          <div class="item"><p>Shipping Management</p></div>
         </div>
       </div>
       <div class="subcontainer service">
         <img src="images/service.png" />
         <h1>Service</h1>
         <div class="items">
-          <div><p>Case and Incident Mgmt</p></div>
-          <div><p>Phone Integration</p></div>
-          <div><p>Knowledgebase</p></div>
-          <div><p>Live Website Chat</p></div>
-          <div><p>Social Networks Integration</p></div>
-          <div><p>Social Integration</p></div>
-          <div><p>Omni-Channel Routing</p></div>
-          <div><p>Macro Automation</p></div>
-          <div><p>Asset Management</p></div>
-          <div><p>Field Service</p></div>
+          <div class="item"><p>Case and Incident Mgmt</p></div>
+          <div class="item"><p>Phone Integration</p></div>
+          <div class="item"><p>Knowledgebase</p></div>
+          <div class="item"><p>Live Website Chat</p></div>
+          <div class="item"><p>Social Networks Integration</p></div>
+          <div class="item"><p>Social Integration</p></div>
+          <div class="item"><p>Omni-Channel Routing</p></div>
+          <div class="item"><p>Macro Automation</p></div>
+          <div class="item"><p>Asset Management</p></div>
+          <div class="item"><p>Field Service</p></div>
         </div>
       </div>
       <div class="subcontainer engagement">
         <img src="images/customer360.png" />
         <h1>Engagement</h1>
         <div class="items">
-          <div><p>Self-Service Community</p></div>
-          <div><p>Merchant Communities</p></div>
-          <div><p>Plus Community</p></div>
-          <div><p>ISV Community</p></div>
-          <div><p>User Community</p></div>
-          <div><p>CMS</p></div>
-          <div><p>Mass Collaboration (Slack)</p></div>
+          <div class="item"><p>Self-Service Community</p></div>
+          <div class="item"><p>Merchant Communities</p></div>
+          <div class="item"><p>Plus Community</p></div>
+          <div class="item"><p>ISV Community</p></div>
+          <div class="item"><p>User Community</p></div>
+          <div class="item"><p>CMS</p></div>
+          <div class="item"><p>Mass Collaboration (Slack)</p></div>
         </div>
       </div>
       <div class="subcontainer analytics">
         <img src="images/tableau.png" />
         <h1>Analytics</h1>
         <div class="items">
-          <div class="disabled"><p>Service Analytics</p></div>
-          <div class="green"><p>Sales and Merchant Analytics</p></div>
-          <div><p>Analytics Templating</p></div>
-          <div><p>Marketing Analytics</p></div>
-          <div><p>Security and Auditing Analytics</p></div>
-          <div class="red"><p>Finance</p></div>
-          <div><p>Service Anaytics</p></div>
-          <div><p>ISV Performance Analytics</p></div>
-          <div class="amber"><p>Geo Data Mapping</p></div>
+          <div class="item disabled"><p>Service Analytics</p></div>
+          <div class="item green"><p>Sales and Merchant Analytics</p></div>
+          <div class="item"><p>Analytics Templating</p></div>
+          <div class="item"><p>Marketing Analytics</p></div>
+          <div class="item"><p>Security and Auditing Analytics</p></div>
+          <div class="item red"><p>Finance</p></div>
+          <div class="item"><p>Service Anaytics</p></div>
+          <div class="item"><p>ISV Performance Analytics</p></div>
+          <div class="item amber"><p>Geo Data Mapping</p></div>
         </div>
       </div>
       <div class="subcontainer appsecosystem">
         <img src="images/industries.png" />
         <h1>App Ecosystem</h1>
         <div class="items">
-          <div><p>Sales Apps</p></div>
-          <div><p>Marketing Apps</p></div>
-          <div><p>Customer Service Apps</p></div>
-          <div><p>IT and Administration Apps</p></div>
-          <div><p>Human Resources Apps</p></div>
-          <div><p>Finance Apps</p></div>
-          <div><p>Enterprise Resource Planning</p></div>
-          <div><p>Collaboration Apps</p></div>
-          <div><p>Analytics Apps</p></div>
-          <div><p>Sector Accelerator Apps</p></div>
+          <div class="item"><p>Sales Apps</p></div>
+          <div class="item"><p>Marketing Apps</p></div>
+          <div class="item"><p>Customer Service Apps</p></div>
+          <div class="item"><p>IT and Administration Apps</p></div>
+          <div class="item"><p>Human Resources Apps</p></div>
+          <div class="item"><p>Finance Apps</p></div>
+          <div class="item"><p>Enterprise Resource Planning</p></div>
+          <div class="item"><p>Collaboration Apps</p></div>
+          <div class="item"><p>Analytics Apps</p></div>
+          <div class="item"><p>Sector Accelerator Apps</p></div>
         </div>
       </div>
       <div class="subcontainer support">
         <img src="images/success.png" />
         <h1>Support</h1>
         <div class="items">
-          <div><p>Salesforce Basic Success</p></div>
-          <div><p>Salesforce Premier Success</p></div>
-          <div><p>Salesforce Signiture Success</p></div>
-          <div><p>Advisory Services</p></div>
-          <div><p>Trailhead</p></div>
-          <div><p>Trailhead Classroom training</p></div>
-          <div><p>Global World Tour Events</p></div>
-          <div><p>Dreamforce Annual Salesforce Event</p></div>
-          <div><p>Partner Community Support</p></div>
-          <div><p>Webinars</p></div>
-          <div><p>MyTrailhead Corporate Training</p></div>
-          <div><p>Community Support</p></div>
-          <div><p>Local User Communities</p></div>
-          <div><p>Trailblazer User Community</p></div>
-          <div><p>Community Conferences</p></div>
+          <div class="item"><p>Salesforce Basic Success</p></div>
+          <div class="item"><p>Salesforce Premier Success</p></div>
+          <div class="item"><p>Salesforce Signiture Success</p></div>
+          <div class="item"><p>Advisory Services</p></div>
+          <div class="item"><p>Trailhead</p></div>
+          <div class="item"><p>Trailhead Classroom training</p></div>
+          <div class="item"><p>Global World Tour Events</p></div>
+          <div class="item"><p>Dreamforce Annual Salesforce Event</p></div>
+          <div class="item"><p>Partner Community Support</p></div>
+          <div class="item"><p>Webinars</p></div>
+          <div class="item"><p>MyTrailhead Corporate Training</p></div>
+          <div class="item"><p>Community Support</p></div>
+          <div class="item"><p>Local User Communities</p></div>
+          <div class="item"><p>Trailblazer User Community</p></div>
+          <div class="item"><p>Community Conferences</p></div>
         </div>
       </div>
       <div class="subcontainer platform">
         <img src="images/platform.png" />
         <h1>Platform</h1>
         <div class="items">
-          <div><p>AI Tooling</p></div>
-          <div><p>API</p></div>
-          <div><p>Auditing and Logging</p></div>
-          <div><p>Availability and Scalability</p></div>
-          <div><p>Big Data</p></div>
-          <div><p>Block Chain</p></div>
-          <div><p>Click Config / Development</p></div>
-          <div><p>Coding and Unit Testing</p></div>
-          <div><p>Dashboard and Reporting</p></div>
-          <div><p>Development Management</p></div>
-          <div><p>Disaster Recovery</p></div>
-          <div><p>File and Record Storage</p></div>
-          <div><p>Integration</p></div>
-          <div><p>ISV / App Packaging</p></div>
-          <div><p>Multi-Language</p></div>
-          <div><p>Platform Events</p></div>
-          <div><p>Privacy and Identity</p></div>
-          <div><p>Salesforce to Salesforce</p></div>
-          <div><p>Scheduled Jobs</p></div>
-          <div><p>Security</p></div>
-          <div><p>Single Sign On</p></div>
-          <div><p>Surveys</p></div>
-          <div><p>Workflow Management</p></div>
+          <div class="item"><p>AI Tooling</p></div>
+          <div class="item"><p>API</p></div>
+          <div class="item"><p>Auditing and Logging</p></div>
+          <div class="item"><p>Availability and Scalability</p></div>
+          <div class="item"><p>Big Data</p></div>
+          <div class="item"><p>Block Chain</p></div>
+          <div class="item"><p>Click Config / Development</p></div>
+          <div class="item"><p>Coding and Unit Testing</p></div>
+          <div class="item"><p>Dashboard and Reporting</p></div>
+          <div class="item"><p>Development Management</p></div>
+          <div class="item"><p>Disaster Recovery</p></div>
+          <div class="item"><p>File and Record Storage</p></div>
+          <div class="item"><p>Integration</p></div>
+          <div class="item"><p>ISV / App Packaging</p></div>
+          <div class="item"><p>Multi-Language</p></div>
+          <div class="item"><p>Platform Events</p></div>
+          <div class="item"><p>Privacy and Identity</p></div>
+          <div class="item"><p>Salesforce to Salesforce</p></div>
+          <div class="item"><p>Scheduled Jobs</p></div>
+          <div class="item"><p>Security</p></div>
+          <div class="item"><p>Single Sign On</p></div>
+          <div class="item"><p>Surveys</p></div>
+          <div class="item"><p>Workflow Management</p></div>
         </div>
       </div>
       <div class="subcontainer integration">
         <img src="images/integration.png" />
         <h1>Integration</h1>
         <div class="items fullwidth">
-          <div><p>Email</p></div>
-          <div><p>External Files</p></div>
-          <div><p>Mobile Applications</p></div>
-          <div><p>Process Orchastration</p></div>
-          <div><p>App Network Visulisation</p></div>
-          <div><p>Runtime Management</p></div>
-          <div><p>Connector APIs</p></div>
-          <div><p>Security</p></div>
-          <div><p>Reporting and Analytics</p></div>
-          <div><p>API</p></div>
-          <div><p>Omni-Channel</p></div>
-          <div><p>eCommerce</p></div>
-          <div><p>Business Automation</p></div>
-          <div><p>SaaS Integration</p></div>
-          <div><p>Sharing and Discovery APIs</p></div>
+          <div class="item"><p>Email</p></div>
+          <div class="item"><p>External Files</p></div>
+          <div class="item"><p>Mobile Applications</p></div>
+          <div class="item"><p>Process Orchastration</p></div>
+          <div class="item"><p>App Network Visulisation</p></div>
+          <div class="item"><p>Runtime Management</p></div>
+          <div class="item"><p>Connector APIs</p></div>
+          <div class="item"><p>Security</p></div>
+          <div class="item"><p>Reporting and Analytics</p></div>
+          <div class="item"><p>API</p></div>
+          <div class="item"><p>Omni-Channel</p></div>
+          <div class="item"><p>eCommerce</p></div>
+          <div class="item"><p>Business Automation</p></div>
+          <div class="item"><p>SaaS Integration</p></div>
+          <div class="item"><p>Sharing and Discovery APIs</p></div>
         </div>
       </div>
     </div>
diff --git a/style.css b/style.css
index 94c3a4e..47747b2 100644
--- a/style.css
+++ b/style.css
@@ -37,6 +37,7 @@ h1 {
     grid-template-areas:
         'channels channels channels channels channels channels'
         'aiandiot aiandiot aiandiot aiandiot aiandiot aiandiot'
+        'industries industries industries industries industries industries'
         'marketing sales commerce service engagement analytics'
         'appsecosystem appsecosystem support support platform platform'
         'itegration itegration itegration itegration itegration itegration';
@@ -70,10 +71,19 @@ h1 {
 
 .fullwidth {
     display: grid;
-    grid-template-columns: auto auto auto auto auto auto auto auto;
+    grid-template-columns: auto auto auto auto auto auto;
 }
 
-.items>div {
+.mainitem {
+    background-color: rgb(203, 182, 219);
+    border: 1px solid rgba(0, 0, 0, 0.8);
+    padding: 2px;
+    margin: 2px;
+    text-align: center;
+    border-radius: 3px;
+}
+
+.item {
     background-color: rgba(255, 255, 255);
     border: 1px solid rgba(0, 0, 0, 0.8);
     padding: 2px;
@@ -114,6 +124,11 @@ h1 {
     background-color: rgba(117, 170, 206, 0.80);
 }
 
+.industries {
+    grid-area: industries;
+    background-color: rgba(188, 127, 253, 0.931);
+}
+
 .marketing {
     grid-area: marketing;
     background-color: rgba(230, 128, 61, 0.8);