- Scan ID:
- 09195b40-3fba-45ce-94e7-71913a078a54Finished
- Submitted URL:
- https://tryhuman.ai/Redirected
- Report Finished:
Links · 0 found
The outgoing links identified from the page
JavaScript Variables · 35 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| dataLayer | object |
| google_tag_manager | object |
| google_tag_data | object |
| clarity | function |
| mapboxgl | object |
| webpackChunkgoodkit | object |
Console log messages · 0 found
Messages logged to the web console
HTML
The raw HTML body of the page
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Tag Manager -->
<script async="" src="https://www.clarity.ms/s/0.7.53/clarity.js"></script><script async="" src="https://www.clarity.ms/tag/oj22vago11?ref=gtm2"></script><script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-PBSN9FCM"></script><script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : "";
j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-PBSN9FCM");
</script>
<!-- End Google Tag Manager -->
<!-- Favicon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="./assets/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="./assets/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./assets/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./assets/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="./assets/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="./assets/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="./assets/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="./assets/favicon/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="./assets/favicon/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="./assets/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="./assets/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="./assets/favicon/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="./assets/favicon/favicon-128.png" sizes="128x128">
<meta name="application-name" content=" ">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png">
<meta name="msapplication-square310x310logo" content="mstile-310x310.png">
<!-- Map CSS -->
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css">
<!-- Libs CSS -->
<link rel="stylesheet" href="./assets/css/libs.bundle.css">
<!--
Theme Sans Serif CSS
Remove the "disabled" attribute if you want to enable Sans Serif for headings.
-->
<link rel="stylesheet" href="./assets/css/theme-sans-serif.bundle.css" id="themeSansSerif" disabled="">
<!-- Theme CSS -->
<link rel="stylesheet" href="./assets/css/theme.bundle.css">
<!-- Title -->
<title>Human</title>
</head>
<body data-aos-easing="ease-out-quad" data-aos-duration="700" data-aos-delay="0">
<!-- Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-PBSN9FCM"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-lg">
<!-- Brand -->
<a class="navbar-brand me-0" href="./index.html"><img class="me-3 mb-1" src="assets/img/logos/human-logo.svg" width="36px" height="36px">Human</a>
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Navigation -->
<ul class="navbar-nav justify-content-center w-100">
<li class="nav-item">
<a class="nav-link" href="./company.html"> Company </a>
</li>
<li class="nav-item">
<a class="nav-link" href="./use-cases.html"> Use Cases </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="solutionsDropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Industries
</a>
<div class="dropdown-positioner">
<ul class="dropdown-menu" aria-labelledby="solutionsDropdown">
<li class="dropdown-item dropend">
<a class="dropdown-link" href="./retail-industry.html">
Retail
</a>
</li>
<li class="dropdown-item dropend">
<a class="dropdown-link" href="./airline-industry.html">
Airlines
</a>
</li>
<li class="dropdown-item dropend">
<a class="dropdown-link" href="./hospitality-industry.html">
Hospitality
</a>
</li>
<li class="dropdown-item dropend">
<a class="dropdown-link" href="./saas-industry.html"> SaaS </a>
</li>
<li class="dropdown-item dropend">
<a class="dropdown-link" href="./other-industry.html"> Other </a>
</li>
</ul>
</div>
</li>
</ul>
<!-- Join Waitlist -->
<a class="btn btn-sm btn-secondary" href="./index.html#contact">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- WELCOME -->
<section class="pt-6 pt-md-11 pb-10 pb-md-12">
<div class="container-lg">
<div class="row justify-content-center">
<div class="col-md-10 col-xl-8 text-center">
<!-- Preheading -->
<h6 class="text-uppercase text-muted mb-5">
Say Hello to Human 👋
</h6>
<!-- Heading -->
<h1 class="display-2 mb-4">
AI Agents so powerful they feel
<span class="text-underline-warning">Human</span>.
</h1>
</div>
</div>
<div class="row pt-10">
<div class="col-12 text-center">
<!-- Heading -->
<h6 class="text-uppercase mb-6">Built by leaders from</h6>
</div>
</div>
<div class="row justify-content-center mt-n5 mb-6">
<div class="col-4 col-md-2 mt-5">
<!-- Image -->
<div class="img-fluid svg-shim mx-auto" style="max-width: 130px">
<img src="assets/img/logos/google.png">
</div>
</div>
<div class="col-4 col-md-2 mt-5">
<!-- Image -->
<div class="img-fluid svg-shim mx-auto" style="max-width: 112px">
<img src="assets/img/logos/salesforce.png">
</div>
</div>
</div>
</div>
</section>
<!-- SHAPE -->
<div class="position-relative">
<div class="shape shape-fluid-x shape-top text-light">
<div class="shape-img pb-6 pb-md-10"><svg viewBox="0 0 100 50" preserveAspectRatio="none"><path d="M0 25h25L75 0h25v50H0z" fill="currentColor"></path></svg></div>
</div>
</div>
<!-- Transform Experiences -->
<section class="pt-10 pt-md-12 bg-light">
<div class="container-lg">
<div class="col-xl-8 mb-8">
<!-- Heading -->
<h2 class="display-2 mb-4">Transform your Customer Experience.</h2>
<!-- Text -->
<p class="text-muted">
Deliver exceptional customer experiences while driving powerful
business results.
</p>
</div>
<div class="row align-items-center justify-content-between">
<div class="col-md-6 order-md-1">
<!-- Animation Container -->
<div class="position-relative rounded w-100" style="
padding-top: 100%;
background-color: #ededeb;
overflow: hidden;
">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center">
<!-- First Message -->
<div id="animated-card-1" class="annimation-message-card annimation-message-card-human w-75 position-absolute" style="opacity: 1; transform: translateY(0px);">
<div class="annimation-message-header">
<img src="assets/img/avatars/hiker-avatar.png" class="img-fluid">
<div class="annimation-message-body">
<p class="font-sans-serif annimation-message-title">
James
</p>
<div class="annimation-message-content">
<span id="transform-text-1"></span>
</div>
</div>
</div>
</div>
<!-- Second Message -->
<div id="animated-card-2" class="annimation-message-card annimation-message-card-human w-75 position-absolute" style="opacity: 0; transform: translateY(50px);">
<div class="annimation-message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="annimation-message-body">
<p class="font-sans-serif annimation-message-title">
Peak Path Gear
</p>
<div class="annimation-message-content">
<span id="transform-text-2"></span>
</div>
</div>
</div>
</div>
<!-- Third Message: Order Card -->
<div id="animated-card-3" class="annimation-message-card annimation-message-card-human w-75 position-absolute" style="opacity: 0; transform: translateY(50px);">
<div class="annimation-product-card">
<img src="assets/img/products/backpack.png" class="img-fluid me-5">
<div>
<p class="mb-0"><strong>Your Order</strong> <br></p>
<p class="mb-5 badge text-bg-secondary">In Transit</p>
<p class="mb-0"><strong>ETA</strong> Friday 11am</p>
</div>
</div>
</div>
<!-- Fullscreen Video -->
<video id="transform-home" class="position-absolute w-100 h-100" style="opacity: 0; display: none;" loop="" autoplay="" muted="" playsinline="" preload="metadata" src="assets/video/human-hiking.mp4"></video>
<!-- Fourth Message: Happy Hiking -->
<div id="animated-card-4" class="annimation-message-card annimation-message-card-human w-75 position-absolute" style="opacity: 0; transform: translateY(0px);">
<div class="annimation-message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="annimation-message-body">
<p class="font-sans-serif annimation-message-title">
Peak Path Gear
</p>
<div class="annimation-message-content">
<span id="transform-text-4"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-5 order-md-0">
<!-- Item -->
<div class="row mt-5">
<div class="col-auto">
<!-- Icon -->
<div class="icon mb-2"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path d="M19.5 10.5H21a1.5 1.5 0 010 3h-1.5a1.5 1.5 0 010-3zm-3.44-4.629l1.061-1.06a1.5 1.5 0 012.122 2.121l-1.061 1.06a1.5 1.5 0 11-2.121-2.12zm0 12.311a1.5 1.5 0 112.122-2.121l1.06 1.06a1.5 1.5 0 01-2.12 2.122l-1.061-1.061zM3 10.5h1.5a1.5 1.5 0 010 3H3a1.5 1.5 0 010-3zm9-9A1.5 1.5 0 0113.5 3v1.5a1.5 1.5 0 01-3 0V3A1.5 1.5 0 0112 1.5zM12 18a1.5 1.5 0 011.5 1.5V21a1.5 1.5 0 01-3 0v-1.5A1.5 1.5 0 0112 18zM4.81 4.81a1.5 1.5 0 012.122 0l1.06 1.061a1.5 1.5 0 01-2.12 2.122L4.81 6.932a1.5 1.5 0 010-2.121zm0 14.433a1.5 1.5 0 010-2.122l1.061-1.06a1.5 1.5 0 112.122 2.121l-1.061 1.06a1.5 1.5 0 01-2.121 0z" fill="#335EEA" opacity=".3"></path></g></svg></div>
</div>
<div class="col">
<!-- Title -->
<p class="fs-lg fw-bold mb-2">Wow Your Customers</p>
<!-- Text -->
<p class="text-muted mb-5">
Create personalized, memorable interactions with AI that feels
human, leaving every customer feeling truly valued.
</p>
</div>
</div>
<!-- Other Items -->
<div class="row">
<div class="col-auto">
<!-- Icon -->
<div class="icon mb-2"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path fill="#335EEA" opacity=".3" d="M5 3h14l4 5H1z"></path><path fill="#335EEA" d="M23 8L12 20 1 8z"></path></g></svg></div>
</div>
<div class="col">
<!-- Title -->
<p class="fs-lg fw-bold mb-2">
Platinum Support, Scaled Infinitely
</p>
<!-- Text -->
<p class="text-muted mb-5">
Deliver VIP-level support 24/7. Our AI handles everything,
from simple to complex tasks, without burdening your team.
</p>
</div>
</div>
<div class="row">
<div class="col-auto">
<!-- Icon -->
<div class="icon mb-2"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path d="M12 8H8a4 4 0 00-4 4v1a3 3 0 003 3v2a5 5 0 01-5-5v-1a6 6 0 016-6h4V4.728a.5.5 0 01.8-.4l2.856 2.133a.5.5 0 01-.001.802l-2.857 2.121A.5.5 0 0112 8.983V8z" fill="#335EEA"></path><path d="M12.058 16H16a4 4 0 004-4v-1a3 3 0 00-3-3V6a5 5 0 015 5v1a6 6 0 01-6 6h-3.942v.983a.5.5 0 01-.798.401l-2.857-2.12a.5.5 0 010-.803l2.856-2.134a.5.5 0 01.8.401V16z" fill="#335EEA" opacity=".3"></path></g></svg></div>
</div>
<div class="col">
<!-- Title -->
<p class="fs-lg fw-bold mb-2">Always Improving</p>
<!-- Text -->
<p class="text-muted mb-5">
Our AI learns and evolves with each interaction, ensuring
smarter, faster support as your business evolves.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Scale Frontline Support Infinitely -->
<section class="py-10 py-md-12 bg-light">
<div class="container-lg">
<div class="col-xl-8 mb-8">
<!-- Heading -->
<h2 class="display-2 mb-4">Scale Frontline Support Infinitely.</h2>
<!-- Text -->
<p class="text-muted">
Handle unlimited customer interactions with HumanOS Agents, boost
efficiency, reduce costs, and enhance customer satisfaction—all
while your business grows.
</p>
</div>
<div class="row align-items-center justify-content-between">
<div class="col-md-6">
<!-- Animation Container -->
<div class="position-relative rounded w-100" style="
padding-top: 100%;
background-color: #ededeb;
overflow: hidden;
">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center">
<!-- Fullscreen Video -->
<video id="scale-video" class="position-absolute w-100 h-100" style="opacity: 1; display: none; transform: translateY(0px);" loop="" autoplay="" muted="" playsinline="" preload="metadata" src="assets/video/scale-video.mp4"></video>
<!-- First Message -->
<div id="scale-card-1" class="annimation-message-card annimation-message-card-human w-75 position-absolute" style="opacity: 0; transform: translateY(50px);">
<div class="annimation-message-header">
<img src="assets/img/avatars/scale-avatar.png" class="img-fluid">
<div class="annimation-message-body">
<p class="font-sans-serif annimation-message-title">
Monica
</p>
<div class="annimation-message-content">
<span id="scale-text-1"></span>
</div>
</div>
</div>
</div>
<!-- Second Message -->
<div id="scale-card-2" class="annimation-message-card annimation-message-card-ai w-75 position-absolute" style="opacity: 0; transform: translateY(0px) scale(0.5);">
<div class="annimation-message-internals-header">
<img src="assets/img/logos/confluence.png" class="img-fluid">
<p class="font-sans-serif annimation-message-internals my-0">
Check Internal Policy
</p>
</div>
</div>
<!-- Third Message -->
<div id="scale-card-3" class="annimation-message-card annimation-message-card-ai w-75 position-absolute" style="opacity: 0; transform: translateY(0px) scale(0.5);">
<div class="annimation-message-internals-header">
<img src="assets/img/logos/aftership.png" class="img-fluid">
<p class="font-sans-serif annimation-message-internals my-0">
Get Delivery Status
</p>
</div>
</div>
<!-- Fourth Message -->
<div id="scale-card-4" class="annimation-message-card annimation-message-card-ai w-75 position-absolute" style="opacity: 0; transform: translateY(0px) scale(0.5);">
<div class="annimation-message-internals-header">
<img src="assets/img/logos/shopify.png" class="img-fluid">
<p class="font-sans-serif annimation-message-internals my-0">
Update Delivery Address
</p>
</div>
</div>
<!-- Fifth Message -->
<div id="scale-card-5" class="annimation-message-card annimation-message-card-ai w-75 position-absolute" style="opacity: 0; transform: translateY(0px) scale(0.5);">
<div class="annimation-message-internals-header">
<img src="assets/img/logos/zendesk.png" class="img-fluid">
<p class="font-sans-serif annimation-message-internals my-0">
Generate Customer Response
</p>
</div>
</div>
<!-- Seventh Message -->
<div id="scale-card-6" class="annimation-message-card annimation-message-card-human w-75 position-absolute" style="opacity: 0; transform: translateY(0px) scale(0.5);">
<div class="annimation-message-header">
<img src="assets/img/avatars/scale-avatar.png" class="img-fluid">
<div class="annimation-message-body">
<p class="font-sans-serif annimation-message-title">
Monica
</p>
<div class="annimation-message-content">
<span id="scale-text-6"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-5">
<!-- Item 1 -->
<div class="row mt-5">
<div class="col-auto">
<!-- Icon -->
<div class="icon mb-2"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path d="M7 11h8a2 2 0 002-2V8h2v1a4 4 0 01-4 4H7v2a1 1 0 01-2 0V9a1 1 0 112 0v2z" fill="#335EEA" opacity=".3"></path><path d="M6 21a2 2 0 100-4 2 2 0 000 4zm0 2a4 4 0 110-8 4 4 0 010 8zM18 7a2 2 0 100-4 2 2 0 000 4zm0 2a4 4 0 110-8 4 4 0 010 8zM6 7a2 2 0 100-4 2 2 0 000 4zm0 2a4 4 0 110-8 4 4 0 010 8z" fill="#335EEA"></path></g></svg></div>
</div>
<div class="col">
<!-- Title -->
<p class="fs-lg fw-bold mb-2">Integrated with your Company</p>
<!-- Text -->
<p class="text-muted mb-5">
Deep Integration with your CRM, internal tools, and company
knowledge.
</p>
</div>
</div>
<!-- Item 2 -->
<div class="row">
<div class="col-auto">
<!-- Icon -->
<div class="icon mb-2"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path d="M8 7a1 1 0 110-2h8a4 4 0 110 8H8a2 2 0 100 4h9a1 1 0 010 2H8a4 4 0 110-8h8a2 2 0 100-4H8z" fill="#335EEA" opacity=".3"></path><path d="M9.707 8.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 1.414L7.414 6l2.293 2.293zM14.293 20.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 00-1.414 1.414L16.586 18l-2.293 2.293z" fill="#335EEA"></path></g></svg></div>
</div>
<div class="col">
<!-- Title -->
<p class="fs-lg fw-bold mb-2">
Built for Complex Problem-Solving
</p>
<!-- Text -->
<p class="text-muted mb-5">
Handle multi-step reasoning and execute complex tasks
autonomously.
</p>
</div>
</div>
<!-- Item 3 -->
<div class="row">
<div class="col-auto">
<!-- Icon -->
<div class="icon mb-2"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path d="M5 19h15a1 1 0 010 2H4a1 1 0 01-1-1V4a1 1 0 112 0v15z" fill="#335EEA"></path><path d="M8.73 14.684a1 1 0 11-1.46-1.368l3.75-4a1 1 0 011.38-.077l2.959 2.526 3.856-4.885a1 1 0 011.57 1.24l-4.5 5.7a1 1 0 01-1.434.14l-3.024-2.58-3.097 3.304z" fill="#335EEA" opacity=".3"></path></g></svg></div>
</div>
<div class="col">
<!-- Title -->
<p class="fs-lg fw-bold mb-2">Drive Key Support Metrics</p>
<!-- Text -->
<p class="text-muted mb-0">
Improve first-touch resolution, CSAT, response times, and
boost revenue.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- IMAGE FOR SETTING CONTEXT -->
<section class="bg-light">
<div class="container-lg position-relative" style="z-index: 1">
<div class="col-xl-8 mb-8">
<!-- Heading -->
<h2 class="display-2 mb-4">AI Agents Tailored to your Business.</h2>
<!-- Text -->
<p class="text-muted">
The Human OS platform empowers you to create AI Agents that handle
the bulk of your support autonomously, unlocking your team to focus
on high-impact work.
</p>
</div>
<div class="row align-items-center">
<!-- Tabs -->
<div class="tab-buttons button-container d-flex justify-content-between">
<button class="btn menu-btn rounded me-3 mb-5 active" data-tab="retail-section" data-avatar="assets/img/avatars/retail-avatar.png" data-name="Emily Parker" data-bg="assets/img/magic-conversations/retail.jpg">
Retail
</button>
<button class="btn menu-btn rounded me-3 mb-5" data-tab="airline-section" data-avatar="assets/img/avatars/airlines-avatar.png" data-name="Sarah Collins" data-bg="assets/img/magic-conversations/airline.jpg">
Airlines
</button>
<button class="btn menu-btn rounded me-3 mb-5" data-tab="hotel-section" data-avatar="assets/img/avatars/hotel-avatar.png" data-name="Peter Kelly" data-bg="assets/img/magic-conversations/hotel.jpg">
Hospitality
</button>
<button class="btn menu-btn rounded mb-5" data-tab="saas-section" data-avatar="assets/img/avatars/saas-avatar.png" data-name="Mark Smith" data-bg="assets/img/magic-conversations/saas.jpg">
SaaS
</button>
</div>
<div class="col-12 position-relative">
<!-- Avatar and Name (Bottom Left) -->
<div class="position-absolute bottom-0 start-0 m-5 d-flex align-items-center" style="z-index: 2">
<!-- Avatar -->
<img id="avatar" src="assets/img/avatars/retail-avatar.png" class="rounded-circle" style="
width: 50px;
height: 50px;
object-fit: cover;
margin-right: 10px;
margin-left: 15px;
">
<!-- Name -->
<span id="person-name" class="text-white">Emily Parker</span>
</div>
<!-- Image -->
<img id="bg-image" class="position-relative img-fluid rounded" src="assets/img/magic-conversations/retail.jpg" alt="..." style="z-index: 1">
</div>
</div>
</div>
</section>
<!-- SHAPE -->
<div class="position-relative">
<div class="shape shape-fluid-x shape-top text-white pb-8 pb-md-12">
<div class="shape-img pb-6 pb-md-12"><svg viewBox="0 0 100 50" preserveAspectRatio="none"><path d="M0 25h25L75 0h25v50H0z" fill="currentColor"></path></svg></div>
</div>
</div>
<!-- Magic AI Conversation: Retail -->
<section class="py-10 py-md-12 tab-content active" id="retail-section">
<div class="container-lg d-flex flex-column align-items-center">
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100">
<div class="message-header">
<img src="assets/img/avatars/retail-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Emily Parker</p>
<div class="message-content">
Hi there. I just received my order, but it is missing a pair of
red sneakers, and I really needed them for a running event this
weekend.
</div>
<div class="message-time">10:30:12 AM, 10/14/24</div>
</div>
</div>
</div>
<!-- Message Internals -->
<div class="message-internals d-flex flex-column aos-init" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="d-flex align-items-center mx-auto">
<img class="mx-3" src="assets/img/logos/human-logo.svg" width="20px" height="20px">
<span class="message-internals-text"><strong>Check Recent Order Details</strong></span>
</div>
<!-- Message Card (AI) -->
<div class="message-card message-card-ai mx-auto w-100">
<div class="message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Human AI</p>
<div class="message-content">
Hi Emily. I’m sorry so sorry hear that. Let me check your
order. Can you confirm this is the product that is missing?
</div>
<div class="message-time">10:31:05 AM, 10/14/24</div>
<!-- Product Card -->
<div class="product-card">
<img src="assets/img/products/red-runner.jpg" class="img-fluid me-5">
<div class="product-details">
<p class="mb-0">
Running Pro Sneakers <br>Size: 9, Color: Red
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100 aos-init" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="message-header">
<img src="assets/img/avatars/retail-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Emily Parker</p>
<div class="message-content">Yes, that’s the one!</div>
<div class="message-time">10:31:40 AM, 10/14/24</div>
</div>
</div>
</div>
<!-- Message Internals -->
<div class="message-internals d-flex flex-column aos-init" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="d-flex align-items-center mx-auto">
<img class="mx-3" src="assets/img/logos/human-logo.svg" width="20px" height="20px">
<span class="message-internals-text"><strong>Process Missing Order</strong></span>
</div>
<!-- Message Card (AI) -->
<div class="message-card message-card-ai mx-auto w-100">
<div class="message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Human AI</p>
<div class="message-content">
Thanks for confirming. I’ll arrange for a new pair to be
shipped out with express delivery at no extra cost. You should
receive them by tomorrow afternoon.
</div>
<div class="message-time">10:32:15 AM, 10/14/24</div>
</div>
</div>
</div>
</div>
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100 aos-init" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="message-header">
<img src="assets/img/avatars/retail-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Emily Parker</p>
<div class="message-content">
Thank you so much! That’s perfect.
</div>
<div class="message-time">10:33:00 AM, 10/14/24</div>
</div>
</div>
</div>
</div>
</section>
<!-- Magic AI Conversation: Airlines -->
<section class="py-10 py-md-12 tab-content" id="airline-section">
<div class="container-lg d-flex flex-column align-items-center">
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100">
<div class="message-header">
<img src="assets/img/avatars/airlines-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Sarah Collins</p>
<div class="message-content">
Hey there. I’m flying to New York tomorrow, and I wanted to
check if there are any seat upgrades available.
</div>
<div class="message-time">11:51:32 AM, 10/11/24</div>
</div>
</div>
</div>
<!-- Message Internals -->
<div class="message-internals d-flex flex-column aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="d-flex align-items-center mx-auto">
<img class="mx-3" src="assets/img/logos/human-logo.svg" width="20px" height="20px">
<span class="message-internals-text">
<strong>Get User Booking Details.</strong>
</span>
</div>
<!-- Message Card (AI) -->
<div class="message-card message-card-ai mx-auto w-100">
<div class="message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Human AI</p>
<div class="message-content">
Hi Sarah. Let me check that for you. I see your current seat
is in economy, but we have one available in premium economy
for $50 extra. Would you like to upgrade?
</div>
<div class="message-time">11:52:12 AM, 10/11/24</div>
</div>
</div>
</div>
</div>
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100 aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="message-header">
<img src="assets/img/avatars/airlines-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Sarah Collins</p>
<div class="message-content">Yes, that sounds perfect!</div>
<div class="message-time">11:53:05 AM, 10/11/24</div>
</div>
</div>
</div>
<!-- Message Internals -->
<div class="message-internals d-flex flex-column aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="d-flex align-items-center mx-auto">
<img class="mx-3" src="assets/img/logos/human-logo.svg" width="20px" height="20px">
<span class="message-internals-text">
<strong>Process Seat Upgrade</strong>
</span>
</div>
<!-- Message Card (AI) -->
<div class="message-card message-card-ai mx-auto w-100">
<div class="message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Human AI</p>
<div class="message-content">
Great! Your seat has been upgraded to premium economy. I’ve
also added lounge access as a complimentary perk since you’re
a frequent flyer. Is there anything else I can help you with?
</div>
<div class="message-time">11:56:22 AM, 10/11/24</div>
</div>
</div>
</div>
</div>
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100 aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="message-header">
<img src="assets/img/avatars/airlines-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Sarah Collins</p>
<div class="message-content">
Wow, thank you! That's all for now.
</div>
<div class="message-time">11:57:03 AM, 10/11/24</div>
</div>
</div>
</div>
</div>
</section>
<!-- Magic AI Conversation: Hotel Reservation Modification -->
<section class="py-10 py-md-12 tab-content" id="hotel-section">
<div class="container-lg d-flex flex-column align-items-center">
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100">
<div class="message-header">
<img src="assets/img/avatars/hotel-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Peter Kelly</p>
<div class="message-content">
Hi, I need to change my check-in date. Possible to push two days
later?
</div>
<div class="message-time">10:30:12 AM, 10/14/24</div>
</div>
</div>
</div>
<!-- Message Internals -->
<div class="message-internals d-flex flex-column aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="d-flex align-items-center mx-auto">
<img class="mx-3" src="assets/img/logos/human-logo.svg" width="20px" height="20px">
<span class="message-internals-text">
<strong>Get User Booking Details.</strong>
</span>
</div>
<!-- Message Card (AI) -->
<div class="message-card message-card-ai mx-auto w-100">
<div class="message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Human AI</p>
<div class="message-content">
Hi Peter. Absolutely, I’d be happy to help. So you want to
check in on October 16th? Is that correct?
</div>
<div class="message-time">10:31:05 AM, 10/14/24</div>
</div>
</div>
</div>
</div>
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100 aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="message-header">
<img src="assets/img/avatars/hotel-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Peter Kelly</p>
<div class="message-content">Yeah, exactly.</div>
<div class="message-time">10:31:40 AM, 10/14/24</div>
</div>
</div>
</div>
<!-- Message Internals -->
<div class="message-internals d-flex flex-column aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="d-flex align-items-center mx-auto">
<img class="mx-3" src="assets/img/logos/human-logo.svg" width="20px" height="20px">
<span class="message-internals-text">
<strong>Check Room Availability</strong>
</span>
</div>
<!-- Message Card (AI) -->
<div class="message-card message-card-ai mx-auto w-100">
<div class="message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Human AI</p>
<div class="message-content">
Ok, we have availability for those dates. You can keep the
same room type, or we also have an upgraded suite available
for an additional $50 per night. Which option would you
prefer?
</div>
<div class="message-time">10:32:15 AM, 10/14/24</div>
</div>
</div>
</div>
</div>
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100 aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="message-header">
<img src="assets/img/avatars/hotel-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Peter Kelly</p>
<div class="message-content">
I’d like to keep the same room type, please.
</div>
<div class="message-time">10:32:45 AM, 10/14/24</div>
</div>
</div>
</div>
<!-- Message Internals -->
<div class="message-internals d-flex flex-column aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="d-flex align-items-center mx-auto">
<img class="mx-3" src="assets/img/logos/human-logo.svg" width="20px" height="20px">
<span class="message-internals-text">
<strong>Update Customer Reservation</strong>
</span>
</div>
<!-- Message Card (AI) -->
<div class="message-card message-card-ai mx-auto w-100">
<div class="message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Human AI</p>
<div class="message-content">
Got it! I’ve updated your reservation to reflect the new
check-in date. Everything else remains the same, and you’ll
receive a confirmation email shortly. Is there anything else I
can assist you with today?
</div>
<div class="message-time">10:33:10 AM, 10/14/24</div>
</div>
</div>
</div>
</div>
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100 aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="message-header">
<img src="assets/img/avatars/hotel-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Peter Kelly</p>
<div class="message-content">Awesome. Thank you so much!</div>
<div class="message-time">10:33:45 AM, 10/14/24</div>
</div>
</div>
</div>
</div>
</section>
<!-- Magic AI Conversation: SaaS Service Retention -->
<section class="py-10 py-md-12 tab-content" id="saas-section">
<div class="container-lg d-flex flex-column align-items-center">
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100">
<div class="message-header">
<img src="assets/img/avatars/saas-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Mark Smith</p>
<div class="message-content">
Hi, I’m considering canceling my subscription. I found another
service that seems to offer more features at a lower cost.
</div>
<div class="message-time">10:30:12 AM, 10/14/24</div>
</div>
</div>
</div>
<!-- Message Internals -->
<div class="message-internals d-flex flex-column aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="d-flex align-items-center mx-auto">
<img class="mx-3" src="assets/img/logos/human-logo.svg" width="20px" height="20px">
<span class="message-internals-text">
<strong>Retrieve Subscription Details</strong>
</span>
</div>
<!-- Message Card (AI) -->
<div class="message-card message-card-ai mx-auto w-100">
<div class="message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Human AI</p>
<div class="message-content">
Hi Mark, I'm sorry to hear you're thinking of leaving. We
truly appreciate having you as a customer. How about we offer
you two months of free service to explore some of our upcoming
new features and enhancements?
</div>
<div class="message-time">10:31:05 AM, 10/14/24</div>
</div>
</div>
</div>
</div>
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100 aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="message-header">
<img src="assets/img/avatars/saas-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Mark Smith</p>
<div class="message-content">
Two free months? That sounds interesting. I’ll give it another
try.
</div>
<div class="message-time">10:31:40 AM, 10/14/24</div>
</div>
</div>
</div>
<!-- Message Internals -->
<div class="message-internals d-flex flex-column aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="d-flex align-items-center mx-auto">
<img class="mx-3" src="assets/img/logos/human-logo.svg" width="20px" height="20px">
<span class="message-internals-text">
<strong>Apply Two-Month Free Offer</strong>
</span>
</div>
<!-- Message Card (AI) -->
<div class="message-card message-card-ai mx-auto w-100">
<div class="message-header">
<img src="assets/img/logos/human-logo.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Human AI</p>
<div class="message-content">
I’m glad to hear that, Mark! I’ve added two free months to
your account. We’re confident you’ll love the new features.
Let me know if there’s anything else I can assist you with
today.
</div>
<div class="message-time">10:32:15 AM, 10/14/24</div>
</div>
</div>
</div>
</div>
<!-- Message Card (Human) -->
<div class="message-card message-card-human mx-auto w-100 aos-init aos-animate" data-aos="fade-up" data-aos-offset="100" data-aos-anchor-placement="top-bottom" data-aos-once="false">
<div class="message-header">
<img src="assets/img/avatars/saas-avatar.png" class="img-fluid">
<div class="message-body">
<p class="font-sans-serif message-title">Mark Smith</p>
<div class="message-content">
Thanks, really appreciate the help!
</div>
<div class="message-time">10:32:45 AM, 10/14/24</div>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="pt-10 pt-md-12 bg-dark" style="background-image: url(assets/img/patterns/pattern-1.svg)">
<div class="container-lg">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8">
<!-- Heading -->
<h2 class="display-2 text-center text-white mb-9 mb-md-10">
Human OS, built for enterprise demands.
</h2>
</div>
</div>
<div class="row mt-n8 mt-md-n9 pb-14 aos-init" data-aos="fade-up">
<div class="col-md-6 col-lg-4">
<!-- Item -->
<div class="d-flex mt-8 mt-md-9">
<!-- Icon -->
<div class="icon text-primary-light">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path d="M4 4l7.631-1.43a2 2 0 01.738 0L20 4v9.283a8.51 8.51 0 01-4 7.217l-3.47 2.169a1 1 0 01-1.06 0L8 20.5a8.51 8.51 0 01-4-7.217V4z" fill="#335EEA" opacity=".3"></path><path d="M11.175 14.75a.946.946 0 01-.67-.287l-1.917-1.917a.926.926 0 010-1.342c.383-.383 1.006-.383 1.341 0l1.246 1.246 3.163-3.162a.926.926 0 011.341 0 .926.926 0 010 1.341l-3.833 3.834a.946.946 0 01-.671.287z" fill="#335EEA"></path></g></svg> </div>
<!-- Body -->
<div class="ms-5">
<!-- Title -->
<p class="fs-lg fw-bold text-white mb-1">Safe & Secure</p>
<!-- Text -->
<p class="fs-sm text-white-60 mb-0">
Ensure enterprise-grade security, data governance, and privacy
with comprehensive oversight, including LLM supervision, to
meet regulatory and compliance needs.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<!-- Item -->
<div class="d-flex mt-8 mt-md-9">
<!-- Icon -->
<div class="icon text-primary-light"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path d="M18.5 8a2.5 2.5 0 110-5 2.5 2.5 0 010 5zm0 13a2.5 2.5 0 110-5 2.5 2.5 0 010 5zm-13 0a2.5 2.5 0 110-5 2.5 2.5 0 010 5z" fill="#335EEA" opacity=".3"></path><path d="M5.5 8a2.5 2.5 0 110-5 2.5 2.5 0 010 5zM11 4h2a1 1 0 010 2h-2a1 1 0 010-2zm0 14h2a1 1 0 010 2h-2a1 1 0 010-2zm-6-8a1 1 0 011 1v2a1 1 0 01-2 0v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-2 0v-2a1 1 0 011-1z" fill="#335EEA"></path></g></svg></div>
<!-- Body -->
<div class="ms-5">
<!-- Title -->
<p class="fs-lg fw-bold text-white mb-1">
Seamless Orchestration
</p>
<!-- Text -->
<p class="fs-sm text-white-60 mb-0">
Connect and orchestrate AI across multiple systems, knowledge
sources, and models, delivering a unified customer experience
that spans your business.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<!-- Item -->
<div class="d-flex mt-9">
<!-- Icon -->
<div class="icon text-primary-light"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path d="M7 11h8a2 2 0 002-2V8h2v1a4 4 0 01-4 4H7v2a1 1 0 01-2 0V9a1 1 0 112 0v2z" fill="#335EEA" opacity=".3"></path><path d="M6 21a2 2 0 100-4 2 2 0 000 4zm0 2a4 4 0 110-8 4 4 0 010 8zM18 7a2 2 0 100-4 2 2 0 000 4zm0 2a4 4 0 110-8 4 4 0 010 8zM6 7a2 2 0 100-4 2 2 0 000 4zm0 2a4 4 0 110-8 4 4 0 010 8z" fill="#335EEA"></path></g></svg></div>
<!-- Body -->
<div class="ms-5">
<!-- Title -->
<p class="fs-lg fw-bold text-white mb-1">Simple Integration</p>
<!-- Text -->
<p class="fs-sm text-white-60 mb-0">
Easily integrates with your existing support platforms, such
as Intercom, Freshdesk, HubSpot, and more, reducing setup time
and costs while enhancing your current workflow with AI.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<!-- Item -->
<div class="d-flex mt-8 mt-md-9">
<!-- Icon -->
<div class="icon text-primary-light"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><rect fill="#335EEA" x="8" y="2" width="14" height="2" rx="1"></rect><path d="M6 6h12a1 1 0 010 2H6a1 1 0 110-2zm2 4h7a1 1 0 010 2H8a1 1 0 010-2zm3 4h6a1 1 0 010 2h-6a1 1 0 010-2zm1 4h3a1 1 0 010 2h-3a1 1 0 010-2zm-1 3h1a1 1 0 010 2h-1a1 1 0 010-2z" fill="#335EEA" opacity=".3"></path></g></svg></div>
<!-- Body -->
<div class="ms-5">
<!-- Title -->
<p class="fs-lg fw-bold text-white mb-1">Business Alignment</p>
<!-- Text -->
<p class="fs-sm text-white-60 mb-0">
Define your brand, business goals, and knowledge base to
ensure AI responses are consistent with your company's
messaging and objectives.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<!-- Item -->
<div class="d-flex mt-8 mt-md-9">
<!-- Icon -->
<div class="icon text-primary-light"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path d="M8 7a1 1 0 110-2h8a4 4 0 110 8H8a2 2 0 100 4h9a1 1 0 010 2H8a4 4 0 110-8h8a2 2 0 100-4H8z" fill="#335EEA" opacity=".3"></path><path d="M9.707 8.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 1.414L7.414 6l2.293 2.293zM14.293 20.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 00-1.414 1.414L16.586 18l-2.293 2.293z" fill="#335EEA"></path></g></svg></div>
<!-- Body -->
<div class="ms-5">
<!-- Title -->
<p class="fs-lg fw-bold text-white mb-1">
Complex Problem Solving
</p>
<!-- Text -->
<p class="fs-sm text-white-60 mb-0">
Capable of multi-step reasoning, planning and execution,
allowing the AI to handle intricate customer issues that match
reality of real world scenarios.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<!-- Item -->
<div class="d-flex mt-8 mt-md-9">
<!-- Icon -->
<div class="icon text-primary-light">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><path d="M16 15.632V12a3 3 0 00-3-3H6.162V5.526A2.526 2.526 0 018.688 3h11.79a2.526 2.526 0 012.526 2.526v7.58l.017 4.68a.5.5 0 01-.854.356l-2.51-2.51H16z" fill="#335EEA"></path><path d="M1.985 18v-5a2 2 0 012-2h8a2 2 0 012 2v5a2 2 0 01-2 2H4.101l-1.244 1.19a.5.5 0 01-.846-.36v-2.506A2.014 2.014 0 011.985 18zM6.5 14a.5.5 0 100 1h5a.5.5 0 100-1h-5zm3 2a.5.5 0 100 1h2a.5.5 0 100-1h-2z" fill="#335EEA" opacity=".3"></path></g></svg> </div>
<!-- Body -->
<div class="ms-5">
<!-- Title -->
<p class="fs-lg fw-bold text-white mb-1">
Multi-Channel Support
</p>
<!-- Text -->
<p class="fs-sm text-white-60 mb-0">
Support customers across live chat, email, SMS, WhatsApp,
phone, and more, providing consistent, omnichannel customer
experiences.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-10 py-md-12" id="contact">
<div class="container-lg">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<!-- Preheading -->
<h6 class="text-uppercase text-center text-primary mb-5">
Let's partner together
</h6>
<!-- Heading -->
<h2 class="display-3 text-center mb-8">
See what Human can do
<span class="text-underline-warning">for you</span>.
</h2>
<!-- Text -->
<p class="fs-lg text-muted mb-9">
We are actively developing Human & would love to meet with you to
understand your business and identify ways to partner together.
</p>
<!-- Form -->
<form id="contact-form" action="https://api.headlessforms.cloud/api/v1/form/s7GhI32mN0" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
<!-- Success Message -->
<div id="success-message" class="alert alert-secondary d-none" role="alert">
Thank you. A member of our team will reach out shortly.
</div>
<div class="form-group">
<label class="visually-hidden" for="name"> Name </label>
<input class="form-control" id="name" name="name" type="text" placeholder="Name" required="">
</div>
<div class="form-group">
<label class="visually-hidden" for="email">
Business Email
</label>
<input class="form-control" id="email" name="email" type="email" placeholder="Business Email" required="">
</div>
<div class="form-group">
<label class="visually-hidden" for="business">
Business Name
</label>
<input class="form-control" id="business" name="business" type="text" placeholder="Business Name" required="">
</div>
<div class="form-group">
<label class="visually-hidden" for="industry"> Industry </label>
<input class="form-control" id="industry" name="industry" type="text" placeholder="Industry">
</div>
<div class="form-group">
<textarea class="form-control" id="message" name="message" placeholder="Tell us about your business and interest in Human" rows="3"></textarea>
</div>
<button class="btn w-100 btn-dark">Send</button>
</form>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer py-8 bg-dark border-multicolor">
<div class="container-lg">
<div class="row justify-content-between align-items-center">
<div class="col-12 col-md-auto text-center text-md-start">
<h1 class="display-5 text-muted">Human</h1>
</div>
<div class="col-12 col-md-auto text-center text-md-end">
<!-- List -->
<ul class="list-inline list-unstyled mb-md-0">
<li class="list-inline-item">
<a class="text-white-60" href="privacy.html"> Privacy Policy </a>
</li>
<li class="list-inline-item ms-md-8">
<a class="text-white-60" href="terms-of-service.html">
Terms of Service
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Hidden iframe to handle form submission -->
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none" onload="if(submitted) { showSuccessMessage(); }"></iframe>
<!-- Include Scripts -->
<!-- Map JS -->
<script src="https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script><script type="text/javascript" id="" charset="">(function(a,e,b,f,g,c,d){a[b]=a[b]||function(){(a[b].q=a[b].q||[]).push(arguments)};c=e.createElement(f);c.async=1;c.src="https://www.clarity.ms/tag/"+g+"?ref\x3dgtm2";d=e.getElementsByTagName(f)[0];d.parentNode.insertBefore(c,d)})(window,document,"clarity","script","oj22vago11");</script>
<!-- Vendor JS -->
<script src="./assets/js/vendor.bundle.js"></script>
<!-- Theme JS -->
<script src="./assets/js/theme.bundle.js"></script>
<!-- JS for animation -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
function typeText(elementId, text, typingSpeed) {
const element = document.getElementById(elementId);
element.textContent = ""; // Clear the content initially
let index = 0;
function type() {
if (index < text.length) {
element.textContent += text.charAt(index);
index++;
setTimeout(type, typingSpeed);
}
}
type();
}
// First animation texts
const transformText1 =
"Will my backpack arrive by Friday? I need it for a hike 😨";
const transformText2 =
"Hi James. Good news! It will be delivered by noon on Friday.";
const transformText4 = "Happy Hiking!";
// Second animation texts
const scaleText1 = "I need to change my delivery address";
const scaleText6 = "Wow, that was fast! Thank you! ❤️";
// Reset elements to initial states before each animation starts
function resetElements2() {
anime.set(
"#scale-video, #scale-card-1, #scale-card-2, #scale-card-3, #scale-card-4, #scale-card-5, #scale-card-6",
{
translateY: 0,
opacity: 0,
}
);
}
// First animation timeline
function startAnimation1() {
const timeline = anime.timeline({
easing: "easeOutExpo",
loop: false, // Disable loop for timeline, we will manually loop
complete: () => {
// Restart the animation manually for the next loop
startAnimation1();
},
});
// First message
timeline
.add({
targets: "#animated-card-1",
opacity: [0, 1],
translateY: [50, 0],
duration: 1000,
begin: () => {
typeText("transform-text-1", transformText1, 40); // Typing speed for the first message
},
})
.add({
targets: "#animated-card-1",
opacity: [1, 0],
translateY: [0, -50],
duration: 1000,
delay: 3000, // Hold for 2 seconds after typing finishes
})
// Second message
.add({
targets: "#animated-card-2",
opacity: [0, 1],
translateY: [50, 0],
duration: 1000,
begin: () => {
typeText("transform-text-2", transformText2, 40); // Typing speed for the second message
},
})
.add({
targets: "#animated-card-2",
opacity: [1, 0],
translateY: [0, -50],
duration: 1000,
delay: 3000, // Hold for 2 seconds after typing finishes
})
// Third message
.add({
targets: "#animated-card-3",
opacity: [0, 1],
translateY: [50, 0],
duration: 1000,
})
.add({
targets: "#animated-card-3",
opacity: [1, 0],
translateY: [0, -50],
duration: 1000,
delay: 2000, // Hold for 2 seconds after typing finishes
})
// Video transition
.add({
targets: "#transform-home",
opacity: [0, 1],
duration: 1000,
begin: () => {
const video = document.getElementById("transform-home");
video.currentTime = 0; // Start video from the beginning
video.style.display = "block"; // Ensure the video is visible
video.play(); // Explicitly start playback
},
})
.add({
targets: "#transform-home",
duration: 9000, // Play the video for 5 seconds (adjust as needed)
})
.add({
targets: "#transform-home",
opacity: [1, 0],
duration: 1000,
complete: () => {
document.getElementById("transform-home").style.display =
"none"; // Hide video before loop restarts
},
})
// Fourth message
.add({
targets: "#animated-card-4",
opacity: [0, 1],
duration: 1000,
begin: () => {
setTimeout(() => {
typeText("transform-text-4", transformText4, 100); // Typing speed for the message
}, 500); // Delay of before typing starts
},
})
.add({
targets: "#animated-card-4",
opacity: [1, 0],
duration: 1000,
delay: 3000, // Hold after typing finishes
});
// Reset texts before each loop
timeline.add({
duration: 0, // No animation, just reset
complete: () => {
document.getElementById("transform-text-1").textContent = "";
document.getElementById("transform-text-2").textContent = "";
document.getElementById("transform-text-4").textContent = "";
},
});
}
// Second animatioin timeline
function startAnimation2() {
resetElements2(); // Ensure elements start at initial position
const timeline2 = anime.timeline({
easing: "easeOutExpo",
loop: false,
complete: () => {
// Restart the animation manually for the next loop
startAnimation2();
},
});
// Add animations for the second container
timeline2
// Video transition
.add({
targets: "#scale-video",
opacity: [0, 1],
duration: 1000,
begin: () => {
const video = document.getElementById("scale-video");
video.currentTime = 0; // Start video from the beginning
video.style.display = "block"; // Ensure the video is visible
video.play(); // Explicitly start playback
},
})
.add({
targets: "#scale-video",
duration: 2000, // Play the video for X seconds (adjust as needed)
})
.add({
targets: "#scale-video",
opacity: [1, 0],
duration: 1000,
complete: () => {
const video = document.getElementById("scale-video");
video.pause(); // Pause the video to prevent auto-jump
video.style.display = "none"; // Hide video before loop restarts
},
})
.add({
targets: "#scale-card-1",
opacity: [0, 1],
translateY: [50, 0],
duration: 1000,
begin: () => {
typeText("scale-text-1", scaleText1, 50);
},
})
.add({
targets: "#scale-card-1",
opacity: [1, 0.6],
translateY: [0, -150],
duration: 1000,
delay: 3000,
})
.add({
targets: "#scale-card-2",
opacity: [0, 1],
scale: [0.5, 1],
duration: 1000,
})
.add({
targets: "#scale-card-2",
opacity: [1, 0],
translateY: [0, 50],
duration: 500,
delay: 1000,
})
.add({
targets: "#scale-card-3",
opacity: [0, 1],
scale: [0.5, 1],
duration: 1000,
})
.add({
targets: "#scale-card-3",
opacity: [1, 0],
translateY: [0, 50],
duration: 500,
delay: 1000,
})
.add({
targets: "#scale-card-4",
opacity: [0, 1],
scale: [0.5, 1],
duration: 1000,
})
.add({
targets: "#scale-card-4",
opacity: [1, 0],
translateY: [0, 50],
duration: 500,
delay: 1000,
})
.add({
targets: "#scale-card-5",
opacity: [0, 1],
scale: [0.5, 1],
duration: 1000,
})
.add({
targets: "#scale-card-5",
opacity: [1, 0],
translateY: [0, 50],
duration: 500,
delay: 1000,
})
.add({
targets: "#scale-card-1",
opacity: [0.6, 0],
duration: 1000,
offset: "-=1000",
})
.add({
targets: "#scale-card-6",
opacity: [0, 1],
scale: [0.5, 1],
duration: 1000,
begin: () => {
typeText("scale-text-6", scaleText6, 80);
},
})
.add({
targets: "#scale-card-6",
opacity: [1, 0],
duration: 500,
delay: 3000,
});
// Reset texts for next loop
timeline2.add({
duration: 0,
complete: () => {
document.getElementById("scale-text-1").textContent = "";
document.getElementById("scale-text-6").textContent = "";
},
});
}
// Start the animation loop
startAnimation1();
startAnimation2();
});
</script>
<!-- JavaScript to handle form submission -->
<script>
var submitted = false;
function showSuccessMessage() {
// Show the success message
var successMessage = document.getElementById("success-message");
successMessage.classList.remove("d-none");
// Reset the form fields
document.getElementById("contact-form").reset();
submitted = false; // Reset the submitted flag
}
</script>
</body></html>