No notes defined.
<div class="relative overflow-hidden bg-[#2e3141] bg-[url('/dist/images/bg.jpg')] bg-center-top md:bg-[center_top_-10rem] bg-cover">
<div class="absolute inset-0 bg-gray-900 bg-opacity-80"></div>
<header class="relative" x-data="{ open: false }">
<div class="pt-6">
<nav class="relative max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6" aria-label="Global">
<div class="flex items-center flex-1">
<div class="flex items-center justify-between w-full md:w-auto">
<a href="">
<span class="sr-only">Workflow</span>
<img src="/dist/images/webmarks_horizontal_white_small.png" srcset="/dist/images/webmarks_horizontal_white_small.png 1x, /dist/images/[email protected] 2x" alt="Webmarks Design & Marketing" class="w-56">
</a>
</div>
</div>
<div class="hidden sm:flex sm:items-center sm:space-x-4">
<span x-on:click="openModal = true">
<button class="inline-flex items-center justify-center px-5 py-2 text-base font-medium rounded-md text-white bg-gradient-to-r from-red-500 to-orange-500 hover:bg-gradient-to-l hover:from-blue-500 hover:to-green-600 transition" onclick="plausible('Schedule a call', {props: {page: '', location: 'header', lang: ''}})">
Let's chat
</button>
</span>
</div>
<div class="pl-4 -mr-2 flex items-center">
<button type="button" class="bg-gray-800 rounded-md p-2 inline-flex items-center justify-center text-gray-300 hover:text-gray-200 hover:bg-gray-900 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white" aria-expanded="false" x-on:click="open = true">
<span class="sr-only">Open main menu</span>
<!-- Heroicon name: outline/menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</nav>
</div>
<div x-dialog x-model="open" style="display: none" class="fixed inset-0 z-10 overflow-hidden">
<!-- Slideover -->
<!-- Overlay -->
<div x-dialog:overlay x-transition.opacity class="fixed inset-0 bg-black bg-opacity-50"></div>
<!-- Panel -->
<div class="fixed inset-y-0 right-0 w-full max-w-xs">
<div x-dialog:panel x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="h-full w-full">
<div class="flex h-full flex-col justify-between overflow-y-auto bg-gradient-to-b from-gray-800 to-gray-900 shadow-lg">
<!-- Close Button -->
<div class="absolute top-0 right-0 pt-4 pr-4">
<button type="button" @click="$dialog.close()" class="p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-600">
<span class="sr-only">Close menu</span>
<!-- Heroicon name: outline/x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Body -->
<div class="p-8">
<div class="pt-12 space-y-2">
<a class="block px-4 py-2 rounded-md text-lg font-medium text-gray-100 hover:bg-gray-700" href="">
Our Work
</a>
<a class="block px-4 py-2 rounded-md text-lg font-medium text-gray-100 hover:bg-gray-700" href="">
Our Process
</a>
<a class="block px-4 py-2 rounded-md text-lg font-medium text-gray-100 hover:bg-gray-700" href="">
About
</a>
<a class="block px-4 py-2 rounded-md text-lg font-medium text-gray-100 hover:bg-gray-700" href="">
Contact
</a>
</div>
<div class="mt-8 flex flex-col justify-center">
<div class="inline-flex">
<span x-on:click="openModal = true">
<button class="inline-flex items-center justify-center px-5 py-3 text-base font-medium rounded-md text-white bg-gradient-to-r from-red-500 to-orange-500 hover:bg-gradient-to-l hover:from-blue-500 hover:to-green-600 transition" onclick="plausible('Schedule a call', {props: {page: '', location: 'navigation', lang: ''}})">
Schedule a call
</button>
</span>
</div>
</div>
<div class="mt-12 mb-2 border border-gray-700"></div>
<div class="py-2">
<a href="" class="group flex items-center px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700">
<div class="rounded-full bg-gray-300 h-2 w-2"></div>
<div class="ml-3">
English
</div>
</a>
<a href="" class="group flex items-center px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700">
<div class="rounded-full bg-transparent h-2 w-2 group-hover:bg-gray-100 transition"></div>
<div class="ml-3">
Français
</div>
</a>
</div>
</div>
<div class="mb-12 px-2 py-4">
<p class="text-center text-gray-300 text-lg italic font-serif">
<a href="/fr/">
Nous parlons français!
</a>
</p>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="relative lg:py-12 lg:overflow-hidden">
<div class="relative mx-auto max-w-7xl lg:px-8">
<div class=" lg:gap-8">
<div class="col-span-2 mx-auto max-w-md px-4 sm:max-w-5xl sm:px-6 sm:text-center">
<div class="py-24 text-center">
<h1 class="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-5xl lg:mt-6 xl:text-6xl">
<span class="block">
We build and maintain
</span>
<span class="block text-gradient bg-gradient-to-r from-red-600 via-amber-400 to-green-600">
custom websites that perform.
</span>
</h1>
<p class="max-w-3xl mx-auto mt-8 text-lg text-gray-300 sm:mt-8 sm:text-xl lg:text-xl xl:text-xl">
You want a beautiful website you can be proud of, but how do you avoid a frustrating experience when maintaining it long after it is launched?
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div class="relative overflow-hidden bg-[#2e3141] bg-[url('/dist/images/bg.jpg')] bg-center-top md:bg-[center_top_-10rem] bg-cover">
<div class="absolute inset-0 bg-gray-900 bg-opacity-80"></div>
{{> @webmarks-site-header }}
<main>
<div class="relative lg:py-12 lg:overflow-hidden">
<div class="relative mx-auto max-w-7xl lg:px-8">
<div class=" lg:gap-8">
<div class="col-span-2 mx-auto max-w-md px-4 sm:max-w-5xl sm:px-6 sm:text-center">
<div class="py-24 text-center">
<h1 class="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-5xl lg:mt-6 xl:text-6xl">
<span class="block">
We build and maintain
</span>
<span class="block text-gradient bg-gradient-to-r from-red-600 via-amber-400 to-green-600">
custom websites that perform.
</span>
</h1>
<p class="max-w-3xl mx-auto mt-8 text-lg text-gray-300 sm:mt-8 sm:text-xl lg:text-xl xl:text-xl">
You want a beautiful website you can be proud of, but how do you avoid a frustrating experience when maintaining it long after it is launched?
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
/* No context defined. */