mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
99 lines
3.8 KiB
Vue
99 lines
3.8 KiB
Vue
<template>
|
|
<div class="select-none">
|
|
<div
|
|
class="right-6 bottom-0 z-10 absolute opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out select-none"
|
|
>
|
|
<PreviewSwitch title="Demo Content" v-model="showContent" />
|
|
</div>
|
|
|
|
<template v-if="showContent">
|
|
<div class="top-[2em] left-0 z-0 absolute w-full h-[60px] pointer-events-none">
|
|
<div
|
|
class="flex justify-between items-center bg-[rgba(255,255,255,0.05)] backdrop-filter backdrop-blur-[10px] mx-auto my-0 px-6 py-4 border border-[rgba(255,255,255,0.2)] rounded-[50px] w-[90%] md:w-[60%] h-full"
|
|
:style="{
|
|
backdropFilter: 'blur(10px)',
|
|
WebkitBackdropFilter: 'blur(10px)',
|
|
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
|
|
}"
|
|
>
|
|
<img :src="logo" alt="Vue Bits Logo" class="rounded-[50px] h-[24px]" />
|
|
<div class="md:hidden flex items-center text-white">
|
|
<i class="pi pi-bars"></i>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-6 font-semibold">
|
|
<p class="flex items-center text-[14px] text-white">Home</p>
|
|
<p class="flex items-center text-[14px] text-white">Docs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="top-0 left-0 z-1 absolute flex flex-col justify-center items-center w-full h-full pointer-events-none"
|
|
>
|
|
<div
|
|
class="flex justify-center items-center bg-[rgba(255,244,255,0.05)] backdrop-filter backdrop-blur-[10px] px-4 border border-[rgba(255,255,255,0.2)] rounded-[50px] w-auto h-[34px] font-medium text-[12px] text-white md:text-[14px]"
|
|
:style="{
|
|
backdropFilter: 'blur(10px)',
|
|
WebkitBackdropFilter: 'blur(10px)',
|
|
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
|
|
}"
|
|
>
|
|
<span class="flex justify-center items-center" v-html="props.pillIcon"></span>
|
|
<p class="ml-1">{{ props.pillText }}</p>
|
|
</div>
|
|
|
|
<p
|
|
class="mt-4 max-w-[18ch] font-bold text-[clamp(2rem,4vw,2.6rem)] text-white text-center leading-[1.2] tracking-[-2px]"
|
|
:style="{
|
|
textShadow: '0 0 16px rgba(0, 0, 0, 0.5)'
|
|
}"
|
|
>
|
|
{{ props.headline }}
|
|
</p>
|
|
|
|
<div class="flex items-center gap-4 mt-8">
|
|
<button
|
|
class="bg-white hover:bg-gray-100 px-6 md:px-10 py-2 md:py-3 border-none rounded-[50px] font-medium text-[12px] text-black md:text-[14px] transition-all hover:translate-y-[-1px] duration-200 ease-in-out cursor-pointer"
|
|
>
|
|
{{ props.mainCtaText }}
|
|
</button>
|
|
<button
|
|
class="bg-white/5 hover:bg-white/10 shadow-md backdrop-blur-md px-6 md:px-10 py-2 md:py-3 border border-white/20 rounded-full font-medium text-[12px] text-white/50 md:text-[14px] transition-all hover:-translate-y-0.5 duration-200 cursor-pointer"
|
|
:style="{
|
|
backdropFilter: 'blur(10px)',
|
|
WebkitBackdropFilter: 'blur(10px)',
|
|
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
|
|
}"
|
|
>
|
|
{{ props.secondCtaText }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import logo from '../../assets/logos/vue-bits-logo.svg';
|
|
import PreviewSwitch from './PreviewSwitch.vue';
|
|
|
|
interface BackgroundContentProps {
|
|
pillText?: string;
|
|
pillIcon?: string;
|
|
headline?: string;
|
|
mainCtaText?: string;
|
|
secondCtaText?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<BackgroundContentProps>(), {
|
|
pillText: 'New Component',
|
|
pillIcon: '<i class="pi pi-sliders-h" style="font-size: 10px;"></i>',
|
|
headline: 'Explore the depths of creativity',
|
|
mainCtaText: 'Get Started',
|
|
secondCtaText: 'Learn More'
|
|
});
|
|
|
|
const showContent = ref(true);
|
|
</script>
|