[ ADDED ] : Demo Background Content

src/components/common/BackgroundContent.vue

@@ -0,0 +1,98 @@
+<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>