- ID de l'analyse :
- 09195b40-3fba-45ce-94e7-71913a078a54Terminée
- URL soumise :
- https://tryhuman.ai/Redirigé
- Fin du rapport :
Liens : 0 trouvé(s)
Liens sortants identifiés à partir de la page
Variables JavaScript : 35 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
| Nom | 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 |
Messages de journal de console : 0 trouvé(s)
Messages consignés dans la console web
HTML
Le corps HTML de la page en données brutes
<!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>