animations of pages 7 and 8

2024-05-07 20:11:44 +03:30
parent 900d87fa55
commit 9e8d5abc19
10 changed files with 1104 additions and 624 deletions
@@ -0,0 +1,64 @@
+<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-white 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]">
+        <LMap
+          class="rounded-lg"
+          ref="map"
+          :zoom="zoom"
+          :center="[34.08011180237817, 49.69090848676344]"
+        >
+          <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>