<style>
.custom-section {
display: flex;
gap: 20px;
align-items: stretch; /* Align top and bottom margins */
margin: 40px auto;
max-width: 1200px;
}
.left-column {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.right-column {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.big-plate {
background: #f29bb3;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
flex: 1; /* Ensure they stretch evenly */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.small-plate {
background: #f29bb3;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: space-between; /* Align text and icons evenly */
}
.big-plate .icon svg,
.small-plate .icon svg {
width: 60px;
height: 60px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-bottom: 10px;
}
p {
font-size: 1em;
color: #555;
}
a {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
justify-content: space-between; /* Align content inside the plates */
height: 100%; /* Stretch the anchor to fill the plate */
}
</style>
<div class="custom-section">
<div class="left-column">
<div class="big-plate">
<a href="https://paymentsgate.readme.io/docs/quick-start-guide">
<div class="icon">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10.051 8.102-3.778.322-1.994 1.994a.94.94 0 0 0 .533 1.6l2.698.316m8.39 1.617-.322 3.78-1.994 1.994a.94.94 0 0 1-1.595-.533l-.4-2.652m8.166-11.174a1.366 1.366 0 0 0-1.12-1.12c-1.616-.279-4.906-.623-6.38.853-1.671 1.672-5.211 8.015-6.31 10.023a.932.932 0 0 0 .162 1.111l.828.835.833.832a.932.932 0 0 0 1.111.163c2.008-1.102 8.35-4.642 10.021-6.312 1.475-1.478 1.133-4.77.855-6.385Zm-2.961 3.722a1.88 1.88 0 1 1-3.76 0 1.88 1.88 0 0 1 3.76 0Z"></path>
</svg>
</div>
<h2>Quick start guide</h2>
<p>Get started with our platform in just minutes! The guide offers brief, step-by-step instructions - from creating your service account to processing payments and handling errors.</p>
</a>
</div>
<div class="big-plate">
<a href="https://paymentsgate.readme.io/reference">
<div class="icon">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 8-4 4 4 4m8 0 4-4-4-4m-2-3-4 14"></path>
</svg>
</div>
<h2>API reference</h2>
<p>Access detailed API documentation, including parameters, examples, and schemas, with built-in testing tools.</p>
</a>
</div>
</div>
<div class="right-column">
<div class="small-plate">
<a href="https://paymentsgate.readme.io/docs/sdks">
<div class="icon">
<svg
class="w-6 h-6 text-gray-800 dark:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentColor"
>
<path d="M315.993 134.574v-69.274l-59.993-34.637-59.993 34.637v69.274l59.993 34.637zm-89.99-51.956l29.997-17.318 29.997 17.318v34.637l-29.997 17.318-29.997-17.318z"></path>
<path d="M345.99 0v151.893l-89.99 51.955-89.99-51.955V0l-104.988 53.14v227.671l89.99 56.286v174.903h209.976V337.097l89.99-56.286V53.14zm-74.992 482.003h-29.997v-40.862c0-8.27 6.728-14.998 14.998-14.998s14.998 6.728 14.998 14.998v40.862zm149.983-217.811l-89.99 56.285v161.526h-29.997v-40.862c0-24.81-20.185-44.995-44.995-44.995s-44.995 20.185-44.995 44.995v40.862h-29.997v-161.526l-89.99-56.285v-192.615l44.995-22.774v120.407l119.988 69.274 119.986-69.274V49.803l44.995 22.774z"></path>
<path d="M256 276.16c-24.81 0-44.995 20.185-44.995 44.995s20.185 44.995 44.995 44.995 44.995-20.185 44.995-44.995-20.185-44.995-44.995-44.995zm0 59.993c-8.27 0-14.998-6.728-14.998-14.998s6.728-14.998 14.998-14.998 14.998 6.728 14.998 14.998-6.728 14.998-14.998 14.998z"></path>
</svg>
</div>
<h2>SDKs</h2>
<p>Streamline your integration with our platform's comprehensive SDKs, designed for a seamless developer experience.</p>
</a>
</div>
<div class="small-plate">
<a href="https://paymentsgate.readme.io/docs/faq">
<div class="icon">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-6 5h6m-6 4h6M10 3v4h4V3h-4Z"></path>
</svg>
</div>
<h2>FAQ</h2>
<p>Find quick answers and solutions to common questions about integrating with our services.</p>
</a>
</div>
<div class="small-plate">
<a href="https://paymentsgate.readme.io/docs/what-is-platcore">
<div class="icon">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11c.889-.086 1.416-.543 2.156-1.057a22.323 22.323 0 0 0 3.958-5.084 1.6 1.6 0 0 1 .582-.628 1.549 1.549 0 0 1 1.466-.087c.205.095.388.233.537.406a1.64 1.64 0 0 1 .384 1.279l-1.388 4.114M7 11H4v6.5A1.5 1.5 0 0 0 5.5 19v0A1.5 1.5 0 0 0 7 17.5V11Zm6.5-1h4.915c.286 0 .372.014.626.15.254.135.472.332.637.572a1.874 1.874 0 0 1 .215 1.673l-2.098 6.4C17.538 19.52 17.368 20 16.12 20c-2.303 0-4.79-.943-6.67-1.475"></path>
</svg>
</div>
<h2>About the product</h2>
<p>Introducing you to the platform, its services, and API capabilities.</p>
</a>
</div>
<div class="small-plate">
<a href="https://paymentsgate.readme.io/docs/additional-materials">
<div class="icon">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 8H4m8 3.5v5M9.5 14h5M4 6v13a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-5.032a1 1 0 0 1-.768-.36l-1.9-2.28a1 1 0 0 0-.768-.36H5a1 1 0 0 0-1 1Z"></path>
</svg>
</div>
<h2>Additional materials</h2>
<p>Explore extra resources, including status descriptions, webhook setup guide, and supported currencies.</p>
</a>
</div>
</div>
</div>