{"version":3,"file":"WelcomeFeaturesSection-yfhHGO1y.js","sources":["../../images/welcome/mainHero2.jpg","../../../resources/js/Components/Hero.vue","../../../resources/js/Components/WelcomeFeaturesSection.vue"],"sourcesContent":["export default \"__VITE_ASSET__BvxW4DXo__\"","<script setup>\nimport { ref } from 'vue';\nimport mainHero2 from '../../../public/images/welcome/mainHero2.jpg';\n\nimport MainButton from '@/Components/MainButton.vue';\nimport SecondaryButton from '@/Components/SecondaryButton.vue';\nimport { Link } from '@inertiajs/vue3';\n\nconst isLoading = ref(false);\n\nconst handleImageLoad = () => {\n    isLoading.value = false;\n};\n</script>\n\n<template>\n    <div>\n        <!-- Hero Image -->\n        <div class=\"relative h-[580px] md:h-[700px] lg:h-[800px]\">\n            <!-- <div v-if=\"isLoading\" class=\"loader\"></div> -->\n            <img\n                :src=\"mainHero2\"\n                alt=\"Hero Image\"\n                class=\"absolute inset-0 object-cover w-full h-full overflow-hidden shadow-xl rounded-b-2xl bg-blend-darken\"\n                @load=\"handleImageLoad\"\n            />\n            <div class=\"hero-image-overlay\"></div>\n\n            <!-- Text Section -->\n            <section class=\"absolute z-20 text-white left-4 top-20 lg:left-20 lg:top-36\">\n                <div class=\"max-w-6xl\">\n                    <div class=\"flex flex-col text-3xl font-title md:text-4xl lg:gap-4 lg:text-6xl\">\n                        <p>Your Platform for</p>\n                        <p class=\"font-semibold\">Effortless Gig</p>\n                        <p class=\"font-semibold\">Management</p>\n                    </div>\n                    <div class=\"mt-4\">\n                        <p class=\"w-1/2 text-sm md:text-lg\">\n                            Spicy Gigs gives creators a safe, streamlined space to find and\n                            manage gigs, collaborate, and stay organized—all for a simple\n                            <span class=\"font-semibold\">$20/month</span>\n                            .\n                        </p>\n                    </div>\n                    <div class=\"flex flex-row gap-4 mt-4\">\n                        <MainButton>\n                            <a\n                                href=\"/register\"\n                                class=\"!text-white hover:!text-white\"\n                            >\n                                Join Spicygigs\n                            </a>\n                        </MainButton>\n                        <SecondaryButton class=\"text-white border-white\">\n                            <a\n                                href=\"#collaborate\"\n                                class=\"!text-white\"\n                            >Explore More</a>\n                        </SecondaryButton>\n                    </div>\n                </div>\n            </section>\n        </div>\n\n        <!-- Bottom Content -->\n        <div class=\"bottom-content -mt-36 h-44 bg-primary\"></div>\n    </div>\n</template>\n\n<style scoped>\n.bottom-content {\n    border-bottom-left-radius: 2rem;\n    border-bottom-right-radius: 2rem;\n}\n\n.hero-image-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: rgba(0, 0, 0, 0.3) !important;\n    border-bottom-left-radius: 2rem;\n    border-bottom-right-radius: 1rem;\n    z-index: 10;\n    /* Ensure overlay is below the text section */\n}\n\n.loader {\n    border: 8px solid rgba(255, 255, 255, 0.3);\n    border-top: 8px solid #6508d5;\n    border-radius: 50%;\n    width: 50px;\n    height: 50px;\n    animation: spin 1s linear infinite;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 30;\n}\n\n@keyframes spin {\n    0% {\n        transform: rotate(0deg);\n    }\n\n    100% {\n        transform: rotate(360deg);\n    }\n}\n</style>\n","<script setup>\n  import { ref } from 'vue';\n\n  // Function to check if the icon is an image (i.e., URL)\n  const isImage = icon => {\n    return (\n      icon &&\n      (icon.endsWith('.png') || icon.endsWith('.jpg') || icon.endsWith('.jpeg'))\n    );\n  };\n  const props = defineProps({\n    featureTitle: {\n      type: String,\n      required: false\n    },\n    featureSubtitle: {\n      type: String,\n      required: false\n    },\n    featureDescription: {\n      type: String,\n      required: false\n    },\n    featurePoint1Title: {\n      type: String,\n      required: false\n    },\n    featurePoint1Description: {\n      type: String,\n      required: false\n    },\n    featurePoint1Icon: {\n      type: String,\n      required: false,\n      default: 'fa-face-laugh-wink'\n    },\n    featurePoint2Title: {\n      type: String,\n      required: false\n    },\n    featurePoint2Description: {\n      type: String,\n      required: false\n    },\n    featurePoint2Icon: {\n      type: String,\n      required: false\n    },\n    featurePoint3Title: {\n      type: String,\n      required: false\n    },\n    featurePoint3Description: {\n      type: String,\n      required: false\n    },\n    featurePoint3Icon: {\n      type: String,\n      required: false,\n      default: 'fa-user'\n    },\n    featureImage1: {\n      type: String,\n      required: false\n    },\n    featurePoint4Title: {\n      type: String,\n      required: false\n    },\n    featurePoint4Description: {\n      type: String,\n      required: false\n    },\n    featurePoint4Icon: {\n      type: String,\n      required: false\n    },\n    featurePoint5Title: {\n      type: String,\n      required: false\n    },\n    featurePoint5Description: {\n      type: String,\n      required: false\n    },\n    featurePoint5Icon: {\n      type: String,\n      required: false\n    },\n    featurePoint6Title: {\n      type: String,\n      required: false\n    },\n    featurePoint6Description: {\n      type: String,\n      required: false\n    },\n    featurePoint6Icon: {\n      type: String,\n      required: false\n    }\n  });\n</script>\n\n<template>\n  <div>\n    <div class=\"flex flex-col text-center font-title text-3xl\">\n      <p v-html=\"featureTitle\"></p>\n      <p class=\"font-semibold\" v-html=\"featureSubtitle\"></p>\n      <p class=\"mb-4 mt-4 text-sm\">\n        {{ featureDescription }}\n      </p>\n    </div>\n  </div>\n  <div class=\"mx-auto flex w-5/6 max-w-5xl flex-col md:flex-row\">\n    <!-- Left Section -->\n    <div class=\"pl-8 md:w-1/2\">\n      <!-- <div>\n        <div class=\"flex flex-col font-title text-3xl\">\n          <p v-html=\"featureTitle\"></p>\n          <p class=\"font-semibold\" v-html=\"featureSubtitle\"></p>\n        </div>\n        <p class=\"mt-4 text-sm\">\n          {{ featureDescription }}\n        </p>\n      </div> -->\n\n      <!-- Feature Points -->\n      <div class=\"mt-6\">\n        <div class=\"flex flex-col gap-8\">\n          <!-- Feature Point 1 -->\n          <div class=\"flex flex-row items-center gap-3\">\n            <div\n              class=\"flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-purple-500\"\n            >\n              <template v-if=\"isImage(featurePoint1Icon)\">\n                <img\n                  :src=\"featurePoint1Icon\"\n                  alt=\"Feature Point 1 Icon\"\n                  class=\"h-6 w-6 object-contain\"\n                />\n              </template>\n              <template v-else>\n                <i\n                  :class=\"`fa-solid ${featurePoint1Icon} text-2xl text-white`\"\n                ></i>\n              </template>\n            </div>\n            <div>\n              <p class=\"font-title font-semibold\">\n                {{ featurePoint1Title }}\n              </p>\n              <p class=\"text-sm\">\n                {{ featurePoint1Description }}\n              </p>\n            </div>\n          </div>\n\n          <!-- Feature Point 2 -->\n          <div class=\"flex flex-row items-center gap-3\">\n            <div\n              class=\"flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-purple-500\"\n            >\n              <template v-if=\"isImage(featurePoint1Icon)\">\n                <img\n                  :src=\"featurePoint2Icon\"\n                  alt=\"Feature Point 2 Icon\"\n                  class=\"h-6 w-6 object-contain\"\n                />\n              </template>\n              <template v-else>\n                <i\n                  :class=\"`fa-solid ${featurePoint2Icon} text-2xl text-white`\"\n                ></i>\n              </template>\n            </div>\n            <div>\n              <p class=\"font-title font-semibold\">\n                {{ featurePoint2Title }}\n              </p>\n              <p class=\"text-sm\">\n                {{ featurePoint2Description }}\n              </p>\n            </div>\n          </div>\n\n          <!-- Feature Point 3 -->\n          <div class=\"flex flex-row items-center gap-3\">\n            <div\n              class=\"flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-purple-500\"\n            >\n              <template v-if=\"isImage(featurePoint2Icon)\">\n                <img\n                  :src=\"featurePoint3Icon\"\n                  alt=\"Feature Point 1 Icon\"\n                  class=\"h-6 w-6 object-contain\"\n                />\n              </template>\n              <template v-else>\n                <i\n                  :class=\"`fa-solid ${featurePoint3Icon} text-2xl text-white`\"\n                ></i>\n              </template>\n            </div>\n            <div>\n              <p class=\"font-title font-semibold\">\n                {{ featurePoint3Title }}\n              </p>\n              <p class=\"text-sm\">\n                {{ featurePoint3Description }}\n              </p>\n            </div>\n          </div>\n\n          <!-- 4 -->\n          <div\n            class=\"flex flex-row items-center gap-3\"\n            v-if=\"featurePoint4Title\"\n          >\n            <div\n              class=\"flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-purple-500\"\n            >\n              <template v-if=\"isImage(featurePoint2Icon)\">\n                <img\n                  :src=\"featurePoint3Icon\"\n                  alt=\"Feature Point 1 Icon\"\n                  class=\"h-6 w-6 object-contain\"\n                />\n              </template>\n              <template v-else>\n                <i\n                  :class=\"`fa-solid ${featurePoint4Icon} text-2xl text-white`\"\n                ></i>\n              </template>\n            </div>\n            <div>\n              <p class=\"font-title font-semibold\">\n                {{ featurePoint4Title }}\n              </p>\n              <p class=\"text-sm\">\n                {{ featurePoint4Description }}\n              </p>\n            </div>\n          </div>\n\n          <!-- 5 -->\n          <div\n            class=\"flex flex-row items-center gap-3\"\n            v-if=\"featurePoint5Title\"\n          >\n            <div\n              class=\"flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-purple-500\"\n            >\n              <template v-if=\"isImage(featurePoint2Icon)\">\n                <img\n                  :src=\"featurePoint3Icon\"\n                  alt=\"Feature Point 1 Icon\"\n                  class=\"h-6 w-6 object-contain\"\n                />\n              </template>\n              <template v-else>\n                <i\n                  :class=\"`fa-solid ${featurePoint5Icon} text-2xl text-white`\"\n                ></i>\n              </template>\n            </div>\n            <div>\n              <p class=\"font-title font-semibold\">\n                {{ featurePoint5Title }}\n              </p>\n              <p class=\"text-sm\">\n                {{ featurePoint3Description }}\n              </p>\n            </div>\n          </div>\n\n          <!-- six -->\n          <div\n            class=\"flex flex-row items-center gap-3\"\n            v-if=\"featurePoint6Title\"\n          >\n            <div\n              class=\"flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-purple-500\"\n            >\n              <template v-if=\"isImage(featurePoint6Icon)\">\n                <img\n                  :src=\"featurePoint3Icon\"\n                  alt=\"Feature Point 1 Icon\"\n                  class=\"h-6 w-6 object-contain\"\n                />\n              </template>\n              <template v-else>\n                <i\n                  :class=\"`fa-solid ${featurePoint6Icon} text-2xl text-white`\"\n                ></i>\n              </template>\n            </div>\n            <div>\n              <p class=\"font-title font-semibold\">\n                {{ featurePoint6Title }}\n              </p>\n              <p class=\"text-sm\" v-html=\"featurePoint6Description\"></p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Section -->\n    <div\n      class=\"flex hidden flex-row items-center justify-center md:block md:w-1/2\"\n    >\n      <div class=\"mx-auto ml-20 flex h-full items-center justify-center\">\n        <svg\n          width=\"283\"\n          height=\"326\"\n          viewBox=\"0 0 283 326\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <!-- Define the custom mirrored shape -->\n          <!-- <defs>\n              <clipPath id=\"custom-reversed-shape\">\n                <path\n                  d=\"M71.292 325.262L125.948 320.733C237.792 311.293 310.952 199.24 274.586 93.0762C271.434 83.8746 264.666 76.3557 255.844 72.2556L116.194 7.3501C70.9998 -13.6553 18.75 17.0304 15.096 66.725L1.253 255.005C-1.708 295.279 32.0436 328.659 71.292 325.262Z\"\n                />\n              </clipPath>\n            </defs> -->\n\n          <image\n            :href=\"featureImage1\"\n            width=\"283\"\n            height=\"326\"\n            clip-path=\"url(#custom-mirrored-shape)\"\n            preserveAspectRatio=\"xMidYMid slice\"\n            alt=\"Vector Image\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped></style>\n"],"names":["mainHero2","isLoading","ref","handleImageLoad","isImage","icon"],"mappings":"qRAAA,MAAeA,EAAA,uQCQf,MAAMC,EAAYC,EAAI,EAAK,EAErBC,EAAkB,IAAM,CAC1BF,EAAU,MAAQ,EACtB,kgOCRE,MAAMG,EAAUC,GAEZA,IACCA,EAAK,SAAS,MAAM,GAAKA,EAAK,SAAS,MAAM,GAAKA,EAAK,SAAS,OAAO"}