Files
javaneh/components/about-page/Map.vue
T
2025-01-01 10:43:54 +03:30

66 lines
2.8 KiB
Vue

<template>
<div
class="bg-white h-auto md:h-[45.938vw] flex justify-center py-[20vw] md:py-[4.5vw]"
>
<div
class="w-[85%] md:w-[81.04%] flex flex-col md:flex-row justify-between"
>
<div class="text-[#383E43] w-full md:w-[72.35%]">
<h1 class="text-[#A62186] text-[7.277vw] md:text-[2.604vw] font-bold">
SHINAN
</h1>
<h2 class="text-[5.751vw] md:text-[2.188vw] mt-[5vw] md:mt-[1.5vw]">
فروشگاه جوانه پیشتاز در عرضه محصولات سالم و طبیعی
</h2>
<p
class="text-[3.59vw] md:text-[1.186vw] mt-[5vw] md:mt-[0.8vw] w-full md:w-[75%]"
>
ما در فروشگاه جوانه سعی بر آن داریم تا سبدی از بهترین محصولات سالم و
طبیعی و ارگانیک ، رژیمی و بدون گلوتن را فراهم آوریم تا بتوانیم تجربه
خریدی سالم و اطمینان بخشی را برای شما محیا کنیم.
</p>
<div
class="flex flex-col flex-col-reverse md:flex-row mt-[2.8vw] w-full md:w-[27.396vw]"
>
<svg
class="rotate-90 md:rotate-0 w-[8vw] h-[8vw] md:w-[1.2vw] md:h-[3.188vw] mt-[0.7vw]"
viewBox="0 0 10 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="5" cy="5" r="4.5" fill="#383E43" stroke="#383E43" />
<circle cx="5" cy="21" r="4.5" stroke="#383E43" />
<circle cx="5" cy="37" r="4.5" stroke="#383E43" />
</svg>
<div class="bg-[#FAF6F9] p-[8vw] md:p-[1.5vw] ms-[1vw] rounded-[1.302vw]">
<p class="text-[4.544vw] md:text-[1.335vw]">آدرس</p>
<p
class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] leading-[5vw] md:leading-[1.563vw]"
>
اراک، خیابان دانشگاه، انتهای خیابان بهزیستی، میدان شهروند، فروشگاه محصولات ارگانیک جوانه
</p>
</div>
</div>
</div>
<div class="w-full md:w-[35%] rounded-[1.302vw] min-h-[50vh]">
<img src="/public/images/shoploc.png" class="rounded-[1.302vw]" />
<!-- <LMap
class="rounded-lg"
ref="map"
:zoom="zoom"
:center="[34.09032323461587, 49.71451383438154]"
>
<LTileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&amp;copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
layer-type="base"
name="OpenStreetMap"
/>
</LMap> -->
</div>
</div>
</div>
</template>
<script setup>
const zoom = ref(16)
</script>