---import "@/components/motion-blocks/floating-menu-element.ts"; const menuGroups = [ { title: "Explore", links: [ { label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" } ] }, { title: "Resources", variant: "muted", links: [ { label: "Blog", href: "/blog" }, { label: "Docs", href: "/docs" } ] }]; const logoHtml = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>`;--- <motion-floating-menu menu-groups={JSON.stringify(menuGroups)} logo-html={logoHtml} primary-button={JSON.stringify({ label: "Get Started", href: "/start" })} secondary-button={JSON.stringify({ label: "Login", href: "/login" })} class="w-full"/>
import "@/components/motion-blocks/floating-menu-element.ts"; const menuGroups = [ { title: "Explore", links: [ { label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" } ] }, { title: "Resources", variant: "muted", links: [ { label: "Blog", href: "/blog" }, { label: "Docs", href: "/docs" } ] }]; const logoHtml = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>`; export default function Page() { return ( <motion-floating-menu menu-groups={JSON.stringify(menuGroups)} logo-html={logoHtml} primary-button={JSON.stringify({ label: "Get Started", href: "/start" })} secondary-button={JSON.stringify({ label: "Login", href: "/login" })} className="w-full" /> );}
<script setup>import "@/components/motion-blocks/floating-menu-element.ts"; const menuGroups = [ { title: "Explore", links: [ { label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" } ] }, { title: "Resources", variant: "muted", links: [ { label: "Blog", href: "/blog" }, { label: "Docs", href: "/docs" } ] }]; const logoHtml = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>`;</script> <template> <motion-floating-menu :menu-groups="JSON.stringify(menuGroups)" :logo-html="logoHtml" :primary-button="JSON.stringify({ label: 'Get Started', href: '/start' })" :secondary-button="JSON.stringify({ label: 'Login', href: '/login' })" class="w-full" /></template>
<script> import "@/components/motion-blocks/floating-menu-element.ts"; const menuGroups = [ { title: "Explore", links: [ { label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" } ] }, { title: "Resources", variant: "muted", links: [ { label: "Blog", href: "/blog" }, { label: "Docs", href: "/docs" } ] } ]; const logoHtml = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>`;</script> <motion-floating-menu menu-groups={JSON.stringify(menuGroups)} logo-html={logoHtml} primary-button={JSON.stringify({ label: "Get Started", href: "/start" })} secondary-button={JSON.stringify({ label: "Login", href: "/login" })} class="w-full"/>
<script type="module" src="/components/motion-blocks/floating-menu-element.js"></script> <motion-floating-menu menu-groups='[{"title":"Explore","links":[{"label":"Home","href":"/"},{"label":"About","href":"/about"}]},{"title":"Resources","variant":"muted","links":[{"label":"Blog","href":"/blog"}]}]' logo-html="<svg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='12' cy='12' r='10'/></svg>" primary-button='{"label":"Get Started","href":"/start"}' secondary-button='{"label":"Login","href":"/login"}' class="w-full"/>
