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="bg-gray-50 text-center lg:text-left lg:bg-transparent mb-6 rounded relative max-w-7xl mx-auto pt-2 pb-16 lg:py-16 px-4 sm:px-6 lg:px-8">
<div class="hidden lg:block bg-gray-50 absolute top-0 bottom-0 left-3/4 w-screen"></div>
<div class="mt-8 lg:grid lg:grid-cols-3 lg:gap-8">
<div class="relative lg:row-start-1 lg:col-start-3">
<svg class="hidden lg:block absolute top-0 right-0 -mt-20 -mr-20" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
<defs>
<pattern id="de316486-4a29-4312-bdfc-fbce2132a2c1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor"></rect>
</pattern>
</defs>
<rect width="404" height="384" fill="url(#de316486-4a29-4312-bdfc-fbce2132a2c1)"></rect>
</svg>
<div class="relative text-base mx-auto max-w-prose lg:max-w-none">
<figure>
<img class="mx-auto lg:ml-0 lg:mr-auto rounded-full shadow-lg object-cover object-center h-56 w-56" src="/dist/images/Dany-profile-photo-Aug2016-2.png" alt="Hello, Bonjour, Grüezi!" width="300" height="300">
</figure>
</div>
</div>
<div class="mt-8 lg:mt-0 lg:col-span-2">
<div class="mx-auto lg:max-w-none lg:row-start-1 lg:col-start-1 mt-6 mb-12 lg:mb-20 prose prose-gray prose-lg text-gray-400 mx-auto">
<h2 class="font-extrabold pb-4 border-b-4 border-dotted lg:border-transparent lg:border-none">
Hello, Bonjour, Grüezi!
</h2>
<div class="text-left prose prose-lg text-gray-500">
<h3 class="text-gray-600">
Updating your website shouldn't be a nightmare.
</h3>
<p>My name is Dany and I'm a friendly Swiss Canadian who loves to <strong class="text-gray-600">bring peace of mind</strong> to website clients.</p>
<p>I start with understanding what isn’t working with your current website and will work on a plan to <strong class="text-gray-600">make your website a joy to use</strong> for both your visitors and content editors.</p>
<p>I know you want a beautiful new website, but really you deserve <strong class="text-gray-600">a great experience long after your website is launched</strong>.</p>
</div>
</div>
</div>
</div>
</div>
<div class="relative bg-white py-16 sm:py-24">
<div class="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
<h2 class="mt-2 text-3xl font-extrabold tracking-tight text-gray-800 sm:text-4xl">
Some of our work
</h2>
<p class="mx-auto mt-5 max-w-prose text-xl text-gray-500">
We've helped over 50 small businesses and nonprofit clients across Western Canada rebuild their web presence
to better engage users and achieve their goals.
</p>
<div class="mt-2 md:mt-6">
<!-- {% include '_includes/content/images/carousel-homepage.twig' %}-->
<img src="/dist/images/carousel-image.png">
</div>
<div class="mt-6 text-center">
<div class="inline-flex rounded-md shadow">
<a href="" 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">
Explore our recent projects
</a>
</div>
</div>
</div>
</div>
<div class="py-16 bg-gray-700 overflow-hidden lg:py-24">
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<svg class="hidden lg:block absolute left-full transform -translate-x-1/2 -translate-y-1/4" width="404" height="784" fill="none" viewBox="0 0 404 784" aria-hidden="true">
<defs>
<pattern id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" class="text-gray-600" fill="currentColor"></rect>
</pattern>
</defs>
<rect width="404" height="784" fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)"></rect>
</svg>
<div class="relative">
<h2 class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-100 sm:text-4xl">
Why work with us?
</h2>
<p class="mt-4 max-w-3xl mx-auto text-center text-xl text-gray-300">
We specialize in building easy to use and manage websites for small-medium sized businesses and
non-profits.
</p>
</div>
<dl class="mt-12 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12">
<div class="relative">
<dt>
<!-- Heroicon name: outline/check -->
<svg class="absolute h-6 w-6 text-green-400" 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="M5 13l4 4L19 7"></path>
</svg>
<p class="ml-9 text-lg leading-6 font-medium text-gray-100">
Building websites for over 10 years
</p>
</dt>
<dd class="mt-2 ml-9 text-base text-gray-400 links-gray">
Are you looking for a web designer/developer with a solid track record and experience? We've been building and
maintaining websites well over 10 years.
</dd>
</div>
<div class="relative">
<dt>
<!-- Heroicon name: outline/check -->
<svg class="absolute h-6 w-6 text-green-400" 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="M5 13l4 4L19 7"></path>
</svg>
<p class="ml-9 text-lg leading-6 font-medium text-gray-100">
Understand your business and goals
</p>
</dt>
<dd class="mt-2 ml-9 text-base text-gray-400 links-gray">
With a background in hospitality management, it helps us better understand your perspective and needs as a
small business owner, non-profit manager or marketing specialist.
</dd>
</div>
<div class="relative">
<dt>
<!-- Heroicon name: outline/check -->
<svg class="absolute h-6 w-6 text-green-400" 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="M5 13l4 4L19 7"></path>
</svg>
<p class="ml-9 text-lg leading-6 font-medium text-gray-100">
We work well with others
</p>
</dt>
<dd class="mt-2 ml-9 text-base text-gray-400 links-gray">
If you have your own designer, strategist or writer we can work with them and build your site together.
</dd>
</div>
<div class="relative">
<dt>
<!-- Heroicon name: outline/check -->
<svg class="absolute h-6 w-6 text-green-400" 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="M5 13l4 4L19 7"></path>
</svg>
<p class="ml-9 text-lg leading-6 font-medium text-gray-100">
We are here for the long run
</p>
</dt>
<dd class="mt-2 ml-9 text-base text-gray-400 links-gray">
Do you want to work with someone who will continue to improve your website after it is launched? We are here
to continue maintain your website and provide support when needed.
</dd>
</div>
<div class="relative">
<dt>
<!-- Heroicon name: outline/check -->
<svg class="absolute h-6 w-6 text-green-400" 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="M5 13l4 4L19 7"></path>
</svg>
<p class="ml-9 text-lg leading-6 font-medium text-gray-100">
Website support and maintenance
</p>
</dt>
<dd class="mt-2 ml-9 text-base text-gray-400 links-gray">
We’re focused on keeping your website running as great as the day it launched. Our maintenance plans include:
CMS & Plugin updates, Uptime monitoring, Backups, Server Software Updates.
</dd>
</div>
<div class="relative">
<dt>
<!-- Heroicon name: outline/check -->
<svg class="absolute h-6 w-6 text-green-400" 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="M5 13l4 4L19 7"></path>
</svg>
<p class="ml-9 text-lg leading-6 font-medium text-gray-100">
CMS migrations
</p>
</dt>
<dd class="mt-2 ml-9 text-base text-gray-400 links-gray">
<p>Are you open to discover content management platforms that are more flexible and easier to use than what
you currently use on your website? We use <a href="https://craftcms.com/" target="_blank" rel="noopener">Craft
CMS</a> and <a href="https://statamic.com/" target="_blank" rel="noopener">Statamic</a>, two outstanding
platforms with a large developer community.</p>
</dd>
</div>
<div class="relative">
<dt>
<!-- Heroicon name: outline/check -->
<svg class="absolute h-6 w-6 text-green-400" 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="M5 13l4 4L19 7"></path>
</svg>
<p class="ml-9 text-lg leading-6 font-medium text-gray-100">
Domain, DNS, website hosting
</p>
</dt>
<dd class="mt-2 ml-9 text-base text-gray-400 links-gray">
<p>We take care of the nerdy stuff so you can focus on your audience and customers. We manage all technical
aspect like domain, hosting, etc. ensure we use best of class providers and will help you setting up third
party service providers like email.</p>
</dd>
</div>
<div class="relative">
<dt>
<!-- Heroicon name: outline/check -->
<svg class="absolute h-6 w-6 text-green-400" 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="M5 13l4 4L19 7"></path>
</svg>
<p class="ml-9 text-lg leading-6 font-medium text-gray-100">
We understand that relationships aren't forever
</p>
</dt>
<dd class="mt-2 ml-9 text-base text-gray-400 links-gray">
<p>Most of our clients have been working with us for many years, but we understand if a client decides to
leave us for whatever reason. In that case, our goal is to assist you with a smooth transition to your new
service provider.</p>
</dd>
</div>
</dl>
</div>
</div>
<section class="py-12 bg-gray-50 overflow-hidden md:py-20 lg:py-24">
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="mt-2 text-3xl font-extrabold tracking-tight text-gray-800 sm:text-4xl text-center">
What our clients say
</h2>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>Just some feedback on Dany...this guy rocks! Totally competent, thorough, excellent quality, fair pricing.
I have absolutely been appreciating working with him.</p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
<img class="mx-auto h-12 w-12 rounded-full" src="/dist/images/vaughn-penner_2022-08-05-180503_rygn.jpeg" alt="Vaughn penner" width="80" height="80">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Vaughn Penner
</div>
<svg class="hidden md:block mx-1 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M11 0h3L9 20H6l5-20z"></path>
</svg>
<div class="text-base font-medium text-gray-500">
<a class="border-b border-transparent border-gray-300 hover:text-gray-800 hover:border-gray-400 hover:border-solid" href="https://independentcropinputs.com/" target="_blank" rel="noopener">
Independent Crop Inputs Inc.
</a>
</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>Unlike other web design companies I have worked with, Dany takes the time to comprehensively understand the
client's business and the goals of the project. His attention to detail, future-forward thinking,
flexibility, and creative approach lead to a beautiful, high-performing representation of the business
online.</p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
<img class="mx-auto h-12 w-12 rounded-full" src="/dist/images/christine-malfair.png" alt="Christine malfair" width="80" height="80">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Christine Malfair
</div>
<svg class="hidden md:block mx-1 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M11 0h3L9 20H6l5-20z"></path>
</svg>
<div class="text-base font-medium text-gray-500">
<a class="border-b border-transparent border-gray-300 hover:text-gray-800 hover:border-gray-400 hover:border-solid" href="https://malfairmarketing.com/" target="_blank" rel="noopener">
Malfair Marketing - Hotel Marketing Services
</a>
</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>We are getting tons of traffic from google and the website so I can't even begin to thank you. Whatever you
are doing is amazing and working so well. Almost too well! I'm overwhelmed with the amount of work.</p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
<img class="mx-auto h-12 w-12 rounded-full" src="/dist/images/shelly-shaw.jpeg" alt="Shelly shaw" width="80" height="80">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Shelly Shaw
</div>
<svg class="hidden md:block mx-1 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M11 0h3L9 20H6l5-20z"></path>
</svg>
<div class="text-base font-medium text-gray-500">
<a class="border-b border-transparent border-gray-300 hover:text-gray-800 hover:border-gray-400 hover:border-solid" href="https://shawaccountants.ca/" target="_blank" rel="noopener">
Shaw & Associates Chartered Accountants
</a>
</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>Dany delivered on time and on budget, with no surprises. He was very professional and easy to work with. We
are extremely proud of the Lethbridge LIP website and recommend Webmarks without hesitation.</p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
<img class="mx-auto h-12 w-12 rounded-full" src="/dist/images/laura-branner.jpeg" alt="Laura branner" width="80" height="80">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Laura Branner
</div>
<svg class="hidden md:block mx-1 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M11 0h3L9 20H6l5-20z"></path>
</svg>
<div class="text-base font-medium text-gray-500">
<a class="border-b border-transparent border-gray-300 hover:text-gray-800 hover:border-gray-400 hover:border-solid" href="https://lethbridgeimmigration.ca/" target="_blank" rel="noopener">
Lethbridge Local Immigration Partnership
</a>
</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>Lethbridge Therapeutic Riding Association recently updated our website. We wanted to simplify the viewer's
use of the site, improve the ability to recognize our donors and sponsors, increase the integration of
Cognito Forms, and more easily adapt the site to changes in our programs and fundraising. Dany quickly
understood what we were trying to do with the update and was very responsive to our needs. We now have in
place an excellent updated website that is much more than I had hoped for or expected.</p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Steve Dormaar
</div>
<svg class="hidden md:block mx-1 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M11 0h3L9 20H6l5-20z"></path>
</svg>
<div class="text-base font-medium text-gray-500">
<a class="border-b border-transparent border-gray-300 hover:text-gray-800 hover:border-gray-400 hover:border-solid" href="https://ltra.ca/" target="_blank" rel="noopener">
Lethbridge Therapeutic Riding Association
</a>
</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>Working with Dany at Webmarks has been a great learning experience! He is well organized, efficient and
timely with the project and my requests/inquiries. The overall experience was a wonderful learning
opportunity, the website is phenomenal and I have received many compliments on it.</p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Trinidy Schmidt
</div>
<svg class="hidden md:block mx-1 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M11 0h3L9 20H6l5-20z"></path>
</svg>
<div class="text-base font-medium text-gray-500">
<a class="border-b border-transparent border-gray-300 hover:text-gray-800 hover:border-gray-400 hover:border-solid" href="https://explorecountyofnorthernlights.com/" target="_blank" rel="noopener">
County of Northern Lights
</a>
</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>I had the pleasure of working with Dany at Webmarks Design & Marketing to develop a website for my
business. He is very efficient with his time, meets the needs of the client on a timely basis and creates
leading edge websites. <br></p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
<img class="mx-auto h-12 w-12 rounded-full" src="/dist/images/kim-titchener_2022-08-05-180543_ukkw.jpeg" alt="Kim titchener" width="80" height="80">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Kim Titchener
</div>
<svg class="hidden md:block mx-1 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M11 0h3L9 20H6l5-20z"></path>
</svg>
<div class="text-base font-medium text-gray-500">
<a class="border-b border-transparent border-gray-300 hover:text-gray-800 hover:border-gray-400 hover:border-solid" href="https://bearsafety.com/" target="_blank" rel="noopener">
Bear Safety & More Inc.
</a>
</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>From our very first meeting with Webmarks, Dany understood what we ourselves were having trouble
articulating, took our vision, and created the ActiveLethbridge.ca website. It has been a pleasure doing
business with Webmarks Design and Marketing. I have no hesitation in recommending that others find out what
Dany can do for them.<br></p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Carol Thibert
</div>
<svg class="hidden md:block mx-1 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M11 0h3L9 20H6l5-20z"></path>
</svg>
<div class="text-base font-medium text-gray-500">
<a class="border-b border-transparent border-gray-300 hover:text-gray-800 hover:border-gray-400 hover:border-solid" href="https://activelethbridge.ca/" target="_blank" rel="noopener">
Active Lethbridge
</a>
</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>I was surprised when I first spoke with Dany because was used to working with big agency people I kept
waiting for 'the sell', but it never came. a It was simply a pleasant, genuine conversation. I was also
expecting him to act like he knew it all and be intimidating nope! In fact, he's a mild mannered, gently
spoken guy with expert technical ability, a love of beautiful design, and a keen appetite for learning and
expansion.</p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
<img class="mx-auto h-12 w-12 rounded-full" src="/dist/images/jess-ritchie.jpeg" alt="Jess ritchie" width="80" height="80">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Jess Ritchie
</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>I can highly recommend Dany and his company. He is a leader in online marketing, positioning, search engine
optimization and great web design. Dany is practical, he will give you honest advice and you will be
thrilled with the results. If you are looking for that wow factor that will showcase your business, choose
Webmarks.</p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Donna Trautman
</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div class="flex justify-center gap-x-2 mt-12">
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
<div class="h-1 w-1 bg-gray-300 rounded-full"></div>
</div>
<div class="relative mb-12">
<blockquote class="mt-10">
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
<p>Dany is a highly trustworthy and professional website developer. He is very thorough and nothing is
overlooked. Projects are put together the correct way and in a timely manner. I recommend Dany to assist in
anything web related... large or small.</p>
</div>
<footer class="mt-8">
<div class="md:flex md:items-center md:justify-center">
<div class="md:flex-shrink-0">
</div>
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
<div class="text-base font-medium text-gray-900">
Denver Brewin
</div>
</div>
</div>
</footer>
</blockquote>
</div>
</div>
</section>
<div class="relative overflow-hidden bg-[#2e3141] bg-[url('/dist/images/bg.jpg')] bg-center bg-cover">
<div class="absolute inset-0 bg-gray-900 bg-opacity-80"></div>
<div class="relative max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-gray-100 sm:text-4xl">
<span class="block">Work with us</span>
</h2>
<div class="mt-4 text-lg leading-6 text-gray-300">
<p>Do you want a beautiful and easy to manage website that is built to your specific needs?<br><br></p>
</div>
<div class="mt-8 flex flex-col sm:flex-row justify-center items-center gap-3">
<button x-on:click="openModal = true" class="block sm:inline-flex w-full sm:w-auto 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: 'Homepage', location: 'footer', lang: 'en-CA'}})">
Schedule a call
</button>
<a href="http://webmarks.test/contact" class="block sm:inline-flex w-full sm:w-auto items-center justify-center px-5 py-3 text-base font-medium rounded-md text-gray-700 bg-gray-100 hover:text-white hover:bg-gradient-to-r hover:from-gray-600 hover:to-gray-500 transition">
Send us a message
</a>
</div>
</div>
<div class="relative pt-8 pb-12 px-6 text-center">
<div class="relative mt-2 max-w-2xl mx-auto text-center text-gray-300 flex flex-col justify-between">
<div>
<img class="mx-auto" src="/dist/images/webmarks_logo.png" srcset="/dist/images/webmarks_logo.png 1x, /dist/images/[email protected] 2x" width="300" height="160" alt="Webmarks logo">
</div>
<div class="flex justify-center gap-x-2 mx-auto text-lg font-semibold text-gray-300">
Lethbridge, Alberta
<svg class="h-6 w-6 text-red-500 fill-current" viewBox="0 0 465.9 512" xmlns="http://www.w3.org/2000/svg">
<path d="M360.8 351.7c2.5-2.5 105.2-92.4 105.2-92.4l-17.5-7.5c-10-4.9-7.4-11.5-5-17.4 2.4-7.6 20.1-67.3 20.1-67.3s-47.7 10-57.7 12.5c-7.5 2.4-10-2.5-12.5-7.5s-15-32.4-15-32.4 -52.6 59.9-55.1 62.3c-10 7.5-20.1 0-17.6-10 0-10 27.6-129.6 27.6-129.6s-30.1 17.4-40.1 22.4c-7.5 5-12.6 5-17.6-5 -5.1-7.5-42.7-79.8-42.7-79.8s-37.5 72.3-42.5 79.8c-5 10-10 10-17.6 5 -10-5-40.1-22.4-40.1-22.4s27.6 119.6 27.6 129.6c2.5 10-7.5 17.5-17.6 10 -2.5-2.5-55.1-62.3-55.1-62.3s-12.5 27.3-15 32.3c-2.5 5-5 9.9-12.5 7.5C50 177 2.4 167 2.4 167s17.6 59.7 20.1 67.3c2.4 6 5 12.5-5 17.4l-17.5 7.6s102.6 89.9 105.2 92.4c5.1 5 10 7.5 5.1 22.5 -5.1 15-10.1 35.1-10.1 35.1s95.2-20.1 105.3-22.6c8.7-.9 18.3 2.5 18.3 12.5 0 10.1-5.8 112.8-5.8 112.8h30s-5.8-102.7-5.8-112.8c0-10 9.5-13.4 18.4-12.5 10 2.5 105.2 22.6 105.2 22.6s-5-20.1-10-35.1 0-17.5 5-22.5Z"></path>
</svg>
</div>
<p class="mt-8 leading-relaxed mx-auto text-lg text-gray-400">
Established in 2010, we specialize in website strategy, content planning and custom website design &
development for small businesses and non-profits in Western Canada.
</p>
</div>
<ul class="mt-12 mb-0 flex flex-col gap-4 text-gray-500">
<li>
© 2022 Webmarks Design & Marketing
Ltd. All rights reserved.
</li>
<li>
<a href="http://webmarks.test/privacy" class="text-gray-400 hover:text-white transition font-semibold border-b border-dashed border-gray-500 hover:border-solid hover:border-white">
Privacy Policy
</a>
</li>
</ul>
</div>
<div class="h-2 bg-gradient-to-r from-red-600 via-amber-400 to-green-600"></div>
</div>
{{> @webmarks-homepage-hero }}
{{> @webmarks-homepage-hello }}
{{> @webmarks-homepage-portfolio }}
{{> @webmarks-homepage-why-us }}
{{> @webmarks-testimonials }}
{{> @webmarks-footer-section }}
/* No context defined. */