Merge pull request #27988 from rushatgabhane/help-dot-styling

[HelpDot] Add styling for home page and hub page

.github/workflows/deployExpensifyHelp.yml

@@ -2,6 +2,10 @@
 name: Deploy ExpensifyHelp
 
 on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 

docs/_data/_routes.yml

@@ -7,136 +7,136 @@ platforms:
   - href: expensify-classic
     title: Expensify Classic
     hub-title: Expensify Classic - Help & Resources
-    url: expensify.com
-    description: Your account settings will look something like this
-    image: /assets/images/paper-airplane.svg
+    url: www.expensify.com
+    description: "Your account settings look like this:"
+    image: /assets/images/settings-old-dot.svg
 
     # Hubs are comprised of sections and articles. Sections contain multiple related articles, but there can be standalone articles as well
     hubs:
+      - href: getting-started
+        title: Getting Started
+        icon: /assets/images/accounting.svg
+        description: From setting up your account to ensuring you get the most out of Expensify’s suite of features, click here to get started on streamlining your expense management journey.
+
       - href: account-settings
         title: Account Settings
         icon: /assets/images/gears.svg
-        description: With only a couple of clicks, split bills with your friends or coworkers.
+        description: Discover how to personalize your profile, add secondary logins, and grant delegated access to employees with our comprehensive guide on Account Settings.
 
       - href: bank-accounts-and-credit-cards
         title: Bank Accounts & Credit Cards
         icon: /assets/images/bank-card.svg
-        description: Request money for work expenses, bills, or a night out with friends.
+        description: Find out how to connect Expensify to your financial institutions, track credit card transactions, and best practices for reconciling company cards.
 
       - href: billing-and-subscriptions
         title: Billing & Subscriptions
         icon: /assets/images/money-wings.svg
-        description: Best practices for how to best deploy Expensify for your business
+        description: Here is where you can review Expensify's billing and subscription options, plan types, and payment methods.
 
       - href: expense-and-report-features
         title: Expense & Report Features
         icon: /assets/images/money-receipt.svg
-        description: Everything else you're looking for is right here.
+        description: From enabling automatic expense auditing to tracking attendees, here is where you can review tips and tutorials to streamline expense management.
 
       - href: expensify-card
         title: Expensify Card
         icon: /assets/images/hand-card.svg
-        description: Request money for work expenses, bills, or a night out with friends.
+        description: Explore how the Expensify Card combines convenience and security to enhance everyday business transactions. Discover how to apply for, oversee, and maximize your card perks here.
 
       - href: exports
         title: Exports
         icon: /assets/images/monitor.svg
-        description: Best practices for how to best deploy Expensify for your business
+        description: From exporting reports to creating custom templates, here is where you can learn more about Expensify's versatile export options.
 
       - href: get-paid-back
         title: Get Paid Back
-        description: Everything else you're looking for is right here.
         icon: /assets/images/money-into-wallet.svg
-
-      - href: getting-started
-        title: Getting Started
-        description: Everything else you're looking for is right here.
-        icon: /assets/images/accounting.svg
+        description: Whether you submit an expense report or an invoice, find out here how to ensure a smooth and timely payback process every time.
 
       - href: integrations
         title: Integrations
-        description: Everything else you're looking for is right here.
         icon: /assets/images/workflow.svg
+        description: Enhance Expensify’s capabilities by integrating it with your accounting or HR software. Here is where you can learn more about creating a synchronized financial management ecosystem.
 
       - href: manage-employees-and-report-approvals
         title: Manage Employees & Report Approvals
         icon: /assets/images/envelope-receipt.svg
-        description: Everything else you're looking for is right here.
+        description: Master the art of overseeing employees and reports by utilizing Expensify’s automation features and approval workflows.
 
       - href: policy-and-domain-settings
         title: Policy & Domain Setting
         icon: /assets/images/shield.svg
-        description: Everything else you're looking for is right here.
+        description: Discover how to set up and manage policies, define user permissions, and implement compliance rules to maintain a secure and compliant financial management landscape.
 
       - href: send-payments
         title: Send Payments
         icon: /assets/images/money-wings.svg
-        description: Everything else you're looking for is right here.
+        description: Uncover step-by-step guidance on sending direct reimbursements to employees, paying an invoice to a vendor, and utilizing third-party payment options.
 
   - href: new-expensify
     title: New Expensify
     hub-title: New Expensify - Help & Resources
     url: new.expensify.com
-    description: Your account settings will look something like this
-    image: /assets/images/paper-airplane.svg
+    description: "Your account settings look like this:"
+    image: /assets/images/settings-new-dot.svg
 
     hubs:
+      - href: getting-started
+        title: Getting Started
+        icon: /assets/images/accounting.svg
+        description: From setting up your account to ensuring you get the most out of Expensify’s suite of features, click here to get started on streamlining your expense management journey.
+
       - href: account-settings
         title: Account Settings
         icon: /assets/images/gears.svg
-        description: With only a couple of clicks, split bills with your friends or coworkers.
+        description: Discover how to personalize your profile, add secondary logins, and grant delegated access to employees with our comprehensive guide on Account Settings.
 
       - href: bank-accounts-and-credit-cards
         title: Bank Accounts & Credit Cards
         icon: /assets/images/bank-card.svg
