fiee-official-website/src/views/contacts/size375/index.vue

<script setup>
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
function copyEmail() {
  navigator.clipboard.writeText("fiee@dlkadvisory.com");
}
</script>

<template>
  <main
    ref="main"
    class="flex flex-col items-center from-primary to-accent w-[100vw] mt-8 animate-fade-in px-4 py-8 pt-500px"
  >
    <div class="w-full flex flex-col items-center gap-4 px-2">
      <h1
        class="text-2xl font-bold text-primary animate-fade-in-down animate-delay-0"
      >
        Investor Contacts
      </h1>
      <div
        class="text-lg font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
      >
        FiEE Inc.
      </div>
      <div
        class="text-base text-#ff7bac animate-fade-in-down animate-delay-400"
      >
        Investor Relations
      </div>
      <div
        class="text-sm text-gray-600 flex items-center gap-1 animate-fade-in-down animate-delay-600"
      >
        <span>Email:</span>
        <span
          class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
          @click="copyEmail"
          >fiee@dlkadvisory.com</span
        >
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-down {
  animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.animate-delay-0 {
  animation-delay: 0s;
}
.animate-delay-200 {
  animation-delay: 0.2s;
}
.animate-delay-400 {
  animation-delay: 0.4s;
}
.animate-delay-600 {
  animation-delay: 0.6s;
}

.max-w-343px {
  max-width: 343px;
}
</style>