fixed css bugs
This commit is contained in:
HAM!DREZA
@@ -2,16 +2,16 @@
|
||||
<div id="dynamic" class="about flex justify-center pt-[6.3vw]">
|
||||
<div class="relative w-[81.04%]">
|
||||
<div class="absolute -right-[0.8vw] -mt-[2.2vw]">
|
||||
<h1 class="text-[6.469vw] lg:text-[2.5vw] text-[#383E43] font-bold">
|
||||
<h1 class="text-[6.469vw] md:text-[2.5vw] text-[#383E43] font-bold">
|
||||
About Us
|
||||
</h1>
|
||||
<p class="text-[3.59vw] lg:text-[0.938vw] text-[#878787]">
|
||||
<p class="text-[3.59vw] md:text-[0.938vw] text-[#878787]">
|
||||
آنچه باید درباره شینان بدانید
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
class="aboutPath line hidden lg:block motion"
|
||||
class="aboutPath line hidden md:block motion"
|
||||
width="81.042vw"
|
||||
height="14.531vw"
|
||||
viewBox="0 0 1556 279"
|
||||
@@ -48,7 +48,7 @@
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="box2 crcle hidden lg:block absolute top-[1vw] !right-[2.8vw]"
|
||||
class="box2 crcle hidden md:block absolute top-[1vw] !right-[2.8vw]"
|
||||
id=""
|
||||
width="22.344vw"
|
||||
height="22.292vw"
|
||||
@@ -98,15 +98,15 @@
|
||||
|
||||
<div class="mt-[16vw] md:mt-0 panels relative">
|
||||
<div
|
||||
class="panel first leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
|
||||
class="panel first leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:top-[9.2vw]"
|
||||
>
|
||||
<h1
|
||||
class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
|
||||
class="mt-[5vw] md:mt-[1.3vw] text-[5.11vw] md:text-[1.335vw] ps-4 md:ps-8"
|
||||
>
|
||||
لورم ایپسوم
|
||||
</h1>
|
||||
<p
|
||||
class="mt-[5vw] lg:mt-[1.5vw] text-[3.19vw] lg:text-[0.833vw] px-4 lg:px-7 leading-[4.785vw] lg:leading-[1.458vw]"
|
||||
class="mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
|
||||
>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
|
||||
@@ -120,15 +120,15 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="hidden md:block panel leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:!top-[10]"
|
||||
class="hidden md:block panel leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:!top-[10]"
|
||||
>
|
||||
<h1
|
||||
class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
|
||||
class="mt-[5vw] md:mt-[1.3vw] text-[5.11vw] md:text-[1.335vw] ps-4 md:ps-8"
|
||||
>
|
||||
لورم ایپسوم
|
||||
</h1>
|
||||
<p
|
||||
class="mt-[5vw] lg:mt-[1.5vw] text-[3.19vw] lg:text-[0.833vw] px-4 lg:px-7 leading-[4.785vw] lg:leading-[1.458vw]"
|
||||
class="mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
|
||||
>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
|
||||
@@ -141,15 +141,15 @@
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="hidden md:block panel pnl leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
|
||||
class="hidden md:block panel pnl leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:top-[9.2vw]"
|
||||
>
|
||||
<h1
|
||||
class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
|
||||
class="mt-[5vw] md:mt-[1.3vw] text-[5.11vw] md:text-[1.335vw] ps-4 md:ps-8"
|
||||
>
|
||||
لورم ایپسوم
|
||||
</h1>
|
||||
<p
|
||||
class="mt-[5vw] lg:mt-[1.5vw] text-[3.19vw] lg:text-[0.833vw] px-4 lg:px-7 leading-[4.785vw] lg:leading-[1.458vw]"
|
||||
class="mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
|
||||
>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
|
||||
@@ -163,7 +163,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
class="absolute mt-[75vw] right-0 block lg:hidden"
|
||||
class="absolute mt-[75vw] right-0 block md:hidden"
|
||||
width="66"
|
||||
height="30"
|
||||
viewBox="0 0 66 30"
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<div class="w-[81%] lg:w-[52.96%] my-[8vw] grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="w-[81%] md:w-[52.96%] my-[8vw] grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div
|
||||
class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
|
||||
class="flex flex-col items-center justify-between space-y-5 h-auto md:h-[35.99vw] bg-white rounded-[500px] md:rounded-[26.042vw]"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<img
|
||||
src="/public/images/catalog1.jpg"
|
||||
alt=""
|
||||
class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
|
||||
class="mt-[15vw] md:mt-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] rounded-full"
|
||||
/>
|
||||
<p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
|
||||
<p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
|
||||
<p class="mt-[3vw] md:mt-[1vw] text-[5.11vw] md:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
|
||||
<p class="text-[3.59vw] md:text-[0.833vw] flex items-center border-b mt-[12vw] md:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
|
||||
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
@@ -23,7 +23,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center !m-0">
|
||||
<p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
|
||||
<p class="text-[3.59vw] md:text-[0.833vw] mt-[1vw] md:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
|
||||
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
@@ -33,13 +33,13 @@
|
||||
|
||||
دانلود کاتالوگ</p>
|
||||
<p class="
|
||||
mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
|
||||
mb-[3vw] mt-[8vw] md:mt-0 md:mb-[1vw] text-[5.11vw] md:text-[1.055vw]
|
||||
text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
|
||||
<img
|
||||
src="/public/images/catalog1.jpg"
|
||||
alt=""
|
||||
class="
|
||||
mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw]
|
||||
mb-[15vw] md:mb-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw]
|
||||
rounded-full"
|
||||
/>
|
||||
</div>
|
||||
@@ -48,16 +48,16 @@
|
||||
|
||||
|
||||
<div
|
||||
class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
|
||||
class="flex flex-col items-center justify-between space-y-5 h-auto md:h-[35.99vw] bg-white rounded-[500px] md:rounded-[26.042vw]"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<img
|
||||
src="/public/images/catalog1.jpg"
|
||||
alt=""
|
||||
class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
|
||||
class="mt-[15vw] md:mt-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] rounded-full"
|
||||
/>
|
||||
<p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
|
||||
<p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
|
||||
<p class="mt-[3vw] md:mt-[1vw] text-[5.11vw] md:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
|
||||
<p class="text-[3.59vw] md:text-[0.833vw] flex items-center border-b mt-[12vw] md:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
|
||||
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
@@ -69,7 +69,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center !m-0">
|
||||
<p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
|
||||
<p class="text-[3.59vw] md:text-[0.833vw] mt-[1vw] md:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
|
||||
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
@@ -79,29 +79,29 @@
|
||||
|
||||
دانلود کاتالوگ</p>
|
||||
<p class="
|
||||
mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
|
||||
mb-[3vw] mt-[8vw] md:mt-0 md:mb-[1vw] text-[5.11vw] md:text-[1.055vw]
|
||||
text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
|
||||
<img
|
||||
src="/public/images/catalog1.jpg"
|
||||
alt=""
|
||||
class="
|
||||
mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw]
|
||||
mb-[15vw] md:mb-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw]
|
||||
rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
|
||||
class="flex flex-col items-center justify-between space-y-5 h-auto md:h-[35.99vw] bg-white rounded-[500px] md:rounded-[26.042vw]"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<img
|
||||
src="/public/images/catalog1.jpg"
|
||||
alt=""
|
||||
class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
|
||||
class="mt-[15vw] md:mt-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] rounded-full"
|
||||
/>
|
||||
<p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
|
||||
<p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
|
||||
<p class="mt-[3vw] md:mt-[1vw] text-[5.11vw] md:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
|
||||
<p class="text-[3.59vw] md:text-[0.833vw] flex items-center border-b mt-[12vw] md:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
|
||||
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
@@ -113,7 +113,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center !m-0">
|
||||
<p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
|
||||
<p class="text-[3.59vw] md:text-[0.833vw] mt-[1vw] md:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
|
||||
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
@@ -123,13 +123,13 @@
|
||||
|
||||
دانلود کاتالوگ</p>
|
||||
<p class="
|
||||
mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
|
||||
mb-[3vw] mt-[8vw] md:mt-0 md:mb-[1vw] text-[5.11vw] md:text-[1.055vw]
|
||||
text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
|
||||
<img
|
||||
src="/public/images/catalog1.jpg"
|
||||
alt=""
|
||||
class="
|
||||
mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw]
|
||||
mb-[15vw] md:mb-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw]
|
||||
rounded-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="!max-w-[100vw] transform-bubbles header h-[76.923vw] lg:h-[48.802vw] text-white flex flex-col items-center"
|
||||
class="!max-w-[100vw] transform-bubbles header h-[76.923vw] md:h-[48.802vw] text-white flex flex-col items-center"
|
||||
>
|
||||
<svg
|
||||
class="flex md:hidden absolute animate rotating-mobile rotating"
|
||||
width="390"
|
||||
height="239"
|
||||
width="100vw"
|
||||
height="58vw"
|
||||
viewBox="0 0 390 239"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -35,7 +35,7 @@
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="hidden md:flex rotating-bubbles animate absolute rotating -top-[50.231vw] lg:!-top-[8.8vw] h-[120.513vw] lg:h-[44.688vw] w-[95%] !overflow-x-hidden lg:w-[44.688vw]"
|
||||
class="hidden md:flex rotating-bubbles animate absolute rotating -top-[50.231vw] md:!-top-[8.8vw] h-[120.513vw] md:h-[44.688vw] w-[95%] !overflow-x-hidden md:w-[44.688vw]"
|
||||
viewBox="0 0 858 858"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -63,7 +63,8 @@
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg class="block md:hidden h-[9.744vw] w-[9.744vw] absolute top-[55vw]" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<svg class="block md:hidden h-[9.744vw] w-[9.744vw] absolute mt-[53vw]" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="19" cy="19" r="19" fill="white"/>
|
||||
<path d="M13.5 16.5526V21.4476C13.5 24.4909 15.6542 25.7284 18.285 24.2159L19.4583 23.5376C19.7425 23.3726 19.9167 23.0701 19.9167 22.7401V15.2601C19.9167 14.9301 19.7425 14.6276 19.4583 14.4626L18.285 13.7842C15.6542 12.2717 13.5 13.5092 13.5 16.5526Z" fill="#383E43"/>
|
||||
<path d="M20.833 16.0574V21.9516C20.833 22.3091 21.218 22.5291 21.5205 22.3458L22.5288 21.7591C25.1597 20.2466 25.1597 17.7533 22.5288 16.2408L21.5205 15.6541C21.218 15.4799 20.833 15.6999 20.833 16.0574Z" fill="#383E43"/>
|
||||
@@ -76,7 +77,7 @@
|
||||
|
||||
|
||||
<svg
|
||||
class="hidden md:block arrow absolute h-[4.167vw] w-[4.167vw] lg:!top-[33.75vw]"
|
||||
class="hidden md:block arrow absolute h-[4.167vw] w-[4.167vw] md:!top-[33.75vw]"
|
||||
viewBox="0 0 80 80"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -93,14 +94,14 @@
|
||||
</svg>
|
||||
|
||||
<h1
|
||||
class="text-[7.277vw] lg:text-[3.718vw] font-[700] mt-[100px] lg:mt-[120px] lg:mt-[9.115vw]"
|
||||
class="text-[7.277vw] md:text-[3.718vw] font-[700] mt-[100px] md:mt-[120px] md:mt-[9.115vw]"
|
||||
>
|
||||
JAVANEH
|
||||
</h1>
|
||||
<h1 class="text-[4.544vw] lg:text-[1.927vw] font-[500]">
|
||||
<h1 class="text-[4.544vw] md:text-[1.927vw] font-[500]">
|
||||
فروشگاه محصولات ارگانیک
|
||||
</h1>
|
||||
<p class="hidden lg:block text-[0.938vw] w-[40vw] text-center mt-[0.3vw]">
|
||||
<p class="hidden md:block text-[0.938vw] w-[40vw] text-center mt-[0.3vw]">
|
||||
وب سایت جوانه شرکتی در حوزه تامین و توزیع محصولات طبیعی، ارگانیک و سالم
|
||||
میباشد که این امکان را به مصرف کننده میدهد تا بتواند انواع محصولات تازه را
|
||||
با حق انتخاب و تنوع بسیار بالا و با مناسبترین قیمت داشته باشد.
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="bg-white flex justify-center pt-[20vw] lg:pt-[9vw] lg:mt-[3.6vw] lg:pb-[21vw]" dir="rtl">
|
||||
<div class="w-[87.69%] lg:w-[81.04%] flex flex-col flex-col-reverse lg:flex-row">
|
||||
<div class="bg-white flex justify-center pt-[20vw] md:pt-[9vw] md:mt-[3.6vw] md:pb-[21vw]" dir="rtl">
|
||||
<div class="w-[87.69%] md:w-[81.04%] flex flex-col flex-col-reverse md:flex-row">
|
||||
|
||||
<div dir="rtl" class="z-[1] mt-[70vw] lg:mt-0">
|
||||
<div dir="rtl" class="z-[1] mt-[70vw] md:mt-0">
|
||||
<svg
|
||||
class="w-[16.154vw] h-[16.154vw] lg:h-[6.979vw] lg:w-[6.979vw]"
|
||||
class="w-[16.154vw] h-[16.154vw] md:h-[6.979vw] md:w-[6.979vw]"
|
||||
width="134"
|
||||
height="134"
|
||||
viewBox="0 0 134 134"
|
||||
@@ -35,15 +35,15 @@
|
||||
</svg>
|
||||
|
||||
<h2
|
||||
class="pb-[0.6vw] mt-[0.8vw] text-[8.318vw] lg:text-[2.813vw] text-[#383E43] font-[700] max-w-[57.949vw] lg:max-w-[19.531vw]"
|
||||
class="pb-[0.6vw] mt-[0.8vw] text-[8.318vw] md:text-[2.813vw] text-[#383E43] font-[700] max-w-[57.949vw] md:max-w-[19.531vw]"
|
||||
>
|
||||
مارا در اینستاگرام دنبال کنید
|
||||
</h2>
|
||||
<div class="birder-b border-[1px] w-[40vw] lg:w-[13vw]"></div>
|
||||
<p class="pb-[20vw] lg:pb-0 flex items-center mt-[1.7vw] text-[4.038vw] lg:text-[1.055vw] text-[#878787]">
|
||||
<div class="birder-b border-[1px] w-[40vw] md:w-[13vw]"></div>
|
||||
<p class="pb-[20vw] md:pb-0 flex items-center mt-[1.7vw] text-[4.038vw] md:text-[1.055vw] text-[#878787]">
|
||||
دنبال کردن
|
||||
<svg
|
||||
class="ms-5 h-[6.667vw] w-[6.667vw] lg:h-[2.604vw] lg:w-[2.604vw]"
|
||||
class="ms-5 h-[6.667vw] w-[6.667vw] md:h-[2.604vw] md:w-[2.604vw]"
|
||||
width="2.604vw"
|
||||
height="2.604vw"
|
||||
viewBox="0 0 50 50"
|
||||
@@ -75,14 +75,14 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="relative ms-0 lg:ms-[6.8vw] gallery w-full lg:w-[32.604vw] h-[32.604vw]">
|
||||
<div class="relative ms-0 md:ms-[6.8vw] gallery w-full md:w-[32.604vw] h-[32.604vw]">
|
||||
<div class="grid grid-cols-2">
|
||||
<img src="/public/images/gallery1.jpg" class="h-[43.846vw] lg:h-[16.302vw] object-cover w-full " alt="">
|
||||
<img src="/public/images/gallery2.jpg" class="h-[43.846vw] lg:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
|
||||
<img src="/public/images/gallery3.jpg" class="h-[43.846vw] lg:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
|
||||
<img src="/public/images/gallery1.jpg" class="h-[43.846vw] lg:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
|
||||
<img src="/public/images/gallery1.jpg" class="h-[43.846vw] md:h-[16.302vw] object-cover w-full " alt="">
|
||||
<img src="/public/images/gallery2.jpg" class="h-[43.846vw] md:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
|
||||
<img src="/public/images/gallery3.jpg" class="h-[43.846vw] md:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
|
||||
<img src="/public/images/gallery1.jpg" class="h-[43.846vw] md:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
|
||||
</div>
|
||||
<div class="hidden lg:block -left-[21.5vw] top-[5.6vw] absolute h-[41.042vw] w-[23.438vw]">
|
||||
<div class="hidden md:block -left-[21.5vw] top-[5.6vw] absolute h-[41.042vw] w-[23.438vw]">
|
||||
<img src="/public/images/gallery4.jpg" class="h-[20.521vw] object-cover w-full" alt="">
|
||||
<img src="/public/images/gallery5.jpg" class="h-[20.521vw] object-cover w-full" alt="">
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col lg:flex-row pb-[15vw] lg:pb-[5vw] px-[2vw] pt-[6.5vw]"
|
||||
class="flex flex-col md:flex-row pb-[15vw] md:pb-[5vw] px-[2vw] pt-[6.5vw]"
|
||||
>
|
||||
<div
|
||||
class="w-full lg:w-[25%] flex flex-col ps-[8vw] lg:ps-0 border-e-[1px]"
|
||||
class="w-full md:w-[25%] flex flex-col ps-[8vw] md:ps-0 border-e-[1px]"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<p
|
||||
class="mt-[2vw] lg:mt-0 lg:py-0 py-[3vw] text-[4.544vw] lg:text-[1.481vw] text-[#383E43] font-semibold"
|
||||
class="mt-[2vw] md:mt-0 md:py-0 py-[3vw] text-[4.544vw] md:text-[1.481vw] text-[#383E43] font-semibold"
|
||||
>
|
||||
رسانه
|
||||
</p>
|
||||
<div class="hidden lg:flex h-[50px] me-[0.5vw]">
|
||||
<div class="hidden md:flex h-[50px] me-[0.5vw]">
|
||||
<svg
|
||||
class="cursor-pointer "
|
||||
@click="this.$refs.carousel.next()"
|
||||
@@ -41,7 +41,7 @@
|
||||
<div class="mt-[1vw] space-y-[1vw] text-[#878787]">
|
||||
<p class="flex items-center">
|
||||
<svg
|
||||
class="w-[3.333vw] lg:w-[16px] h-[3.333vw] lg:h-[16px]"
|
||||
class="w-[3.333vw] md:w-[16px] h-[3.333vw] md:h-[16px]"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
@@ -51,12 +51,12 @@
|
||||
<circle cx="8" cy="8" r="2" fill="#383E43" />
|
||||
</svg>
|
||||
<span
|
||||
class="ps-3 text-[3.59vw] lg:text-[0.938vw] font-semibold text-black"
|
||||
class="ps-3 text-[3.59vw] md:text-[0.938vw] font-semibold text-black"
|
||||
>
|
||||
فواید و مضرات مصرف گندم
|
||||
</span>
|
||||
</p>
|
||||
<p class="items-center hidden lg:flex">
|
||||
<p class="items-center hidden md:flex">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
@@ -71,7 +71,7 @@
|
||||
فواید و مضرات مصرف گندم
|
||||
</span>
|
||||
</p>
|
||||
<p class="items-center hidden lg:flex">
|
||||
<p class="items-center hidden md:flex">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
@@ -86,7 +86,7 @@
|
||||
فواید و مضرات مصرف گندم
|
||||
</span>
|
||||
</p>
|
||||
<p class="items-center hidden lg:flex">
|
||||
<p class="items-center hidden md:flex">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
@@ -101,7 +101,7 @@
|
||||
فواید و مضرات مصرف گندم
|
||||
</span>
|
||||
</p>
|
||||
<p class="items-center hidden lg:flex">
|
||||
<p class="items-center hidden md:flex">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
@@ -118,7 +118,7 @@
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="hidden lg:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
|
||||
class="hidden md:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
|
||||
>
|
||||
ادامه مطلب
|
||||
<svg
|
||||
@@ -152,16 +152,16 @@
|
||||
|
||||
<Carousel
|
||||
ref="carousel"
|
||||
class="lg:w-[75%] mt-[8vw] lg:mt-0 w-full"
|
||||
class="md:w-[75%] mt-[8vw] md:mt-0 w-full"
|
||||
:wrap-around="true"
|
||||
:breakpoints="breakpoints"
|
||||
>
|
||||
<Slide v-for="slide in 10" :key="slide">
|
||||
<div
|
||||
class="carousel-item h-[85.641vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
|
||||
class="carousel-item h-[85.641vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
|
||||
>
|
||||
<div
|
||||
class="mx-[3vw] md:mx-[1vw] mediagallery w-[53.846vw] lg:w-[18.073vw] h-[76.41vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
|
||||
class="mx-[3vw] md:mx-[1vw] mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
|
||||
></div>
|
||||
</div>
|
||||
</Slide>
|
||||
@@ -172,15 +172,15 @@
|
||||
|
||||
<!--
|
||||
<div
|
||||
class="mt-[8vw] lg:mt-0 w-full grid grid-cols-1 lg:grid-cols-3 border-s-none lg:border-s-[1px] ms-0 lg:ms-[3vw] ps-0 lg:ps-[1vw]"
|
||||
class="mt-[8vw] md:mt-0 w-full grid grid-cols-1 md:grid-cols-3 border-s-none md:border-s-[1px] ms-0 md:ms-[3vw] ps-0 md:ps-[1vw]"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="w-[64.103vw] lg:w-[20.156vw] h-[85.641vw] lg:h-[28.021vw]
|
||||
class="w-[64.103vw] md:w-[20.156vw] h-[85.641vw] md:h-[28.021vw]
|
||||
border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto">
|
||||
|
||||
<div class="mediagallery w-[53.846vw] lg:w-[18.073vw] h-[76.41vw] lg:h-[25.938vw]
|
||||
<div class="mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw]
|
||||
border-[1.5px] rounded-[500px]"></div>
|
||||
|
||||
|
||||
@@ -191,17 +191,17 @@
|
||||
|
||||
|
||||
<div
|
||||
class="hidden lg:flex lg:w-[20.156vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
|
||||
class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
|
||||
>
|
||||
<div
|
||||
class="mediagallery lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
|
||||
class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="hidden lg:flex lg:w-[20.156vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
|
||||
class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
|
||||
>
|
||||
<div
|
||||
class="mediagallery lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
|
||||
class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
|
||||
></div>
|
||||
</div>
|
||||
</div> -->
|
||||
@@ -216,8 +216,12 @@ export default defineComponent({
|
||||
|
||||
breakpoints: {
|
||||
// 700px and up
|
||||
300: {
|
||||
itemsToShow: 1.4,
|
||||
snapAlign: 'end',
|
||||
},
|
||||
700: {
|
||||
itemsToShow: 1,
|
||||
itemsToShow: 3.3,
|
||||
snapAlign: 'center',
|
||||
},
|
||||
// 1024 and up
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
<template>
|
||||
<div class="pb-[27vw] lg:pb-[6vw] bg-white flex flex-col lg:flex-row items-center justify-center">
|
||||
<div class="w-[81.04%] flex flex-col flex-col-reverse lg:flex-row items-center lg:items-start mt-[4.7vw]">
|
||||
<div class="pb-[27vw] md:pb-[6vw] bg-white flex flex-col md:flex-row items-center justify-center">
|
||||
<div class="w-[81.04%] flex flex-col flex-col-reverse md:flex-row items-center md:items-start mt-[4.7vw]">
|
||||
|
||||
<div class="relative w-full lg:basis-3/5" dir="rtl">
|
||||
<div class="absolute -mt-[75vw] lg:mt-[0vw]">
|
||||
<h2 class="text-[4.544vw] lg:text-[1.481vw] text-[#383E43] font-[600]">درخواست نمونه محصول</h2>
|
||||
<p class="text-[#878787] text-[3.19vw] lg:text-[0.833vw] mt-[1vw]">مشخصات خود را وارد کنید</p>
|
||||
<div class="relative w-full md:basis-3/5" dir="rtl">
|
||||
<div class="absolute -mt-[75vw] md:mt-[0vw]">
|
||||
<h2 class="text-[4.544vw] md:text-[1.481vw] text-[#383E43] font-[600]">درخواست نمونه محصول</h2>
|
||||
<p class="text-[#878787] text-[3.19vw] md:text-[0.833vw] mt-[1vw]">مشخصات خود را وارد کنید</p>
|
||||
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-[13vw] lg:mt-[6.2vw]">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-[13vw] md:mt-[6.2vw]">
|
||||
<input
|
||||
class="ps-5 h-[13.846vw] lg:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] lg:text-[0.741vw] rounded-[10px] outline-none"
|
||||
class="ps-5 h-[13.846vw] md:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] md:text-[0.741vw] rounded-[10px] outline-none"
|
||||
type="text" placeholder="نام و نام خانوادگی">
|
||||
<input
|
||||
class="ps-5 h-[13.846vw] lg:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] lg:text-[0.741vw] rounded-[10px] outline-none"
|
||||
class="ps-5 h-[13.846vw] md:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] md:text-[0.741vw] rounded-[10px] outline-none"
|
||||
type="number" placeholder="شماره موبایل">
|
||||
<input
|
||||
class="ps-5 h-[13.846vw] lg:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] lg:text-[0.741vw] rounded-[10px] outline-none"
|
||||
class="ps-5 h-[13.846vw] md:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] md:text-[0.741vw] rounded-[10px] outline-none"
|
||||
type="text" placeholder="نام فروشگاه">
|
||||
<input
|
||||
class="ps-5 h-[13.846vw] lg:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] lg:text-[0.741vw] rounded-[10px] outline-none"
|
||||
class="ps-5 h-[13.846vw] md:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] md:text-[0.741vw] rounded-[10px] outline-none"
|
||||
type="select" placeholder="انتخاب محصول">
|
||||
</div>
|
||||
<span class="absolute mt-[8vw] lg:mt-[2vw] ms-[27vw] lg:ms-[19vw] bg-[#A62186] py-[2.564vw] lg:py-[0.625vw] px-[10.256vw] lg:px-[3.646vw] text-[3.59vw] lg:text-[1.055vw] text-white rounded-[10px]">ثبت</span>
|
||||
<span class="absolute mt-[8vw] md:mt-[2vw] ms-[27vw] md:ms-[19vw] bg-[#A62186] py-[2.564vw] md:py-[0.625vw] px-[10.256vw] md:px-[3.646vw] text-[3.59vw] md:text-[1.055vw] text-white rounded-[10px]">ثبت</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="basis-2/5 flex justify-end">
|
||||
<svg
|
||||
class="mt-[22vw] lg:mt-0 h-[58.462vw] w-[58.462vw] lg:h-[25.99vw] lg:w-[26.667vw]"
|
||||
class="mt-[22vw] md:mt-0 h-[58.462vw] w-[58.462vw] md:h-[25.99vw] md:w-[26.667vw]"
|
||||
viewBox="0 0 512 499" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_836_14313)">
|
||||
<path d="M326.562 111.858H299.32V344.154C299.32 347.799 298.602 351.408 297.207 354.775C295.813 358.142 293.769 361.202 291.192 363.779C288.615 366.356 285.556 368.401 282.19 369.795C278.823 371.19 275.215 371.908 271.571 371.908H63.292V372.174C63.292 375.818 64.0097 379.427 65.4042 382.794C66.7987 386.162 68.8427 389.221 71.4194 391.798C73.9961 394.376 77.0551 396.42 80.4218 397.815C83.7884 399.209 87.3968 399.927 91.0408 399.927H326.562C330.206 399.927 333.814 399.209 337.181 397.815C340.547 396.42 343.606 394.376 346.183 391.798C348.76 389.221 350.804 386.162 352.198 382.794C353.593 379.427 354.311 375.818 354.311 372.174V139.612C354.311 132.251 351.387 125.192 346.183 119.987C340.979 114.782 333.921 111.858 326.562 111.858Z" fill="#F2F2F2"/>
|
||||
|
||||
@@ -3,15 +3,14 @@
|
||||
class="flex flex-col items-center border-t-[1px] border-[#E5E5E5] z-[1] min-h-[40vw] bg-[#FAF6F9] mt-[8vw]"
|
||||
>
|
||||
<h2
|
||||
class="font-semibold text-[5.11vw] lg:text-[1.69vw] text-[#383E43] mt-24"
|
||||
class="font-semibold text-[5.11vw] md:text-[1.69vw] text-[#383E43] mt-24"
|
||||
>
|
||||
نقشه راه از تولید به مصرف محصولات شینان
|
||||
</h2>
|
||||
<div ref="main" class="relative mt-[10vw] lg:mt-0 flex justify-center">
|
||||
|
||||
<div ref="main" class="relative mt-[10vw] md:mt-0 flex justify-center">
|
||||
<svg
|
||||
id="motionSVG"
|
||||
class="hidden lg:block box z-[1] absolute mt-[8vw] lg:mt-[2.4vw] h-[15.385vw] w-[15.385vw] lg:h-[5.625vw] lg:w-[5.625vw]"
|
||||
id="motionSVG"
|
||||
class="hidden md:block box z-[1] absolute mt-[8vw] md:mt-[2.4vw] h-[15.385vw] w-[15.385vw] md:h-[5.625vw] md:w-[5.625vw]"
|
||||
viewBox="0 0 108 108"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -24,7 +23,7 @@
|
||||
stroke-width="2"
|
||||
stroke-dasharray="10 10"
|
||||
/>
|
||||
<circle cx="54" cy="54" r="23" fill="white"/>
|
||||
<circle cx="54" cy="54" r="23" fill="white" />
|
||||
<path
|
||||
d="M57.3375 46.5L50.6625 46.5C46.5125 46.5 44.825 49.4375 46.8875 53.025L47.8125 54.625C48.0375 55.0125 48.45 55.25 48.9 55.25L59.1 55.25C59.55 55.25 59.9625 55.0125 60.1875 54.625L61.1125 53.025C63.175 49.4375 61.4875 46.5 57.3375 46.5Z"
|
||||
fill="#383E43"
|
||||
@@ -36,7 +35,7 @@
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="motionPath hidden lg:block absolute mt-[8vw] w-[81.146vw] h-[107.604vw]"
|
||||
class="motionPath hidden md:block absolute mt-[8vw] w-[81.146vw] h-[107.604vw]"
|
||||
viewBox="0 0 1558 2066"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -50,33 +49,46 @@
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
||||
<svg
|
||||
class="box2 block md:hidden !mt-[18vw] absolute"
|
||||
id="motionSVG2"
|
||||
width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="30" cy="30" r="29.5" stroke="#383E43" stroke-dasharray="5 5"/>
|
||||
<circle cx="30" cy="30" r="18" fill="white"/>
|
||||
<path d="M32.6698 24L27.3298 24C24.0098 24 22.6598 26.35 24.3098 29.22L25.0498 30.5C25.2298 30.81 25.5598 31 25.9198 31L34.0798 31C34.4398 31 34.7698 30.81 34.9498 30.5L35.6898 29.22C37.3398 26.35 35.9898 24 32.6698 24Z" fill="#383E43"/>
|
||||
<path d="M33.2104 32L26.7804 32C26.3904 32 26.1504 32.42 26.3504 32.75L26.9904 33.85C28.6404 36.72 31.3604 36.72 33.0104 33.85L33.6504 32.75C33.8404 32.42 33.6004 32 33.2104 32Z" fill="#383E43"/>
|
||||
</svg>
|
||||
|
||||
|
||||
<svg
|
||||
class="motionPath2 block absolute md:hidden mt-[20vw]"
|
||||
width="98vw"
|
||||
height="359.487vw"
|
||||
class="motionPath block absolute md:hidden mt-[20vw] w-[98vw] h-[359.487vw]"
|
||||
viewBox="0 0 390 1402"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
id="motionPath2"
|
||||
id="motionPath"
|
||||
d="M195.25 -8.51273e-06L195.211 9.21222C195.094 36.7434 172.743 59 145.212 59L50 59C22.3858 59 5.86356e-05 81.3858 5.88568e-05 109L6.27834e-05 599C6.30047e-05 626.614 22.3858 649 50.0001 649L339.999 649C367.613 649 389.999 671.386 389.999 699L389.999 1238C389.999 1265.61 367.613 1288 339.999 1288L245 1288C217.386 1288 195 1310.39 195 1338L195 1402"
|
||||
stroke="#383E43"
|
||||
stroke-dasharray="5 5"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="block md:hidden box z-[1] absolute mt-[8vw] h-[15.385vw] w-[15.385vw]"
|
||||
id="motionSVG"
|
||||
width="60"
|
||||
height="60"
|
||||
viewBox="0 0 60 60"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="30"
|
||||
cy="30"
|
||||
r="29.5"
|
||||
stroke="#383E43"
|
||||
stroke-dasharray="5 5"
|
||||
/>
|
||||
<circle cx="30" cy="30" r="18" fill="white" />
|
||||
<path
|
||||
d="M32.6698 24L27.3298 24C24.0098 24 22.6598 26.35 24.3098 29.22L25.0498 30.5C25.2298 30.81 25.5598 31 25.9198 31L34.0798 31C34.4398 31 34.7698 30.81 34.9498 30.5L35.6898 29.22C37.3398 26.35 35.9898 24 32.6698 24Z"
|
||||
fill="#383E43"
|
||||
/>
|
||||
<path
|
||||
d="M33.2104 32L26.7804 32C26.3904 32 26.1504 32.42 26.3504 32.75L26.9904 33.85C28.6404 36.72 31.3604 36.72 33.0104 33.85L33.6504 32.75C33.8404 32.42 33.6004 32 33.2104 32Z"
|
||||
fill="#383E43"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<home-page-road-map-componentsBanner />
|
||||
<home-page-road-map-componentsProductionStage />
|
||||
@@ -99,8 +111,12 @@ let ctx;
|
||||
|
||||
onMounted(() => {
|
||||
ctx = gsap.context((self) => {
|
||||
gsap.to(".motionPath #motionPath",
|
||||
{strokeDashoffset: -300, repeat: -1, ease: "none", duration: 5});
|
||||
gsap.to(".motionPath #motionPath", {
|
||||
strokeDashoffset: -300,
|
||||
repeat: -1,
|
||||
ease: "none",
|
||||
duration: 5,
|
||||
});
|
||||
gsap.to("#motionSVG", {
|
||||
scrollTrigger: {
|
||||
trigger: "#motionSVG",
|
||||
|
||||
@@ -2,35 +2,37 @@
|
||||
<div
|
||||
ref="main"
|
||||
id="flipSection"
|
||||
class="-z-[1] relative mt-[100vw] lg:mt-[25vw] flex flex-col items-center justify-center"
|
||||
class="-z-[1] relative mt-[100vw] md:mt-[25vw] flex flex-col items-center justify-center"
|
||||
>
|
||||
<img
|
||||
src="/public/images/assal.png"
|
||||
alt="product-name"
|
||||
class="z-[100] ax w-[18.205vw] lg:w-[17.292vw] h-[20.521vw]"
|
||||
class="z-[100] ax w-[18.205vw] md:w-[17.292vw] h-[20.521vw]"
|
||||
/>
|
||||
<h1
|
||||
class="font-bold text-[4.038vw] lg:text-[2.21vw] text-[#383E43] my-[2.083vw]"
|
||||
class="font-bold text-[4.038vw] md:text-[2.21vw] text-[#383E43] my-[2.083vw]"
|
||||
>
|
||||
عسل آقای عسل
|
||||
</h1>
|
||||
<p
|
||||
class="text-[3.59vw] lg:text-[1.823vw] text-[#383E43] font-semibold"
|
||||
class="text-[3.59vw] md:text-[1.823vw] text-[#383E43] font-semibold"
|
||||
dir="rtl"
|
||||
>
|
||||
510,000
|
||||
<span class="text-[2.836vw] lg:text-[0.833vw] font-[400]">تومان</span>
|
||||
<span class="text-[2.836vw] md:text-[0.833vw] font-[400]">تومان</span>
|
||||
</p>
|
||||
|
||||
|
||||
<div class="absolute">
|
||||
<div
|
||||
ref="start"
|
||||
class="start relative w-[87.69%] lg:w-[91.82%] flex flex-col items-center justify-center"
|
||||
class="start relative w-[87.69%] md:w-[91.82%] flex flex-col items-center justify-center"
|
||||
>
|
||||
|
||||
|
||||
<div class="absolute small">
|
||||
<svg
|
||||
class="absolute -left-[0vw] top-[27.25vw] h-[8.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
|
||||
class="absolute left-[1.2vw] top-[28.9vw] h-[8.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
|
||||
viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M42.7144 57.3336L54.2759 50.6586C61.4639 46.5086 61.4473 39.73 54.2852 35.5748L51.082 33.7267C50.3046 33.2801 49.3524 33.281 48.573 33.731L30.9061 43.931C30.1267 44.381 29.6499 45.2051 29.6479 46.1017L29.6468 49.7998C29.6642 58.08 35.5264 61.4836 42.7144 57.3336Z" fill="#383E43"/>
|
||||
<path d="M31.5397 40.6771L45.461 32.6396C46.3054 32.1521 46.2997 30.9422 45.4539 30.4773L42.6924 28.8942C35.5302 24.739 29.6413 28.139 29.6587 36.4192L29.6489 39.6023C29.6503 40.5547 30.6953 41.1646 31.5397 40.6771Z" fill="#383E43"/>
|
||||
@@ -57,7 +59,7 @@
|
||||
</div>
|
||||
<div class="absolute big">
|
||||
<svg
|
||||
class="absolute left-[38vw] -top-[2.3vw] md:-top-[1.8] h-[5.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
|
||||
class="absolute left-[36vw] -top-[2.3vw] md:-top-[2.1vw] h-[5.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
|
||||
viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M45.9902 36.675L45.9902 23.325C45.9902 15.025 40.1115 11.65 32.9319 15.775L29.7298 17.625C28.9543 18.075 28.479 18.9 28.479 19.8L28.479 40.2C28.479 41.1 28.9543 41.925 29.7298 42.375L32.9319 44.225C40.1115 48.35 45.9902 44.975 45.9902 36.675Z" fill="#383E43"/>
|
||||
<path d="M25.9775 38.025L25.9775 21.95C25.9775 20.975 24.9269 20.375 24.1013 20.875L21.3496 22.475C14.17 26.6 14.17 33.4 21.3496 37.525L24.1013 39.125C24.9269 39.6 25.9775 39 25.9775 38.025Z" fill="#383E43"/>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="baner flex flex-col w-[84.61vw] lg:w-[70.41%] mt-[50vw] lg:mt-[20vw]">
|
||||
<img src="/public/images/baner.jpg" alt="organic" class="h-[45.12vw] lg:h-[26.302vw] w-full object-cover rounded-[25px]">
|
||||
<div class="flex flex-col flex-col-reverse px-[1vw] lg:flex-row justify-between items-center mt-12">
|
||||
<p class="mt-[17vw] lg:mt-0 w-full lg:w-[50%] text-[3.59vw] lg:text-[1.502vw]">
|
||||
<div class="baner flex flex-col w-[84.61vw] md:w-[70.41%] mt-[50vw] md:mt-[20vw]">
|
||||
<img src="/public/images/baner.jpg" alt="organic" class="h-[45.12vw] md:h-[26.302vw] w-full object-cover rounded-[25px]">
|
||||
<div class="flex flex-col flex-col-reverse px-[1vw] md:flex-row justify-between items-center mt-12">
|
||||
<p class="mt-[17vw] md:mt-0 w-full md:w-[50%] text-[3.59vw] md:text-[1.502vw]">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
|
||||
</p>
|
||||
<p class="w-full lg:w-[40%] text-[4.544vw] lg:text-[1.186vw]">
|
||||
<p class="w-full md:w-[40%] text-[4.544vw] md:text-[1.186vw]">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
|
||||
</p>
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="mt-[28vw] lg:mt-[12vw] w-[84.615vw] lg:w-[51.14%]">
|
||||
<h2 class="mb-[7vw] lg:mb-0 text-[#383E43] text-[4.544vw] lg:text-[1.502vw]">مراحل تولید :</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4 p-[3vw]">
|
||||
<div class="mt-[28vw] md:mt-[12vw] w-[84.615vw] md:w-[51.14%]">
|
||||
<h2 class="mb-[7vw] md:mb-0 text-[#383E43] text-[4.544vw] md:text-[1.502vw]">مراحل تولید :</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 p-[3vw]">
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
|
||||
>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
|
||||
class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
|
||||
viewBox="0 0 41 41"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -50,20 +50,20 @@
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
|
||||
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
|
||||
>تحقیق و توسعه</span
|
||||
>
|
||||
</div>
|
||||
<span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
|
||||
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
|
||||
>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
|
||||
class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
|
||||
viewBox="0 0 41 41"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -104,19 +104,19 @@
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
|
||||
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
|
||||
>تحقیق و توسعه</span
|
||||
>
|
||||
</div>
|
||||
<span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
|
||||
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
|
||||
>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
|
||||
class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
|
||||
viewBox="0 0 41 41"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -157,19 +157,19 @@
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
|
||||
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
|
||||
>تحقیق و توسعه</span
|
||||
>
|
||||
</div>
|
||||
<span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
|
||||
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
|
||||
>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
|
||||
class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
|
||||
viewBox="0 0 41 41"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -210,19 +210,19 @@
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
|
||||
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
|
||||
>تحقیق و توسعه</span
|
||||
>
|
||||
</div>
|
||||
<span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
|
||||
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
|
||||
>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
|
||||
class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
|
||||
viewBox="0 0 41 41"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -263,19 +263,19 @@
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
|
||||
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
|
||||
>تحقیق و توسعه</span
|
||||
>
|
||||
</div>
|
||||
<span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
|
||||
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
|
||||
class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
|
||||
>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
|
||||
class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
|
||||
viewBox="0 0 41 41"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -316,11 +316,11 @@ class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] ro
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
|
||||
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
|
||||
>تحقیق و توسعه</span
|
||||
>
|
||||
</div>
|
||||
<span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
|
||||
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div
|
||||
class="ps-[6vw] lg:ps-[15%] text-[#383E43] flex flex-col items-start justify-center mt-[28vw] lg:mt-[14.4vw] h-[87.179vw] lg:h-[22.396vw] w-[81.61%] lg:w-[81.04%] border-[2px] border-[##E5E5E5] rounded-[25px]"
|
||||
class="ps-[6vw] md:ps-[15%] text-[#383E43] flex flex-col items-start justify-center mt-[28vw] md:mt-[14.4vw] h-[87.179vw] md:h-[22.396vw] w-[81.61%] md:w-[81.04%] border-[2px] border-[##E5E5E5] rounded-[25px]"
|
||||
>
|
||||
<p class="mt-[5vw] lg:mt-0 w-[36.154vw] lg:w-auto lg:text-[1.69vw] text-[5.11vw]">
|
||||
<p class="mt-[5vw] md:mt-0 w-[36.154vw] md:w-auto md:text-[1.69vw] text-[5.11vw]">
|
||||
ما اینجا هستیم تا از شما حمایت کنیم
|
||||
</p>
|
||||
|
||||
<p class="text-[3.19vw] lg:text-[0.938vw] mt-3">سلامتی با محصولات شینان</p>
|
||||
<p class="text-[3.19vw] md:text-[0.938vw] mt-3">سلامتی با محصولات شینان</p>
|
||||
|
||||
<nuxt-link
|
||||
to="/"
|
||||
class="flex items-center mt-[8vw] border-black lg:mt-[2vw] text-[3.19vw] lg:text-[0.938vw] py-[12px] px-[24px] rounded-[10px] border-[1px] border-[#E5E5E5]"
|
||||
class="flex items-center mt-[8vw] border-black md:mt-[2vw] text-[3.19vw] md:text-[0.938vw] py-[12px] px-[24px] rounded-[10px] border-[1px] border-[#E5E5E5]"
|
||||
>
|
||||
<svg
|
||||
class="me-1"
|
||||
|
||||
Reference in New Issue
Block a user