<!-- Navigation bar section -->
<div class="justify-center w-full mx-auto bg-base-50">
<div
x-data="{ open: false }"
class="flex flex-col w-full mx-auto md:px-12 md:items-center md:justify-between md:flex-row px-8 py-2 lg:px-24 max-w-screen-xl relative"
>
<div class="flex flex-row items-center justify-between text-black">
<a
class="text-base 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>
<button
class="flex items-center justify-center transition-all duration-200 focus:ring-2 transition-shadow focus:outline-none text-base-500 bg-white hover:text-accent-500 ring-1 ring-base-200 focus:ring-accent-500 size-9 p-2 text-sm rounded-md md:hidden"
@click="open = !open"
>
<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-3"
x-data="{ open: false }"
>
<!-- Paths for burger icon -->
<path
x-show="!open"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
<!-- Paths for close icon (toggle icon) -->
<path
x-show="open"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<nav
:class="{'flex': open, 'hidden': !open}"
class="flex-col items-center flex-grow hidden gap-3 p-4 px-5 md:px-0 md:pb-0 md:flex md:justify-center md:flex-row lg:p-0"
>
<a
class="text-base leading-normal hover:text-accent-500 font-medium text-base-500 md:ml-auto"
href="#_"
>
Features
</a>
<a
class="text-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
About
</a>
<button
class="flex items-center justify-center transition-all duration-200 focus:ring-2 focus:outline-none text-white bg-accent-600 hover:bg-accent-700 focus:ring-accent-500/50 h-9 px-4 py-2 text-sm font-medium rounded-md"
>
Button
</button>
</nav>
</div>
</div>
<!-- Main hero section with headline and call to action -->
<section class="relative overflow-hidden">
<div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center">
<div>
<p class="text-sm leading-normal font-bold uppercase text-accent-600">
Tagline
</p>
<h2
class="text-xl leading-tight tracking-tight sm:text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900"
>
Transforming the banking experience for a digital future
</h2>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
The fastest method for working together on staging and temporary
environments.
</p>
<div class="flex flex-wrap items-center gap-2 mx-auto mt-8">
<button
class="flex items-center justify-center transition-all duration-200 focus:ring-2 focus:outline-none text-white bg-accent-600 hover:bg-accent-700 focus:ring-accent-500/50 h-9 px-4 py-2 text-sm font-medium rounded-md"
>
Get started
</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"
>
Learn more
</button>
</div>
</div>
<div class="lg:col-span-2">
<img
class="object-cover h-full border shadow rounded-2xl"
src="/images/dashboardLight.svg"
alt="#_"
/>
</div>
</div>
<div
class="mx-auto grid mt-10 grid-cols-4 items-center gap-x-8 gap-y-10 sm:grid-cols-6 sm:gap-x-10 lg:-mx-6 lg:grid-cols-5"
>
<img
class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/1.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/2.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/3.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 sm:col-start-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/4.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 col-start-2 sm:col-start-auto lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/5.svg"
alt="#_"
width="158"
height="48"
/>
</div>
</div>
</section>
<!-- Feature section highlighting key benefits or services -->
<section>
<div class="relative px-8 pt-24 mx-auto md:px-12 lg:px-24 max-w-7xl">
<div class="max-w-3xl">
<p class="text-sm leading-normal font-bold uppercase text-accent-600">
Tagline
</p>
<h2
class="text-xl leading-tight tracking-tight sm:text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
>
Transforming the banking experience for a digital future
</h2>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
The fastest method for working together on staging and temporary
environments.
</p>
</div>
<div
class="gap-x-2 gap-y-14 mt-12 lg:gap-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
>
<div>
<div>
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
>
Innovative Design
</h3>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Our cutting-edge design offers a fresh, modern look that transforms
your project into a standout experience.
</p>
</div>
<ul
role="list"
class="space-y-1 mt-6 text-base font-medium text-base-900"
>
<li>
<div class="flex items-center gap-4">
<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-circle-check size-5 text-accent-600"
slot="icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
stroke-width="0"
fill="currentColor"
></path>
</svg>
<span class="text-base leading-normal">
Revolutionizing communication
</span>
</div>
</li>
<li>
<div class="flex items-center gap-4">
<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-circle-check size-5 text-accent-600"
slot="icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
stroke-width="0"
fill="currentColor"
></path>
</svg>
<span class="text-base leading-normal">
Enhancing productivity
</span>
</div>
</li>
</ul>
</div>
<div>
<div>
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
>
Powerful Functionality
</h3>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Equipped with advanced features and tools, our solution effortlessly
manages complex tasks and workflows.
</p>
</div>
<ul
role="list"
class="space-y-1 mt-6 text-base font-medium text-base-900"
>
<li>
<div class="flex items-center gap-4">
<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-circle-check size-5 text-accent-600"
slot="icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
stroke-width="0"
fill="currentColor"
></path>
</svg>
<span class="text-base leading-normal">
Unlocking innovative solutions
</span>
</div>
</li>
<li>
<div class="flex items-center gap-4">
<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-circle-check size-5 text-accent-600"
slot="icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
stroke-width="0"
fill="currentColor"
></path>
</svg>
<span class="text-base leading-normal">
Enabling interoperability
</span>
</div>
</li>
</ul>
</div>
<div>
<div>
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
>
Easy Integration
</h3>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Integrating with existing systems is smooth and hassle-free, thanks
to our incredible flexible approach.
</p>
</div>
<ul
role="list"
class="space-y-1 mt-6 text-base font-medium text-base-900"
>
<li>
<div class="flex items-center gap-4">
<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-circle-check size-5 text-accent-600"
slot="icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
stroke-width="0"
fill="currentColor"
></path>
</svg>
<span class="text-base leading-normal">
Streamlining operations
</span>
</div>
</li>
<li>
<div class="flex items-center gap-4">
<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-circle-check size-5 text-accent-600"
slot="icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
stroke-width="0"
fill="currentColor"
></path>
</svg>
<span class="text-base leading-normal">
Simplifying implementation
</span>
</div>
</li>
</ul>
</div>
</div>
<div class="w-full mt-12 -mb-12">
<img
src="/images/dashboardLight.svg"
alt="#_"
class="w-full shadow rounded-t-2xl"
/>
</div>
</div>
</section>
<!-- Testimonials section displaying customer feedback -->
<section>
<div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
<ul
role="list"
class="grid sm:grid-cols-2 text-center md:grid-cols-3 gap-12"
>
<li>
<figure class="flex flex-col">
<span
class="flex items-center gap-2 justify-center text-amber-500 rounded-full"
>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
</span>
<blockquote
class="text-lg leading-normal sm:text-xl md:text-2xl text-base-500 italic font-medium mt-14"
>
Being in the financial industry, we were always looking for ways to
enhance our transactions.
</blockquote>
</figure>
</li>
<li>
<figure class="flex flex-col">
<span
class="flex items-center gap-2 justify-center text-amber-500 rounded-full"
>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
</span>
<blockquote
class="text-lg leading-normal sm:text-xl md:text-2xl text-base-500 italic font-medium mt-14"
>
Oxbow UI is a platform that allows you to create a customized
landing page.
</blockquote>
</figure>
</li>
<li>
<figure class="flex flex-col">
<span
class="flex items-center gap-2 justify-center text-amber-500 rounded-full"
>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
<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-star size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
></path>
</svg>
</span>
<blockquote
class="text-lg leading-normal sm:text-xl md:text-2xl text-base-500 italic font-medium mt-14"
>
With Oxbow UI, we can create a customized landing page for our
business that showcases our products.
</blockquote>
</figure>
</li>
</ul>
</div>
</section>
<!-- Pricing section with available plans and details -->
<section x-data="{duration: 'monthly'}">
<div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-screen-xl relative">
<div class="max-w-xl text-center mx-auto">
<p class="text-sm leading-normal font-bold uppercase text-accent-600">
Tagline
</p>
<h2
class="text-xl leading-tight tracking-tight sm:text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
>
Equip your business with world class software
</h2>
<p
class="text-base leading-normal mt-4 text-base-500 font-medium lg:text-balance"
>
Choose a plan that works the best for you and your team. Start small,
upgrade when you need to.
</p>
<div
aria-labelledby="pricing-toggle"
class="w-full relative mt-8 ring-1 ring-base-200 ring-offset-2 bg-white overflow-hidden justify-center gap-4 mx-auto lg:mx-0 inline-flex p-1 rounded-md max-w-52 shadow z-0"
>
<!-- Monthly Pricing Button: Sets 'duration' to 'monthly' when clicked -->
<!-- Sliding background -->
<div
class="absolute inset-0 bg-base-50 rounded-md transition-transform duration-200 ease-in-out"
:class="duration === 'monthly' ? 'w-1/2 translate-x-0' : 'w-1/2 translate-x-full'"
></div>
<!-- Monthly Pricing Button -->
<button
id="monthly-pricing-button"
class="relative flex items-center justify-center w-full px-2 h-6 text-xs font-medium focus:outline-none transition-colors duration-300 z-10"
:class="duration === 'monthly' ? 'text-accent-600' : 'text-base-500 hover:text-accent-500'"
@click="duration = 'monthly'"
type="button"
:aria-pressed="duration === 'monthly'"
>
Monthly
</button>
<!-- Annual Pricing Button -->
<button
id="annual-pricing-button"
class="relative flex items-center justify-center w-full px-2 h-6 text-xs font-medium focus:outline-none transition-colors duration-300 z-10"
:class="duration === 'annual' ? 'text-accent-600' : 'text-base-500 hover:text-accent-500'"
@click="duration = 'annual'"
type="button"
:aria-pressed="duration === 'annual'"
>
Annual
</button>
</div>
</div>
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 mt-12 mx-auto"
>
<!-- Tier one -->
<div
class="flex flex-col h-full p-1 lg:py-1 rounded-3xl bg-base-50 shadow"
>
<div>
<div
class="flex flex-col gap-4 p-8 bg-white rounded-[1.3rem] h-full shadow"
>
<div class="flex items-start justify-between w-full">
<div>
<h3
class="text-lg leading-normal sm:text-xl md:text-2xl font-medium text-base-900"
>
Core
</h3>
<p class="text-base leading-normal font-medium text-base-500">
For individuals
</p>
</div>
</div>
<p class="text-base leading-normal font-medium text-base-500">
This subscription tier caters to individuals and hobbyists seeking
features.
</p>
</div>
</div>
<div class="p-8">
<p
class="font-semibold flex lg:text-3xl items-baseline text-2xl tracking-tighter text-base-900"
>
<span
data-monthly="$29.00"
data-annual="$19.00"
x-text="$el.dataset[duration]"
></span>
<span
class="text-sm font-normal font-sans tracking-normal text-base-500"
>
<span x-show="duration === 'monthly'">/month</span>
<span x-show="duration === 'annual'" style="display: none"
>/annually</span
>
</span>
</p>
<div class="w-full mt-4">
<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 w-full"
>
Get Started
</button>
</div>
</div>
</div>
<!-- Tier two -->
<div
class="flex flex-col h-full p-1 lg:py-1 rounded-3xl bg-accent-700 shadow"
>
<div>
<div
class="flex flex-col gap-4 p-8 bg-white/10 rounded-[1.3rem] h-full shadow"
>
<div class="flex items-start justify-between w-full">
<div>
<h3
class="text-lg leading-normal sm:text-xl md:text-2xl font-medium text-white"
>
Momentum
</h3>
<p class="text-base leading-normal font-medium text-base-200">
For startups
</p>
</div>
<span
class="inline-flex items-center font-medium relative text-base-700 bg-base-50 px-2.5 py-1 text-xs rounded-md"
>
Popular
</span>
</div>
<p class="text-base leading-normal font-medium text-base-200">
Tailored for expanding businesses, this tier offers advanced tools
and analytics.
</p>
</div>
</div>
<div class="p-8">
<p
class="font-semibold flex lg:text-3xl items-baseline text-2xl tracking-tighter text-white"
>
<span
data-monthly="$49.00"
data-annual="$39.00"
x-text="$el.dataset[duration]"
></span>
<span
class="text-sm font-normal font-sans tracking-normal text-accent-100"
>
<span x-show="duration === 'monthly'">/month</span>
<span x-show="duration === 'annual'" style="display: none"
>/annually</span
>
</span>
</p>
<div class="w-full mt-4">
<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 w-full"
>
Get Started
</button>
</div>
</div>
</div>
<!-- Tier three -->
<div
class="flex flex-col h-full p-1 lg:py-1 rounded-3xl bg-base-50 shadow"
>
<div>
<div
class="flex flex-col gap-4 p-8 bg-white rounded-[1.3rem] h-full shadow"
>
<div class="flex items-start justify-between w-full">
<div>
<h3
class="text-lg leading-normal sm:text-xl md:text-2xl font-medium text-base-900"
>
Growth
</h3>
<p class="text-base leading-normal font-medium text-base-500">
For corporates
</p>
</div>
</div>
<p class="text-base leading-normal font-medium text-base-500">
Designed for established businesses, providing comprehensive
tools.
</p>
</div>
</div>
<div class="p-8">
<p
class="font-semibold flex lg:text-3xl items-baseline text-2xl tracking-tighter text-base-900"
>
<span
data-monthly="$99.00"
data-annual="$79.00"
x-text="$el.dataset[duration]"
></span>
<span
class="text-sm font-normal font-sans tracking-normal text-base-500"
>
<span x-show="duration === 'monthly'">/month</span>
<span x-show="duration === 'annual'" style="display: none"
>/annually</span
>
</span>
</p>
<div class="w-full mt-4">
<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 w-full"
>
Get Started
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Frequently Asked Questions section -->
<section>
<div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
<div>
<p class="text-sm leading-normal font-bold uppercase text-accent-600">
Tagline
</p>
<h2
class="text-xl leading-tight tracking-tight sm:text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
>
Frequently Asked Questions
</h2>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Everything you need to know about our platform.
</p>
</div>
<ul role="list" class="space-y-8 divide-y divide-base-900/10 mt-12">
<div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-5">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
>
How does end-to-end encryption work?
</h3>
</div>
<div class="mt-4 lg:col-span-7 lg:mt-0">
<p class="text-base leading-normal text-base-500 font-medium">
End-to-end encryption ensures that only the sender and recipient can
access the content of a message.
</p>
</div>
</div>
<div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-5">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
>
Can I access my encrypted data if I forget my encryption key?
</h3>
</div>
<div class="mt-4 lg:col-span-7 lg:mt-0">
<p class="text-base leading-normal text-base-500 font-medium">
No, forgetting or losing your encryption key means that your
encrypted data cannot be accessed.
</p>
</div>
</div>
<div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-5">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
>
Are there any limitations to the self-destructing messages feature?
</h3>
</div>
<div class="mt-4 lg:col-span-7 lg:mt-0">
<p class="text-base leading-normal text-base-500 font-medium">
Self-destructing messages are designed to automatically delete
themselves after a specific period or upon being read by the
recipient.
</p>
</div>
</div>
<div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-5">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
>
What happens if I enable two-factor authentication and lose my
device?
</h3>
</div>
<div class="mt-4 lg:col-span-7 lg:mt-0">
<p class="text-base leading-normal text-base-500 font-medium">
Losing your device doesn't automatically compromise your
account's security.
</p>
</div>
</div>
<div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-5">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
>
Is my personal information shared or sold to third parties?
</h3>
</div>
<div class="mt-4 lg:col-span-7 lg:mt-0">
<p class="text-base leading-normal text-base-500 font-medium">
No, we strictly adhere to a privacy-centric approach. Your personal
information is never shared, sold, or monetized. We prioritize your
privacy and ensure that your data remains confidential and only
accessible to you.
</p>
</div>
</div>
<!-- More questions... -->
</ul>
</div>
</section>
<!-- Footer section with links, contact info, and social media -->
<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-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
About
</a>
</li>
<li>
<a
class="text-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Mission
</a>
</li>
<li>
<a
class="text-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Leadership Team
</a>
</li>
<li>
<a
class="text-base 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-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Marketing
</a>
</li>
<li>
<a
class="text-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Analytics
</a>
</li>
<li>
<a
class="text-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Commerce
</a>
</li>
<li>
<a
class="text-base 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-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Documentation
</a>
</li>
<li>
<a
class="text-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Guides
</a>
</li>
<li>
<a
class="text-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Webinars
</a>
</li>
<li>
<a
class="text-base 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-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Pricing
</a>
</li>
<li>
<a
class="text-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
API Status
</a>
</li>
<li>
<a
class="text-base leading-normal hover:text-accent-500 font-medium text-base-500"
href="#_"
>
Live Chat
</a>
</li>
<li>
<a
class="text-base 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-base 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>
