mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-08 22:53:24 +00:00
WIP
This commit is contained in:
khatabwedaa
50
components/email-templates/Invite.html
Normal file
50
components/email-templates/Invite.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meraki UI Components</title>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="max-w-2xl px-6 py-8 mx-auto bg-white dark:bg-gray-900">
|
||||
<header>
|
||||
<a href="#">
|
||||
<img class="w-auto h-7 sm:h-8" src="https://merakiui.com/images/full-logo.svg" alt="">
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main class="mt-8">
|
||||
<h2 class="text-gray-700 dark:text-gray-200">Hi Olivia,</h2>
|
||||
|
||||
<p class="mt-2 leading-loose text-gray-600 dark:text-gray-300">
|
||||
Alicia has invited you to join the team on <span class="font-semibold ">Meraki UI</span>.
|
||||
</p>
|
||||
|
||||
<button class="px-6 py-2 mt-4 text-sm font-medium tracking-wider text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Accept the invite
|
||||
</button>
|
||||
|
||||
<p class="mt-8 text-gray-600 dark:text-gray-300">
|
||||
Thanks, <br>
|
||||
Meraki UI team
|
||||
</p>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="mt-8">
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
This email was sent to <a href="#" class="text-blue-600 hover:underline dark:text-blue-400" target="_blank">contact@merakiui.com</a>.
|
||||
If you'd rather not receive this kind of email, you can <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">unsubscribe</a> or <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">manage your email preferences</a>.
|
||||
</p>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-400">© {{ new Date().getFullYear() }} Meraki UI. All Rights Reserved.</p>
|
||||
</footer>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
108
components/email-templates/News.html
Normal file
108
components/email-templates/News.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meraki UI Components</title>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="max-w-2xl px-6 py-8 mx-auto bg-white dark:bg-gray-900">
|
||||
<header class="flex items-center justify-between ">
|
||||
<a href="#">
|
||||
<img class="w-auto h-6 sm:h-8" src="https://merakiui.com/images/full-logo.svg" alt="">
|
||||
</a>
|
||||
|
||||
<div class="flex items-center gap-x-4">
|
||||
<a href="#" class="text-sm text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400">Login</a>
|
||||
<a href="#" class="text-sm text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400">Register</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-8">
|
||||
<img class="object-cover w-full h-56 rounded-lg shadow-md md:h-72" src="https://images.unsplash.com/photo-1545235617-9465d2a55698?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
|
||||
|
||||
<h2 class="mt-6 text-2xl font-medium text-blue-600 dark:text-blue-400">Meet Version 3.0: a clean, modern UI kit for beautiful interfaces</h2>
|
||||
|
||||
<p class="mt-2 leading-loose text-gray-600 dark:text-gray-300">
|
||||
We’re glad to have you onboard! You’re already on your way to creating beautiful visual products.
|
||||
<br>
|
||||
Whether you’re here for your brand, for a cause, or just for fun — welcome! If there’s anything you need, we’ll be here every step of the way
|
||||
</p>
|
||||
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">
|
||||
Thanks, <br>
|
||||
Meraki UI team
|
||||
</p>
|
||||
|
||||
<a href="#" class="inline-flex items-center px-6 py-2 mt-6 text-sm font-medium tracking-wider text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg gap-x-2 hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
<span>Download 3.0</span>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 rtl:rotate-180">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="mt-8">
|
||||
<h3 class="font-medium text-gray-800 dark:text-white">Download the app</h3>
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400">Get the most of Meraki UI by installing our new mobile app.</p>
|
||||
|
||||
<div class="mt-4 -mx-2">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-4 py-2.5 text-sm overflow-hidden text-white transition-colors duration-300 bg-gray-900 rounded-lg shadow sm:w-auto sm:mx-2 hover:bg-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 focus:ring focus:ring-gray-300 focus:ring-opacity-80">
|
||||
<svg class="w-5 h-5 mx-2 fill-current" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105C512,47.103,464.897,0,407,0z M482,407c0,41.355-33.645,75-75,75H105c-41.355,0-75-33.645-75-75V105c0-41.355,33.645-75,75-75h302c41.355,0,75,33.645,75,75V407z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M305.646,123.531c-1.729-6.45-5.865-11.842-11.648-15.18c-11.936-6.892-27.256-2.789-34.15,9.151L256,124.166l-3.848-6.665c-6.893-11.937-22.212-16.042-34.15-9.151h-0.001c-11.938,6.893-16.042,22.212-9.15,34.151l18.281,31.664L159.678,291H110.5c-13.785,0-25,11.215-25,25c0,13.785,11.215,25,25,25h189.86l-28.868-50h-54.079l85.735-148.498C306.487,136.719,307.375,129.981,305.646,123.531z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M401.5,291h-49.178l-55.907-96.834l-28.867,50l86.804,150.348c3.339,5.784,8.729,9.921,15.181,11.65c2.154,0.577,4.339,0.863,6.511,0.863c4.332,0,8.608-1.136,12.461-3.361c11.938-6.893,16.042-22.213,9.149-34.15L381.189,341H401.5c13.785,0,25-11.215,25-25C426.5,302.215,415.285,291,401.5,291z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M119.264,361l-4.917,8.516c-6.892,11.938-2.787,27.258,9.151,34.15c3.927,2.267,8.219,3.345,12.458,3.344c8.646,0,17.067-4.484,21.693-12.495L176.999,361H119.264z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<span class="mx-2">
|
||||
Get it on the App Store
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-4 py-2.5 mt-4 text-sm overflow-hidden text-white transition-colors duration-300 bg-blue-600 rounded-lg shadow sm:w-auto sm:mx-2 sm:mt-0 hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
<svg class="w-5 h-5 mx-2 fill-current" viewBox="-28 0 512 512.00075" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m432.320312 215.121094-361.515624-208.722656c-14.777344-8.53125-32.421876-8.53125-47.203126 0-.121093.070312-.230468.148437-.351562.21875-.210938.125-.421875.253906-.628906.390624-14.175782 8.636719-22.621094 23.59375-22.621094 40.269532v417.445312c0 17.066406 8.824219 32.347656 23.601562 40.878906 7.390626 4.265626 15.496094 6.398438 23.601563 6.398438s16.214844-2.132812 23.601563-6.398438l361.519531-208.722656c14.777343-8.53125 23.601562-23.8125 23.601562-40.878906s-8.824219-32.347656-23.605469-40.878906zm-401.941406 253.152344c-.21875-1.097657-.351562-2.273438-.351562-3.550782v-417.445312c0-2.246094.378906-4.203125.984375-5.90625l204.324219 213.121094zm43.824219-425.242188 234.21875 135.226562-52.285156 54.539063zm-6.480469 429.679688 188.410156-196.527344 54.152344 56.484375zm349.585938-201.835938-80.25 46.332031-60.125-62.714843 58.261718-60.773438 82.113282 47.40625c7.75 4.476562 8.589844 11.894531 8.589844 14.875s-.839844 10.398438-8.589844 14.875zm0 0">
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
<span class="mx-2">
|
||||
Get it on Google Play
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-gray-500 dark:text-gray-400">
|
||||
This email was sent to <a href="#" class="text-blue-600 hover:underline dark:text-blue-400" target="_blank">contact@merakiui.com</a>.
|
||||
If you'd rather not receive this kind of email, you can <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">unsubscribe</a> or <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">manage your email preferences</a>.
|
||||
</p>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-400">© {{ new Date().getFullYear() }} Meraki UI. All Rights Reserved.</p>
|
||||
</footer>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
60
components/email-templates/Notification.html
Normal file
60
components/email-templates/Notification.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meraki UI Components</title>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="max-w-2xl px-6 py-8 mx-auto bg-white dark:bg-gray-900">
|
||||
<header>
|
||||
<a href="#">
|
||||
<img class="w-auto h-7 sm:h-8" src="https://merakiui.com/images/full-logo.svg" alt="">
|
||||
</a>
|
||||
|
||||
<nav class="flex items-center mt-6 gap-x-6 sm:gap-x-8">
|
||||
<a href="#" class="text-sm text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400" aria-label="Reddit"> Home </a>
|
||||
<a href="#" class="text-sm text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400" aria-label="Reddit"> Blog </a>
|
||||
<a href="#" class="text-sm text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400" aria-label="Reddit"> Tutorials </a>
|
||||
<a href="#" class="text-sm text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400" aria-label="Reddit"> Support </a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="mt-8">
|
||||
<h2 class="text-gray-700 dark:text-gray-200">Hi Olivia,</h2>
|
||||
|
||||
<p class="mt-2 leading-loose text-gray-600 dark:text-gray-300">
|
||||
We’re glad to have you onboard! You’re already on your way to
|
||||
creating beautiful visual products.
|
||||
Whether you’re here for your brand, for a cause, or just for fun —
|
||||
welcome! If there’s anything you need, we’ll be here every step of the way.
|
||||
</p>
|
||||
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">
|
||||
Thanks, <br>
|
||||
Meraki UI team
|
||||
</p>
|
||||
|
||||
<button class="px-6 py-2 mt-8 text-sm font-medium tracking-wider text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Login
|
||||
</button>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="mt-8">
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
This email was sent to <a href="#" class="text-blue-600 hover:underline dark:text-blue-400" target="_blank">contact@merakiui.com</a>.
|
||||
If you'd rather not receive this kind of email, you can <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">unsubscribe</a> or <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">manage your email preferences</a>.
|
||||
</p>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-400">© {{ new Date().getFullYear() }} Meraki UI. All Rights Reserved.</p>
|
||||
</footer>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
62
components/email-templates/NotificationWithImage.html
Normal file
62
components/email-templates/NotificationWithImage.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meraki UI Components</title>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="max-w-2xl px-6 py-8 mx-auto bg-white dark:bg-gray-900">
|
||||
<header>
|
||||
<a href="#">
|
||||
<img class="w-auto h-7 sm:h-8" src="https://merakiui.com/images/full-logo.svg" alt="">
|
||||
</a>
|
||||
|
||||
<nav class="flex items-center mt-6 gap-x-6 sm:gap-x-8">
|
||||
<a href="#" class="text-sm text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400" aria-label="Reddit"> Home </a>
|
||||
<a href="#" class="text-sm text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400" aria-label="Reddit"> Blog </a>
|
||||
<a href="#" class="text-sm text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400" aria-label="Reddit"> Tutorials </a>
|
||||
<a href="#" class="text-sm text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400" aria-label="Reddit"> Support </a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="mt-8">
|
||||
<img class="object-cover w-full h-56 rounded-lg md:h-72" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
|
||||
|
||||
<h2 class="mt-6 text-gray-700 dark:text-gray-200">Hi Olivia,</h2>
|
||||
|
||||
<p class="mt-2 leading-loose text-gray-600 dark:text-gray-300">
|
||||
We’re glad to have you onboard! You’re already on your way to
|
||||
creating beautiful visual products.
|
||||
Whether you’re here for your brand, for a cause, or just for fun —
|
||||
welcome! If there’s anything you need, we’ll be here every step of the way.
|
||||
</p>
|
||||
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">
|
||||
Thanks, <br>
|
||||
Meraki UI team
|
||||
</p>
|
||||
|
||||
<button class="px-6 py-2 mt-8 text-sm font-medium tracking-wider text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Login
|
||||
</button>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="mt-8">
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
This email was sent to <a href="#" class="text-blue-600 hover:underline dark:text-blue-400" target="_blank">contact@merakiui.com</a>.
|
||||
If you'd rather not receive this kind of email, you can <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">unsubscribe</a> or <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">manage your email preferences</a>.
|
||||
</p>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-400">© {{ new Date().getFullYear() }} Meraki UI. All Rights Reserved.</p>
|
||||
</footer>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
61
components/email-templates/Verification.html
Normal file
61
components/email-templates/Verification.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meraki UI Components</title>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="max-w-2xl px-6 py-8 mx-auto bg-white dark:bg-gray-900">
|
||||
<header>
|
||||
<a href="#">
|
||||
<img class="w-auto h-7 sm:h-8" src="https://merakiui.com/images/full-logo.svg" alt="">
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main class="mt-8">
|
||||
<h2 class="text-gray-700 dark:text-gray-200">Hi Olivia,</h2>
|
||||
|
||||
<p class="mt-2 leading-loose text-gray-600 dark:text-gray-300">
|
||||
This is your verification code:
|
||||
</p>
|
||||
|
||||
<div class="flex items-center mt-4 gap-x-4">
|
||||
<p class="flex items-center justify-center w-10 h-10 text-2xl font-medium text-blue-500 border border-blue-500 rounded-md dark:border-blue-400 dark:text-blue-400 ">6</p>
|
||||
<p class="flex items-center justify-center w-10 h-10 text-2xl font-medium text-blue-500 border border-blue-500 rounded-md dark:border-blue-400 dark:text-blue-400 ">2</p>
|
||||
<p class="flex items-center justify-center w-10 h-10 text-2xl font-medium text-blue-500 border border-blue-500 rounded-md dark:border-blue-400 dark:text-blue-400 ">8</p>
|
||||
<p class="flex items-center justify-center w-10 h-10 text-2xl font-medium text-blue-500 border border-blue-500 rounded-md dark:border-blue-400 dark:text-blue-400 ">9</p>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 leading-loose text-gray-600 dark:text-gray-300">
|
||||
This code will only be valid for the next 5 minutes. If the code does not work, you can use this login verification link:
|
||||
</p>
|
||||
|
||||
<button class="px-6 py-2 mt-6 text-sm font-medium tracking-wider text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Verify email
|
||||
</button>
|
||||
|
||||
<p class="mt-8 text-gray-600 dark:text-gray-300">
|
||||
Thanks, <br>
|
||||
Meraki UI team
|
||||
</p>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="mt-8">
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
This email was sent to <a href="#" class="text-blue-600 hover:underline dark:text-blue-400" target="_blank">contact@merakiui.com</a>.
|
||||
If you'd rather not receive this kind of email, you can <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">unsubscribe</a> or <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">manage your email preferences</a>.
|
||||
</p>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-400">© {{ new Date().getFullYear() }} Meraki UI. All Rights Reserved.</p>
|
||||
</footer>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
99
components/email-templates/Welcome.html
Normal file
99
components/email-templates/Welcome.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meraki UI Components</title>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="max-w-2xl px-6 py-8 mx-auto bg-white dark:bg-gray-900">
|
||||
<header>
|
||||
<a href="#">
|
||||
<img class="w-auto h-7 sm:h-8" src="https://merakiui.com/images/full-logo.svg" alt="">
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main class="mt-8">
|
||||
<p class="text-xl text-gray-700 dark:text-gray-200">Welcome to Company</p>
|
||||
|
||||
<p class="mt-4 leading-loose text-gray-600 dark:text-gray-300">
|
||||
We’re excited to welcome you to Untitled and we’re even more excited about what we’ve got planned. You’re already on your way to creating beautiful visual products.
|
||||
Whether you’re here for your brand, for a cause, or just for fun — welcome! If there’s anything you need, we’ll be here every step of the way.
|
||||
</p>
|
||||
|
||||
<hr class="my-6 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<a href="#" class="inline-flex items-center text-blue-600 underline dark:text-blue-400 gap-x-2 underline-offset-4">
|
||||
<span>Meraki UI changelog</span>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 rtl:rotate-180">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400">Weekly new updates and improvements to Meraki UI.</p>
|
||||
</div>
|
||||
|
||||
<hr class="my-6 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<a href="#" class="inline-flex items-center text-blue-600 underline dark:text-blue-400 gap-x-2 underline-offset-4">
|
||||
<span>Follow us on Twitter</span>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 rtl:rotate-180">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400">Stay up-to-date with the latest announcements and jobs.</p>
|
||||
</div>
|
||||
|
||||
<hr class="my-6 border-gray-200 dark:border-gray-700">
|
||||
|
||||
<div>
|
||||
<a href="#" class="inline-flex items-center text-blue-600 underline dark:text-blue-400 gap-x-2 underline-offset-4">
|
||||
<span>Why we’re building Merki UI</span>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 rtl:rotate-180">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400">Meraki UI is a new standard of design system and UI kit.</p>
|
||||
</div>
|
||||
|
||||
<hr class="my-6 border-gray-200 dark:border-gray-700">
|
||||
</div>
|
||||
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400">
|
||||
Thanks for signing up. If you have any questions, send us a message <br /> at
|
||||
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">hi@merakiui.com</a>
|
||||
or on <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Twitter</a>. We’d love to hear from you.<br/>
|
||||
— The team
|
||||
</p>
|
||||
|
||||
<button class="px-6 py-2 mt-6 text-sm font-medium tracking-wider text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Get started
|
||||
</button>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="mt-8">
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
This email was sent to <a href="#" class="text-blue-600 hover:underline dark:text-blue-400" target="_blank">contact@merakiui.com</a>.
|
||||
If you'd rather not receive this kind of email, you can <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">unsubscribe</a> or <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">manage your email preferences</a>.
|
||||
</p>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-400">© {{ new Date().getFullYear() }} Meraki UI. All Rights Reserved.</p>
|
||||
</footer>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
95
components/email-templates/WelcomeWithVideo.html
Normal file
95
components/email-templates/WelcomeWithVideo.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meraki UI Components</title>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="max-w-2xl px-6 py-8 mx-auto bg-white dark:bg-gray-900">
|
||||
<header>
|
||||
<a href="#">
|
||||
<img class="w-auto mx-auto h-7 sm:h-8" src="https://merakiui.com/images/full-logo.svg" alt="">
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main class="mt-8">
|
||||
<h2 class="mt-6 text-gray-700 dark:text-gray-200">Hi Olivia,</h2>
|
||||
|
||||
<p class="mt-2 leading-loose text-gray-600 dark:text-gray-300">
|
||||
Welcome to Meraki UI! You’re already on your way to creating beautiful visual products.
|
||||
We’ve created a quick intro video to get you up and running as soon as possible.
|
||||
If you have any questions, <a href="#" class="underline transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-400">please get in touch</a>.
|
||||
</p>
|
||||
|
||||
<iframe class="w-full h-64 my-10 rounded-lg md:h-80" src="https://www.youtube.com/embed/L6Jwa7al8os" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">
|
||||
Thanks, <br>
|
||||
Meraki UI team
|
||||
</p>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="mt-8 text-center">
|
||||
<h3 class="font-medium text-gray-800 dark:text-white">Download the app</h3>
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400">Get the most of Meraki UI by installing our new mobile app.</p>
|
||||
|
||||
<div class="mt-6">
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-4 py-2.5 text-sm overflow-hidden text-white transition-colors duration-300 bg-gray-900 rounded-lg shadow sm:w-auto sm:mx-2 hover:bg-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 focus:ring focus:ring-gray-300 focus:ring-opacity-80">
|
||||
<svg class="w-5 h-5 mx-2 fill-current" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105C512,47.103,464.897,0,407,0z M482,407c0,41.355-33.645,75-75,75H105c-41.355,0-75-33.645-75-75V105c0-41.355,33.645-75,75-75h302c41.355,0,75,33.645,75,75V407z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M305.646,123.531c-1.729-6.45-5.865-11.842-11.648-15.18c-11.936-6.892-27.256-2.789-34.15,9.151L256,124.166l-3.848-6.665c-6.893-11.937-22.212-16.042-34.15-9.151h-0.001c-11.938,6.893-16.042,22.212-9.15,34.151l18.281,31.664L159.678,291H110.5c-13.785,0-25,11.215-25,25c0,13.785,11.215,25,25,25h189.86l-28.868-50h-54.079l85.735-148.498C306.487,136.719,307.375,129.981,305.646,123.531z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M401.5,291h-49.178l-55.907-96.834l-28.867,50l86.804,150.348c3.339,5.784,8.729,9.921,15.181,11.65c2.154,0.577,4.339,0.863,6.511,0.863c4.332,0,8.608-1.136,12.461-3.361c11.938-6.893,16.042-22.213,9.149-34.15L381.189,341H401.5c13.785,0,25-11.215,25-25C426.5,302.215,415.285,291,401.5,291z"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M119.264,361l-4.917,8.516c-6.892,11.938-2.787,27.258,9.151,34.15c3.927,2.267,8.219,3.345,12.458,3.344c8.646,0,17.067-4.484,21.693-12.495L176.999,361H119.264z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<span class="mx-2">
|
||||
Get it on the App Store
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-4 py-2.5 mt-4 text-sm overflow-hidden text-white transition-colors duration-300 bg-blue-600 rounded-lg shadow sm:w-auto sm:mx-2 sm:mt-0 hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
<svg class="w-5 h-5 mx-2 fill-current" viewBox="-28 0 512 512.00075" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m432.320312 215.121094-361.515624-208.722656c-14.777344-8.53125-32.421876-8.53125-47.203126 0-.121093.070312-.230468.148437-.351562.21875-.210938.125-.421875.253906-.628906.390624-14.175782 8.636719-22.621094 23.59375-22.621094 40.269532v417.445312c0 17.066406 8.824219 32.347656 23.601562 40.878906 7.390626 4.265626 15.496094 6.398438 23.601563 6.398438s16.214844-2.132812 23.601563-6.398438l361.519531-208.722656c14.777343-8.53125 23.601562-23.8125 23.601562-40.878906s-8.824219-32.347656-23.605469-40.878906zm-401.941406 253.152344c-.21875-1.097657-.351562-2.273438-.351562-3.550782v-417.445312c0-2.246094.378906-4.203125.984375-5.90625l204.324219 213.121094zm43.824219-425.242188 234.21875 135.226562-52.285156 54.539063zm-6.480469 429.679688 188.410156-196.527344 54.152344 56.484375zm349.585938-201.835938-80.25 46.332031-60.125-62.714843 58.261718-60.773438 82.113282 47.40625c7.75 4.476562 8.589844 11.894531 8.589844 14.875s-.839844 10.398438-8.589844 14.875zm0 0">
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
<span class="mx-2">
|
||||
Get it on Google Play
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-gray-500 dark:text-gray-400">
|
||||
This email was sent to <a href="#" class="text-blue-600 hover:underline dark:text-blue-400" target="_blank">contact@merakiui.com</a>.
|
||||
If you'd rather not receive this kind of email, you can <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">unsubscribe</a> or <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">manage your email preferences</a>.
|
||||
</p>
|
||||
|
||||
<p class="mt-3 text-gray-500 dark:text-gray-400">© {{ new Date().getFullYear() }} Meraki UI. All Rights Reserved.</p>
|
||||
</footer>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user