Hero.vue

gistfile1.txt

<script setup>
import {onMounted, ref} from "vue";
import Lightning from "@/Components/Icons/Lightning.vue";
import Card3d from 'card3d'

const effectRef = ref(null)
onMounted(() => {
    if (effectRef.value) {
        new Card3d(effectRef.value, {perspective: 1000, fullPageListening: true})
    }
})
</script>

<template>
    <div class="px-4 py-8 sm:py-20 sm:pb-0">
        <div class="absolute start-[10%] z-0">
            <div
                class="pointer-events-none aspect-square w-60 rounded-full bg-gradient-to-r from-primary/10 via-violet-500/10 to-purple-500/10 blur-3xl [transform:translate3d(0,0,0)] lg:w-[600px]"
            ></div>
        </div>
        <div class="max-w-7xl relative z-1 container">
            <div class="grid gap-12 lg:grid-cols-2">
                <div class="">
                    <div class="mb-4 sm:mb-0 flex justify-center sm:justify-start">
                        <p class="badge badge-warning p-3 e">Trusted by {{ Math.round(orders / 10) * 10 }}+ developers
                            and companies</p>
                    </div>
                    <h1 class="text-center text-5xl sm:text-7xl sm:text-left font-black lg:leading-none">
                        Launch your <br> project <span class="text-red-600 sm:mt-2 inline-block">in days,</span> <span
                        class="inline-block">not months</span>
                    </h1>
                    <p class="mt-8 text-md text-center sm:text-left sm:text-lg">
                        Production ready <span class="font-bold">Laravel Starter Kit</span> with everything that you need
                        to start your next SaaS project, AI Wrapper or any other web application
                    </p>
                    <div class="mt-12 sm:mt-12 flex items-center justify-center sm:justify-start">
                        <a href="/#pricing"
                           class="btn btn-secondary btn-widest text-lg text-white px-24 h-14">
                            <Lightning/>
                            Get Larafast
                        </a>
                    </div>
          
                </div>
                <div class="hidden sm:block sm:p-24">
                    <div
                        class="rounded-2xl"
                        ref="effectRef"
                        data-card3d=""
                        data-card3d-perspective="1000"
                        data-card3d-full-page-listening="true"
                    >
                        YOUR HERO IMAGE HERE
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>