Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-09 07:03:24 +00:00
Code Issues Projects Releases Wiki Activity

fix heros RTL issues

Browse Source
This commit is contained in:
khatabwedaa
2021-11-29 18:09:08 +02:00
parent 9daf810979
commit 011a5fd1ed
2 changed files with 58 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/ui/Heros/CenterContent.vue
View File

@@ -23,14 +23,14 @@
</div> </div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div :class="isOpen ? 'flex' : 'hidden lg:flex'" class="flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:space-x-16 lg:space-y-0"> <div :class="isOpen ? 'flex' : 'hidden lg:flex'" class="flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:-px-8 lg:space-y-0">
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="mx-8 text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Home</a> href="#">Home</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="mx-8 text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Components</a> href="#">Components</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="mx-8 text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Pricing</a> href="#">Pricing</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="mx-8 text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Contact</a> href="#">Contact</a>
</div> </div>
@@ -90,14 +90,14 @@
</div> </div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="flex flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:space-x-16 lg:space-y-0"> <div class="flex flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:-px-8 lg:space-y-0">
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="mx-8 text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Home</a> href="#">Home</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="mx-8 text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Components</a> href="#">Components</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="mx-8 text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Pricing</a> href="#">Pricing</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500" <a class="mx-8 text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Contact</a> href="#">Contact</a>
</div> </div>

96
components/ui/Heros/WithImage.vue
View File

@@ -21,11 +21,11 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div :class="isOpen ? '' : 'hidden'" class="items-center lg:flex"> <div :class="isOpen ? '' : 'hidden'" class="items-center lg:flex">
<div class="flex flex-col mt-4 space-y-8 lg:flex-row lg:items-center lg:mt-0 lg:space-y-0 lg:space-x-16"> <div class="flex flex-col mt-4 space-y-8 lg:flex-row lg:items-center lg:mt-0 lg:space-y-0 lg:-px-8">
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a> <a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a> <a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a> <a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a> <a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
<button class="flex items-center justify-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600"> <button class="flex items-center justify-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
Get in touch Get in touch
@@ -35,58 +35,58 @@
</div> </div>
</nav> </nav>
<div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center lg:space-x-6"> <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center">
<div class="w-full lg:w-1/2"> <div class="w-full lg:w-1/2">
<div class="lg:max-w-lg"> <div class="lg:max-w-lg">
<h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white lg:text-4xl">Find your premium new glasses exported from US</h1> <h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white lg:text-4xl">Find your premium new glasses exported from US</h1>
<p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p> <p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p>
<div class="grid gap-6 mt-8 sm:grid-cols-2"> <div class="grid gap-6 mt-8 sm:grid-cols-2">
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>Premium selection</span> <span class="mx-3">Premium selection</span>
</div> </div>
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>Insurance</span> <span class="mx-3">Insurance</span>
</div> </div>
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>All legal documents</span> <span class="mx-3">All legal documents</span>
</div> </div>
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>From US glasses dealers</span> <span class="mx-3">From US glasses dealers</span>
</div> </div>
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>Payment Security</span> <span class="mx-3">Payment Security</span>
</div> </div>
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>Fast shipping (+ Express)</span> <span class="mx-3">Fast shipping (+ Express)</span>
</div> </div>
</div> </div>
</div> </div>
@@ -139,11 +139,11 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="items-center lg:flex"> <div class="items-center lg:flex">
<div class="flex flex-col mt-4 space-y-8 lg:flex-row lg:items-center lg:mt-0 lg:space-y-0 lg:space-x-16"> <div class="flex flex-col mt-4 space-y-8 lg:flex-row lg:items-center lg:mt-0 lg:space-y-0 lg:-px-8">
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a> <a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a> <a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a> <a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a> <a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
<button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600"> <button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
Get in touch Get in touch
@@ -153,58 +153,58 @@
</div> </div>
</nav> </nav>
<div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center lg:space-x-6"> <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center">
<div class="w-full lg:w-1/2"> <div class="w-full lg:w-1/2">
<div class="lg:max-w-lg"> <div class="lg:max-w-lg">
<h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white lg:text-4xl">Find your premium new glasses exported from US</h1> <h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white lg:text-4xl">Find your premium new glasses exported from US</h1>
<p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p> <p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p>
<div class="grid gap-6 mt-8 sm:grid-cols-2"> <div class="grid gap-6 mt-8 sm:grid-cols-2">
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>Premium selection</span> <span class="mx-3">Premium selection</span>
</div> </div>
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>Insurance</span> <span class="mx-3">Insurance</span>
</div> </div>
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>All legal documents</span> <span class="mx-3">All legal documents</span>
</div> </div>
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>From US glasses dealers</span> <span class="mx-3">From US glasses dealers</span>
</div> </div>
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>Payment Security</span> <span class="mx-3">Payment Security</span>
</div> </div>
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200"> <div class="flex items-center text-gray-800 -px-3 dark:text-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-5 h-5 mx-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<span>Fast shipping (+ Express)</span> <span class="mx-3">Fast shipping (+ Express)</span>
</div> </div>
</div> </div>
</div> </div>