Merge pull request #106 from stijnelskens/fix/demos

fix: convert className attributes to class in vue component examples

components/content/inspira/examples/AnimatedBeamDemo2.vue

@@ -4,8 +4,8 @@
       ref="containerRef"
       class="relative flex w-full items-center justify-center overflow-hidden rounded-lg border bg-background p-10 md:shadow-xl"
     >
-      <div className="flex size-full flex-col items-stretch justify-between gap-10">
-        <div className="flex flex-row justify-between">
+      <div class="flex size-full flex-col items-stretch justify-between gap-10">
+        <div class="flex flex-row justify-between">
           <div
             ref="div1Ref"
             class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)] dark:text-black"

components/content/inspira/examples/ContainerScrollDemo.vue

@@ -2,9 +2,9 @@
   <div class="flex flex-col overflow-hidden">
     <ContainerScroll>
       <template #title>
-        <h1 className="text-4xl font-semibold text-black dark:text-white">
+        <h1 class="text-4xl font-semibold text-black dark:text-white">
           Unleash the power of <br />
-          <span className="text-4xl md:text-[6rem] font-bold mt-1 leading-none">
+          <span class="text-4xl md:text-[6rem] font-bold mt-1 leading-none">
             Scroll Animations
           </span>
         </h1>

components/content/inspira/examples/GlowBorderDemo.vue

@@ -6,7 +6,7 @@
         :color="['#A07CFE', '#FE8FB5', '#FFBE7B']"
       >
         <span
-          className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-7xl font-semibold leading-none text-transparent dark:from-white dark:to-zinc-700/75"
+          class="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-7xl font-semibold leading-none text-transparent dark:from-white dark:to-zinc-700/75"
         >
           Glow Border
         </span>

components/content/inspira/examples/TextGenerateDemo.vue

@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <div className="h-64 flex min-md:flex-1 max-lg:w-full items-center justify-center">
+    <div class="h-64 flex min-md:flex-1 max-lg:w-full items-center justify-center">
       <TextGenerateEffect
         words="Nuxt is an open source framework that makes web development intuitive and powerful.Create performant and production-grade full-stack web apps and websites with confidence."
       />

components/content/inspira/examples/TextHoverEffectDemo.vue

@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <div className="h-auto flex min-md:flex-1 max-lg:w-full items-center justify-center">
+    <div class="h-auto flex min-md:flex-1 max-lg:w-full items-center justify-center">
       <TextHoverEffect
         class="w-[90%] min-lg:min-h-64"
         text="INSPIRA"

components/content/inspira/examples/TextScrollRevealDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <ClientOnly>
     <div
-      className="z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black"
+      class="z-10 flex min-h-64 items-center justify-center rounded-lg border bg-white dark:bg-black"
     >
       <TextScrollReveal text="Making UI beautiful using Inspira UI." />
     </div>

components/content/inspira/examples/flickering-grid/FlickeringGridDemo.vue

@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <div className="relative size-[600px] rounded-lg w-full bg-background overflow-hidden border">
+    <div class="relative size-[600px] rounded-lg w-full bg-background overflow-hidden border">
       <FlickeringGrid
         class="relative inset-0 z-0 [mask-image:radial-gradient(450px_circle_at_center,white,transparent)]"
         :square-size="4"

components/content/inspira/examples/glare-card/GlareCardDemo.vue

@@ -2,7 +2,7 @@
   <div class="flex items-center justify-center">
     <GlareCard class="flex flex-col items-center justify-center">
       <NuxtImg src="/logo-dark.svg" />
-      <p className="text-white font-bold text-xl mt-4">Inspira UI</p>
+      <p class="text-white font-bold text-xl mt-4">Inspira UI</p>
     </GlareCard>
   </div>
 </template>

components/content/inspira/examples/pattern-background/PatternBackgroundBigDotDemo.vue

@@ -8,7 +8,7 @@
     :mask="PATTERN_BACKGROUND_MASK.EllipseTop"
   >
     <p
-      className="text-4xl sm:text-5xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
+      class="text-4xl sm:text-5xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
     >
       Big Dot Background
     </p>

components/content/inspira/examples/pattern-background/PatternBackgroundDotDemo.vue

@@ -7,7 +7,7 @@
     :speed="PATTERN_BACKGROUND_SPEED.Slow"
   >
     <p
-      className="text-4xl sm:text-5xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
+      class="text-4xl sm:text-5xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
     >
       Dot Background
     </p>

components/content/inspira/examples/pattern-background/PatternBackgroundGridDemo.vue

@@ -5,7 +5,7 @@
     class="flex h-[36rem] w-full items-center justify-center"
   >
     <p
-      className="text-4xl sm:text-5xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
+      class="text-4xl sm:text-5xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
     >
       Grid Background
     </p>

components/content/inspira/examples/pattern-background/PatternBackgroundGridSmallDemo.vue

@@ -8,7 +8,7 @@
     :speed="PATTERN_BACKGROUND_SPEED.Slow"
   >
     <p
-      className="text-4xl sm:text-5xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
+      class="text-4xl sm:text-5xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
     >
       Small Grid Background
     </p>

components/content/inspira/examples/text-generate-effect/TextGenerateEffectDemoDelayed.vue

@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <div className="h-64 flex flex-col min-md:flex-1 max-lg:w-full items-center justify-center">
+    <div class="h-64 flex flex-col min-md:flex-1 max-lg:w-full items-center justify-center">
       <TextGenerateEffect
         words="Nuxt is an open source framework that makes web development intuitive and powerful."
         :delay="0"