javaneh/components/home-page/Header.vue

<template>
  <div
    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="100vw"
      height="58vw"
      viewBox="0 0 390 239"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        id="motion"
        cx="195"
        cy="4"
        r="234.5"
        stroke="url(#paint0_linear_1248_31458)"
        stroke-dasharray="5 5"
      />
      <defs>
        <linearGradient
          id="paint0_linear_1248_31458"
          x1="195"
          y1="-231"
          x2="195"
          y2="239"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0.499986" stop-color="white" stop-opacity="0" />
          <stop offset="1" stop-color="white" />
        </linearGradient>
      </defs>
    </svg>

    <svg
      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"
    >
      <circle
        id="motion"
        cx="429"
        cy="429"
        r="427.5"
        stroke="url(#paint0_linear_836_14845)"
        stroke-width="3"
        stroke-dasharray="15 15"
      />
      <defs>
        <linearGradient
          id="paint0_linear_836_14845"
          x1="429"
          y1="0"
          x2="429"
          y2="858"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0.499986" stop-color="white" stop-opacity="0" />
          <stop offset="1" stop-color="white" />
        </linearGradient>
      </defs>
    </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"/>
      </svg>
      





      
    <svg
      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"
    >
      <circle cx="40" cy="40" r="40" fill="white" />
      <path
        d="M27.5 34.4375V45.5625C27.5 52.4792 32.3958 55.2917 38.375 51.8542L41.0417 50.3125C41.6875 49.9375 42.0833 49.25 42.0833 48.5V31.5C42.0833 30.75 41.6875 30.0625 41.0417 29.6875L38.375 28.1458C32.3958 24.7083 27.5 27.5208 27.5 34.4375Z"
        fill="#383E43"
      />
      <path
        d="M44.167 33.3125V46.7083C44.167 47.5208 45.042 48.0208 45.7295 47.6042L48.0212 46.2708C54.0003 42.8333 54.0003 37.1667 48.0212 33.7292L45.7295 32.3958C45.042 32 44.167 32.5 44.167 33.3125Z"
        fill="#383E43"
      />
    </svg>

    <h1
      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] md:text-[1.927vw] font-[500]">
      فروشگاه محصولات ارگانیک
    </h1>
    <p class="hidden md:block text-[0.938vw] w-[40vw] text-center mt-[0.3vw]">
      وب سایت جوانه شرکتی در حوزه تامین و توزیع محصولات طبیعی، ارگانیک و سالم
      میباشد که این امکان را به مصرف کننده میدهد تا بتواند انواع محصولات تازه را
      با حق انتخاب و تنوع بسیار بالا و با مناسب‌ترین قیمت داشته باشد.
    </p>
  </div>
  <div class="test"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);

const main = ref();
let ctx;

onMounted(() => {
  ctx = gsap.context((self) => {

    gsap.to(".rotating-bubbles", {
      scrollTrigger: {
        trigger: ".transform-bubbles",
        scrub: 1,
        start: "center center",
        end: "+=5000",
      },
      rotation: -800,
      duration: 3,
      ease: "none",
    });
    gsap.to(".rotating-mobile", {
      scrollTrigger: {
        trigger: ".transform-bubbles",
        scrub: 1,
        start: "center center",
        end: "+=200",
      },
      rotation: 0,
      duration: 3,
      ease: "none",
    });

    gsap.to(".animate #motion", {
      strokeDashoffset: 300,
      repeat: -1,
      ease: "none",
      duration: 5,
    });
    gsap.to(".arrow", {
      strokeDashoffset: 300,
      x: 700,
      y: -130,
      rotation: -90,
      scrollTrigger: {
        trigger: ".transform-bubbles",
        scrub: 1,
        start: "center center",
        end: "+=5000",
      },
      //  motionPath: {
      //   path: "#pathes",
      //   align: "#pathes",
      //   alignOrigin: [0.5, 0.5],
      //   autoRotate: 180,
      // },
    });
  });
});
</script>