-        description: description
+        description: Find out how to connect Expensify to your financial institutions, track credit card transactions, and best practices for reconciling company cards.
 
       - href: billing-and-plan-types
         title: Billing & Plan Types
         icon: /assets/images/money-wings.svg
-        description: description
+        description: Here is where you can review Expensify's billing and subscription options, plan types, and payment methods.
 
       - href: expense-and-report-features
         title: Expense & Report Features
         icon: /assets/images/money-receipt.svg
-        description: description
+        description: From enabling automatic expense auditing to tracking attendees, here is where you can review tips and tutorials to streamline expense management.
 
       - href: expensify-card
         title: Expensify Card
         icon: /assets/images/hand-card.svg
-        description: description
+        description: Explore how the Expensify Card combines convenience and security to enhance everyday business transactions. Discover how to apply for, oversee, and maximize your card perks here.
 
       - href: exports
         title: Exports
         icon: /assets/images/monitor.svg
-        description: description
+        description: From exporting reports to creating custom templates, here is where you can learn more about Expensify's versatile export options.
 
       - href: get-paid-back
         title: Get Paid Back
         icon: /assets/images/money-into-wallet.svg
-        description: description
-
-      - href: getting-started
-        title: Getting Started
-        icon: /assets/images/accounting.svg
-        description: description
+        description: Whether you submit an expense report or an invoice, find out here how to ensure a smooth and timely payback process every time.
 
       - href: integrations
         title: Integrations
         icon: /assets/images/workflow.svg
-        description: description
+        description: Enhance Expensify’s capabilities by integrating it with your accounting or HR software. Here is where you can learn more about creating a synchronized financial management ecosystem.
 
       - href: manage-employees-and-report-approvals
         title: Manage Employees & Report Approvals
         icon: /assets/images/envelope-receipt.svg
-        description: description
+        description: Master the art of overseeing employees and reports by utilizing Expensify’s automation features and approval workflows.
 
       - href: send-payments
         title: Send Payments
         icon: /assets/images/money-wings.svg
-        description: description.
+        description: Uncover step-by-step guidance on sending direct reimbursements to employees, paying an invoice to a vendor, and utilizing third-party payment options.
 
       - href: workspace-and-domain-settings
         title: Workspace & Domain Settings
         icon: /assets/images/shield.svg
-        description: description.
+        description: Discover how to set up and manage your workspace, define user permissions, and implement domain-level rules.

docs/_includes/article-card.html

@@ -1,6 +1,6 @@
-<a class="card" href="/articles/{{ include.platform }}/{{ include.hub }}/{{ include.href }}">
+<a class="article-card" href="/articles/{{ include.platform }}/{{ include.hub }}/{{ include.href }}">
     <div class="body">
-        <h3 class="title">{{ include.title }}</h3>
+        <h4 class="title">{{ include.title }}</h4>
     </div>
     <div class="right-icon">
         <img src="/assets/images/arrow-right.svg" class="base-icon"></img>

docs/_includes/hub-card.html

@@ -1,8 +1,8 @@
 {% assign hub = include.hub %}
 {% assign platform = include.platform %}
-<a class="card" href="/{{ platform }}/hubs/{{ hub.href }}">
+<a class="hub-card" href="/{{ platform }}/hubs/{{ hub.href }}">
     <div class="row">
-        <div class="left-icon">
+        <div>
             <img class="icon" src="{{ hub.icon }}" alt="{{ hub.href }}"/>
         </div>
         <div class="body">

docs/_includes/platform-card.html

@@ -1,13 +1,22 @@
 {% assign platform = site.data.routes.platforms | where: "href", include.href | first %}
 
-<a class="card" href="/{{ platform.href }}/hubs">
+<a class="platform-card" href="/{{ platform.href }}/hubs">
     <div class="row">
-        <div class="left-icon">
-            <img class="icon" src="{{ platform.image }}" alt="{{ platform.href }}"/>
-        </div>
         <div class="body">
-            <h3 class="title with-margin">{{ platform.title }}</h3>
-            <p class="description with-min-height">{{ platform.description }}</p>
+            <div class="header">
+                <div>
+                    <h3 class="title with-margin">{{ platform.title }}</h3>
+                    <p class="url">{{ platform.url }}</p>    
+                </div>
+                <div class="select-button">
+                    <button class="success">Select</button>
+                </div>
+            </div>
+
+            <p class="description">{{ platform.description }}</p>
+        </div>
+        <div class="platform-screenshot">
+            <img src="{{ platform.image }}" alt="{{ platform.href }}"/>
         </div>
     </div>
 </a>

docs/_includes/platform.html

@@ -5,7 +5,7 @@ <h1 class="title">{{ platform.hub-title }}</h1>
 
     <p>{{ site.data.routes.home.description }}</p>
 
-    <div class="cards-group">
+    <div class="platform-cards-group">
         {% for hub in platform.hubs %}
             {% include hub-card.html hub=hub platform=selectedPlatform %}
         {% endfor %}