docs(popover-examples): simplify hero styles

Author: maiieul

apps/website/src/routes/docs/headless/popover/examples/hero.tsx

@@ -1,35 +1,12 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { Popover, PopoverTrigger } from '@qwik-ui/headless';
-
 export default component$(() => {
-  useStyles$(`
-  .my-transition {
-    transition: opacity 0.5s, display 0.5s, overlay 0.5s;
-    transition-behavior: allow-discrete;
-    opacity: 0;
-  }
-
-  .popover-showing {
-    opacity: 1;
-  }
-
-  .popover-closing {
-    opacity: 0;
-  }
-  `);
-
   return (
     <>
-      <PopoverTrigger
-        popovertarget="hero-id"
-        class="rounded-base border-2 border-slate-300 bg-slate-800 px-3 py-1 text-white"
-      >
+      <PopoverTrigger popovertarget="hero-id" class="popover-trigger">
         Popover Trigger
       </PopoverTrigger>
-      <Popover
-        id="hero-id"
-        class="my-transition rounded-base border-2 border-slate-300 bg-slate-800 px-3 py-1 opacity-0 shadow-md"
-      >
+      <Popover id="hero-id" class="popover">
         My Hero!
       </Popover>
     </>