<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Messangi Documentation</title>
<style>
* {
margin: 0 ;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #fff;
color: #111;
}
.hero-section {
position: relative;
width: 100%;
padding: 6rem 1rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.hero-bg {
position: absolute;
top: 30%;
left: 50%;
width: 800px;
transform: translate(-50%, -50%);
filter: blur(40px);
opacity: 0.7;
z-index: 0;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 800px;
width: 100%;
transform: translateY(-8rem);
}
.hero-content h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1rem;
}
.hero-content p {
font-size: 1.25rem;
color: #444;
line-height: 1.6;
}
.hero-button {
margin-top: 2rem;
padding: 0.9rem 2rem;
font-size: 1rem;
font-weight: 600;
background-color: #111;
color: #fff;
border-radius: 12px;
display: inline-block;
text-decoration: none;
transition: background 0.2s ease;
}
.hero-button:hover {
background-color: #333;
}
.guides-section {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
background: #fff;
border-radius: 1.5rem;
padding: 2rem;
margin: 3rem auto;
max-width: 960px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
margin-top: -6rem;
}
.guides-left {
flex: 1;
}
.guides-icon {
width: 60px;
height: 60px;
margin-bottom: 0.5rem;
}
.guides-title {
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.guides-description {
font-size: 1.05rem;
color: #444;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.guides-buttons {
background: #f5f3ff;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
padding: 1rem;
border-radius: 1.5rem;
max-width: 485px;
}
.guides-buttons a {
background: #fff;
padding: 0.65rem 1.2rem;
border-radius: 1.5rem;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
color: #111;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
transition: background-color 0.2s ease, color 0.2s ease;
}
.guides-buttons a:hover {
background-color: #3b37ff;
color: #fff;
}
.guides-right {
flex: 0 0 auto;
position: relative;
width: 250px;
height: 260px;
}
.guides-right img {
position: absolute;
width: 180px;
height: auto;
}
.guides-right .img-1 {
top: -20px;
left: -80px;
}
.guides-right .img-2 {
top: 50px;
left: 40px;
}
.api-section {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background: #fff;
border-radius: 1.5rem;
padding: 2rem;
margin: -1.85rem auto;
max-width: 960px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.api-left {
flex: 1;
}
.api-icon {
width: 50px;
margin-bottom: 1rem;
}
.api-title {
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.api-description {
font-size: 1.05rem;
color: #444;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.api-button {
display: inline-block;
padding: 0.6rem 1.2rem;
color: #3b37ff;
border: 2px solid #3b37ff;
border-radius: 0.75rem;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.api-button:hover {
background-color: #3b37ff;
color: #fff;
}
.api-right {
width: 100%;
max-width: 460px;
background: #fff;
border-radius: 1rem;
padding: 1rem;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
overflow-x: auto;
}
.api-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
position: relative;
padding-bottom: 1rem;
}
.api-tabs::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: #ddd;
}
.api-tabs span {
padding: 0.4rem 0.8rem;
background: #f2f2f2;
border-radius: 0.5rem;
font-weight: 600;
pointer-events: none;
cursor: default;
min-width: 90px;
text-align: center;
}
.api-tabs .active {
background: white;
color: #3b37ff;
border: 2px solid #3b37ff;
pointer-events: none;
cursor: default;
}
pre {
font-size: 0.85rem;
font-family: monospace;
white-space: pre-wrap;
word-break: break-word;
}
pre, code {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.release-section {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
background: #fff;
border-radius: 1.5rem;
padding: 2rem;
margin: 3rem auto;
max-width: 960px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
flex-wrap: wrap;
}
.release-left {
flex: 1;
}
.release-icon {
width: 60px;
height: 60px;
margin-bottom: 0.75rem;
}
.release-title {
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.release-description {
font-size: 1.05rem;
color: #444;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.release-button {
display: inline-block;
padding: 0.75rem 1.5rem;
color: #3b37ff;
border: 2px solid #3b37ff;
border-radius: 0.75rem;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.release-button:hover {
background-color: #3b37ff;
color: #fff;
}
.release-right {
flex: 0 0 auto;
}
.release-image {
width: 280px;
height: auto;
}
/* Footer Styles */
.footer-section {
padding: 60px 0;
display: flex;
justify-content: center;
}
.footer-container {
display: flex;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
max-width: 960px;
width: 100%;
background: white;
border-radius: 16px;
padding: 3rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
}
.footer-left {
flex: 1 1 240px;
}
.footer-logo {
width: 140px;
margin-bottom: 1rem;
}
.footer-copy {
margin-bottom: 1rem;
color: #555;
}
.footer-social a {
margin-right: 0.75rem;
}
.footer-social img {
width: 28px;
height: 28px;
}
.footer-right {
display: flex;
flex: 2 1 600px;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-column {
min-width: 120px;
margin-bottom: 1.5rem;
}
.footer-column h4 {
font-weight: 700;
margin-bottom: 0.75rem;
color: #000;
}
.footer-column ul {
list-style: none;
padding: 0;
}
.footer-column ul li {
margin-bottom: 0.5rem;
}
.footer-column ul li a {
text-decoration: none;
color: #666;
font-size: 0.95rem;
}
.footer-column ul li a:hover {
color: #000;
}
.footer-container {
max-width: 1150px;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
border-radius: 24px;
padding: 60px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.05);
}
.footer-left {
flex: 1 1 250px;
}
.footer-logo {
width: 200px;
height: auto;
margin-bottom: 12px;
}
.footer-copy {
margin: 0 0 16px;
font-size: 16px;
color: #666;
}
.footer-socials img {
height: 28px;
margin-right: 16px;
}
.footer-right {
flex: 3 1 700px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 32px;
}
.footer-column h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
font-size: 16px;
color: #7d7d92;
margin-bottom: 10px;
}
.guides-text-mobile {
display: none;
}
.api-text-mobile {
display: none;
}
.release-text-mobile {
display: none;
}
.release-wrapper {
position: relative;
z-index: 0;
}
.release-bg {
position: absolute;
top: 0;
left: -75%;
transform: translateX(50%);
width: 800px;
max-width: 100%;
z-index: -1;
opacity: 0.7;
filter: blur(40px);
pointer-events: none;
}
.release-bg-desktop-duplicate {
position: absolute;
top: 0;
left: 61%;
transform: translateX(-50%) scaleX(2);
width: 700px;
max-width: 100%;
z-index: -1;
opacity: 0.7;
filter: blur(40px);
pointer-events: none;
}
.footer-column ul li a {
text-decoration: none;
color: #7d7d8d;
font-size: 1rem;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: #1a50ff; /* Azul brillante como en tu ejemplo */
}
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2.2rem;
}
.hero-content p {
font-size: 1.1rem;
}
.hero-bg {
width: 320px;
filter: blur(50px);
opacity: 0.8;
}
.guides-section,
.api-section,
.release-section {
flex-direction: column;
text-align: center;
padding: 1.5rem;
gap: 2rem;
}
.guides-right,
.release-right {
margin: 0 auto;
}
/*--------------------------*/
.guides-description{
display: none;
}
.guides-text-mobile {
display: block;
text-align: justify;
}
/*--------------------------*/
.release-image {
width: 220px;
}
.guides-buttons,
.api-tabs {
justify-content: center;
}
.api-right {
width: 100%;
max-width: 100%;
text-align: left;
}
/*--------------------------*/
.api-description {
display: none;
}
.api-text-mobile {
display: block;
text-align: justify;
}
/*--------------------------*/
.release-description{
display: none;
}
.release-text-mobile {
display: block;
text-align: justify;
}
/*--------------------------*/
.footer-container {
padding: 40px 24px;
}
.footer-right {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-column {
width: 100%;
max-width: 300px;
text-align: center;
margin-bottom: 0.3rem;
}
.footer-left {
text-align: center;
align-items: center;
}
.footer-socials {
justify-content: center;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
}
.footer-section {
transform: translateY(-90px); /* o el valor que necesites */
}
.guides-right .img-1 {
transform: translateX(60px);
}
.guides-right .img-2 {
transform: translateX(60px);
}
.release-bg-desktop-duplicate {
display: none;
}
/*--------------------------*/
.release-bg {
top: 250px;
left: 50%; /* ✅ restaurar para mobile */
width: 480px;
height: 200px;
transform: translate(-50%, 250px) scale(1.1); /* ✅ ajustar posición centrada */
opacity: 0.5;
filter: blur(50px);
background: #A29BFF;
display: block;
border: none; /* puedes eliminar esto si no quieres que se vea el borde rojo */
}
}
@media (min-width: 769px) {
.release-right {
transform: translateX(-70px);
}
.footer-socials img {
height: 24px; /* o el tamaño deseado */
width: 24px;
margin-right: 35px;
}
.footer-section {
transform: translateY(-89px); /* Puedes ajustar el valor */
}
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero-section">
<img class="hero-bg" src="https://files.readme.io/9cd650d9e7817e0639ae9a61fedf40a60ebf48cb699b33898a738c1b8658ac41-GRADIENT-4.png" alt="Background Glow" />
<div class="hero-content">
<h1>Getting Started with<br>Messangi</h1>
<p>Explore everything you need to configure, launch, and scale<br>with Messangi's communication tools.</p>
<a href="https://www.messangi.com/contact-us/" class="hero-button">Contact Us</a>
</div>
</section>
<!-- Guides Section -->
<section class="guides-section">
<div class="guides-left">
<img class="guides-icon" src="https://files.readme.io/0ce2467199376348020d03744334c10338d76b063cc9e1940be6af343e8aa519-Screenshot-2025-06-03-at-10-51-44-a-m.png" alt="Guides Icon" />
<h2 class="guides-title">Guides</h2>
<p class="guides-description">
Everything you need to get started with Messangi.<br>
From setting up your account to launching your first campaign,<br>
follow our guides to streamline each step.
</p>
<p class="guides-text-mobile">
Everything you need to get started with Messangi. From setting up your account to launching your first campaign, follow our guides to streamline each step.
</p>
<div class="guides-buttons">
<a href="https://docs.messangi.com/docs/getting-started-dep">Workspace</a>
<a href="https://docs.messangi.com/docs/chatbot-overview">Chatbot</a>
<a href="https://docs.messangi.com/docs/getting-started-1">Live Chat</a>
<a href="https://docs.messangi.com/docs/getting-started">API Tutorials</a>
</div>
</div>
<div class="guides-right">
<img class="img-1" src="https://files.readme.io/3c6a62b004b90963583e9cc097d3d16ae419989e91e38a54332c59332af7214a-ICONS-03.png" alt="Guide Icon 1" />
<img class="img-2" src="https://files.readme.io/0040ce75ac6a20025e36fe5868bde557da38f68e8e6c43a4823a2b3a61c2140e-ICONS-04.png" alt="Guide Icon 2" />
</div>
</section>
<!-- API Reference Section -->
<section class="api-section">
<div class="api-left">
<img class="api-icon" src="https://files.readme.io/e9b62dc7e47f38194aadd1b562e1c4c3e73c8787183d25a2d972f8b49b78dca8-Screenshot-2025-06-02-at-10-33-28-a-m.png" alt="API Icon" />
<h2 class="api-title">API Reference</h2>
<p class="api-description">
Discover how to authenticate and send requests<br>
with clear endpoint documentation, code samples,<br>
and intuitive tools to test each API endpoint.
</p>
<p class="api-text-mobile">
Discover how to authenticate and send requests with clear endpoint documentation, code samples, and intuitive tools to test each API endpoint.
</p>
<a href="https://docs.messangi.com/reference/api-reference-introduction" class="api-button">View More</a>
</div>
<div class="api-right">
<div class="api-tabs">
<span class="active">cURL</span>
<span>Java</span>
<span>Python</span>
</div>
<pre>
curl --request POST \
--url https://elastic.messangi.me/raven/v3/messages \
--header 'accept: application/json' \
--header 'content-type: application/json' \
--data '{
"from": "141518",
"to": "+12125550143",
"text": "Get 20% OFF your next purchase!",
"type": "MT"
}'</pre>
</div>
</section>
<!-- Release Notes Section -->
<div class="release-wrapper">
<img class="release-bg" src="https://files.readme.io/3bc5d0e7dee0f8fa20439759d834b1bb1d79c0db4ba52b5cc3bfe17b9a68a4df-bg-api.png" alt="Release Notes Background" />
<img class="release-bg release-bg-desktop-duplicate" src="https://files.readme.io/3bc5d0e7dee0f8fa20439759d834b1bb1d79c0db4ba52b5cc3bfe17b9a68a4df-bg-api.png" alt="Release Notes Background Duplicate" />
<section class="release-section">
<div class="release-left">
<img class="release-icon" src="https://files.readme.io/49ff732c46c2b72656d23ee4599fe472074f35cd0d02f1e082ac2a65e481ff7b-Screenshot-2025-06-04-at-11-38-12-a-m.png" alt="Release Notes Icon" />
<h2 class="release-title">Release Notes</h2>
<p class="release-description">
Stay updated with the latest improvements and new features<br>
across the Messangi platform. Browse detailed changelogs<br>
to stay informed on what's new, fixed, or updated.
</p>
<p class="release-text-mobile">
Stay updated with the latest improvements and new features across the Messangi platform. Browse detailed changelogs to stay informed on what's new, fixed, or updated.
</p>
<a href="https://docs.messangi.com/page/release-notes" class="release-button">See All Updates</a>
</div>
<div class="release-right">
<img class="release-image" src="https://files.readme.io/a8eaf7a37b37b6d80da29594e4a3dc2c8331a49424d66e5d916843b66d41a8f3-Screenshot-2025-06-04-at-11-34-01-a-m.png" alt="Megaphone Image" />
</div>
</section>
</div>
<!-- Footer Section -->
<section class="footer-section">
<div class="footer-container">
<div class="footer-left">
<img src="https://files.readme.io/d7d33939fb58597812e321d89fccef896f986706f41a9e12dccf669722c78c3f-Screenshot-2025-06-04-at-12-54-42-p-m.png" alt="messangi logo" class="footer-logo" />
<p class="footer-copy">© 2025 Messangi. All rights reserved.</p>
<div class="footer-socials">
<a href="https://www.instagram.com/messangi/" target="_blank" rel="noopener">
<img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg" alt="Instagram" />
</a>
<a href="https://www.linkedin.com/company/messangi" target="_blank" rel="noopener">
<img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/linkedin.svg" alt="LinkedIn" />
</a>
<a href="https://www.youtube.com/channel/UCW0NWRx36BeaxLdbFFhSTUA" target="_blank" rel="noopener">
<img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg" alt="YouTube" />
</a>
<a href="https://www.facebook.com/messangi/" target="_blank" rel="noopener">
<img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg" alt="Facebook" />
</a>
</div>
</div>
<div class="footer-right">
<div class="footer-column">
<h4>Products</h4>
<ul>
<li><a href="https://www.messangi.com/outbound-multichannel-bulk-messaging-platform/">Outbound</a></li>
<li><a href="https://www.messangi.com/inbound-chatbot-building-solution/">Inbound</a></li>
<li><a href="https://www.messangi.com/chat-solution/">Chat</a></li>
<li><a href="https://www.messangi.com/mobile-marketing-platform/">Mobile Marketing</a></li>
<li><a href="https://www.messangi.com/mobile-wallet-solution/">Mobile Wallet</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Company</h4>
<ul>
<li><a href="https://www.messangi.com/about-messangi/">About Us</a></li>
<li><a href="https://www.messangi.com/clients/">Our Clients</a></li>
<li><a href="https://www.messangi.com/contact-us/">Contact Us</a></li>
<li><a href="https://www.messangi.com/blog/">Blog</a></li>
<li><a href="https://www.messangi.com/join-the-messangi-team/">Careers</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Clients</h4>
<ul>
<li><a href="https://docs.messangi.com/docs/platform-introduction">Documentation</a></li>
<li><a href="https://support.messangi.com/hc/en-us">Support</a></li>
<li><a href="https://broadcaster.messangi.com/login">Login</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Legal</h4>
<ul>
<li><a href="https://www.messangi.com/terms-of-service/">Terms of Service</a></li>
<li><a href="https://www.messangi.com/privacy-policy/">Privacy Policy</a></li>
<li><a href="https://www.messangi.com/aup/">Acceptable Use Policy</a></li>
</ul>
</div>
</div>
</div>
</section>
<div style="height: 0; margin-bottom: -170px;"></div>
</body>
</html>
