243 lines
7.2 KiB
Vue
243 lines
7.2 KiB
Vue
<template>
|
|
<section class="body-font">
|
|
<div
|
|
class="
|
|
mx-auto
|
|
flex
|
|
py-10
|
|
lg:py-20
|
|
md:flex-row
|
|
flex-col
|
|
items-center
|
|
lg:px-10
|
|
"
|
|
v-if="id == 'subscribe'"
|
|
>
|
|
<div
|
|
class="
|
|
lg:pl-24 lg:w-1/2
|
|
flex flex-col
|
|
md:items-start md:text-left
|
|
mb-16
|
|
md:mb-0
|
|
mx-4
|
|
items-center
|
|
text-center
|
|
"
|
|
>
|
|
<h2
|
|
class="
|
|
lg:text-6xl
|
|
uppercase
|
|
mb-0
|
|
leading-tight
|
|
font-semibold font-heading
|
|
"
|
|
>
|
|
{{ subscribe.title }}
|
|
</h2>
|
|
<div class="my-8 lg:text-xl" v-html="subscribe.content"></div>
|
|
<div class="flex w-full md:justify-start justify-center items-end">
|
|
<!-- <div class="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
|
|
<label for="hero-field" class="leading-7 text-sm text-gray-600"
|
|
>Placeholder</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="hero-field"
|
|
name="hero-field"
|
|
:placeholder="subscribe.placeHolder"
|
|
class="
|
|
w-full
|
|
bg-gray-100
|
|
rounded
|
|
border
|
|
bg-opacity-50
|
|
border-gray-300
|
|
text-base
|
|
outline-none
|
|
text-gray-700
|
|
py-1
|
|
px-3
|
|
leading-8
|
|
transition-colors
|
|
duration-200
|
|
ease-in-out
|
|
"
|
|
/>
|
|
</div> -->
|
|
|
|
<a
|
|
href="javascript:;"
|
|
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
|
|
class="
|
|
inline-flex
|
|
bg-white
|
|
border-2
|
|
py-1
|
|
px-12
|
|
learn-button
|
|
hover:bg-gray-400
|
|
shadow
|
|
border-black
|
|
text-black text-lg
|
|
cursor-pointer
|
|
"
|
|
>
|
|
{{ subscribe.button }}
|
|
</a>
|
|
</div>
|
|
<!-- <p class="text-sm mt-2 text-gray-500 mb-8 w-full">
|
|
Neutra shabby chic ramps, viral fixie.
|
|
</p> -->
|
|
<!-- <div class="flex lg:flex-row md:flex-col">
|
|
<button
|
|
class="
|
|
bg-gray-100
|
|
inline-flex
|
|
py-3
|
|
px-5
|
|
rounded-lg
|
|
items-center
|
|
hover:bg-gray-200
|
|
focus:outline-none
|
|
"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
class="w-6 h-6"
|
|
viewBox="0 0 512 512"
|
|
>
|
|
<path
|
|
d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z"
|
|
></path>
|
|
</svg>
|
|
<span class="ml-4 flex items-start flex-col leading-none">
|
|
<span class="text-xs text-gray-600 mb-1">GET IT ON</span>
|
|
<span class="title-font font-medium">Google Play</span>
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="
|
|
bg-gray-100
|
|
inline-flex
|
|
py-3
|
|
px-5
|
|
rounded-lg
|
|
items-center
|
|
lg:ml-4
|
|
md:ml-0
|
|
ml-4
|
|
md:mt-4
|
|
mt-0
|
|
lg:mt-0
|
|
hover:bg-gray-200
|
|
focus:outline-none
|
|
"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
class="w-6 h-6"
|
|
viewBox="0 0 305 305"
|
|
>
|
|
<path
|
|
d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z"
|
|
></path>
|
|
<path
|
|
d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z"
|
|
></path>
|
|
</svg>
|
|
<span class="ml-4 flex items-start flex-col leading-none">
|
|
<span class="text-xs text-gray-600 mb-1">Download on the</span>
|
|
<span class="title-font font-medium">App Store</span>
|
|
</span>
|
|
</button>
|
|
</div> -->
|
|
</div>
|
|
<div class="md:w-1/2 hidden md:flex">
|
|
<g-image
|
|
class="object-cover w-3/4 mx-auto object-center rounded"
|
|
:alt="subscribe.title"
|
|
:src="subscribe.image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="reserve"
|
|
v-else-if="id == 'conversations'"
|
|
class="
|
|
mx-auto
|
|
flex
|
|
py-10
|
|
lg:py-20
|
|
md:flex-row
|
|
flex-col
|
|
items-center
|
|
lg:px-10
|
|
"
|
|
>
|
|
<div
|
|
class="
|
|
lg:pl-24 lg:w-1/2
|
|
flex flex-col
|
|
md:items-start md:text-left
|
|
mb-16
|
|
md:mb-0
|
|
mx-4
|
|
items-center
|
|
text-center
|
|
"
|
|
>
|
|
<h2
|
|
class="
|
|
lg:text-6xl
|
|
uppercase
|
|
mb-0
|
|
leading-tight
|
|
font-semibold font-heading
|
|
"
|
|
>
|
|
{{ subscribe.title }}
|
|
</h2>
|
|
<div class="my-8 lg:text-xl" v-html="subscribe.content"></div>
|
|
<div class="flex w-full md:justify-start justify-center items-end">
|
|
<a
|
|
href="javascript:;"
|
|
onclick="ml_account('webforms', '5220458', 'l8v4o6', 'show')"
|
|
class="
|
|
inline-flex
|
|
bg-white
|
|
border-2
|
|
py-1
|
|
px-12
|
|
learn-button
|
|
hover:bg-gray-400
|
|
shadow
|
|
border-black
|
|
text-black text-lg
|
|
cursor-pointer
|
|
"
|
|
>
|
|
{{ subscribe.button }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="md:w-1/2 hidden md:flex">
|
|
<g-image
|
|
class="object-cover w-3/4 mx-auto object-center rounded"
|
|
:alt="subscribe.title"
|
|
:src="subscribe.image.src"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
props: ["id", "subscribe"],
|
|
};
|
|
</script> |