<section>
<div class="px-8 py-12 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
<div class="grid items-end grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<h2
class="text-base leading-normal sm:text-lg md:text-xl font-semibold text-base-900"
>
Get started with our app today
</h2>
<p
class="text-base leading-normal mt-4 text-base-500 font-medium lg:text-balance"
>
Streamline your workflow and collaborate seamlessly on staging and
temporary environments
</p>
</div>
<div class="flex flex-col lg:flex-row items-center gap-2 sm:ml-auto">
<button
class="flex items-center justify-center transition-all duration-200 focus:ring-2 focus:outline-none text-base-500 bg-white hover:text-accent-500 ring-1 ring-base-200 focus:ring-accent-500 h-9 px-4 py-2 text-sm font-medium rounded-md gap-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-layout-apple size-4"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.286 7.008c-3.216 0 -4.286 3.23 -4.286 5.92c0 3.229 2.143 8.072 4.286 8.072c1.165 -.05 1.799 -.538 3.214 -.538c1.406 0 1.607 .538 3.214 .538s4.286 -3.229 4.286 -5.381c-.03 -.011 -2.649 -.434 -2.679 -3.23c-.02 -2.335 2.589 -3.179 2.679 -3.228c-1.096 -1.606 -3.162 -2.113 -3.75 -2.153c-1.535 -.12 -3.032 1.077 -3.75 1.077c-.729 0 -2.036 -1.077 -3.214 -1.077z"
></path>
<path d="M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2"></path>
</svg>
<span>Download on App Store</span>
</button>
<button
class="flex items-center justify-center transition-all duration-200 focus:ring-2 focus:outline-none text-base-500 bg-white hover:text-accent-500 ring-1 ring-base-200 focus:ring-accent-500 h-9 px-4 py-2 text-sm font-medium rounded-md gap-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-layout-grid size-4"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M4 3.71v16.58a.7 .7 0 0 0 1.05 .606l14.622 -8.42a.55 .55 0 0 0 0 -.953l-14.622 -8.419a.7 .7 0 0 0 -1.05 .607z"
></path>
<path d="M15 9l-10.5 11.5"></path>
<path d="M4.5 3.5l10.5 11.5"></path>
</svg>
<span>Download on Google Play</span>
</button>
</div>
</div>
<div
class="grid pt-6 mt-6 border-t grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-24"
>
<div class="space-y-4">
<nav aria-labelledby="footer-heading-0">
<h2
class="text-base leading-normal font-semibold text-base-900"
id="footer-heading-0"
>
Company
</h2>
<ul class="mt-4 space-y-4">
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
About
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Mission
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Leadership Team
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
History
</a>
</li>
</ul>
</nav>
</div>
<div class="space-y-4">
<nav aria-labelledby="footer-heading-1">
<h2
class="text-base leading-normal font-semibold text-base-900"
id="footer-heading-1"
>
Services
</h2>
<ul class="mt-4 space-y-4">
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Marketing
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Analytics
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Commerce
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Insights
</a>
</li>
</ul>
</nav>
</div>
<div class="space-y-4">
<nav aria-labelledby="footer-heading-2">
<h2
class="text-base leading-normal font-semibold text-base-900"
id="footer-heading-2"
>
Resources
</h2>
<ul class="mt-4 space-y-4">
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Documentation
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Guides
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Webinars
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
White Papers
</a>
</li>
</ul>
</nav>
</div>
<div class="space-y-4">
<nav aria-labelledby="footer-heading-3">
<h2
class="text-base leading-normal font-semibold text-base-900"
id="footer-heading-3"
>
Support & Legal
</h2>
<ul class="mt-4 space-y-4">
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Pricing
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
API Status
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Live Chat
</a>
</li>
<li>
<a
class="text-md leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Email Support
</a>
</li>
</ul>
</nav>
</div>
</div>
<div
class="pt-6 mt-12 border-t flex flex-col md:flex-row items-center justify-between"
>
<a
class="text-md leading-normal hover:text-accent-500 font-medium flex items-center gap-2 text-base-900"
href="#_"
>
<img
class="h-7 2xl:h-12"
src="/images/oxbow/blueLineLogo.png"
alt="#_"
/>
Oxbow UI
</a>
<h2 class="text-sm leading-normal font-medium text-base-400">
Copyright © 2024 Oxbow UI. All rights reserved.
</h2>
</div>
</div>
</section>
