No notes defined.
<div>
<header class="relative z-10">
<div class="header fixed right-0 left-0">
<div class="relative text-white mx-auto" style="max-width: 2000px;">
<div class="bg-gradient-to-b from-black to-transparent opacity-70 absolute inset-0"></div>
<div class="flex relative">
<div class="w-1/6 flex flex-col sm:flex-row sm:justify-start sm:items-start" x-data="{ open: false }">
<div class="m-2 sm:m-4 md:m-6 lg:m-8">
<button class="flex flex-col items-center opacity-75 hover:opacity-100" @click="open = true">
<svg class="w-12 h-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M9 4v1H5v22h22V5h-4V4h-2v1H11V4zM7 7h2v1h2V7h10v1h2V7h2v2H7zm0 4h18v14H7zm6 2v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 17v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 21v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2z"></path>
</svg>
<p class="uppercase text-xs pt-1">Book</p>
</button>
<div class="absolute top-0 left-0 z-20 bg-gray-800 p-2 sm:w-72 sm:ml-6 sm:mt-6" style="background: hsl(284, 51%, 22%)" x-cloak x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90 -translate-y-6 -translate-x-6" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90 -translate-y-6 -translate-x-6">
<button @click="open = false" class="absolute group top-0 right-0" aria-label="Close">
<svg class="h-6 w-6 m-2 fill-current text-gray-500 group-hover:text-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg> </button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.0/css/pikaday.min.css" integrity="sha512-yFCbJ3qagxwPUSHYXjtyRbuo5Fhehd+MCLMALPAUar02PsqX3LVI5RlwXygrBTyIqizspUEMtp0XWEUwb/huUQ==" crossorigin="anonymous" />
<form id="booking-widget" class="max-w-5xl mx-auto px-4 pb-0" style="" method="get" action="https://booking.ihotelier.com/istay/istay.jsp" target="_blank" rel="noopener">
<input type="hidden" name="HotelID" value="12571" />
<input type="hidden" name="LanguageID" value="1" />
<input type="hidden" name="Rooms" value="1" />
<input type="hidden" id="DateIn" name="DateIn">
<input type="hidden" id="DateOut" name="DateOut">
<div class="flex flex-wrap content-between py-4 -mx-2">
<div class="w-full mb-4 px-2 ie-hide">
<label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="widget-ArrivalDate">
Arrival
</label>
<div class="relative">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 py-4 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="widget-ArrivalDate" name="arrival" type="text" placeholder="Arrival Date" autocomplete="off" readonly="">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
<svg class="h-4 w-5 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 3h-1v2h-3V3H7v2H4V3H3c-1.101 0-2 .9-2 2v12c0 1.1.899 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V9h14v8zM6.5 1h-2v3.5h2V1zm9 0h-2v3.5h2V1z"></path>
</svg>
</div>
</div>
</div>
<div class="w-full mb-4 px-2 ie-hide">
<label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="widget-DepartureDate">
Departure
</label>
<div class="relative">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 py-4 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="widget-DepartureDate" name="departure" type="text" placeholder="Departure Date" autocomplete="off" readonly="">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
<svg class="h-4 w-5 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 3h-1v2h-3V3H7v2H4V3H3c-1.101 0-2 .9-2 2v12c0 1.1.899 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V9h14v8zM6.5 1h-2v3.5h2V1zm9 0h-2v3.5h2V1z"></path>
</svg>
</div>
</div>
</div>
<div class="w-1/2 mb-4 px-2">
<label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="Adults">
Adults
</label>
<div class="relative text-gray-500">
<select id="Adults" class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-4 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="Adults">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-brown-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
</svg>
</div>
</div>
</div>
<div class="w-1/2 mb-4 px-2">
<label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="Children">
Children
</label>
<div class="relative text-gray-500">
<select id="Children" class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-4 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="Children">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-brown-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
</svg>
</div>
</div>
</div>
<div class="w-full px-2 flex flex-col justify-end">
<button type="submit" class="block mt-2 py-4 px-4 border border-white hover:bg-teal-600 focus:bg-teal-600 text-white uppercase" onclick="ga('send','event','Outgoing','Booking System')">
Search Availability
</button>
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.4/dayjs.min.js" integrity="sha512-XZSHSEFj4QeE0G4pwy4tToyAhF2VXoEcF9CP0t1PSZMP2XHhEEB9PjM9knsdzcEKbi6GRMazdt8tJadz0JTKIQ==" crossOrigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.0/pikaday.min.js" integrity="sha512-AWC8WaJpos1L8xD++XDtqY3znmqhqDY/o4KZ3wo7kmt1Hx6YjP4ZqPnYDrLg1ymG6iidGzq/UKHS/MxBwVAlwQ==" crossorigin="anonymous"></script>
<script>
/*
Javascript for booking widget
- using Pikaday for date widget
- using Day.js for date manipulation
Based on the following assumptions:
- form method is POST
- convert display dates to submitted dates using YYYYMMDD
- submitted field names are:
- DateIn
- DateOut
- Adults
- Children
*/
// Date picker for arrival date.
// On select, set minDepartureDate + minNights for departure date widget
const minNights = 1;
const arrival = new Pikaday({
field: document.querySelector('#widget-ArrivalDate'),
format: 'YYYY-MM-DD',
minDate: new Date(dayjs().add(1, 'day')),
onSelect() {
let selectedDate = new Date(this.getDate());
const minDepartureDate = new Date(
selectedDate.getFullYear(),
selectedDate.getMonth(),
selectedDate.getDate() + minNights
);
depart.setMinDate(minDepartureDate);
// set depart calendar to selected date, important when not in same month
depart.gotoDate(selectedDate);
// format date for submission
return arrivalDateSubmitFormat = dayjs(this.getDate()).format('MM/DD/YYYY');
},
});
// Date picker for departure date.
// const departure_date = '';
const depart = new Pikaday({
field: document.querySelector('#widget-DepartureDate'),
format: 'YYYY-MM-DD',
minDate: new Date(dayjs().add(1 + minNights, 'day')),
onSelect() {
const selectedDate = new Date(this.getDate());
const maxArrivalDate = new Date(
selectedDate.getFullYear(),
selectedDate.getMonth(),
selectedDate.getDate() - minNights
);
arrival.setMaxDate(maxArrivalDate);
// format date for submission
return departureDateSubmitFormat = dayjs(this.getDate()).format('MM/DD/YYYY');
},
});
// Date conversion before submission
const bookingWidget = document.querySelector('#booking-widget');
const arrivalDisplayField = document.querySelector('#widget-ArrivalDate')
const departureDisplayField = document.querySelector('#widget-DepartureDate')
const arrivalSubmitField = document.querySelector('#DateIn')
const departureSubmitField = document.querySelector('#DateOut')
if (bookingWidget) {
bookingWidget.addEventListener("submit", function(event) {
// set the value of hidden fields to dates reformatted for submission
arrivalSubmitField.value = arrivalDateSubmitFormat;
departureSubmitField.value = departureDateSubmitFormat;
// remove the name attribute or our arrival and departure display fields to avoid submitting
arrivalDisplayField.removeAttribute('name');
departureDisplayField.removeAttribute('name');
// to test values without submitting form
// event.preventDefault();
// console.log('arrivalSubmitField: ' + arrivalSubmitField.value);
// console.log('departureSubmitField: ' + departureSubmitField.value);
});
}
</script>
<script>
var myForm = document.getElementById('booking-widget');
addListener(myForm, 'submit', decorateForm);
function decorateForm(event) {
event = event || window.event; // Cross browser hoops.
var target = event.target || event.srcElement;
if (target && target.action) {
ga('linker:decorate', target);
}
}
// Cross browser way to listen for events.
function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
</script>
</div>
</div>
</div>
<div class="w-2/3 text-center">
<a href="" class="inline-block mx-auto md:m-2 lg:m-4">
<img src="/images/swr_logo_white.png" srcset="/images/swr/swr_logo_white.png 1x, /images/swr/[email protected] 2x" width="300" height="130" alt=" logo">
</a>
</div>
<div class="w-1/6 flex flex-col sm:flex-row sm:justify-end sm:items-start">
<button x-data @click="$dispatch('togglesearch')" class="hidden sm:flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100">
<svg class="w-12 h-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M19 3C13.488 3 9 7.488 9 13c0 2.395.84 4.59 2.25 6.313L3.281 27.28 4.72 28.72l7.968-7.969A9.922 9.922 0 0019 23c5.512 0 10-4.488 10-10S24.512 3 19 3zm0 2c4.43 0 8 3.57 8 8s-3.57 8-8 8-8-3.57-8-8 3.57-8 8-8z" />
</svg>
<p class="uppercase text-xs pt-1">search</p>
</button>
<button x-data @click="$dispatch('togglenav')" class="flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100">
<svg class="w-12 h-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M4 7v2h24V7zm0 8v2h24v-2zm0 8v2h24v-2z"></path>
</svg>
<p class="uppercase text-xs pt-1">menu</p>
</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script>
const showAnim = gsap.from('.header', {
yPercent: -100,
paused: true,
duration: 0.2
}).progress(1);
ScrollTrigger.create({
start: "top top",
end: 99999,
onUpdate: (self) => {
console.log(self.direction);
self.direction === -1 ? showAnim.play() : showAnim.reverse()
}
});
</script>
</header>
<div class="relative" style="background: rgb(2,0,36); background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,0.5) 100%, rgba(0,212,255,1) 100%);">
<div class="relative aspect-w-2 aspect-h-2 sm:aspect-w-3 sm:aspect-h-2 md:aspect-w-16 md:aspect-h-9 ie-min-600">
<picture>
<source media="(max-width: 640px)" srcset='https://picsum.photos/id/10/1200/1200'>
<source media="(max-width: 999px)" srcset='https://picsum.photos/id/10/1500/1000'>
<source media="(min-width: 1000px)" srcset='https://picsum.photos/id/10/2000/1200'>
<img class="absolute object-cover w-full h-full" src='https://picsum.photos/id/10/1200/1200' alt="alt text" loading="eager">
</picture>
<video class="object-cover w-full h-full" src="/images/swr/swr-540p.mp4" autoplay loop muted></video>
<div class="absolute inset-0 bg-black opacity-20"></div>
</div>
<div class="absolute inset-0 flex flex-col items-center justify-center slide-up" style="background: rgb(0,0,0,0.1);">
<div class="pt-12 max-w-4xl mx-auto text-center text-white leading-tight tracking-wide">
<p class="mb-4 text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-brisa px-2 leading-10">
Escape to Summerland
</p>
<p class="mb-4 sm:mb-8 text-lg sm:text-xl md:text-2xl uppercase font-semibold ">
Play, Relax & Savour
</p>
<button x-data @click="$dispatch('togglevideo')" class="group mt-6 flex text-white text-sm justify-center items-center mx-auto">
<svg class="fill-current text-white h-6 w-6 transform group-hover:scale-110 transition duration-300 opacity-75 group-hover:opacity-100 transition duration-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12,22c5.514,0,10-4.486,10-10c0-5.514-4.486-10-10-10S2,6.486,2,12C2,17.514,6.486,22,12,22z M10,7l6,5l-6,5V7z"></path>
</svg>
<span class="uppercase pl-2">Watch Full Video</span>
</button>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0">
<p class="hidden sm:block text-white text-center px-8 py-2 sm:py-4 text-sm sm:text-base opacity-75">Discover our
Waterfront Resort on a secluded stretch of Okanagan Lake shoreline
</p>
</div>
</div>
<div x-data="modalVideo()" @keydown.escape.window="showModal = false" x-init="$watch('showModal', toggleOverflow)">
<div x-show="showModal" x-cloak x-on:togglevideo.window="showModal = !showModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform" x-transition:enter-end="opacity-100 transform" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform" x-transition:leave-end="opacity-0 transform" class="fixed inset-0 bg-black z-50 flex justify-center items-center bg-opacity-90">
<button @click="showModal = false" class="absolute top-0 right-0 flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100 text-white" aria-label="Close" tabindex="-1">
<svg class="w-12 h-12 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M6.57 6.57c-5.205 5.205-5.205 13.643 0 18.849 5.205 5.2 13.643 5.2 18.849 0 5.2-5.21 5.2-13.65 0-18.849-5.21-5.21-13.65-5.205-18.849 0zm18.094 18.094c-4.79 4.78-12.56 4.78-17.341 0-4.79-4.79-4.79-12.56 0-17.341 4.78-4.79 12.56-4.79 17.341 0 4.78 4.78 4.78 12.56 0 17.341z" />
<path d="M10.722 9.96l-.76.75 5.27 5.27-5.253 5.253.75.75 5.253-5.253 5.253 5.253.75-.76-5.253-5.253 5.27-5.28-.76-.76-5.28 5.27z" />
</svg>
</button>
<div class="">
<p class="text-white">
full video here
</p>
</div>
</div>
</div>
<script>
function modalVideo() {
return {
showModal: false
}
}
</script>
<div class="bg-gray-150 content-section-bg-image" style="background-position: bottom -50px right 70px; background-size: 400px;">
<div class="flex flex-wrap uppercase py-4 sm:py-8 md:py-12 max-w-6xl mx-auto justify-center text-center text-base font-bold">
<div class="w-1/2 md:w-1/4 p-4">
<a class="group block h-full" href="">
<div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
<div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
<svg class="mr-2 mb-1 h-7 w-7 fill-current" xmlns="http://www.w3.org/2000/svg" version="1.0" width="24" height="24">
<g>
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
<path d="M1 22.5l1-1 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 1 1" />
<path d="M4.5 23l-4-8.5 9 3h14l-1.5 4" />
<path d="M6.5 16.5v-7H11l3 3h7.5M20.5 12.5l1 5" />
<path d="M9 9.5L11 4l5.5 2-2.5 6.5M10.176 6.26l5.422 2.086M14.5 1.5l1-1 2 2 2-2 2 2 2-2M21.117 15.5H14.5v-3M17.5 15.5v-3M6.5 12.5h4v2h-4" />
</g>
</g>
</svg>
</div>
<div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
Boat Rentals
</div>
</div>
</a>
</div>
<div class="w-1/2 md:w-1/4 p-4">
<a class="group block h-full" href="">
<div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
<div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
<svg class="mr-2 mb-1 h-7 w-7 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M15 3v5h2V3zM7.5 6.09l-1.41 1.4 3.53 3.56 1.43-1.44zm17 0l-3.57 3.53 1.43 1.43 3.53-3.57zM16 8.99c-3.86 0-7 3.14-7 7 0 3.85 3.14 7 7 7 3.85 0 7-3.15 7-7 0-3.86-3.15-7-7-7zm0 2c2.77 0 5 2.22 5 5 0 2.77-2.23 5-5 5-2.78 0-5-2.23-5-5 0-2.78 2.22-5 5-5zm-13 4v2h5v-2zm21 0v2h5v-2zM9.625 20.92l-3.54 3.56 1.4 1.4 3.56-3.54zm12.75 0l-1.44 1.43 3.56 3.53 1.4-1.41zM15 23.98v5h2v-5z" />
</svg>
</div>
<div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
Summer Programs
</div>
</div>
</a>
</div>
<div class="w-1/2 md:w-1/4 p-4">
<a class="group block h-full" href="">
<div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
<div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
<svg class="mr-3 mb-1 h-7 w-7 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M0 7c0 1.625 1.832 3 4 3 1.188 0 2.262-.418 3-1.059C7.738 9.582 8.813 10 10 10c1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 2.168 0 4-1.375 4-3h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.754 1-2 1-1.223 0-2-.703-2-1H6c0 .305-.754 1-2 1-1.223 0-2-.703-2-1zm0 8c0 1.625 1.832 3 4 3 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 2.168 0 4-1.375 4-3h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.754 1-2 1-1.223 0-2-.703-2-1H6c0 .305-.754 1-2 1-1.223 0-2-.703-2-1zm0 8c0 1.625 1.832 3 4 3 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 2.168 0 4-1.375 4-3h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.754 1-2 1-1.223 0-2-.703-2-1H6c0 .305-.754 1-2 1-1.223 0-2-.703-2-1z" />
</svg>
</div>
<div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
Swim & Soak
</div>
</div>
</a>
</div>
<div class="w-1/2 md:w-1/4 p-4">
<a class="group block h-full" href="">
<div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
<div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
<svg class="mr-2 mb-1 h-7 w-7 fill-current" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<path d="M14.51.43a.516.516 0 00-.5-.44H14c-.26 0-.47.19-.5.44l-.74 6.084c-.03.27-.25.476-.52.476s-.5-.21-.52-.5L10.98.42c-.04-.256-.25-.46-.52-.44a.5.5 0 00-.49.47L9.61 6.5a.521.521 0 01-1.04-.02L7.95.41a.504.504 0 00-.48-.45c-.23-.03-.47.15-.52.401L5.44 7.88c-.32 2.106.89 4.077 2.97 4.91l-.98 14.15c0 2.07 1.5 3 3 3 1.87 0 3-1.13 3-3.04l-.98-14.125c2.074-.84 3.28-2.81 2.97-4.92l-1-7.496zm-2.65 11.59c-.22.07-.37.28-.35.51l.99 14.46c0 1.346-.66 2-2 2-.97 0-2-.53-2.01-1.97l1-14.5a.508.508 0 00-.35-.51c-1.55-.5-2.965-1.92-2.67-3.93l.84-4.24.27 2.74c.06.782.72 1.39 1.51 1.39.78 0 1.44-.62 1.51-1.41l.03-.53.06.54c.06.78.72 1.39 1.513 1.39.78 0 1.44-.62 1.51-1.38l.25-2.15.47 3.59c.3 2.03-1.12 3.45-2.66 3.95zM24.31.09a.51.51 0 00-.46-.07c-.06.02-5.34 1.95-5.34 7.97 0 4.47 1.2 6.654 1.81 7.474l-.68.67c-.09.08-.14.19-.15.3L18.5 26.82c-.08.78.18 1.54.73 2.15.58.64 1.4 1.01 2.25 1.01 1.59 0 3-1.41 3-3V.48a.48.48 0 00-.22-.41zm-.79 26.9c0 1.02-.98 2-2 2-.57 0-1.13-.25-1.52-.69-.36-.4-.53-.89-.48-1.39l.97-10.209.87-.88c.09-.1.14-.23.14-.37a.533.533 0 00-.17-.36c-.02-.02-1.84-1.76-1.84-7.13 0-4.116 2.7-6.04 4-6.73v25.724z" />
</svg>
</div>
<div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
Resort Dining
</div>
</div>
</a>
</div>
</div>
</div>
<div class="relative bg-grapes flex flex-col sm:flex-row w-full">
<div class="absolute inset-0 bg-purple-950 opacity-100"></div>
<div class="relative w-full sm:w-2/3 flex flex-col justify-center ">
<div class="slide-up px-12 py-12 lg:pl-20 xl:pl-32 text-white">
<h2 class="font-heading tracking-widest uppercase text-3xl sm:text-4xl">
Some of life’s best stories <span class="font-heading-bold whitespace-nowrap">unfold here</span>
</h2>
<p class="mt-4 text-lg">
Amidst the beauty of vineyards and dramatic landscapes, the Summerland
Waterfront Resort & Spa is
set on a secluded stretch of Okanagan Lake shoreline, 15 minutes north of Penticton and 45
minutes south of Kelowna.
</p>
</div>
</div>
<div class="relative w-full sm:w-1/3">
<img class="img-clip-left h-72 w-full object-cover lg:w-full sm:h-full" src="/images/swr/temp/Summerland_O6A0423.jpg" alt="">
</div>
</div>
<div class="slide-up bg-gray-100 py-16 md:py-24 px-4">
<div class="max-w-4xl mx-auto">
<h2 class="font-heading tracking-widest uppercase text-4xl text-purple-950 text-center pb-2 border-b border-white">
Find your <span class="font-heading-bold whitespace-nowrap">Perfect Fit</span>
</h2>
<p class="mt-4 text-lg text-center">
Three sizes of suites, one that fits just right. A great night's sleep, fully outfitted gourmet
kitchens, space to put up your feet and relax - just a few things we think are important.
</p>
</div>
<div class="mt-8 max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-center gap-x-4 lg:gap-x-8 xl:gap-x-10 gap-y-8">
</div>
</div>
</div>
<footer>
<div class="bg-gray-400">
<div class="flex flex-col md:flex-row text-center md:text-left max-w-6xl mx-auto">
<div class="px-4 py-6 w-full md:w-1/4">
<i class="fab fa-internet-explorer text-4xl text-purple-900"></i>
<p class="uppercase font-medium py-2 text-purple-900">Love deals?</p>
<p class="text-white">Receive the latest info on deals, local events and more directly to your inbox.</p>
<div class="py-4">
<label class="sr-only" for="email">Enter your email</label>
<input class="h-12 border-b-2 py-2 px-3 w-full" placeholder="EMAIL" type="email" id="email">
</div>
<button class="uppercase px-4 py-2 border-white border font-normal text-white">submit</button>
</div>
<div class="px-4 py-6 w-full md:w-1/4">
<i class="far fa-comments text-4xl text-purple-900"></i>
<p class="py-2 uppercase font-medium text-purple-900">keep in touch</p>
<div class="text-white">
<p>13011 Lakwshore Dr. South, Summerland,</p>
<p>Birtish Columbia, Canada</p>
</div>
<div class="text-white pt-4">
<div flex>
<a href="tel:18774948111">1-877-494-8111</a>
<a class="pl-2" href="tel:12504948180">250-494-8180</a>
</div>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
<div class="px-4 py-6 w-full md:w-1/4">
<i class="fas fa-gift text-4xl text-purple-900"></i>
<p class="uppercase font-medium py-2 text-purple-900">give a getaway</p>
<p class="text-white">We like how you roll. Gift certificates are always an amazing idea.</p>
<a class="text-white underline" href="">Purchase one now</a>
</div>
<div class="w-full md:w-1/4 uppercase py-16">
<div class="text-purple-900">
<p><a href="">package deals</a> <i class="fas fa-arrow-circle-right"></i> </p>
<p><a href="">gallery</a> <i class="fas fa-arrow-circle-right"></i> </p>
<p><a href="">Get directions</a> <i class="fas fa-arrow-circle-right"></i> </p>
</div>
<div class="text-white text-lg pt-4">
<i class="fab fa-facebook-square"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-youtube-square"></i>
<i class="fab fa-tripadvisor"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-square"></i>
</div>
</div>
</div>
</div>
</footer>
</div>
<div>
<header class="relative z-10">
{{> @swr-nav-titlebar }}
</header>
{{> @swr-homepage-hero }}
{{> @swr-homepage-cta-buttons }}
{{> @swr-homepage-intro }}
{{> @swr-homepage-perfect-fit }}
<footer>
{{> @swr-footer }}
</footer>
</div>
/* No context defined. */